1 / 13

Screen Based Design

Discover key factors in screen-based design like visual hierarchy, composition, typography, and color theory. Learn how to create user-friendly layouts and menus while considering different devices and ratios. Evaluate website effectiveness by examining design consistency, usability, up-to-date content, and unbiased presentation.

ronaldbrock
Download Presentation

Screen Based Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Screen Based Design Screen Based Design: An Introduction DW9V 34

  2. 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

  3. 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

  4. 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

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

  6. 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

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

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

  9. 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

  10. Outcome 2 Layout Grids Composition Visual hierarchy Typography Colour theory

  11. 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/

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

  13. 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

More Related