Interactive Media Design – Task 1: Understand the principles

Criteria 1.1

Typography

This is the technique of arranging font types and writing styles to create written language. It involves selecting typefaces, line length and letter spacing. The style, arrangement and appearance of letters are also variables in Typography. There are three main font types:

 

Serif, Sans Serif and Handwriting

screen-shot-2017-02-03-at-12-24-29

 

Positioned above, is the header of the BBC’s official website. This uses sans serif font. It is a clear and basic font type. Sans serif fonts do not have extending features called “serifs” at the end of strokes. Sans serif fonts tend to look more modern than serif fonts.

 

screen-shot-2017-02-03-at-12-40-14Linux Libertine is an example of a serif font. Notice the extended features at the tail of the letter ‘L’. Serif fonts look more traditional than sans serif fonts. The Linux Libertine typeface was used in the designing of the Wikipedia logo. It has also been used in the Libre Graphics Magazine.

screen-shot-2017-02-03-at-14-18-51

Handwriting can also be used on websites. The image above shows a handwritten heading that is positioned at the top of the web page for a wedding planning site called ‘Italy in Love’. It attracts the visitor of the website through its elegance and sophistication in the style, whilst it also still looks professional and trustworthy.

 

Class Exercises

Examples of Typography Styles in Headings

The following images are type designs created by myself. Each heading has its own features of typography incorporated into the the design such as leading, tracking and the typeface used.

south-coast3

The design above is an example for a company called ‘South Coast Tees’ with the slogan of ‘Creative beachware for the south coast’.

This first design (above) has a different setting in tracking. The company name has a lower tracking number meaning that the letters are spaced closely together. However, the slogan has its own tracking setting that spaces out the letters. The slogan is also a smaller font size than the main header, although they both use the same serif font type. The font and tracking suit the company’s young target audience.

south-coast

This is the second design I created for South Coast Tees. This design also uses tracking to space out the letters, predominantly on the main header. The same font colour is used throughout. There is also a leading setting implemented in the design with the second heading being split into two lines. The lines are separated evenly. This is so that the reader can separate the slogan with its two main points.

south-coast-2

The third design for South Coast Tees includes a handwritten style font that works well for its younger, fashionable audience. It shows that the company value the audience’s keen interests and hobbies as oppose to professional business needs. The two headings also use different font colours to separate the main heading from the second heading. The different font sizes indicates what the reader should look at first.

bbs-logo-2-800x300

The design above is created as an example for the company ‘Brighton Business Solutions’. The target audience for the company is professional business employees, who are in need of web and IT based support.

This first heading positioned above uses the basic font colour with a sans serif and professional font type. The leading is very minimal with a small gap between the two headings. The setting on the tracking is also very minimal which pushes the overall text very close together. This also leaves a wide blank background to the image which cannot be seen on other white backgrounds.

bbs-logo-1-800x300

This second design uses wide tracking in between letters on the main heading. The font sizes are the same for the two lines of text, however, the main heading is in bold and this makes it stand out. The tracking for the second line of text is very compact. This means that the letters are close together. The leading setting shows that there is a small gap between the lines of text.

bs

The third design for Brighton Business Solutions separates the main heading into three lines to allow the text to use a larger font size. Using the leading technique, the gaps between the lines of text is very minimal. The second heading is all on one line to use the whole length of the design. The colour of the two lines of texts is similar but the darker green on the main heading makes it stand out as well as its larger font size.

 

Examples of typefaces

down-memory-lane-typography

Pictured above, is examples of different typefaces that are appropriate to the meaning of each phrase. The first heading is ‘pure poetry’. Poetry is typically a sophisticated thing and it can often be found written in handwriting or typed in a handwriting style typeface. The neatness of the typeface and the use of italics suggests elegance and always express emotional writing often found in poetry. The type face is called ‘Freestyle Script’.

The second piece of text is ‘traces of conflict’. This can have several meanings and interpretations which is why the typeface is sans serif, simple and basic. The typeface for this piece of text is ‘Arial’.

The third heading reads ‘keep off the grass’. This is an order and is suitable in all capital letters to become authoritative and strict. It is in capital letters and in bold to be clearly seen by who it may concern. The typeface is ‘Arial Black’.

The final piece of text is ‘down memory lane’. This would be effective with a nostalgic effect, such as a handwritten style typeface that wouldn’t look out of place in a diary. It is similar to ‘pure poetry’ in that it can relate to emotions, poetry or anecdotes. The phrase can have several different emotional meanings. The typeface is ‘Mistral’.

 

Song lyrics using different typography effects

song-lyrics-for-write-up

Pictured above, is lyrics from Black Sabbath’s ‘Into The Void’. The style of the band themselves has always been dark and horror themed. This can be represented in the lyrics above. I have used this to influence the different typefaces and font colours in the text.

Each line/verse in the lyrics has a different typeface, point size, and levels of leading and tracking. The first verse uses the typeface ‘Matura MT Script Capitals’, The second verse uses the typeface ‘Harrington, the third uses ‘Old English Text MT’, the fourth uses ‘Harlow Solid Italic’ and the final verse uses ‘Lucida Calligraphy Italic’. Although the typefaces are all different from one another, the theme and style of the typefaces are relatively similar with the dark and doom theme that is suitable to the lyrics.

The leading in the lines of text is consistent in the first four verses, forming a small paragraph. However, there is a large gap between the fourth and fifth line creating a new paragraph and separating the two lines of text. The purpose is also to summarise the meaning of the first four lines with the fifth and final line.

Tracking is the distance between words and for the first four lines the tracking is minimal and this creates a more compact paragraph. However, fifth line has wider tracking and this widens the line making it look more presentable and it uses the whole width of the page.

Sans and sans serif fonts are both used within the five lines. The majority are serif fonts which look more traditional and vintage.

 

Colour Theory

Complimentary

Complimentary is a colour scheme that uses two colours on the opposite side of the colour wheel. An example of this would be blue and orange. In web design, websites that use a complimentary theme will usually use one colour as the background and the other contrasted colour for highlighted text or content on the web page.

complimentary.png

The screenshot above is from a website called Nature’s Table. The website uses the complimentary scheme by using the colours red and green. Forgetting about the white background, the website uses red with the boarder at the top of each page and the link that the viewer is currently viewing (i.e. ‘About us’). Green is used for the other links to different pages on the website, the brand logo and headings.

byron-bay-complimentaryAnother example of a website that uses the complimentary scheme is Byron Bay Schools. This is a company that promotes holidays, trips and accommodation. The website uses complimentary colours in the light blue background and the orange headings. There are both blue and orange buttons that take the user to different pages around the site. With these used as the website’s main colours, it creates a complimentary scheme.

your web job complimentary.png

This is another example of a website that uses a complimentary scheme. Your Web Job is a website directed at people seeking new employment or a change of careers. Their website uses the complimentary scheme of using purple and yellow as its main colours. The background and primary colour is purple while the key words and links are yellow.

 

Monochromatic

This colour scheme only uses one colour as its base for the web page. This colour can be varied using different shades and tones. The only other colours that may be present on the website is white and black for text and other colours used in images. There are often lighter and darker shades and tones of each colour that can also be seen on monochromatic websites.

branded7 monochromatic.png

Branded7 is a website created by an individual showcasing their latest art collection. It is described as an online gallery of framed prints. Even though this website displays many images (not seen in the screenshot), the home page and the main view for the visitor of the website is monochromatic. The colours of the website range from different shades of white and gray. The top half of the page is a cream colour while the second half is a gray and this keeps a consistent lighter colour scheme.

silverback 3 monochrhomatic.png

Silverback 3 is a usability testing app for Apple Macs. Their website is consistent with different shades of green. The patterns of leafs in the background merges into the monochromatic colour scheme.

lealea design monochromatic.png

Lealea design is a website that is run by one individual showcasing their collection of designs and imagery. The website uses the monochromatic colour scheme by using different shades of purple including burgundy and claret as the primary colour. Other colours can be seen on images posted on the home page.

 

Multi-coloured

Websites that use multi-colours will use a range of different colours in the background and within the content. There usually is no primary colour, instead using multiple different colours to create its own unique theme.

future-of-car-sharing-multi-colour

This first example of a website that uses the multi-coloured scheme is ‘Future of Car Sharing’. This website uses different shades of pink, orange, green, red and blue in a number of logos, headings, text and images.

mailbakery-multi-colour

The second example of a website that uses the multi-coloured scheme is ‘Mail Bakery’. This company provide marketing services to businesses, predominantly through email campaigns. The website’s home page uses orange, turquoise, yellow, cream and the background colour white.

my-wine-box-multi-colour

My Winebox is a company that sells wine internationally. My Winebox’s website uses the colours white, green and shades of purple on its home page and this remains a consistent theme for other pages on their site. It also displays other colours through the images they use. This also includes the slideshows used.

 

Class Exercises

colour workshop 1 colour scheme

Here is a colour scheme I created that uses four different colours to represent adjectives. First, the silver, platinum looking section on the left hand side represents the word luxurious. It also has a modern, bright and clean look to the section which can relate to the luxury of an item or object. The light, mild green colour on the middle left represents the adjective aromatic. This is because it is a mild shade of green and it wouldn’t look out of place on a shampoo bottle or a candle scent. The smaller red section of the scheme represents stagnating. The section is smaller in width and it shows the decrease in size. The dark red used represents the negative growth that can often be seen on finance charts. Finally, the darker shade of green on the right represents the word masculine. It is a colour that is often used for the uniform worn by men who work in the army.

This slideshow requires JavaScript.

I have created two moodboards and are shown in this slideshow use another adjective and mix around with different colours. Both moodboards use the monochromatic scheme. This is a design or piece that uses different shades of a single colour. The citrus moodboard uses different shades of green. This is because citrus fruits come from trees and the fruits themselves are often green. The moodboard has a bright look to it and this is the same case with the word citrus and its connatations. I tried to create a mixture of shades in the moodboard. However, this means that it does not blend as well as other moodboards that use similar shades of a colour. The second moodboard uses shades of grey to create a dark and dull theme. This relates to dark clouds and rain which can be represented in the moodboard. I was trying to achieve a slightly miserable feel to the moodboard with the darker colours and the phase ‘dark clouds’.

This slideshow requires JavaScript.

Here are two more moodboards I have created. These both use images of the titled word to form the moodboard. The use of colour on the ‘Moon Dust’ moodboard is fairly consistent with the main colour grey and different shades of white and black. This is not quite the same for the ‘Meadow’ moodboard as this uses yellow, blue and green as its main colours. Moon Dust was created to have a mysterious look and feel to it with the mix of shades of the colours and the images themselves. The images selected are of the words themselves  but the images add variety to the moodboards and form together to create one big picture.

Composition

Rule of Thirds

This is a layout principle that is applied when aligning a grid around an image that fits into an even 3 x 3 area.

This slideshow requires JavaScript.

Within this slideshow, there are three examples of when the rule of thirds has been used on the home pages of a company’s website. The website used as examples are all completely different despite the fact that they use similar layouts of their home pages, particularly when using a main carousel image that uses the rule of thirds. The images used on the websites all fit with the principle because the images would split into a 3 x 3 area to form a grid. This grid can then be used to determine where a user is most likely to draw their attention to. The web designer can then produce or edit their content accordingly.

White Space

This is used in web design very frequently and the purpose is to improve the layout of the website, while allowing the overall look to be clean as opposed to overloading with content. White spaces are also used to merge an image into its background. This works often because many backgrounds of images are white as well as website backgrounds. The same can be done with the colour black, however it is difficult to merge other colours from images into website backgrounds with the different shades and types of each colour.

This slideshow requires JavaScript.

Here are three examples of where there are areas of white spaces on websites. Amazon use white spaces around the side of their content. In other words, to the left and right of the main column of images and text. They also use white spaces merged around images. Hospice in the Weald cover more of the webpage with content and images. However, there are tight white spaces around the four coloured buttons on the left hand side of the home page and a small area at the bottom. Rakuten also use white spaces at the bottom half of their home page as well as in between images.

Emphasis

Emphasis is an area or an object of a webpage that draws attention to its viewer. This is known as the focal point and the web designer will ensure that their most important messages or content will be in this area.

This slideshow requires JavaScript.

Here are some examples of the emphasis principle being used within web design. Sports Direct and John Greed have both used large images that take up the vast majority of the screen, with John Greed using a slideshow to rotate each bit of content as the focal point. These images stand out because of their large size and the viewer will be able to read or interpret the message, advert or the content in general. This is providing the text is clear, a suitable size and positioned well. The third website is from an individual’s blog that uses circles to differ each image/link and this evens the content. The effect of this is that the focal point can be anywhere within the web page. It therefore does not prioritise any content or information.

Alignment

Alignment is the positioning, placement, orientation and grouping of content in web design. This principle can be the difference between a neat, professional-looking website and an informal, tacky website.

This slideshow requires JavaScript.

Here are three examples of when the alignment principle has been used in web design. The first example is a website called ColourPixel. The alignment of text and boxes is all over the place. However, it still looks effective. Text boxes lower in alignment from left to right. This ensures the viewers reads the text in the correct order. Serious studio is another website used as an example and the header, sub-header and ‘learn more’ button is all positioned center with even leading between the text. Finally, 30elm uses only the left hand side of the web page, leaving the whole of the right hand side with blank white space. This is no particular reason for this however, it makes it easier for users visiting the website on mobile or tablet devices to view the website without any problems with the layout. Users will also find it easier to click on links and buttons around the site.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s