Designing for the Internet
What makes a good Web Site?
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
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?
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.
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
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
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
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
What is AIDA?
White space, borders, colour, images, headlines
Useful factual content, easy to read, show enthusiasm
promote benefits, create urgency, create interest
Make it easy to take action, how to use, how to get there, how to contact, valuable
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)
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
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
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%
Unix > 1%
Design Considerations--Browsers Used
Internet Explorer 81%
IE6 - 8%
IE5 - 87%
IE4 - 5%
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 Rounded MT Bold
Bookman Old Style
MS Dialog Light
MS Sans Serif
Times New Roman
Default safe fonts - Mac
Additional fonts for users with laser printers
New Century Schoolbook
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!
Absolute positioning is only available using Dynamic HTML
This cannot be viewed using many browsers
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!
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
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
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
Can be added in a variety of ways:
Animated GIF Most browsers
Dynamic HTML Version 4 browsers + (restricted under NS)
Java Applet Java VM on PC required
Shockwave/Flash Plug-in required
QuickTime Plug-in required
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
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
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
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
3D logo graphics
Blinking text or images
Rainbow, animated or blinking rules
Running animation that never stops
Under Construction signs
Advertising (separate page)
Awards (separate page)
Cute pictures like smiley faces
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
Web Site with different browsers and screen resolutions
Internet Explorer 4 / 5 / 6
Netscape 4 / 6
Windows & Mac (if possible)
Screen resolutions 640x480, 800x600, 1024x768
Kielder Water Bird of Prey Centre Web Site. http://www.discoverit.co.uk/falconry.