Web Design
Designing for the Internet
What
makes a good Web Site?
Visually appealing
Provides real, informative and useful content
Current and timely
Interactive and responsive
Easy to find and use
Provides a service
Fast to download
General
Design Tips
Planning
Page layout
Display type
Body text
Visuals
Colour
Web Site
Planning
What is the purpose of the Site?
Who are you targeting?
Where are they?
What do they need?
How will they navigate the Site?
What actions do you want them to take?
What information do they need?
How will they contact you?
Why would they visit again?
Response Times
WWW = World Wide Wait.
Speed may be the number one
usability issue
The one-second goal.
The ten-second maximum.
Consistent & predictable
are better.
Information about download sizes are important.
Speedy downloads
Use fewer and
smaller graphics.
Reuse to take advantage of
cache
use color table cells and font
changes instead
Make the top of
the page meaningful without graphics
use
ALT attributes.
top
will get drawn with WIDTH and HEIGHT specified for all images and tables.
Dont use complex tables
Navigation
Where am I?
identify your web page to make
it relative to the WEB at large
identify
your location in the site.
Where have I been?
Back button solves this
Where can I go?
Need good visibility e.g. easy
to see links
Navigation Design
Buttons and
bars are easy to understand and use. The visitor knows what page they are
visiting and where they are going
Consistent
navigation design on all pages
Avoid
navigation images where you have to roll your mouse over it to read the links
If your site is
large, consider a site or index map
Homepage
Where am I? What does this
site do?
Entry point to the sites
navigation scheme.
a directory of the main
content areas
Summarize most important news
or promotions.
Provide a search feature.
Home page examples
http://www.eyeball-design.com
What is
AIDA?
Attention
White space, borders, colour, images, headlines
Interest
Useful factual content, easy to read, show
enthusiasm
Desire
promote benefits, create urgency, create
interest
Action
Make it easy to take action, how to use, how to
get there, how to contact, valuable
Page
layout
Organise pages along an invisible vertical line
Add white space to the top and bottom of each
page
Asymmetry of a page generates a dynamic image
Symmetrical pages are conservative
Page borders should reflect the desired image
Focal Point On Web Pages
You need
something that draws your eye in and pulls you to the page
Focal point is
usually a logo or image and its the dominating design. Helps to create a
hierarchy of information
Logo text size
is usually the biggest so make other text headings smaller in size. If its an
image, reduce all other images in size.
Do not use
large navigation buttons as the only source of interest
Create contrast
in logo design by using different type (bold, size, style, color)
Display
Type
Headlines / Titles
Choose contrasting font to add impact
Significantly larger than the page text
Use white space to add impact
Use condensed heavy sans serif fonts
Keep them short!
Be careful with upper case
Avoid negatives
Body
Text
Serif fonts are easier to read when there is a
lot of text (eg: Times Roman, Garamond, Bookman)
Do NOT mix typefaces and sizes
Avoid over-using bold and italicised text
Used measured amounts of white space to
separate paragraphs
Dont make sentences too long
Keep pages short
Visuals
Let size reflect importance
Photographs should direct your readers eyes
into the page
Remove unnecessary detail from photos
Add borders to photographs with light
backgrounds
Avoid scattered small clip art - a single large
illustration is more effective
Design
Considerations--User Platforms
Windows 95/98/NT/2000 97%
Mac 2%
Unix >
1%
Design
Considerations--Browsers Used
Internet Explorer 81%
IE6 - 8%
IE5 - 87%
IE4 - 5%
Netscape
16%
NS6 - 5%
NS4 - 91%
NS3 - 4%
Fonts
for the Web
Pages can only be displayed in the chosen font
is available on the client machine
Use only safe fonts or specify several
Default
safe fonts - PC
Arial
Arial Black
Arial Narrow
Arial Rounded MT Bold
Book Antiqua
Bookman Old Style
Century Gothic
Century Schoolbook
Courier
Courier New
Garamond
MS Dialog
MS Dialog Light
MS LineDraw
MS Serif
MS Sans Serif
MS SystemX
Times New Roman
Verdana
Default
safe fonts - Mac
Courier
Helvetica
Palatino
Times
Additional
fonts for users with laser printers
New Century Schoolbook
Avant Garde
Bookman
Relative
font sizes
Even when the typeface used is common to both
Windows and Mac, type will look 2 to 3 points larger on Windows Web Browsers
This can have a major impact on your page
layouts!
Page
layout
Absolute positioning is only available using
Dynamic HTML
This cannot be viewed using many browsers
Using
Colour
On screen colours are achieved by mixing red,
green and blue (RGB)
Each amount of each colour is specified by a
number 0 to 255
In HTML colours are described using the
hexadecimal value
Link colours, text colours, backgrounds
colours, etc are specified in hexadecimal
Browser
Safe Colours
Some monitors display only 256 colours
Try to build your pages using only browser
safe colours
Using any combination of these numbers
Use colour consistent with accepted conventions
Use colour to group similar items
Use colour to establish patterns
Use colour to differentiate
Decide a rule of colour and use throughout the
Site
Use less colour
not more.
Limiting
the use of colour will maximise the impact
Designing
with Colour
Use colored backgrounds with care!
Images
JPG Joint
Photographic Experts Group
Used for photographic images
Can achieve very high compression
Image quality is always lost
GIF Graphic
Interchange Format
Used for any image that is NOT photographic
Uses a maximum of 256 colours
Can be transparent
Can be interlaced
Used for animations
PNG Portable
Network Graphic
New standard designed with best features of
GIF/JPG
Only supported by the latest browser
Image
Resolution
Images for the Web should be saved at 72 or 96
dpi
Higher resolutions will not be visible on the
screen
Higher resolutions result in a much greater
file size for no benefit
JPEG
Images
GIF
Images
Anti-Aliasing
Images
Anti-aliasing
is the process of adding intermediate colours to smooth jagged edges
Royalty
Free Images
The
following are royalty-free image collections which can be used on the
Internet:
Hemera Photo Objects
CDs full of transparent floating objects
Corel Web Gallery
Thousands of GIF and JPGs ready for the Internet
Animations
Can be
added in a variety of ways:
Animated GIF Most
browsers
Dynamic HTML Version
4 browsers + (restricted
under NS)
JavaScript NS3+,
IE4+
Java Applet Java
VM on PC required
Shockwave/Flash Plug-in
required
QuickTime Plug-in
required
Frames Design
Avoid using frames until you
become more skilled at web design
If you use them, keep them
unobtrusive. Dont use borders
Do not use multiple frames or
multiple scrolling bars
Do not use complicated frames
Avoid frames that make you
scroll sideways
Frames are used as
navigational aids
Use tables instead of frames
Can use frames for thumbnail images-portfolios
Text Design
Principles
Avoid using a different color
for each letter
Limit text colors to 2 or 3.
Do not use more than 2 type
font styles
Align text on the left, not
right. Its hard to read right aligned text
Avoid centered text as each
line starts in a different place and makes it hard to read
Avoid text crowding against
the left edge of the page
If you need to change text
design, change the type font, not size.
Avoid all CAPS, BOLD or
ITALIC text.
Use these to emphasize words. Dont use these in paragraphs
Do not underline text if its
not a link
Use the spell-checker for
spelling errors
Linking, the Webs
backbone
Three types
Structural navigation
associative links
See Also related pages links
Link text should be descriptive
of what is to be found at the other end.
Rules for linking
text
Avoid click here
use browser default colors
use link titles
support both outgoing and
incoming links
Links Design
Underline links unless the
links are an obvious contrasting color
Avoid click here links.
Links should be clear where they will take the visitor
Avoid links that distract
readers and take them to useless pages
Check links frequently
Links should
coordinate with the text and background color.
Avoid the blue
default color
Use not use form
buttons as links
Alignment Design
Principles
All items should be aligned
with each other, especially headlines and text
Choose one alignment and stick
with it (all left, all right, centered). Do not mix
alignments
Left or right alignment looks
more sophisticated
Links inside buttons or tables
should be on same baseline for a neater and more organized appearance
Spacing and Proximity
Principles
Cluster related
items together. Grouped items are easier to read
Headlines or
subheads should be close to the text it belongs with. Keep spacing consistent
between elements. Use bold or different font style for headings
Paragraphs. Use
either a space between them or indents. Do not use both
Good use of
spacing creates a unified, organized layout with clear relationships between
elements
Keep columns
short. Do not force readers to scroll up and down to the next column.
Graphic Design
Principles
Buttons are small
and used for links, not decoration
Have ALT tags for
disabled and text based browser users
Keep graphic size
small and use height/width pixel tags for faster downloading
Graphics relate
to your pages. Dont use meaningless graphics
If you use
graphics as links, create text links
Avoid using boxes
around graphics
Consider using
thumbnail images and a Javascript link to view the
whole image
Save JPEG (photo
images) to lowest quality/highest compression
Right or left
aligned graphics are not wider than 400 pixels
Avoid use of
Flash
Avoid missing
graphics (box with red x)
Avoid using
graphics as text. Takes up space and search engines cant search graphics for
text
Repetition Design
Principles
Repeat elements
that tie all of your web pages to unify your site
Use consistent
navigation, buttons, colors, text, layout, format and typography throughout
your pages
Use colors from
sidebar and logo for headings or important words
Junk On Web Pages
Spinning logos
3D logo graphics
Blinking text or images
Rainbow, animated or blinking rules
Scrolling text
Running animation that never stops
Under Construction signs
Counters
Advertising (separate page)
Awards (separate page)
Cute pictures like smiley faces
Guestbooks
Pop - Up window ads
Plug-Ins. If you web page requires plug-ins,
create alternative pages for those who dont have the plug-ins and dont want
to download them
Specifying browser, pixel width, font size and
type default in order to view pages
Dont
Forget!
View your
Web Site with different browsers and screen resolutions
before publishing
Internet Explorer 4 / 5 / 6
Netscape 4 / 6
Windows & Mac (if possible)
Screen resolutions 640x480, 800x600, 1024x768
Sources
Kielder Water Bird of Prey Centre Web Site.
http://www.discoverit.co.uk/falconry.