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: [email protected]