Website design2


Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Website design2

  1. 1. Website Design2 Robert Clarkson
  2. 2. Ergonomics of Human SystemInteraction (ISO 9241)• Clarity: the information content is conveyed quickly and accurately.• Discriminability: the displayed information can be distinguished accurately.• Conciseness: users are not overloaded with extraneous information.• Consistency: a unique design, conformity with user’s expectation.• Detectability: the user’s attention is directed towards information required.• Legibility: information is easy to read.• Comprehensibility: the meaning is clearly understandable, unambiguous, interpretable, and recognizable.
  3. 3. ClarityGet to the point.Bullet points when using lists.Most pertinent information first.Bold important words.
  4. 4. DiscriminabilityLight text on a dark background, and vice versa.Careful when using gradients behind text.Buttons look like buttons.
  5. 5. ConcisenessNOT: So the bit the plant stands up on is sorta like lighter thanthe darker green of the other plants that can maybe beavailable in the wild.The plant stem is light green.
  6. 6. ConsistencyKeep navigation in the same place, ie. Dont move it aroundbetween pages.Clicking on a navigation link takes you to the same place nomatter what page you are on.
  7. 7. DetectabilityDont obscure theinformation people areafter.Tables are a good wayof portraying a lot ofinformation neatly.
  8. 8. Legibility
  9. 9. ComprehensibilityThe information is easy for the person to understand.Depends a lot on target audience.How old / clever is the person the information is aimed at?
  10. 10. Clients want more WOW or ZING!Having said all that if we made websites and stuck with thisstuff to the letter they would be all be boring black and whitestraight lined boxed things.Your client might ask for more WOW factor or, a bit more ZING,or maybe even lightening bolts, because that looks cool.The trick is to try to maintain all these principles despite yourclient wanting more "frills".
  11. 11. Website template outlineFixed widthwww.howstuffworks.comPreferred by designers, can set pixel widths for elements onthe page.Variable by technical websites, all about the information.
  12. 12. Form follows FunctionIt doesnt matter how pretty your website is if no one can use it.
  13. 13. Typography Would you please stop your dog from pooing on our lawn WOULD YOU PLEASE STOP YOUR DOG FROM POOING ON OUR LAWN
  14. 14. Font TypesSerifSans-SerifMonospaceMonospaced fonts were widely used inearly computers and computer terminals,which often had extremely limitedgraphical capabilities.
  15. 15. Web safe Fonts fonts are fonts likely to be present on a wide range ofcomputer systems, and used by web content authors toincrease the likelihood that content will be displayed in theirchosen font.If a visitor to a website does not have the specified font, theirbrowser will attempt to select a similar alternative, based on theauthor-specified fallback fonts and generic families.
  16. 16. Why are web fonts this way A technique to download remote fonts was first specified in the CSS2 specification, which introduced the @font- face rule. It was (and remains) controversial because using a remote font as part of a web page allows the font to be freely downloaded. This could result in fonts being used against the terms of their license or illegally spread through the web. TrueDoc (PFR), Embedded OpenType (EOT) and Web Open Font Format (WOFF) are formats designed to address these issues.
  17. 17. Options to get round the font problemUse an Image containing the fontUse a font thats close to the one you wantThe Web Open Font Format (WOFF) is a font format for use inweb pages. It is in the process of being standardized as arecommendation by the World Wide Web Consortium (W3C)! Warning Out of scope !Use flash and import the font into there a Javascript SVG font renderer converter such as Cufon
  18. 18. Helvetica a fontThat suggests"old""modern""scary""happy"
  19. 19. Scalable Vector GraphicsSVG has been in developmentsince 1999 by a group ofcompanies within the W3CAll major modern web browserssupport and render SVG markupdirectly with the very notableexception of Microsoft InternetExplorer (IE), although InternetExplorer 9 supports the basicSVG feature set.
  20. 20. WhitespaceWhite space should not be considered merely blank space —it is an important element of design which enables the objectsin it to exist at all, the balance between positive (or non-white)and the use of negative spaces is key to aesthetic composition.When space is at a premium, such as some types of magazine,newspaper, and yellow pages advertising, white space islimited in order to get as much vital information on to the pageas possible. A page crammed full of text or graphics with verylittle white space runs the risk of appearing busy, cluttered, andis typically difficult to read. Some designs compensate for thisproblem through the careful use of leading and typeface.
  21. 21. WhitespaceJudicious use of white space can give a page a classic,elegant, or rich appearance. For example, upscale brands oftenuse ad layouts with little text and a lot of white space. Inexpertuse of white space can make a page appear incomplete.More interesting information about whitespace here: a website with interesting use of whitespace