Task 1

Task 1.1:

Today, Tuesday 10th September 2013, I used Adobe Illustrator CC to create an abstract picture on the person who sits to my left, which was Jermaine.  I learnt about various tools and how to use them, which helped me to create my magazine page.  The tools I learnt how to use were ‘Selection Tool’, ‘Direct Selection Tool’ and ‘Rectangle Tool’.

The ‘Select Tool’ and ‘Direct Selection Tool’ was .  The ‘Select Tool’ allowed me to select different parts of my portrait and move around the shapes and objects.  The ‘Direct Selection Tool’ enabled me to change the shape of the objects, so that they could be distorted and different.

The ‘Rectangle Tool’ was . The ‘Rectangle Tool’ enabled me to draw the rectangles that I needed for the hair on my portrait.  I drew another rectangle to create the background on my portrait and fill it with a purple colour.

The ‘Rounded Rectangle Tool’ was .  The ‘Rounded Rectangle Tool’ allowed me to draw the mouth on my portrait.  I then used the ‘Direct Selection Tool’ to distort the shape and form it into a smile.

The ‘Ellipse Tool’ was .  The ‘Ellipse Tool’ enable me to draw the eyes and the face for my portrait.  I then used the ‘Direct Selection Tool’ to change the shape of the circle so that it was in the shape of the head for my portrait.

For my portrait I used different colour for the different parts and shapes on my portrait.  I used various colours, which had a bold and bright tone to it so that they stood out and would attract attention to the people who see it.

My final design for my portrait was:

Today, Wednesday 11th September 2013, I used various skills to edit my portrait so that it fitted the ‘Rule of Thirds’, which was  and the ‘Golden Ratio’, which was .

I applied the ‘Rule of Thirds’ to my portrait.  I then edited and adjusted my portrait to fit the ‘Rule of Thirds’, so that I would fit the rule, where the eyes would be balanced on the bottom third of the portrait.  After I had edited my portrait to fit the ‘Rule of Thirds’, it was .

The ‘Golden Ratio’ is also known as ‘phi’ (φ), which equals 1.618.  I applied the ‘Golden Ratio’ to my portrait, however it didn’t fit the ‘Golden Ratio’ at first.  I then edited and adjusted my portrait so that it fitted the ‘Golden Ratio’, where I aligned the portrait to fit the different sections of the ‘Golden Ratio’.  After I had edited and adjusted it, it was .

The lead line on my portrait would be the blue hair .  This is because of how the hair is the longest object, which drives attention towards the picture.

The focal point for my portrait would be the pink eye .  This is because the focal point is slightly of centre and to the top right.

I have applied the ‘Gestalt Principle’ because I have made a portrait of a person out of shapes .  The blue rectangle on the portrait looks like hair because it is shaped by another shape.  Also the purple background looks like a top on the portrait.

White Space is often referred to as negative space.  It is the part of the page, which is left unmarked with margins and gutters.  It is usually the space between columns, lines of type, graphics, figures or objects drawn or depicted.  

Grey Space is a non compromising middle ground for graphic design, photography and headers fill.  

Black Space is where the surroundings around the page are black, which drives attention to the main focus on the page.  

Task 1:

Saturation is the intensity or the purity of the colour or the hue.  When you add or take away the white from a colour, it determines the outcome of the saturation.  The less white, the more the saturation there is in the colour, making the colour purer.  Primary colour are saturated colours because they do not contain any white.  If your colour is over saturated, your colour will become too intense and if your colour is under saturated, the colour will be too light.  

Value is the lightness or darkness of a colour.  This is affected by how much black or white has been added to the colour.  When you add white to your colour it cause it to tint, whereas when you add black to your colour it causes it to shade.  By adding either colour, it affects the toning.  The medium values between white and black form midtones.  A colour can be perceived and influenced by its value or saturation.  

Hue is a colour in its purest form, where no black, grey or white has been added to the colour.  That means that all the colour stay in the same form, so that would mean that blue would stay as blue.  The primary colours, red, yellow and blue are all hue colours and all of the other colours originate from the primary colours.  

Task 2:

This is the Photoshop Colour Picker, which you can use to change the colour of different objects.  If I am making a screen based project, I would use the RGB model.  If I am making a print based project, then I would use the CMYK model.

Task 3:

The RGB value changes when the hue changes, so when the hue value is at 0, the RGB value is changes because the G and B value decreases and the R value increases.  The value of the RGB changes so does the colour, so if the RGB value is at 0, then the colour will be black, whereas, if the RGB value is at 255 then the colour will be white.  The saturation of the RGB value changes, so if the saturation was at 0% then the colour will be in its purest form so RGB values will all be at 0, but if the saturation is 100% then the the colour will get darker and the R value will be at 255 and the G and B value will be at 0.

Today, Wednesday 18th September 2013, I began to design my own Computer Arts Student Handbook, using Adobe InDesign CC.  I started to design my page by adding a background colour to one of my pages.  I used various tools, which were: the ‘Select Tool’, ‘Rectangle Tool’ and ‘Fill & Stroke Tool’.

The ‘Select Tool’ was .  This allowed me to select the different parts of my magazine page and move around the different objects.

The ‘Rectangle Tool’ was .  This tool allowed me to insert a rectangle onto my magazine page so that I could fill it with colour to add a background to my magazine page.

The ‘Fill & Stroke Tool’ was .  This allowed me to fill the rectangle with a colour for my background and add a border using the stroke.

My Student Handbook design so far is:

I used http://www.pentagram.com/what-type-are-you/ to find out what type of font I am.  My type of font was: Cooper Black Italic.  

My font was 3rd, with it being 9.8% common.  The overall result of all the font were: .

My font Cooper Black Italic, is a heavily weighted, old style serif typeface, that was designed by Oswald Bruce Cooper in 1921.  Cooper Black Italic is an italic variant, with swash character as alternate character.

It suits me because I like the retro and classic design.  Also, it suits me because I en easy going and very relaxed.

Roughly, there are 100,000 to 250,000 fonts.  

Social coding is a font that promotes you the best and suits your character and personality.  

You would choose an appropriate font for a piece of work by the style of work it is for because if you are writing a formal letter then you would use a professional font, whereas if you were making a fancy invitation, then you would use a funky font.  

My favourite font is Cooper Black Italic because it matches my personality and represents who I am.  

My least favourite font is Mesquite Std because it is very hard to read as all the letters are very close.  

Kerning is adjusting the space between the letters or characters in a piece of text that is going to be printed.  

Tracking is the amount of space between a group of letters to affects density in a line or block of text.  

Leading is the amount of black space between the lines of print.  

Today, Tuesday 24th September 2013, I carried on designing my Computer Art Student Handbook.  I used Adobe InDesign CC to design my handbook.  I added a border and section numbers.  

Task 1.2:

Jack Wills-Good Website: http://www.jackwills.com/en-gb/home 

The audience of Jack Wills receive a brilliant experience whilst they shop on their website because they have been established since 1999.  The age group that Jack Wills aims their website at are young adults and adults because of their style and design of clothing that they offer.  The language they use on their website is easy to understand, however they use unique word to name their different products to make them different from each other.  The accessibility of the website is easy to read because their font is simple and clear. The Jack Wills Radio Player allows you to hear different music.  The search bar on the website allows you to have quick access to different products making your time on the website efficient.  You can access Jack Wills website any where because it is compatible on several devices.  Jack Wills has their own jargon which relates to their products and the type of product it is.

The content on Jack Wills has classy, high class and stylish text, which is appealing to the audience.  The graphics on the website is very traditional and British, matching their brand because it has a background with London landmarks and birds flying in the sky, also the font and text grabs the attention of the audience because it is bold and stands out.  The website doesn’t contain any sound, allowing the audience to have peace whilst they are on the website.  The website doesn’t contain lots of animation  because their website is very classy, but it has some animation containing information on some products and different deals, which lasts for 10 seconds.  The interactivity of the Jack Wills website is very friendly because it is easy for the audience to use because their layout is simple but classy and the models on their website come across to the audience as friendly.

The form on Jack Wills is uncluttered because the layout is clean and very easy to navigate around, also there it white space showing that the website isn’t cluttered.  The website is consistent because the design and layout of the website is the same making it easy for the audience to navigate on the website.  The continuity of the information on the website changes because they add new products on to collections, giving a variety of products to the audience.  The Jack Wills website has a large amount of information on both Jack Wills itself and their products because it wants the audience to know what they are buying and what Jack Wills has to offer.  The information on the website has been group in suitable groups making it user friendly and easy to find the information.

The Jack Wills website has many colour.  They have used their brand colours on blue and pink, which connotes that Jack Wills is a unisex brand.  Also, the blue and pink colour match the traditional British colours.  Jack Wills have also used a background theme that matches the 4 seasons, therefore they have used a dull grey background of London to match the season of Autumn.

The World’s Worst Website-Bad Website: http://www.angelfire.com/super/badwebs/

The audience receive a terrible experience whilst on The World’s Worst Website because of the animations on the web page making the audience loose focus and get distracted.   The age group of the website is aimed at young adults and adult because it informs them about how a bad website looks like and what it would contain.  The language used on The World’s Worst Website is easy to understand, allowing the website to appeal to a wide audience.  The accessibility of the website is hard to read because of the animation on the background, making the audiences experience on the website terrible.  The website has no audio, meaning that the audience has noting to hear on the web page.  There is no ability to type on the website making it harder for the audience to find the information they want on the website.  The access of the website is not that good because you can only access it through a computer, showing the audience that they will be unable to view it on other devices.  There is some jargon used making it hard for the audience to understand what is said on the webpage.

The content on The World’s Worst Website has standard and common text, which makes it easier for the audience to read and understand.  The graphics on the website is very unusual because it has an orange background with little black dots, which can distract the audience from the piece of text they are reading.  There is no sound on the website because it allows the audience to stay focused while they read the text.  There is quite a bit of animation on the website because it has the websites name going across the top of the web page allowing the audience to see the name of the website, it also contains animated pictures.  The interactivity of the website isn’t user friendly because of the layout of the website and it is hard to find the necessary information required.

The form of The World’s Worst Website is cluttered because it is messy and there is no structure or organisation on the web page.  It isn’t consistent because the design of the website changes making it harder for the audience to use,  There is some continuity on the website because the information on the website is similar as it is all based around the same topic of what a bad website looks like.  There is a wide range of information because it informs the audience, making them feel like they have good advice on how to make a good website.  The information on the page hasn’t been group, making the web page unorganised and hard to navigate for the audience.

The World’s Worst Website, has a large amount of colours used on its website.  However, the colour used are not good because they don’t have any significance to the website and it isn’t based on a certain theme.  Also, they have used a dull orange for their background, conveying the idea to the audience that the website is boring.

BBC-Good Website: http://www.bbc.co.uk

The audience of BBC receive a wonderful experience whilst they are on the website because it is easy to navigate around and contains a wide range of options.  The age group on BBC website can vary depending on what is is used for, however their main age groups are young adults and adults.  The language used on the website is easy to understand allowing the audience to feel comfortable using the website.  The accessibility of the website is easy to read because the font is clear and easy to read making it user friendly for the audience.  There is no hearing on the website, unless you click on an audio or visual link, which was contain sound.  The typing ability is easy because there is a search bar, allowing the audience to search their desired subject.  You can access BBC from several devices making it user friendly so that they can use it at any time.  There is very little jargon used allowing the reader to understand what is on the website.

The content on BBC has simple but effective text allowing the audience to see the information without struggling.  The graphics on the website relate to the information that it is about, allowing the audience to see a visual image of the information.  The sound on BBC can only be heard if you are watching a video or listening to an audio, enabling the audience to read their information quietly.  There is animation when you hover you mouse over a news article and when the different articles appear on the homepage.  The interactivity of the website is user friendly because it is simple to navigate around the website, making the audiences time on the web page efficient.

The form on BBC is uncluttered because the website is organised to make it easy for the audience to use, also there are white spaces on the web page to show that it is uncluttered. The website is constant because the design and layout of the website stay the same most of the time making it easier for the audience to use when they re visit the web page.  There is continuity because the information on the website is roughly the same apart from when the news articles change on a regular basis.  There is a large amount of information on BBC because it has various categories and section on the website related to different topic, revealing to the audience that there is a wide variety of information.  The information on BBC has been grouped in an applicable way because it allows the audience to have easy access to different information.  The different sections have different colours depending on the topic, such as the news page having red to match the red theme of BBC.

The BBC website has several colour because of the different sections there are to the website.  This allows the website to appeal to a wide range of people, giving the BBC a large audience.

The Afterlife-Bad Website: http://heaven.internetarchaeology.org/heaven.html#bottom

The audience of The Afterlife receive a life experience because they travel from Earth up to heaven.  The ages group of the website would be young adults and adults because they are more likely to understand the message behind the animation.  There is very little language used on The Afterlife, showing that it is more of a visual website.  The accessibility of The Afterlife is easy to see the animations because it allows the audience to see things through animation rather than text.  There is no typing ability on the website because you cannot search anything on the website making it hard for the audience to find the information they need.  You can only access the website on a computer making it harder for the audience to view it on different devices.  There is no jargon used because there is very little text.

The content on The Afterlife has very little text, showing the audience that the website is mostly visual.  The graphics on the page contain images that some of the audience may be able to interpret what the meaning behind it is.  There is no sound on The Afterlife, making the audience feel like it is peaceful.  There is animation on the website because the whole website is an animation that shows a journey from Earth to heaven.  The interactivity of the website isn’t user friendly because they wouldn’t understand how the website works when they first visit it.

The form on The Afterlife is cluttered because some of the animations and images overlap each other making it crammed in and hard to see.  The Afterlife is inconsistent because it show different parts to life, which may not relate to the audience.  There is some form of continuity because it shows you one journey from Earth to heaven.  There isn’t a large amount of information because it isn’t on the website and the only information is what the audience interprets from the animation.  There isn’t any information on the web page to group, showing there is a lack of information.

The Afterlife website has several colour because of the different parts of the animation, such as the Earth being blue, which represents the sky.

Today, Tuesday 1st October 2013, I carried on making my Computer Arts Student Handbook.  I have finished the first four pages on my Computer Arts Student Handbook, which are based on graphic design and interactive design.  Refer below to my Computer Arts Student Handbook pages.

Here are my ‘Groovy Graphics Design’ pages:

  

Here are my ‘Interesting Interactive Design’ pages:

 

Here are my ‘Natural Navigation’ pages:

 

Here is my ‘Tremendous Technology’ page:

Here is my ‘Crucial Copyright’ page:

Task 1.3

The website that I have picked to analyse is Jack Wills.  http://www.jackwills.com/en-gb/home

The global navigation on the website would be the Search bar because you can access it from all the pages on the website.

The primary navigation on the website would be the navigation bar because it is locked down into position on every page.

The secondary navigation on the website would be the drop down menu because it will be found under a specific primary section.

The tertiary navigation on the website would be the products under the drop down menu because it is a page that links off of and can only be found on the secondary navigation.

The utility navigation on the website would be the Items In Bag because it will quickly connect me to the function or task that I wish to complete.

The footer navigation on the website would be where the About Us, Here To help and Shopping With Us sections would be because it contains information on the company.

Here is a site map that I have analysed.  Please refer to the picture below to see the different parts of the site map.

Background primary navigation is part of the main navigation bar and appears on every webpage whereas, prominent primary navigation is more important than background primary navigation and appears on every webpage.  Secondary is found under the primary navigation and tertiary is found under the secondary navigation.

I have analysed the Codetex Group website and the different parts to the website.  http://www.codetex.com/en

The conventions of the website are broken because it is very unique compared to a traditional website.  The navigation of the bar is at the bottom of the webpage when it is on the home page, but when you go onto a different webpage, it goes to the top of the webpage.  Also, the website contains animation, which interacts and draws in the interest of the audience because of the animation, which changes when you change your webpage or some images on the webpage.  The website has a simple and classy design, because of the layout and colours of the website.  It is effective because it allows the audience to experience something different.  Please refer to my image to see the labels for the different parts of the website.

I have analysed the Atlanta Restaurant Guide website and the different parts to the website.  http://www.restaurantguideatlanta.com/

The conventions of the website are broken because it is messy compared to a traditional website.  The navigation of the bar is at the top/middle of the webpage when it is on the home page, but when you go onto a different webpage, it goes to the top of the webpage.  The website has a messy and unorganised design, because of the layout and colours of the website.  It isn’t effective because it is hard for the audience to use and navigate around.  Please refer to my image to see the labels for the different parts of the website.

Local navigation is when you can only navigate on one page on the webpage.  Whereas, global navigation is when you all items appear on every webpage of the website.

In the footers you usually include the copyright, terms & conditions and design marks.  It may also include a link to the primary navigation such as, contact us or about us section and key information on the audience for the company.

The visual cues that aid your navigation when you are on the Jack Wills website is when you hover your mouse over a primary navigation bar, such as Gentlemen and the secondary navigation bar appears with the different categories and options.  This reveals to the audience that they can access another web page from that link.

There is no back or redo buttons on the Jack Wills website, but the error tolerance on the Jack Wills website would be in the other categories in the primary navigation bar, which allows the audience to access the other pages on the website or the Jack Wills logo, which allows the audience to get back to the homepage of the website.

The are several parts to making navigation good, such as a good design for the users, offer a variety of navigation options on your website, inform the user where they are going, deliver context enabling the visitors to know what they are reading, you must only have up to a tertiary navigation bar on your website, follow web conventions, keep your website design consistent, update your website regularly, make sure your website contains consistent content, allow the audience to know what webpage they are on and know where they are on the website.

Navigational design is important for a website because if your website doesn’t have proper design or layout to the website the user will not be able to know or find out what page they are on or where to go on the website.  Moreover, if you don’t have good navigational design, it may result in you losing the users of your website because your website would’t be user friendly.  Therefore, when you create a website, you must make sure that your navigational design is user friendly, so that the audience of the website would have a good experience whilst on the website and may visit your website on an often basis dependent on the content of the website.

Here is the Awwwards website, which contains website with good navigational design.  Refer to the Awwwards website to see what a website with good navigational design may look like.  http://www.awwwards.com/

I have created a conventional navigation website, showing how and what is required to create a conventional website and how the layout of the website should be.  Refer to my diagram below to see how you should create a conventional navigation website.

Task 1.4

Interactive products are one or several visual or audio media, which is used to engage the audience such as, adverts, video games, websites or DVDs.

Content platforms are a simple way of presenting information and is used to view and interact with the product such as, consoles, mobile devices and computers.

Application tools is computer softwares that allows the user to create and make documents such as, animation software, web editor and authoring software.