Managing information resourcesin the digital age

A CSE training programmeNew Delhi, November 21-25, 2006

DESIGNING FOR THE WEB

TOPICS

1. Why do we need design ?

2. What is a website ?

3. Website structure

4. Types of website

5. Basic layout for web design

6. Design for simplicity

7. Elements for homepage design

8. Colours

9. Contrast

10. Typography

11. Images for the web

1WHY DO WE NEED DESIGN

WHY DO WE NEED DESIGN?

To bring order to visual chaos

Brings aesthetics, functionality

Aids in understanding the message

To make things pleasing to the eyeDE

SIG

N

2WHAT IS A WEBSITE ?

WHAT IS A WEBSITE

- Difference between homepage and inside page

- Different types of websites (e.g.. Training, Teaching,

Reference, Entertainment/Magazines,

News, E-Commerce)

- Static and dynamic

Definition: A Web site is a relatedcollection of World Wide Web (www)

Files that includes a beginning filecalled a Home Page

3WEBSITE STRUCTURE

WEBSITE STRUCTURE

A Simple Website structure for acompany/NGO looks like this

About Us Services Products Partners Contact Us

FAQ’s Search Feedback Sitemap

Home Page

WEBSITE STRUCTURE

www.unaids.org/en/

WEBSITE STRUCTURE

www.lakme.com/ENG/index.htm

4TYPES OF WEBSITES

TYPES OF WEBSITE

There are many different types of websites. Some of the most common ones are listed below:

Corporatewww.thiekos.com

E-Commercewww.amazon.com

Newswww.bbc.co.uk

Entertainmentwww.mtv.com

Personalwww.hillmancurtis.com

Blogswww.blogger.com/start

5BASIC LAYOUT FOR

WEB DESIGN

?

BASIC LAYOUT FOR WEB DESIGN

BASIC LAYOUT FOR WEB DESIGN

A two column layout for a simple basic website

BASIC LAYOUT FOR WEB DESIGN

www.geocities.com/nankingatrocities/Introduction/introduction.htm

BASIC LAYOUT FOR WEB DESIGN

A three column layout for a simple basic website

BASIC LAYOUT FOR WEB DESIGN

www.undp.org/

BASIC LAYOUT FOR WEB DESIGN

www.ebay.com/ www.fedex.com/us/

6DESIGN FOR SIMPLICITY

DESIGN FOR SIMPLICITY

KISS Principle“Keep it Simple and Sweet”

Web design is all about Simplicity

- Web User Interface should be simple and logical

- It should not distract a visitor- Garishly designed websites look amateurish- Always design for the user not for your boss!

DESIGN FOR SIMPLICITY

Rule for Simple Homepage DesignReduce Clutter and Use White Space

Example of Bad Web DesignUnorganized

Lots of Clutter/ Poor Use of White Space

Example of Good Web DesignOrganized

No Clutter and Proper use of White Space

7ELEMENTS OF HOMEPAGE DESIGN

ELEMENTS OF HOMEPAGE DESIGN

A basic website will have the following elements onthe HOMEPAGE

- Logo- Banner/Title (Organization Name)- Search Feature- Feedback & Interactives- Color and Images (Give life to Homepage)- Navigation (Primary, Secondary and Global)- Prioritizing Information on the Homepage

ELEMENTS OF HOMEPAGE DESIGN

Website Navigation - has two main functions

1. to tell the user where they are2. to enable the user to go somewhere else

Any good navigation scheme should, at a glance, answerthe top three questions every user has at the back of theirmind on any page:1. Where am I? (Present) 2. Where can I go? (Future) 3. Where have I been? (Past)

Three simple guidelines for trustworthy navigation

One: Never, ever link to the page you’re onTwo: Show where you areThree: Think before you link

ELEMENTS OF HOMEPAGE DESIGN

Website Navigation Continued . . . Broad Categories

Three Broad categories Primary NavigationMain sections of the website

Secondary Navigationis mainly Section Specific(Also termed as sub links at times) Global NavigationDisplayed on all the pages buthas generic information

ELEMENTS OF HOMEPAGE DESIGN

Website Navigation Continued . . . Your website’s steering wheel

TOP LEFT RIGHT

www.kodak.com www.who.int www.undp.org.in

Recommended Not RecommendedUnless language specific

ELEMENTS OF HOMEPAGE DESIGN

Website Navigation Continued . . . Your website’s steering wheel

www.unaids.org/

Breadcrumbs or breadcrumb trails

- is a navigation technique - purpose is to give users a way to keep track of their location within programs ordocuments.

Prioritizing the Search Bar onthe homepage

ELEMENTS OF HOMEPAGE DESIGN

A strong recommendation for the homepagetreatment are fairly straightforward

- make it visible

- make it wide

- keep it simple

TOP LEFT TOP RIGHT BOTTOM LEFT

www.unicef.org www.who.int www.undp.org.in

Prioritizing the Search Bar onthe homepage

ELEMENTS OF HOMEPAGE DESIGN

ELEMENTS OF HOMEPAGE DESIGN

Always Design for Consistency

Homepage Inside Page

Try to keep element like logo, title, navigation, search etc.on the Homepage and all the inside pages at the

same place to avoid confusion

ELEMENTS OF HOMEPAGE DESIGN

Prioritizing Homepage content

Designing above the fold !

- Inverted gradient / top heavy (Most Important Information on top)

- Limited space, users will look

at your site typically for a

few seconds

Fold

ELEMENTS OF HOMEPAGE DESIGN

Amount of information displayed without a single scroll

ELEMENTS OF HOMEPAGE DESIGN

Amount of information displayed after scrolling

ELEMENTS OF HOMEPAGE DESIGN

Scroll free websitewww.fedex.com/us/

ELEMENTS OF HOMEPAGE DESIGN

Organize information clearly to show a clear & logical structure

ELEMENTS OF HOMEPAGE DESIGN

Organizing information www.mothernature.com

ELEMENTS OF HOMEPAGE DESIGN

Group related information to decrease spending time searching for information

www.who.int

ELEMENTS OF HOMEPAGE DESIGN

Grouping related information

www.worldbank.org

ELEMENTS OF HOMEPAGE DESIGN

Icons

COLORS / CONTRAST8COLOURS

COLOURS

Helps establish the brand identity

- Always use 3 Color palette for the web

BBC website MSN website

COLOURS

BBC website MSN website

Help you identify sections within a website

COLOURS

Colors are good visual indicators to links & where you are in a website

BBC website

- Using the wrong colors is likely to turn your visitors away.

- Use of too many colors makes it look complicated

COLOURS

However

COLOURS

An example of a website with bad design sense

COLOURS

Some color schemesWhile designing always try and use

the three color palette scheme

Bright

Corporate

Pleasant

Relaxing

9CONTRAST

- A well balanced contrast between text and its background color is what you need to keep in mind

CONTRAST

CONTRAST

Black text on white backgroundstands out the best

CONTRAST

At times a color maybe good for the background but maynot be applicable for your text

CONTRAST

The website below shows how information maybe lost if there isn’t much contrast

Sport website

CONTRAST

Whereas this site has its information displayed much betterEntertainment website

10TYPOGRAPHY

Typography

Web-Safe Fonts for Your Site

You want to choose font types that

- suits your website

- easy to read

- available to many browsers

& operating systems

Typography

There are basically two types of fonts: serif and sans serif.

Typography

The most popular font types

Arial ABCDEFabcdef

Verdana ABCDEFabcdef

Times New RomanABCDEFabcdef

Typography

The ideal size for you to use and for the users to

read is between 11–12pt

Typography

Good text size and easy readabilitywww.grist.org

Typography

A few websites with good text size and easy readabilitywww.msn.com

Typography

Avoid making text long horizontally as it becomes harder to read

11IMAGES FOR THE WEB

IMAGES FOR THE WEB

Images Add life to Homepage

- But at the same time there should not be an overload (Can increase download time)-Try using relevant images and only when required

IMAGES FOR THE WEB

A page without images can look dull and bore your users

IMAGES FOR THE WEB

Adding an image or two canmake the page much more visually appealing

IMAGES FOR THE WEB

www.bbc.co.uk

News website

Homepage

Some examples of the websites using images …

IMAGES FOR THE WEB

www.bbc.co.uk

Some examples of the websites using images …

News website

Inside page

IMAGES FOR THE WEB

www.mondomix.com

Some examples of the websites using images …

Entertainment website

Homepage

IMAGES FOR THE WEB

www.mondomix.com

Some examples of the websites using images …

Entertainment website

Inside page

IMAGES FOR THE WEB

www.unicef.org

Some examples of the websites using images …

NGO website

Homepage

IMAGES FOR THE WEB

www.unicef.org

Some examples of the websites using images …

Inside page

NGO website

However, if your websites contains too many images / heavy files….. this will lead to a problem.

In most cases they’ll have to wait as your website downloads.

www.mp3.com

Entertainment website

IMAGES FOR THE WEB

A few other websites that faced similar problems..

www.cinematicorchestra.com

Entertainment website

IMAGES FOR THE WEB

DESIGN SUMMARY

Always design forSimplicity and Consistency

Don’t confuse the user!

Thank You !

For more information please contact:

CENTRE FOR SCIENCE AND ENVIRONMENT41, Tughlakabad Institutional Area,

New Delhi. India - 110062Tel: +91-11 29955124; 29956110; 29956394

Fax: +91-11 29955879 E-mail: cse@cseindia.org