Web DesignWeb Design

Why is design important Why is design important for the web?for the web?

Traditional systemsTraditional systems You controlled the userYou controlled the user You know exactly who you are You know exactly who you are

designing fordesigning for You know the exact screen specYou know the exact screen spec

Web Pages….Web Pages…. You don’t know how they got You don’t know how they got

there – via home page or directthere – via home page or direct Search EnginesSearch Engines BookmarksBookmarks

Planning the site..Planning the site.. Design your siteDesign your site What are your goals for the site? What are your goals for the site? Who is the audience for the Web Who is the audience for the Web

site? site? Is a web site useableIs a web site useable

If its not, then it will not attract visitorsIf its not, then it will not attract visitors How will you measure the success of How will you measure the success of

your site? your site? Consider the purpose of the siteConsider the purpose of the site Test the site with usersTest the site with users

Design PrinciplesDesign Principles

UseableUseable ColourColour LayoutLayout

Predictability / Consistency / Guidance not Predictability / Consistency / Guidance not controlcontrol

Economy - Minimum number of steps Economy - Minimum number of steps necessarynecessary

AccessibilityAccessibility Making it available to allMaking it available to all

Web Page DesignWeb Page Design

Storyboards / screen mockupsStoryboards / screen mockups Flow Charts / Page linkageFlow Charts / Page linkage

StoryboardsStoryboards

A4 piece of paper, pen, Post-it NotesA4 piece of paper, pen, Post-it Notes PowerPoint with notes view onPowerPoint with notes view on Needs details of fonts, sizes, style Needs details of fonts, sizes, style

sheet, pictures, textsheet, pictures, text Should be able to pass it to someone Should be able to pass it to someone

else and they build itelse and they build it

Rough exampleRough example

AdvantagesAdvantages and and Disadvantages of Disadvantages of

StoryboardsStoryboards AdvantagesAdvantages

Paper based so quick to drawPaper based so quick to draw Application independentApplication independent LittleLittle or no skills required ! or no skills required !

DisadvantagesDisadvantages Does not provide a realistic front endDoes not provide a realistic front end Does not provide full functionalityDoes not provide full functionality Difficult to change (rub out!)Difficult to change (rub out!)

Designing a templateDesigning a template

Gets your style sheet sortedGets your style sheet sorted Build with rubbish content – just for Build with rubbish content – just for

page layoutpage layout http://www.soc.staffs.ac.uk/flk1/test/http://www.soc.staffs.ac.uk/flk1/test/

test.htmtest.htm

A web site map / Flow A web site map / Flow chartchart

Drawn by hand / Done On ComputerDrawn by hand / Done On Computer Shows navigation through the web siteShows navigation through the web site Can end up being a spiders web messCan end up being a spiders web mess

Home

Company infoAbout Us Products

Multi-Dimensional MapMulti-Dimensional Map

Home

Products Company Map Latest Offers

CD DVD

Design Aspects -Design Aspects -ColourColour

ColourColour

Source: W3 Schools

20062006 16,777,2116,777,2166

65,53665,536 256256

January 2006January 2006 81%81% 16%16% 3%3%

July 2005July 2005 77%77% 20%20% 3%3%

January 2005January 2005 72%72% 25%25% 3%3%

July 2004July 2004 69%69% 28%28% 3%3%

January 2004January 2004 65%65% 31%31% 4%4%

July 2003July 2003 55%55% 40%40% 5%5%

January 2003January 2003 51%51%   44%44% 5%5%

October 2002October 2002 49%49% 46%46% 5%5%

Colour and DesignColour and Design

Colour is very effective for highlighting, Colour is very effective for highlighting, but must be used carefully.but must be used carefully.

Don’t use too many colours on one Don’t use too many colours on one screen screen

Be consistent across the whole system Be consistent across the whole system one colour should not be used for more one colour should not be used for more

than one purpose.than one purpose. Colours which clash should be avoided Colours which clash should be avoided

e.g. purple with pink.e.g. purple with pink.

Colour BlindColour Blind

Care should be taken as 1 in 12 Care should be taken as 1 in 12 men and 1 in 200 women are men and 1 in 200 women are colour blind.colour blind.

Colour BlindnessColour Blindness

http://www.vischeck.com/http://www.vischeck.com/ http://http://

www.iamcal.com/toys/colorswww.iamcal.com/toys/colors/index.php/index.php

Hats.Hats.As seen by a As seen by a person with person with

deuteranopia.deuteranopia.

As seen by a As seen by a person with person with protanopia, protanopia,

another form of another form of red/green deficit.red/green deficit.

                                                        

                                        

                                                        

                                        

                                                        

                                        

Presentation And Presentation And ContrastContrast

Positive presentation is when the Positive presentation is when the background is fairly subdued, i.e. background is fairly subdued, i.e. white background, dark textwhite background, dark text

Negative presentation – dark Negative presentation – dark background, white text.background, white text.

Bright colours can be too much Bright colours can be too much in blocks. Consider panelsin blocks. Consider panels

PanelsPanels

FontsFonts

Type FaceType Face Font Size to be readable - clear and not Font Size to be readable - clear and not

unusualunusual Use default or range of fonts as the Use default or range of fonts as the

defaultdefault Don’t use more than 2 fonts on a page Don’t use more than 2 fonts on a page

(unless you are displaying computer (unless you are displaying computer code then a third font is ok)code then a third font is ok)

Some fonts can be Some fonts can be difficultdifficult to read to read, and , and should be avoided.should be avoided.

Left Justified most of the text – can Left Justified most of the text – can centre or right justify a few lines for centre or right justify a few lines for effecteffect

Contrast foreground to backgroundContrast foreground to background Avoid blinking, zooming or moving textAvoid blinking, zooming or moving text

Mac or PC – Mac or PC – spacing and spacing and

fonts..fonts..

Font sizeFont size

W3C recommends that you let W3C recommends that you let users set the base font size in users set the base font size in their browser and that you set their browser and that you set all sizes using "em". all sizes using "em".

Using em, if the user-set default Using em, if the user-set default is 12-point, then a 2-em text is 12-point, then a 2-em text indent would be 24-point, but if indent would be 24-point, but if the user used the text zoom the user used the text zoom feature of the browser to change feature of the browser to change the size to 16-point, the indent the size to 16-point, the indent would change to 32-point. would change to 32-point.

Browser font size..Browser font size..

http://www.soc.staffs.ac.uk/flk1/test/font.htm