Task 1: Understanding the principles of interactive media design

Typography

Researching websites and finding examples of Serif, Sans-Serif and Handwritten font types.

SERIF

First, looking at Serif fonts. Serif fonts feature a small line at the end of the stroke in the letters.

Screen Shot 2016-06-28 at 10.50.37

Typically, they are easier to read in print which explains the wide usage in books. The example website I chose is the Financial Times site, the use of a serif font replicates the appearance of the printed newspaper. Serif fonts are often viewed as official, straightforward and reliable, making them an apt choice for a newspaper.

Screen Shot 2016-06-28 at 10.18.52

SANS-SERIF

Sans-Serif fonts lack the ‘tick’ in the characters, the name coming from the French for without; “sans”. Sans-Serif fonts are usually viewed as modern, clean and professional.

Screen Shot 2016-06-28 at 10.29.57

Apple uses a custom sans-serif font for their website (and as the system font for their computer and mobile operating systems), reflecting the companies modern aspect and clean design.

HANDWRITTEN

Handwritten fonts tend to vary a lot from example to example. They can be described as playful, elegant or creative. Due to the variations in style of handwritten fonts they can appear in a multitude of different environments.

The below example is from Lost My Name, a company that produces personalised children’s books.Screen Shot 2016-06-28 at 10.40.49.png

The use of a handwritten font is particularly apt here for a selection of reasons. Primarily, it is more relaxed and playful due to the lack of uniformity and the fluidity of the type. This seems suitable for a subject relating to children and stories. Further to this, the handwritten font reinforces the notion of personalisation, handwriting is often unique to the writer.

Class Exercises

Workshop 1: Creating Logos

Creating type based logos for two companies, considering font, kerning, tracking and colour amongst other things.

The first company is Brighton Business Solutions, the brief describes it as a clean, sophisticated business site. With this in mind, I focused on using Sans-Serif fonts for all the designs. Sans-Serif fonts are often associated with being precise, clean and smart; an ideal choice for this company.Brighton Business Solutions 1

I used Helvetica for my first logo, perhaps the most famous of fonts. I adjusted the kerning and tracking to make the letters and words be closer together, giving the design a compact feel. Additionally the adjustments allowed the text to remain in line with each other, further adding to the tidy, compact feel to the design. To differentiate the title from the tag line I used capitals for the former and lower case for the latter, additionally using italics for the tag line. This allows the viewer to quickly differentiate the two. To further cement the compact concept to the design I contained the text within to neat bold lines at the top and bottom.

Brighton Business Solutions 2

I chose Futura as the font for my second design, another sans-serif font. Futura has a very neat aspect to and seems very considered and balanced.  Similar to the previous design, I differentiated the title and the tagline by using capitals for one and lower-case for the other, however, in this instance the tag line uses all capitals. I further differentiated the two by using opposing colours for the text, black and white. I adjusted the kerning so the words themselves were compact, but increased the space between words so they were distinct. For the tagline I adjusted the kerning and spacing to maintain the line with the title.

Brighton Business Solutions 3

For the final design for Brighton Business Solutions I selected Avenir Next as my font, again, a sans-serif typeface as these are usually deemed as professional looking and modern. I adjusted the kerning more specifically on this design, for example, making the the I in Brighton and the L in Solutions line up. This, combined with my reduction of the leading gives the words a sense of connection. For the tagline I chose to make the first line in italics, as this draws a focus to it and highlights to the viewer that it is a key piece of information in identifying the company.

The second company was South Coast Tees, a youthful, creative, edgy t-shirt company. From this brief it is evident that one can be more playful in the design.

south coast tees 1

I chose Futura again for this design. However, in the title I used the Condensed ExtraBold version. Along with the extremely narrow kerning, and adding an outline, it created a very bold title, reminiscent of bubble text. I curved the title line to add some movement to the design. For the tag line, I arranged the text in two columns. Adjusting the kerning so each line of text was constrained to the lines in its column, I also used varying sizes for the font to help achieve this.

south coast tees 2

For my second South Coast Tees design I decided to be more playful, creating a figure from the typography. This was achieved mainly by adjusting the position of the words to make the o in Coast and t from Tees line up, which gave my a head, body and arms. The legs were created using an inverted v. I used tight kerning as I felt this gave the appearance of handwriting, enhancing the style of the font used: Bradley Hand. The tag line was arranged in a vertical column, I made the text blue and had it become lighter the lower down the column it went. I felt this invoked notions of a wave, and I felt that the beach and the sea were aspects linked to the company due to its name.

south coast tees 3

For my final design I wanted to incorporate the idea of the south coast. I achieved this with a simple background of blue and yellow, reminiscent of a beach. The font used was DIN Alternative, I felt that this was a contemporary font. I was creative in how I arranged the title text. South was written vertically, with Coast and Tees sharing letters from it, sprouting out horizontally. I had to adjust the kerning in South as the letters were by default too far apart when arranged vertically.

Workshop 3: Display Type

Selecting appropriate typefaces and styling for the following pieces of copy:

  • Pure Poetry
  • Traces of Conflict
  • Keep off the Grass
  • Down Memory Lane

 

Colour Theory

Colour theory concerns the aspect of colour and how it interacts with itself. There are three things to consider when discussing colour.

  • Hue – The colour itself, such as red or green
  • Saturation – The vibrance or lack there of in the colour
  • Lightness – The levels of black or white in the colour

pri-sec-ter

At the base level, there are three primary colours; Red, Yellow and Blue. Combining two of these gives secondary colours, such as green or orange. Between primary and secondary colours are tertiary colours, for example, between yellow (a primary) and orange (a secondary) you find yellow-orange (a tertiary).

When one colour is being used it is defined as monochromatic and deals with the different shades, light to dark.

tint-tone-shade

Looking at the use of colour on the web and finding examples of websites using complimentary, monochromatic and multi-coloured colour schemes.

Complimentary colours achieve what their name suggests, they are colours that compliment each other. When looking at a colour wheel, finding the complimentary colour for a selected colour involves looking at the opposite side of the wheel.

Complementary

It is worth noting that there are two main systems for colour, additive and subtractive, and they do differ slightly. Traditional colour theory concerns subtractive colour,  that is where the combination of colours results in the absorption (subtraction) of light. Subtractive colour is relevant to printed materials or painting. Additive colour concerns digital mediums more, where the combination of different light colours results in new colours. This also leads to different definitions for primary colours, where green is deemed as primary and not yellow. The below example highlights the difference in subtractive and additive colour, notably, the combination of all colours resulting in black for subtractive (due to all wavelengths of light being absorbed) and white for additive (due to the presence of all wavelengths of light).

color_cmy-and-rgb.jpg

Website Examples

Monochromatic

Use of red as the sole colour for the site. Gives a simple clean appearance.

Screen Shot 2016-06-28 at 12.02.36

Complementary

Use of red and green, two complimentary colours. The red areas contrast to the green background drawing the viewers focus.

soutez

Multi-coloured

Use of multiple colours, gives the site a vibrant and lively atmosphere.

www-17081d61805162a72423bc4c93f73ee0_h

Colour Workshop 2

Black Coffee Moodboard

black coffee

Citrus Moodboard

citrus

 

Colour Workshop 1

Colour scheme created based on four words

Untitled-1

Silence

Grayscale colours chosen to reflect an emptiness.Untitled-2

Aromatic
Rich, warm and vibrant colours chosen to reflect spices.

Untitled-3

Old Fashioned
Muted tones chosen to evoke an aged feeling.

Untitled-4

Agression
Dark, ominous colours and vibrant red to suggest rage.

 

Composition

Rule of Thirds

The rule of thirds is a concept where you divide an image of web page into thirds, both vertically and horizontally, giving you 9 boxes, 4 lines and 4 focal points where the lines intersect. The diagram below shows the layout expected, the numbers indicate the average amount of focus given to each area, indicating that important information should be placed in the upper left and that the lower right can quite acceptable be left empty.

rule-of-thirds-2.jpg

rule of 3rds

Here we can see how on the Nikon website they have divided their page using the rule of thirds. The menu is kept in the top third, with their prime advert in the middle third. A prominent call to action appears in the centre left block, an area naturally looked at more.

White Space

White space is just that, empty space. There are two types of white space; Active and Passive. Active White Space is space left intentionally blank to provide a better structure or to draw emphasis to content. Passive white space is the empty space around websites or the byproduct of the layout process.

Screen Shot 2016-07-12 at 00.27.57.png

An example of active white space, drawing focus to the product.

Emphasis

Emphasis is where the layout is set up to put focus on certain content, often achieved by manipulating the size of elements on the page. Having one section significantly larger than the rest will draw the user to it and is useful to highlight important information.

Screen Shot 2016-06-28 at 15.51.12.png

The New York Times uses emphasis in its layout to highlight important or new articles.

Alignment

Alignment in can effect how a layout is perceived drastically, be it giving it a stable balanced appearance or suggesting fluidity and motion. It is usually vital that there is some alignment in a layout, otherwise it tends to appear jumbled, uncontrolled and messy.

alignment

The Google search result page keep all returned results in align with the search bar at the top.

 

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s