Task 1 – Interactive Media

Typography

The style and appearance of text. I was tasked to show examples of font types with examples.

Serif font

Screen Shot 2016-04-19 at 14.39.07

Example: http://dragone.com/en

Serif font is a small line (or tick) attached to the end of a stroke on a letter or a symbol. Example fonts are Times New Roman and Georgia.

Sans serif

Screen Shot 2016-04-19 at 14.52.18

Example: http://www.dadaabstories.org

Sans serif font is a typeface that does not have small projecting lines at the end of strokes. An example font is Ariel and Verdana. Sans serif is sometimes used as a tool for emphasis because of it’s darker nature.

Handwritten

Screen Shot 2016-04-19 at 15.08.44

Example: http://camps.winshape.org

Handwritten font is typically used for sites aimed at children, comic style sites or when using signatures online to appear genuine. It is named because of how similar the font is to someone actually handwriting it.

Class exercises

For these exercises I was tasked with designing three different logos for two businesses utilising different styles and tracking and kerning of the text.

Brighton Business Solutions logo design

Screen Shot 2016-04-19 at 15.12.30

1st logo

Font: PingFang SC Light

I chose the typeface because of it’s professional sans serif look. The bold, clean look makes it a good choice for a business site. I used leading to get both lines of the title compact, but still clear so it looks really neat. I also used tracking on the tagline to make the letters as close as possible for a unique, professional look.

2nd logo

Font: Yuppy SC Regular

I chose this font because of the slight fun and comic look to it so it looks less serious, but a more creative, fun looking organisation that someone would love to work with. This is a mixture of a handwritten font and a sans-serif font. I used tracking on the headline to make the letters and words stand out.

3rd logo

Font: Helvetica Neue UltraLight Italic For the headline. Songti SC Light for the tagline.

I chose these fonts for a more stylish, sleek approach showing a more professional, sophisticated business. The headline font is sans-serif showing the more sleek and stylish side of the business, whereas the tagline font is serif showing the sophisticated side. I used two layers, one for the headline and one for the tagline so I could get them in the position I wanted. I used leading on the headline to separate each word individually so it is clearer for the user.

South Coast Tees logo design

Screen Shot 2016-04-19 at 15.47.59

1st logo

Font: Phosphate Inline for the heading. Zapf Dingbats Regular for the divider. Palatino Italic for the tagline.

I chose these fonts because of their interesting nature with the indents in the letters and how it draws your attention. The headline is a sans-serif whereas the tagline is serif. The divider gives it an added punch with its eye catching symbols and the tagline is clear, getting the message of the brand across. It fits with the surfer theme of the company as something that is meant to attract that crowd.

2nd logo

Font: Trattatello Regular for the header. Telugu Sangam MN Bold for the tagline.

These fonts have an edge to it that fits with the brand. The unkempt font is eye-catching but may put some users off. The headline is a serif fontface and the tagline sans-sreif. The tagline is a more professional looking font that brings back some class to the logo. The use of tracking on the tagline gets the brand message across, being much clearer.

3rd logo

Font: Myriad Pro Bold Condensed Italic for the heading. Comic Sans MS Regular

I used these fonts for something a little bit different. Both the headline and tagline are sans-serif. With the almost 80’s neon pink font creating a sense of retro about the company in the header. The comic sans in the tagline gives the impression that the company is a little more fun, maybe childish which probably isn’t the right way to market the business.

Display type

For this exercise we were tasked with coming up with font types and colours that relate to the words, summing up the feelings associated with them.

Pure Poetry

screen-shot-2016-09-13-at-11-42-55

 

 

I used the font Gabriola at size 80 with a light orange colour. The sophisticated look of the font and the light orange gives it a peaceful feel as the lightness represents peace.

Traces of Conflict

screen-shot-2016-09-13-at-11-48-28

 

I used the font Bernard MT Condensed for a military feel which you would usually associate with conflict, same with the brown colour as well. I emphasised the most important words by increasing the font size showing the escalating nature of conflict.

Keep off the grass

screen-shot-2016-09-13-at-11-54-35

 

 

I used the font Book Antiqua, a serif font that helps to promote a serious message to others. I emphasised “Keep off” by underlining and bolding it to show the most important aspect of the message. I used light green to represent the grass element of the message.

Down Memory Lane

screen-shot-2016-09-13-at-11-58-52

 

I used the font face Brush Script Std, a sophisticated and signature type font that represents taking a trip somewhere important. The yellow helps to represent good times, positivity and special memories.

 

Colour Theory

Colour theory is the practise of mixing of colours and visual effects of a combination of colours that resonate a feeling with the viewer. For this I was tasked with finding examples of websites using different colour theories.

Complementary

Are any two colours exactly opposite each other on the basic colour wheel. An example is green and red like I have used below, It typically represents Christmas.

Website: Coca Cola

Screen Shot 2016-05-10 at 14.33.39

 

 

 

 

 

 

Coca Cola uses two colours that are opposite each other (red and green). Red has always been identifiable with Coca Cola but recently have started introducing green as part of their natural health and environmental campaign. The red is very saturated and draws the users full attention. A saturated red usually represents danger, alert which I don’t think coca-coca are going for.

Monochromatic

Monochromatic colour is the many shades, tints and tones of a single colour. For example black and it’s many shades down to grey.

Website: Pixels

Screen Shot 2016-05-10 at 14.38.07

 

 

 

 

 

 

The Pixels website uses black and grey monochromatic colour scheme for it’s home page. The pure black background helps to draw your attention to the grey elements.

Multi-coloured

Website: Bros mind

Websites that utilise many different colours and don’t stick to any particular identifying colour.

Screen Shot 2016-05-10 at 14.47.54

 

 

 

 

 

The many colours help to give the website a unique identity and shows it is a fairly playful website that would appeal to a more younger audience. The white space helps to draw your attention to each of the images.

Mood Board

Complementary

screen-shot-2016-09-13-at-12-20-31

 

 

 

 

 

 

 

 

 

 

 

I have bought together different objects that are green and red in nature. These colours work well together and compliment each other greatly. Red and green together are the main visual cues that represent Christmas.

Monochromatic

screen-shot-2016-09-13-at-15-59-58

 

 

 

 

 

 

 

 

 

 

These are the different monochromatic images I have bought together. It is really amazing how much detail an image can have just by using two colours.

Multi Coloured

screen-shot-2016-09-14-at-15-26-21

 

 

 

 

 

 

 

 

 

Here are different multi-coloured images I have bought together in a mood board. A lot of the objects that are multi coloured are in multiples, mixed in with many different colours of the same object.

 

Class exercises

For this exercise we had to create mini mood boards using colours that represent the terms.

Aggression

Screen Shot 2016-05-10 at 15.37.18

 

 

 

I chose a saturated red because of the colour that someone shows when coming across as aggressive. the orange represents the fiery nature of aggression.

Masculine

Screen Shot 2016-05-10 at 15.42.23

 

 

 

I chose the navy blue as it represents the stereotypical male style. Black shows strength. the saturated red comes across as being active and powerful.

Feminine

Screen Shot 2016-05-10 at 15.51.44

 

 

 

The pink represents lightness and the stereotypical female style. Light green shows freshness and health. The turquoise shows friendliness and a happy nature.

Luxurious

Screen Shot 2016-05-10 at 16.03.45

 

 

 

The gold represents expensive items (like necklaces and rings). Purple can shows luxury like velvet.

composition

This task involved getting examples of websites using different layout principles.

Rule of thirds

The rule of thirds is a guideline which applies to the process of composing visual imagery. The guideline states that the image should be imagined in a 3×3 grid, with important elements placed along the lines and intersections.

Website 1: Senador Volstead

Screen Shot 2016-05-10 at 12.01.00

 

 

 

 

 

 

 

 

Screen Shot 2016-05-10 at 12.08.47

 

 

 

 

 

 

This website is laid out in a pleasing manner to the eye. The rule of three ratio is well balanced, with the main selling point of the website to the left and two bits of sidebar content that tell you more about what you can expect to find on the website. the sidebar is the same size vertically as the main side.

Website 2: SIA Aperitivos

Screen Shot 2016-05-10 at 12.11.51

 

 

 

 

 

 

 

 

Screen Shot 2016-05-10 at 12.15.19

 

 

 

 

 

 

 

This website is laid out in a 3×3 structure, with intersection points in the composition level that draw your eye to key points and messages of the website.

Website 3: Black Ram

Screen Shot 2016-05-10 at 12.21.00

 

 

 

 

 

 

 

 

Once again this website is laid out in the 3×3 structure, 4 lines and evenly sized sections to effectively place information and images in a orderly and eye-catching  way for the user.

White space

A portion of a page left unmarked by any colour. It is an important element of emphasising other objects on the page whilst also appearing clean and un-cluttered.

Website 1: Snowbird

Screen Shot 2016-05-10 at 12.30.30

 

 

 

 

 

 

 

 

The white space on this website help to draw your eyes to each individual element. It also helps give this website a clean, modern look.

Website 2: eighty3creative

Screen Shot 2016-05-10 at 12.40.28

 

 

 

 

 

 

 

 

 

The white space is used very cleverly on the header as it draws your attention to each menu item in the navigation bar to explore further. It is also used like above to separate the elements (the feature image and text underneath).

Website 3: Something Splendid

Screen Shot 2016-05-10 at 12.44.55

 

 

 

 

 

 

 

 

 

The empty space doesn’t have to be white, it can be any colour as long as it is used effectively like this website. It is used to separate the pictures effectively so they have their own space so the user looks at every individual image.

Emphasis e.g. large/small

Placing particular emphasis on certain elements on a page to effectively highlight important object (e.g. text or imagery).

Website 1: An event apart

Screen Shot 2016-05-24 at 10.24.20

 

 

 

 

 

 

 

The dominant element of this website is the header image, it takes up most of the users vision when they load the page. The contrast black and whites draw the user to this area.

Website 2: Paid to exist

Screen Shot 2016-05-24 at 10.29.54

 

 

 

 

 

 

 

The dominant element on this website is the backpack as it is the most unusually shaped object on the page, drawing the readers attention first. The next biggest element is the header to the right of the backpack which is clever, as it will be the next element the user will be drawn to.

Website 3: Amazon

Screen Shot 2016-05-24 at 10.41.09

 

 

 

 

 

 

 

The main attention grabber is the big headline advert underneath the header. It is the biggest element and next draws the users attention to the contrasting headers.

Alignment

Website 1: Lucky Stars Tattoo Studio

Screen Shot 2016-05-24 at 10.50.24

 

 

 

 

 

 

 

 

 

 

This tattoo parlours website takes a uniques approach by placing its menus to the right hand side and the title and background image to the left. This creates a sense of intrigue for the reader as the background image is an inviting shot of the parlour itself.

Website 2: Rockbeatspaper

Screen Shot 2016-05-24 at 11.00.36

 

 

 

 

 

 

 

Most of this websites core elements (header, descriptions and work portfolio) are left aligned to show emphasis on these key points. This eventually draws the users attention to the central feature images.

Website 3: The Amanda Project

Screen Shot 2016-05-24 at 11.08.35

 

 

 

 

 

 

 

 

 

 

 

 

Looking through the navigation menus leads you to the main header aligned to the right of the website then down the side of the page where all the news and features are placed. The main updates to the left are aligned to the centre.

Leave A Response

* Denotes Required Field