05 Web Design-1
05 Web Design-1
Learning
Outcomes
In this chapter, you will learn how to ...
Describe the most common types of website
organization
Describe principles of visual design
Design for your target audience
Create clear, easy-to-use navigation
Improve the readability of the text on your web pages
Use graphics appropriately on web pages
Apply the concept of universal design to web pages
Describe web page layout design techniques
Apply best practices of web design
http://nasa.gov
Consider the
target audience
of these sites.
WebSite Organization
nHierarchical
nLinear
nRandom
(sometimes called Web Organization)
Organization
n A clearly defined home page
n Navigation links to major site sections
n Often used for commercial and corporate websites
Linear Organization
nRepetition
n Repeat visual elements throughout design
nContrast
n Add visual excitement and draw attention
nProximity
n Group related items
nAlignment
n Align elements to create
visual unity
n Color Wheel
n Primary Colors
n Secondary Colors
n Tertiary Colors
Wheel (1)
Wheel (2)
n Split Complementary – a main color, the
color opposite it on the color wheel (the
complement) and two colors adjacent to
the complement
n http://meyerweb.com/eric/tools/color-blend
n http://colorschemedesigner.com
n http://www.colorsontheweb.com/colorwizard.asp
n http://www.leestreet.com/QuickColor.swf
n http://kuler.adobe.com
n http://www.colorspire.com
n http://colrd.com
n http://hslpicker.com
Do you really
need to see a
Use only necessary images photo of my
dog right
now?
Reuse images
n Consider:
n Navigation Bars
n Breadcrumb Navigation
n Using Graphics for Navigation
n Dynamic Navigation
n Site Map
n Site Search Feature
n “Skip to Content” Hyperlink
30
Copyright © Terry Felke-Morris
+ Web Page Design Page Layout (2)
Better
31
Copyright © Terry Felke-Morris
+ Web Page Design Page Layout (3)
Best
Columns of different widths interspersed
with graphics and headings create the most
interesting, easy to read page.
32
Copyright © Terry Felke-Morris
+ Page Layout Design Techniques
Fixed Layout
◦ AKArigid or
“ice” design
◦Fixed-width often
at left margin
◦ More appealing if
fixed with content is centered
33
Copyright © Terry Felke-Morris
+ Page Layout Design Techniques
Fluid Layout
◦ AKA “liquid” design
◦Expands to fill the browser
at all resolutions.
◦ Adaptation:
◦ Page content typically
centered and
often configured with a
percentage width such as
80%
34
Copyright © Terry Felke-Morris
+ Design for the Mobile Web
n Three Approaches:
n Separate .mobi mobile site
n Host the mobile site within your current domain
n Configure your current website for mobile display
using responsive web design techniques
35
Copyright © Terry Felke-Morris
+ Mobile Design Quick Checklist
n Bandwidth issues
n Single-column layout
n Maximize contrast
36
Copyright © Terry Felke-Morris
+ Responsive Web Design
37
Copyright © Terry Felke-Morris
+ Web Design Best Practices Checklist 38
http://terrymorris.net/bestpractices
•Page Layout
•Browser Compatibility
•Navigation
•Color and Graphics
•Multimedia
•Content Presentation
•Functionality
•Accessibility