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.

•Don’t 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

–http://www.looksmart.com

 

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 site’s navigation scheme.

–a directory of the main content areas

•Summarize most important news or promotions.

•Provide a search feature.

 

 

Home page examples

•

•http://crl.nmsu.edu/

•http://www.netflix.com/

•http://www.expedia.com

•

•http://www.dvdcache.com/

•http://www.cafedvd.com/

•http://www.dvdovernight.com/

•http://www.myvideostore.com

•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 it’s 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 it’s 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

•Don’t 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

•Chicago

•Courier

•Geneva

•Helvetica

•Monaco

•New York

•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

–CD’s full of transparent “floating” objects

 

•Corel Web Gallery

–Thousands of GIF and JPG’s 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. Don’t 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. It’s 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. Don’t’ use these in paragraphs

•Do not underline text if it’s not a link

•Use the spell-checker for spelling errors

 

Linking, the Web’s 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. Don’t 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 can’t 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 don’t have the plug-ins and don’t want to download them

•Specifying browser, pixel width, font size and type default in order to view pages

 

Don’t 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.