Plan

• Exercise week 40 presentation (Sitemap, wireframes)
• Visual design

Pensum:

Elements of User experience Chapter 7-8

Sexy Webdesign chapter 5,6

Frontend 5:12 The surface Plan - Visual design, Multimedia design

Insted of evaluating visual design ideas solely in terms of easthetically pleasing, you should focus your attention on how well they work.

How effectively does the visualdesign support the objectives of the lower planes?

• Site objectives (e.g. Brand identity)
• Mood (requirements)
• Key messages, key words
• User needs and most wanted behavior. (Personas)

 

Examples of webdesigns with CSS

http://www.free-css.com/

(Hurt-hobain, Musicshop)

- Files types : html for structure, css for style and layout, images (jpeg, gif, png)

 

Composition

 

• http://goldenratiocalculator.com/ (images on google )
• Rules of thirds
• Grid: http://960.gs/

 

Moods and Atmosphere

• Inspiration http://www.flickr.com/photos/elliotjaystocks/sets/72157608330947031/

 

Constrast

• Contrast (Shapes, Physical size, placement on screen, color).Rules

 

Colors

• Rules #2
• Kuler
• ColourLovers

Exercise:

Look at text,examples and exercises in: "Color, Contrast & Dimensions in new Design." on http://poynterextra.org/cp/colorproject/color.html

 

Text

• Rules #1
• typography/fonts ,
• Serif and sans serif
• Font types

 

 

Multimedia elements

• Still Images (gif vs. Jpeg)
  • Photo (Istockphoto or Flickr)
  • Vector graphics (Illustrator, Flash, SVG)
• Animation (Flash animations or GIF animations)
• Sound (wav, mp3,often embedded inside Flash)
• 3D (still, animation, interactive)
• Video (embed thru YouTube or Vimeo)
• Interactivity (programming)

 

 

Consistency = unified theme across the site

• Following grids
• Common Texture
• Elements are aligned
• logo = the visual identity, brand
• color schemes
• Consistency in communication elements

Example of of Branding Style Guide (3 mB)

Exercise:

Make a Mockup redesign version of Hurt Hobain or MusicShop in a imageprocessing tools like e.g. Firework or Photoshop.

Hints:

- Size of the webpage

- Layer for wireframe and guides

- Layer for header, footer, navigation, background

- Layer for home page

- Import a texture in the background layer. Try to adjust its color ( Saturation, Hue )

- Import a transparent gif or png with a logo into the header layer

- Find a color scheme on e.g. Kuler and use it for ( h1, paragraphs, links, background boxes for text, borders)

- Use Arial for headings and Verdana for paragraphs.

- etc.

 

 

---

 

 

Project 1: Make a Report (max. 10 pages) were you Analyze a website by using the model from "the elements of the user experience".

 

Hand in: Saturday the 17 of october on Fronter and send it also to your opponent.

Make a presentation with powerpoint on Tuesday the 20, and prepare as opponent 3 questions.