Screen Based Design: An Introduction DW9V 34

Analysing Websites - Questions Does it meet its purpose? – Does it cover topic well, are there areas for improvement Does it speak to the audience properly? – Does it use appropriate language Is it up-to-date – is that important for the site? – Many things change e.g. weather, cinema listings Is it unbiased? – e.g. celeb fan site would always say good things Is it consistent in design and navigation? – Is colour style and navigation the same throughout the site Is it easy to use? – e.g. e-commerce site should have shopping cart etc

Design Factors Screen-based design, formats and ratios Screen display systems Characteristics of screen-based design Visual hierarchy Composition/design theory/layout grids Colour theory/contrasts Typography

Format Ratios Portrait or landscape Actual dimensions Aspect Ratio - Widescreen or standard - http://en.wikipedia.org/wiki/Aspect_ratio_(image) Different devices e.g. mobile, desktop, game

Screen Display Systems Different devices e.g. mobile, desktop, game TV, Monitor, flat screen, touch screen, multi-screen

Characteristics of Screen Design Creating Windows Creating Menu Systems Characteristics and components of windows Controls for the windows Problems in windows design with colour, text, graphics

Human Computer Interface (HCI) Importance Human Computer interface Characteristics of graphics interface (GUI) Direct manipulation graphical system Web user interface Popularity Characteristic & principles

Design Principles Visual hierarchy Composition/design theory/layout grids Colour theory/contrasts Typography

Screen Design - xbox Use of contrasting colour schemes Use of sans serif typeface Hierarchy of menu systems through different sized and styled fonts Interaction through recognized button systems on gamepad

Outcome 2 Layout Grids Composition Visual hierarchy Typography Colour theory

Layout Grids Read the following article on the use of grid design in screen design: http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

Composition Read the following article on the use of composition in screen design: http://www.digital-web.com/articles/principles_and_elements_of_design/

Visual Hierarchy Read the following articles on the use of hierarchy in screen design: http://theelearningcoach.com/media/graphics/how-to-create-a-visual-hierarchy/ http://www.sqa.org.uk/e-learning/UID01CD/page_37.htm