WELCOME

MAGAZINE COVERThis was done as part of the annual DG

magazine cover competition, the brief was to represent a decade through visual elements,

this piece is symbolic of the 1980s.

PEACE

Peace

IF EVERYONE

- JOHN LENNON

INSTEAD OF ANOTHERTELEVISION SET

THEN THERE’D BE

DEMANDED

POSTER SETThis set of posters was inspired by

quotes. This was a self initiated project, which explored the use of texture, type

and layout.

PhOTOGRAPhyTaken as part of a series of event photographs.

TyPOGRAPhyCustom display font inspired by the shapes and accessories of guitars.

C

M

Y

CM

MY

CY

CMY

K

Melissa_Sugden_Project3 2.pdf 1 1

0-Oct-12 5

:09:18 PM

C

M

Y

CM

MY

CY

CMY

K

Melissa_Sugden_Project3 2.pdf 1 10-Oct-12 5:09:18 PM

95mm

20mm

93mm

95mm 95mm

25mm

75mm

95mm

25mm

74mm

PACkAGINGPackage design that prevents moisture

and weevils from destoying flour, through the use of an airtight seel, and provides

easy access without spills with the use of a scoop/measuring cup.

PhOTOGRAPhyTaken as part of a series of event photographs.

TAKE A RIDE

CreativeLAYOUT

PAGE DESIGNS

WEb dESIGNA series of different style websites done

for the same concept - the Aria by Mercedes Benz. Layout styles include

corporate, middle and creative.

WEBSITEREPORTMelissa Sugden | ID 1051619 | DES222

AriaTAKE A RIDE

Aria

PAGE DESIGNSHOME CONTACT

ABOUT

PAGE DESIGNS

HO

ME

AB

OU

TC

ON

TAC

T

LayoutCORPORATE

TAKE A RIDE

CreativeLAYOUT

PAGE DESIGNS

LayoutCORPORATE

TYPOGRAPHY

COLOUR

Edwardian Script Itc| 197pt

Bodoni MT Condensed | 34pt

HELVETICA NEUE LT COM | LIGHT CONDENSED | VARIOUS PT HELVETICA NEUE LT COM | LIGHT CONDENSED | VARIOUS PT

Helvetica Neue LT Com | Thin | 10pt

The colour scheme used in this layout was selected in order to portray modern, sophisticated and classy design to reflect the Mercedes-Benz brand and the Aria car itself. Therefore a minimal colour range was selected, the red highlight acts as a focal point on the about and contact page, and gives them a strong, bold highlight, whilst the greys, black and white work together to create a minimalistic and sophisticated feel. The greys and white colours also symbolise the Mercedes logo itself, effectively allowing the website to be recognised as the brand.

LAYOUT

The size of the main content would be 800px x 600px, as this would fit comfortably on most screens. Any white space will not be visible as the grey/white gradient will be the background image. The overall style of the layout is minimal, to draw the focus towards the image of the car and the information, and to give the website it’s clean, corporate look. A contact form has been placed to the right side of the page for easy access to contact the company. The mercedes logo has been placed on each page in the top right corner, along with the image and model name of the car, to ensure the customer knows what website they are on if they don’t see the home page. The pages can be accessed through scolling not just by clicking on the nav link.

#1A1A1A

#4E4E4E

#A91E22

#CDCCCC

#FFFFFF

#B2B2B2

#F7F7F7

This clean, san serif font reflects the typeface in the Mercedes logo and is simple and stylish

Thie Helvetica Neue font family is used consistantly throughout the site, it is used for the nav links, headers and

body copy. This font was chosen due to it’s neat, simple and smooth style to reflect the brand and the car model.

This elegant script typeface reflects the sophistication of the brand and the flowing contours of the car itself. This font is used as a

logo for the Aria concept and therefore reflects the car itself immediately.

The typography is presented in short paragraphs with

plenty of leading to ensure great readability.

CreativeLAYOUT

COLOURThis website has used colour to distinguish between pages, creating an ordered yet modern style. The colours chosen are high saturated colours which contrast well against the dark background.

The car itself being silver creates a light/dark contrast against the dark, mysterious background.

A 56% transparent black box has been placed behind the text and other elements to make them stand out against the textured background. The opaque black also helps to keep with the dark colour scheme of the background.

#55A4DB

#EE2D2F

#F6EB16

#7FC347

LAYOUTThe size of each page is 680px wide by 600 high. This website would be a horizontally scrolling layout, which allows the user to scroll along with the car. There is lots of negative space between elements to give the layout a modern, less crowded feel to relate to the isolated, dark forest image in the background.

TYPOGRAPHYThe main typeface used throughout this layout is Helvetica Neue LT Com, Thin. This was chosen as it is a simple, modern, stylish font that reflects the main subject of the site (the Aria).

As seen in the Corporate layout, the Aria logo has been written in Edwardian Script ITC. This font contrasts with the straight, simple san serif font, yet works well. This also adds an extra touch of elegance to the Introduction (home page).

LAYOUTThis layout is a mid-range layout. Every element is in the standard place, the logo in the top right hand corner, the navigation across the top, the footer and the content in the centre. The size of the layout is 800px x 600px so that all the details can be seen clearly. This design includes extra features to appeal to the 99% of people who are on the site just to look at the car and it’s info, rather than those who are buying it. To cater for this audience, the home page features a large image of the car that pops out towards the viewer, this is accompanied with a bold title and some information. There are links to download wallpapers of the car and social networking links on each page to cater for the audience.

COLOURThis layout makes use of dominant red colours to provide a strong, bold style throughout. Also it symbolises the common expression that ‘red goes faster’, just like the Aria. The black, white and greys create light/dark colour contrasts throughout the site, whilst symbolising the colour of the car and the Mercedes logo.

TYPOGRAPHYThe typography used in this website reflects the srong, bold red layout through the use of Impact as a header font, the sophistication, modern, sleek aspects of the car are reflected through the use of Arial and Arial Narrow for a symbol san serif look.

The thin arial typefaces create a nice contrast between the thick letterforms of Impact and the thick lines and shapes throughout the layout, creating a harmonious balance.

The paragraphs and amount of type on the site is kept to a minimum, and when included has a 12/14.4 leading and a short width of the text box size to ensure readability and not detract from the imagery of the cars.

#1A1A1A #4E4E4E #811517

#A91E22#CDCCCC#FFFFFF

STRONG

ARIA

THIC

KSOPHISTICATED

SIMPLE

THIN

BOLD

MODERN

ChosenDESIGN

The creative layout design was chosen as it was the most unique and interesting design to work with.

The following changes were made to the final website:- Due to the short height of the original layout file, a dark almost-black background colour was nessecary to fill in the white-space that may be left on some screens.

- The audio control html 5 function was used rather than just the pause image, that way the users can control multiple aspects of the sound to their liking ie. volume.

- The navigation has been left as images so that the user can enjoy the scrolling car feature and check out the whole site at their own pace - this site is meant to be a fun experience and is not to be rushed.

- The Mercedes logo has been moved lower to leave more visual space where the main area is.

- Some techical difficulties prevented parallax javascript from being used, so the car was made to move through the use of fixed background attachments in the CSS.

Overall the website fullfills it’s purpose as a fun, sophisticated looking side scrolling website.

LARGE FORMATThis piece was done as part of a gallery exhibition.