1 / 79

Graphical Interface Design for the Web

Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com. Graphical Interface Design for the Web. Activity: Group Discussion. In your group, introduce yourselves and answer the following 3 questions: What do you hope to get out of this course? (name 2 things)

gizi
Télécharger la présentation

Graphical Interface Design for the Web

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. Louisa Lambregts, Algonquin College, lambrel@algonquincollege.com Graphical Interface Designfor the Web

  2. Activity: Group Discussion In your group, introduce yourselves and answer the following 3 questions: • What do you hope to get out of this course?(name 2 things) • Have you used Photoshop? How much? • Have you used Fireworks? How much? Designate a speaker for your group to share a summary of responses.

  3. Course Topics Design Basics • Principles and Elements of Design • Colour Theory • Layout • Typography Usability • Translating Design into Web Functionality • Understanding Form versus Function

  4. What is Good Web Design? Web Design Gone Horribly Wrong http://www.esupersoft.com/lips/ http://www.evangelcathedral.net/welcome.htm

  5. What is Good Design? • Aesthetically engaging • Functionality works • Content is easy to find and understand • Meets need of client*

  6. Form vs Function Form: Function:

  7. Form vs Function Form: Presentation - aesthetics, graphics, visual appeal Function: Usability - functionality, the effective presentation of information, and efficiency

  8. Form vs Function Form ever follows function. Architect Louis Henri Sullivan , 1896

  9. Form vs Function Heather’s Consignment http://www.heathersdesignerconsignments.com/

  10. Form vs Function Striking a balance Kevin Lucius – Portfolio Sitehttp://www.kevinlucius.com/

  11. Form vs Function Need to balance form and function. But how?

  12. Form vs Function “Have a strong purpose and to follow that to the end.” http://www.digital-web.com/articles/form_vs_function/

  13. Form vs Function 5 Key Questions What will the site do and how will it work? Who will use it? What will the end result be? What technologies will be used to produce that functionality Will everyone be able to access and understand it? http://www.digital-web.com/articles/form_vs_function/

  14. Two Key Questions • What are the goals of the site? • Who is the target audience? These 2 questions should guide every website design decision.

  15. Every design element on a website must have a purpose. Otherwise, it is clutter!

  16. Every design element on a website must have a purpose. Otherwise, it is clutter!

  17. “Graphic design is visual information • management using the tools of layout, • typography, and illustration to • lead the reader's eye through the page.”

  18. Graphic Design for the Web is alsoabout designing the emotional impactyou want to have on people.

  19. Graphic Design for the Web • is also about designing the • emotional impact that you • want people to have.

  20. Graphic Design for the Web is alsoabout designing the emotional impact that you want people to have.

  21. Graphic Design for the Web is alsoabout designing the emotional impactyou want people to have.

  22. Effective Web Interface Design 1. Understand How Users Behave On the Web • People scan rather than read • Are impatient

  23. Principles of Effective Web Design • Understand How Users Behave On the Web • Click rather than think • “first reasonable option”

  24. Principles of Effective Web Design • Understand How Users Behave On the Web Users want control • to know where they are and how to get back • consistent presentation of information

  25. Principles of Effective Web Design • Content is More Important than Design • People will tolerate bad design if the content is good • “Coolness” will quickly lose its novelty Craig’s List

  26. Principles of Effective Web Design • Apply Website Conventions • Past surfing creates expectations of how websites should work • Quick learning curve for site navigation http://www.hikano.com/ MOMA Color Chart

  27. Principles of Effective Web Design • Write Concisely In response to the concerns, the NCAA announced that the baseball rules committee will recommend a maximum batted-ball exit velocity of 93 mph and a change in the size and weight specs of non-wooden bats beginning with the 1999 season.

  28. Principles of Effective Web Design • Write Concisely Responding to the concerns, the NCAA announced new recommendations from the baseball rules committee, to begin with the 1999 season: • Batted-ball exit speed maximum of 93 mph • Change in size and weight specifications for non-wooden bats

  29. Principles of Effective Web Design • Write Concisely NCAA Suggests Batting Changes Growing concerns over size and weights of bats has resulted in the following changes: • Batted-ball exit speed maximum of 93 mph • Change in size and weight specifications for non-wooden bats

  30. Principles of Effective Web Design • Keep It Simple • Less is more • Trying to clarify too much is confusing! http://www.playfood.ca/ Click here to see and print our brochure Brochure

  31. What is Good Web Design? Users like the design but are drawn to the content Design “interfaces” the user with the content. Bus Full of Hippies Template • Visuals are appealing • Lead the eye to the content • Does not interfere with finding information

  32. What is Good Web Design? Users can easily move around intuitive via navigation User knows where they are and how to get to where they want to go. http://www.socialvibe.com/ • Main navigation block is prominent and easy to see • Roll-overs show hover and active states • Secondary navigation and search not dominant yet easy to find

  33. What is Good Web Design? Writing is concise and graphics support main message. http://secondandpark.com/ • Design supports goals of site • Design elements and written words carefully selected • Personality of individual clearly comes through

  34. What is Good Web Design? “Less is More” http://www.lachlanbailey.com/ • Thoughtful decision-making about elements toinclude and leave out • Spacious and uncluttered

  35. Principles for Graphic Design 1) Guide the Eye • Colour • Position • Contrast • Size • Repetition and Patterns • Movement

  36. Principles for Good Web Design 2) Use Spacing • Padding • White Space • Line Spacing

  37. Principles for Good Web Design 3) Use Effective Typography • Font Choice • Font Size • Line Length • Paragraphing (justified vs left-justified)

  38. Principles for Good Web Design 4) Alignment • Elements line up consistently • Grid Layout

  39. Principles for Good Web Design 5) Consistency • Graphic elements • Colours • Headers • Font • Main and sub-pages are graphically tied together

  40. Principles and Elements of Design Activity 1) • Work through the following interactive tutorial: • http://www.artsconnected.org/toolkit/explore.cfm Google search “artsconnected toolkit” 2) Review Article #1 on the Wiki: Principles of Design http://www.digital-web.com/articles/principles_of_design/

  41. Principles and Elements of Design Terminology • Balance • Symmetry/Asymmetry • Similarity/Proximity • Unity • Proximity/Grouping • Repetition/Rhythm • Emphasis • Placement • Continuance • Isolation • Contrast • Proportion Line Shape Colour Texture Closure Pattern

  42. Principles and Elements of Design Balance Symmetry http://2008.gr0w.com/

  43. Principles and Elements of Design Balance Asymmetry

  44. Principles and Elements of Design Balance Asymmetry

  45. Principles and Elements of Design Unity Proximity and Repetition

  46. Principles and Elements of Design Unity Proximity and Repetition Same in terms of size, colour, texture, shape, and proximity

  47. Principles and Elements of Design Emphasis (Dominance) Proximity and Repetition Placement Contrast Proportion Having a focal point

  48. Principles and Elements of Design Emphasis Contrast

  49. Principles and Elements of Design Elements of Perception Continuance

  50. Principles and Elements of Design Examples http://uk.moo.com/ http://37signals.com/

More Related