Lecture11 A Image


Published on

Published in: Education, Business, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Lecture11 A Image

  1. 1. SFDV2001 – Web Development Lecture 11 A: Design
  2. 2. What is Design <ul><li>Design is not art, it is not manufacturing or construction. </li></ul><ul><li>Design is about the customer not the designer. </li></ul><ul><li>Design is the process of finding solutions to problems. </li></ul><ul><li>For the web these problems usually start with the need to convey information, and produce a visually appealing page that people will return to. </li></ul>(SFDV2001:18) Design Design is the art of gradually applying constraints until only one solution remains
  3. 3. Style vs Content <ul><li>There is a debate between style and content. </li></ul><ul><li>Some designers: </li></ul><ul><ul><li>believe that style is more important than the content. </li></ul></ul><ul><ul><li>want to show off, making “cool” websites. </li></ul></ul><ul><li>Some tech people believe: </li></ul><ul><ul><li>presentation is irrelevant. </li></ul></ul><ul><ul><li>that more information is always better. </li></ul></ul><ul><li>Large organisation have rules about </li></ul><ul><ul><li>types of content. </li></ul></ul><ul><ul><li>style of presentation. </li></ul></ul><ul><li>No simple solution to this argument. </li></ul>(SFDV2001:18) Design
  4. 4. Quotations <ul><li>Questions about whether design is necessary or affordable are quite beside the point: design is inevitable. The alternative to good design is bad design, not no design at all. </li></ul>(SFDV2001:18) Design Form follows function - that has been misunderstood. Form and function should be one, joined in a spiritual union. No matter how beautiful, no matter how cool your interface, it would be better if there were less of it. Douglas Martin Frank Lloyd Wright Alan Cooper
  5. 5. Not Print Design <ul><li>Much of the work on visual design, has a tradition in print design </li></ul><ul><li>But there are some very distinct differences: </li></ul><ul><li>Paper Web </li></ul><ul><li>edges of paper scrolling </li></ul><ul><li>balance resizing </li></ul><ul><li>flow of the eye just part of display </li></ul><ul><li>grid based layouts areas </li></ul><ul><li>font control few fonts </li></ul><ul><li>colour control colours vary </li></ul>(SFDV2001:18) Design
  6. 6. Similarities <ul><li>Although web design is not print design there are similar concepts. </li></ul><ul><ul><li>Visual hierarchy </li></ul></ul><ul><ul><li>Indexing </li></ul></ul><ul><ul><li>Structure of information </li></ul></ul><ul><ul><li>Flow of information </li></ul></ul><ul><ul><li>Consistency </li></ul></ul><ul><ul><li>Font size </li></ul></ul><ul><ul><li>Ink to content ratios </li></ul></ul><ul><ul><li>Balanced graphics </li></ul></ul><ul><ul><li>..... </li></ul></ul>(SFDV2001:18) Design
  7. 7. Design Principle <ul><li>Usability Lecture 3: Morag </li></ul><ul><li>Navigation Lecture 4: Morag </li></ul><ul><li>Consistency </li></ul><ul><li>Hierarchy </li></ul><ul><li>Maintainability </li></ul><ul><li>Aesthetic </li></ul>(SFDV2001:18) Design
  8. 8. Process <ul><li>Design is a process </li></ul>(SFDV2001:18) Design
  9. 9. Usability <ul><li>Jacob Nielsen – “The usability guy” </li></ul><ul><ul><li>Usability as the principle design constraint. </li></ul></ul><ul><ul><li>Clean, consistent, easy to use. </li></ul></ul><ul><ul><li>&quot;Ultimately, users visit your website for its content. Everything else is just the backdrop.“ </li></ul></ul><ul><li>Conveying information is the principle goal of 95% of web pages. </li></ul><ul><li>The interface has to be usable to find content </li></ul><ul><ul><li>Usability testing. </li></ul></ul><ul><ul><li>Usability is the key concept to keep in mind while balancing other constraints. </li></ul></ul>(SFDV2001:18) Design
  10. 10. Navigation <ul><li>Linking and indexing </li></ul><ul><ul><li>where to put links, breadcrumbs. </li></ul></ul><ul><ul><li>visited links: using a colour theme. </li></ul></ul><ul><ul><li>colour pallet for a site. </li></ul></ul><ul><li>Roll-over effects. </li></ul><ul><li>Icons link to organisations. </li></ul><ul><li>People ignore banner ads. </li></ul>(SFDV2001:18) Design
  11. 11. Consistency <ul><li>Cognitive load. </li></ul><ul><ul><li>The mental cost of working out something new. </li></ul></ul><ul><ul><li>Familiarity detectors linked to pleasure centres in the brain. </li></ul></ul><ul><li>More efficient is not always better. </li></ul><ul><ul><li>Keyboards – Qwerty vs Dvorák </li></ul></ul><ul><ul><li>Consistency vs performance </li></ul></ul><ul><li>Coherence of site. </li></ul><ul><li>Meeting expectations. </li></ul>(SFDV2001:18) Design <ul><ul><li>99% of the time, people are on other web sites </li></ul></ul>
  12. 12. Efficient vs consistent <ul><li>Note the vowels are all under the fingers as are common letters htns </li></ul><ul><li>Consistency has won out over efficiency. </li></ul>(SFDV2001:18) Design
  13. 13. Hierarchy <ul><li>Humans love to group things </li></ul><ul><ul><li>Animals, people, objects, ... </li></ul></ul><ul><ul><li>Improves understanding. </li></ul></ul><ul><ul><li>Improves recovery of information. </li></ul></ul><ul><ul><li>Humans find it easy to learn things provided in a hierarchy. </li></ul></ul><ul><li>Broad and shallow </li></ul><ul><ul><li>Web sites need to be shallow as depth takes time. </li></ul></ul><ul><ul><li>Sitemap. </li></ul></ul><ul><ul><li>Breadcrumbs. </li></ul></ul><ul><ul><li>Sibling links viewable, usually on the left. </li></ul></ul>(SFDV2001:18) Design
  14. 14. Hierarchy (SFDV2001:18) Design a b c m o n p r q a – n – q : Breadcrumbs
  15. 15. Grids and Alignment <ul><li>Lining things up </li></ul><ul><ul><li>Humans have vertical and horizontal line detectors in our brains </li></ul></ul><ul><ul><li>Alignment familiar from word processors </li></ul></ul><ul><li>Grid layout - print media </li></ul><ul><ul><li>Most print media has a strong grid </li></ul></ul><ul><li>Discord </li></ul><ul><ul><li>If things are out of alignment people feel unsure about relationships </li></ul></ul><ul><li>Proximity and alignment used as hints to the hierarchy </li></ul>(SFDV2001:18) Design
  16. 16. Maintainability <ul><li>Not a one off </li></ul><ul><ul><li>Websites are updated regularly </li></ul></ul><ul><ul><li>Design for flexibility and expansion </li></ul></ul><ul><ul><li>Do not optimize to much for current content </li></ul></ul><ul><ul><li>Minimal time requirement for adding content </li></ul></ul><ul><li>Think about structure early </li></ul><ul><ul><li>Allow for more links, pages, images, content </li></ul></ul><ul><li>Comment your HTML </li></ul><ul><ul><li>CSS and well commented HTML is a good start </li></ul></ul>(SFDV2001:18) Design
  17. 17. KISS <ul><li>Keep it Simple Stupid </li></ul><ul><ul><li>If you are unsure, make it as simple as possible </li></ul></ul><ul><ul><li>Boredom is not a reason to change everything </li></ul></ul>(SFDV2001:18) Design Simplicity is the ultimate sophistication. Leonardo da Vinci The simplest explanation is usually the best. Ockham's Razor Make everything as simple as possible, but not simpler. Albert Einstein
  18. 18. Principle applied to Page Size <ul><li>Page size is crucial for websites. </li></ul><ul><ul><li>Length and width important, for printing and viewing. </li></ul></ul><ul><li>When deciding think about each of the principles: </li></ul><ul><ul><li>Usability too long or wide is unusable </li></ul></ul><ul><ul><li>Consistency keep pages about the same length on the whole site, if possible. </li></ul></ul><ul><ul><li>Hierarchy long pages do not conform to a hierarchical breakdown. </li></ul></ul><ul><ul><li>Navigation fragment links and easy to find content </li></ul></ul><ul><ul><li>Maintainability updating by adding a page rather than rewriting parts of a large document </li></ul></ul>(SFDV2001:18) Design
  19. 19. Page Dimensions <ul><li>Never require horizontal scrolling. </li></ul><ul><li>Page length, 2-3 screenfuls. </li></ul><ul><ul><li>more than 2-3 pages perhaps break up into multiple pages, unless primary role is printing </li></ul></ul><ul><ul><li>fragment links for internal navigation </li></ul></ul><ul><li>Above the fold </li></ul><ul><li>Never require horizontal scrolling. </li></ul><ul><li>Pages will be resized, avoid fixed width tables. </li></ul>(SFDV2001:18) Design
  20. 20. Above the Fold <ul><li>Printing term from newspapers </li></ul><ul><li>First 410 pixels of a website </li></ul><ul><li>Must convey the key message </li></ul><ul><li>Users will “bounce” off your site if they do not think it has the information they need </li></ul><ul><li>Remember the “4 second” rule </li></ul>(SFDV2001:18) Design fold / bottom of screen
  21. 21. Aesthetic <ul><li>Design eye </li></ul><ul><ul><li>Process of design / redesign </li></ul></ul><ul><li>Part of function is to be pleasurable to use </li></ul><ul><ul><li>beauty is part of pleasure </li></ul></ul><ul><ul><li>some things do the job, but are ugly and so people do not use them </li></ul></ul><ul><li>Car design </li></ul><ul><ul><li>F1 cars – all about function – beautiful form </li></ul></ul><ul><ul><li>Lada – functional but not very pretty, perhaps </li></ul></ul>(SFDV2001:18) Design
  22. 22. Design Eye <ul><li>Take the content of an alertbox article and redesign the layout. </li></ul><ul><ul><li>Simplify text </li></ul></ul><ul><ul><li>Add visual information </li></ul></ul><ul><ul><li>Clean up the code and add </li></ul></ul><ul><ul><ul><li>CSS for semantic markup </li></ul></ul></ul><ul><ul><li>Add a printable version </li></ul></ul><ul><ul><li>Add a Flash interactive version for education </li></ul></ul><ul><li>Not all of what they do is perfect but an interesting perspective. </li></ul>(SFDV2001:18) Design
  23. 23. Simplification (SFDV2001:18) Design Don’t underline any text that’s not a link, even if your links aren’t underlined. Reserve underlining for links . Because underlines provide a strong perceived affordance of clickability, users will be confused and disappointed if underlined text doesn’t have an actual affordance to match this perception. Use bold or italics for emphasis with text that’s not a link . If you are going to use underlines, reserve the technique for links. Underlines on the web have a general expectation to act like links, and users will be confused or disappointed if underlined text doesn’t match this expectation.
  24. 24. Group Dynamics <ul><li>Technical people and artistic people have different ways of communicating and very different approaches to problems. </li></ul><ul><li>Respect is perhaps the most important concept to keep in mind. </li></ul><ul><ul><li>Do not tell other people that their ideas suck. </li></ul></ul><ul><ul><li>Do not state things in a negative way, restate in a positive way or as a question. </li></ul></ul><ul><li>Communication techniques and a firm leader are important. </li></ul>(SFDV2001:18) Design
  25. 25. Who is in charge <ul><li>Technical: </li></ul><ul><ul><li>I make the page so I am in charge </li></ul></ul><ul><li>Design: </li></ul><ul><ul><li>I design the page so I am in charge </li></ul></ul><ul><li>Truth: </li></ul><ul><ul><li>depends on the boss/client </li></ul></ul><ul><li>You have to work together. </li></ul><ul><li>Somebody needs to have the final say. </li></ul>(SFDV2001:18) Design
  26. 26. Design is a Craft <ul><li>Competence vs skill </li></ul><ul><ul><li>Every adult can learn, to some level of competence, any discipline. </li></ul></ul><ul><ul><li>You can learn to sing, play an instrument, draw, program, design, act, and speak in public. But you probably can't learn to be a star. </li></ul></ul><ul><li>Natural talents </li></ul><ul><ul><li>Easy to learn some things and have a flare for a particular activity. </li></ul></ul><ul><ul><li>Great design requires more than following a set of rules. </li></ul></ul><ul><ul><li>You can learn to paint a house, but can you create a beautiful mural? </li></ul></ul>(SFDV2001:18) Design
  27. 27. Practical Considerations <ul><li>Know your own skills </li></ul><ul><li>“ KISS – Keep It Simple Stupid” </li></ul><ul><li>“ Above the fold” </li></ul><ul><li>Adding things “because they are cool” is almost always a mistake </li></ul><ul><li>If you design a page make it: </li></ul><ul><ul><li>Simple / clear </li></ul></ul><ul><ul><li>Consistent </li></ul></ul><ul><ul><li>Usable </li></ul></ul><ul><ul><li>Maintainable </li></ul></ul>(SFDV2001:18) Design