website design2
DESCRIPTION
TRANSCRIPT
Website Design2
Robert Clarkson
Ergonomics of Human System Interaction (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.
Clarity
Get to the point.
Bullet points when using lists.
Most pertinent information first.
Bold important words.
Discriminability
Light text on a dark background, and vice versa.
Careful when using gradients behind text. Buttons look like buttons.
Conciseness
NOT: So the bit the plant stands up on is sorta like lighter than the darker green of the other plants that can maybe be available in the wild.
The plant stem is light green.
Consistency
Keep navigation in the same place, ie. Don't move it around between pages.
Clicking on a navigation link takes you to the same place no matter what page you are on.
Detectability
Don't obscure the information people are after. Tables are a good way of portraying a lot of information neatly.
Legibility
Comprehensibility
The 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?
Clients want more WOW or ZING!
Having said all that if we made websites and stuck with this stuff to the letter they would be all be boring black and white straight 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 your client wanting more "frills".
Website template outline
Fixed width www.howstuffworks.com Preferred by designers, can set pixel widths for elements on the page.
Variable width
www.slashdot.orgdeveloper.android.com/resources
Preferred by technical websites, all about the information.
Form follows Function
It doesn't matter how pretty your website is if no one can use it.
Typography
Would you please stop your dog from pooing on our lawn
WOULD YOU PLEASE STOP YOUR DOG FROM POOING ON OUR LAWN
Font Types
Serif
Sans-Serif
MonospaceMonospaced fonts were widely used in early computers and computer terminals, which often had extremely limited graphical capabilities.
Web safe Fonts
http://www.w3schools.com/css/css_websafe_fonts.asp
Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by web content authors to increase the likelihood that content will be displayed in their chosen font.
If a visitor to a website does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families.
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.
Options to get round the font problem
Use an Image containing the font
Use a font thats close to the one you want
The Web Open Font Format (WOFF) is a font format for use in web pages. It is in the process of being standardized as a recommendation by the World Wide Web Consortium (W3C)
! Warning Out of scope !Use flash and import the font into therehttp://www.mikeindustries.com/blog/sifr/
Use a Javascript SVG font renderer converter such as Cufonhttp://cufon.shoqolate.com/generate/
Helvetica
http://www.youtube.com/watch?v=McZSUjP1AcE
Find a font
That suggests "old""modern""scary""happy"
Scalable Vector Graphics
SVG has been in development since 1999 by a group of companies within the W3C
All major modern web browsers support and render SVG markup directly with the very notable exception of Microsoft Internet Explorer (IE), although Internet Explorer 9 supports the basic SVG feature set.
Whitespace
White space should not be considered merely 'blank' space — it is an important element of design which enables the objects in 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 is limited in order to get as much vital information on to the page as possible. A page crammed full of text or graphics with very little white space runs the risk of appearing busy, cluttered, and is typically difficult to read. Some designs compensate for this problem through the careful use of leading and typeface.
Whitespace
Judicious use of white space can give a page a classic, elegant, or rich appearance. For example, upscale brands often use ad layouts with little text and a lot of white space. Inexpert use of white space can make a page appear incomplete.
More interesting information about whitespace here:http://www.alistapart.com/articles/whitespace Find a website with interesting use of whitespace