Web Site Design
Modified by Linda Kenney
Nov. 1, 2010
Page 1
3/16/2016
Learning Objectives
• Learn the fundamentals of Web page design.
Page 2
3/16/2016
You already know
• how to add absolute URLs, relative
•
•
•
•
links, mail links to your Web pages
how to add colors to a Web page
how to publish a Web page
about browser-safe colors
how to add internal links using named
anchors to your Web pages
Page 3
3/16/2016
You will learn
• how to add pictures to a Web page
• how to use tables
• how to lay out your page
Page 4
3/16/2016
Planning Your Web Page
• Think about the theme or purpose of your Web
page.
– What about the target audience?
• Think about what you want to place on your
page, and the source of the material you will
use.
• Ensure that your content is consistent with your
theme.
Page 5
3/16/2016
Planning Your Web Page(cont.)
• Then consider the organization of this
content.
• Create a storyboard.
• The storyboard shows the layout of the
material you plan to place on your Web
pages.
Page 6
3/16/2016
Planning Your Web Pages (cont.)
Page 7
3/16/2016
Web Site Organization
• Hierarchical
• Linear
• Random (sometimes called Web
Organization)
Page 8
3/16/2016
Hierarchical Organization
• Characterized by a
clearly defined home
page with links to
major site sections
• Often used for
commercial and
corporate web sites
Page 9
3/16/2016
Hierarchical -- Too Shallow
• Be careful that the organization is not too
shallow.
– This provides too many choices and could result in
a confusing and less usable web site
Page 10
3/16/2016
Hierarchical
-- Too Deep
• Be careful that the organization
is not too deep.
– This results in many “clicks”
needed to drill down to the
needed page.
– User Interface “Three Click Rule”
• A web page visitor should be able
to get from any page on your site
to any other page on your site
with a maximum of three
hyperlinks.
Page 11
3/16/2016
Hierarchical Organization
• Examples?
Page 12
3/16/2016
Linear Organization
• Used when the purpose of a site or
series of pages on a site is to provide
a tutorial, tour, or presentation that
needs to be viewed in a sequential
fashion.
Page 13
3/16/2016
Linear Organization Example
• http://echoecho.com/javascript.htm
Page 14
3/16/2016
Random Organization
• Sometimes called “Web”
Organization
• Utilized when there is no
clear path through the site
• May be used with artistic
or concept sites
• Generally not used for
commercial web sites.
Page 15
3/16/2016
Random Organization example
• http://www.leoburnett.ca/
Page 16
3/16/2016
Design Principles
• Repetition
– Repeat visual elements throughout design.
• Contrast
– Add visual excitement and draw attention.
• Proximity
– Group related items.
• Alignment
– Align elements to create visual unity.
Page 17
3/16/2016
Web Site Navigation
Best Practices
• Make your site easy to navigate
– Provide clearly labeled navigation in the same location on
each page.
– Most common – across top or down left side
• Another option is “breadcrumb” navigation
Examples:
http://usability.about.com/od/aboutusability/p/Breadcrumbs.htm
Page 18
3/16/2016
Web Site Navigation
Best Practices (cont.)
• Types of Navigation
– Graphics-based
– Text-based
– Interactive Navigation Technologies
• Java Applet
• Flash
Page 19
3/16/2016
Web Site Navigation
Best Practices (cont.)
• Accessibility Tip
– When graphics, a Java Applet, or Flash are
used for the main navigation of a web site,
provide clear text-based links on the bottom
of each page.
Page 20
3/16/2016
Creating a Graphical Navigation Bar
• A table can be used to create a
graphical navigation bar.
• Insert each section into a single row
table with zero border, spacing, and
padding.
• Convert each image section into a link.
Page 21
3/16/2016
More Web Site Navigation
Best Practices
• Use a Table of Contents (with links to other parts of the
page) for long pages.
• See External Links on the course menu in our
Blackboard course.
• Consider breaking long pages into multiple shorter pages.
• Large sites may benefit from a site map or site search
feature.
• http://www.conferences.unh.edu/sitemap.html
Page 22
3/16/2016
Meta (description and keywords)
See
http://www.starbucks.com/
Page 23
3/16/2016
Page 24
3/16/2016
Web Page Design
Load Time
• Watch the load time of your pages.
• Try to limit web page document and associated
media to under 60K on the home page and 100K
on other pages.
• Why should your home page be smaller than the
other pages?
Page 25
3/16/2016
Web Page Design
Target Audience
• Design for your target audience.
– Appropriate reading level of text
– Appropriate use of color
– Appropriate use of animation
Page 26
3/16/2016
Web Page Design
Colors & Animation
• Use colors and animation that appeal to your
target audience.
– Kids
• What?
– College students
• What?
– Older users
• What?
– Everyone:
• Good contrast between background and text
• Avoid animation if it makes the page load too slowly.
Page 27
3/16/2016
Web Page Design
Browser Compatibility
• Web pages do NOT look the same in all the major
browsers
• Test with current and recent versions of:
– Internet Explorer
– Firefox, Mozilla
– Opera
– Mac versions
• Design to look best in one browser and degrade gracefully
(look OK) in others
Page 28
3/16/2016
Web Page Design
Screen Resolution
• Test at various screen resolutions
– Most widely used: 1024x768 and 800x600
• Design to look good at various screen
resolutions
Page 29
3/16/2016
Web Page Design
More Best Practices
• Page layout design
• Text design
• Graphic design
• Accessibility considerations
Page 30
3/16/2016
Web Page Design
Page Layout
• Place the most important information "above
the fold“ (the area before the user scrolls).
• Use adequate "white" or blank space.
• Avoid horizontal scrolling.
• Use an interesting page layout.
Page 31
3/16/2016
Page Layout (cont.)
This is usable, but a little boring.
See the next slide for improvements in page layout.
Page 32
3/16/2016
Page Layout (cont.)
Columns make the page more interesting and it’s
easier to read this way.
Better
Page 33
3/16/2016
Page Layout (cont.)
Columns of different widths interspersed with graphics
and headings create the most interesting, easy to read
page.
Best
Page 34
3/16/2016
Page Layout Design
Techniques --Ice Design
– AKA rigid or fixed design
– Fixed-width, usually at left margin
– Examples:
– http://www.shire.net/learnwebdesign/index.html
Page 35
3/16/2016
Page Layout Design
Techniques -- Jello Design
– Page content typically centered and often configured with a
table of percentage width.
– Even margins on both sides.
– Examples:
http://www.officemax.com/
http://www.pbs.org/
http://www.ebay.com/
Page 36
3/16/2016
Page Layout Design
Techniques -- Liquid Design
– Page expands to fill the browser at all resolutions.
Often configured with a table width of 100%
– New Trend: Use CSS to configure liquid design page
layout.
– Examples:
http://www.illinois.gov/tech/
http://www.digital-web.com/
Page 37
3/16/2016
Important Web Page “Requirements” (1)
• Basic Elements
– Descriptive title (Keep it short but accurate.)
– Include your name and contact info (e-mail)
– Show the creation/modification date
– Use pictures to highlight and emphasize the
purpose of the page.
– Provide navigational content if multiple pages are
used.
Page 38
3/16/2016
Important Web Page “Requirements” (2)
• Design & Organization Recommendations
– Put the most interesting/important info at the top
of the page.
– Keep the image files small and few. Use
thumbnail image links to full size images if there
are many.
– Add alternate text to your images. Not all the
Web page visitors are sighted. The alternate text
will clue them in about the purpose of the picture.
– Use browser-safe colors. Non-standard colors
may appear differently on other systems.
Page 39
3/16/2016
Important Web Page “Requirements” (3)
• Design & Organization Recommendations
– Use the default fonts. Specialty fonts may not be
installed on the viewer’s computer - so an
alternate font will be used, potentially affecting
the impact of your page.
– Use only a few fonts. The display may become
too “busy”.
– Use a style sheet. Separate display info from
content. This simplifies cosmetic changes.
– Use subtitles and headings to break up content.
Page 40
3/16/2016
Important Web Page “Requirements” (4)
• Design & Organization Recommendations
– Use the spell checker! TextPad vs. Notepad
– Preview/test your page. Nothing is more
frustrating than a Web page that is incomplete
because the author failed to fix display issues.
– Write, view and test all Web pages before
installing them on a Web server.
– Make sure you test them again once you have
uploaded them to your server.
Page 41
3/16/2016
Important Web Page “Requirements” (5)
• Keep download times short.
• Make your pages portable! (Use
relative links!)
Page 42
3/16/2016
Check your work.
• Validate. http://validator.w3.org
Page 43
3/16/2016
A Web Site Construction
Checklist
• Remember the three C’s of Web page
design:
– quality Content
– reader Convenience
– artistic Composition.
Page 44
3/16/2016
Best Practices Checklist
From Web Developer & Design Foundations
with XHTML
http://terrymorris.net/bestpractices
•Page Layout
•Browser Compatibility
•Navigation
•Color and Graphics
•Multimedia
•Content Presentation
•Functionality
•Accessibility
Page 45
3/16/2016
Information from
,
• Web 101 ,Third Edition by Wendy G. Lehnert &
Richard L. Kopec (Addison Wesley)
• Web Developer & Design Foundations with XHTML ,
by Terry Felke-Morris (Addison Wesley)
Page 46
3/16/2016