Web Design Web Design
Jan 03, 2016
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