Think about your favorite web sites.
How do you use the sites?
What stands out about their design?
Principles of web design
• Keep it simple
• Communicate, don’t decorate
• First priority is the user experience
Keep it simple
• Occam’s Razor
• Given any two solutions to the same
problem, all other things being equal, the
simplest solution is the best.
• Design is not about decoration.
• Design is about discipline – creating
communication with a purpose.
• Design the content, not the box its in.
How people read
• They move quickly, because people don’t
like looking at a screen
• They are impatient, often clicking on the
ﬁrst promising link
• They scan, don’t read
What that means?
• You must design for the way people use the
web, not the way we think they should
• Think about your new visitors and your
• Keep as much content as possible above
• We must go out of our way to make text
• Use shorter line lengths where possible -
and never let type run the entire width of
• Choose type faces based on readability.
• Make sure your site is indexed properly in
• Use keywords on your site - in title, in H1
tags and in body of your site
• We will discuss Search Engine Optimization
(SEO) more later this semester
• Usability: How easy it is to use a web site’s
• Make sure readers can ﬁnd what they are
looking for - news, airline tickets, friends on
• Make sure readers understand how your
site is supposed to function
• Do usability testing
• Contrast, Repetition, Alignment, Proximity
• Repetition is most important
• Repeat certain visual elements on every
page of your web site.
• This helps readers know that they are still
on your site, and it provides unity and
• Standard web site is 960 pixels with either
12 or 16 columns.
• Each column has 10 pixels of margin on the
left and right, making 20-pixel wide gutters
• 960 grid is not required, but using a grid
will help your overall design.
Standard ad sizes
• 4 sizes publishers have agreed to support.
• 300 x 250 (medium rectangle)
• 180 x 150 (rectangle)
• 160 x 600 (skyscraper)
• 728 x 90 (leaderboard)
All of the pages are arranged as peers – and all
accessible from each other. Common for sites with
few topics (home, about us, contact us, products).
Like the ﬂat structure, with an additional
list of contents. An example would be
the A-Z directory at drake.edu.
A structure where you can only access
a lower-level page via its parent.
Example: News sites sports and entertainment areas.
There are many ways of browsing to the same
content. The structure of the content can be different
depending on the mode you’re looking in.
Example: Amazon.com, which has multiple ways you
might reach the book you are looking for.
Current web trends
• Simple layout
• Centered content
• Design the content, not the page
• 3D effects, but used sparingly
• Soft, neutral background colors
• Strong color, used sparingly
• Plenty of white space
• Who is the audience?
• What is the purpose of the site? The
• Does the site achieve its purpose?
• Links make sense, are helpful and work.
• Well-organized. Logical structure.
• Easy to navigate to pages, return home.
• Reasonably short download time.
• Immediately recognizable brand.
• Simple is best.
• Consistency of design across site.
• Readability: caps/lowercase used
appropriately, color isn’t intrusive, typeface
easy to read, white space used attractively.
• Looks professional.
• Error-free and interesting.
• Ads aren’t intrusive/annoying.
• Appropriate use of moving images, video,
sound, photos, graphics.
• Elements compliment each other (visuals,
• Appropriate voice/style of writing for the
Sources: webdesignfromscratch.com, wikipedia