Webdesign New
-
Upload
lyngdoh -
Category
Technology
-
view
120 -
download
1
description
Transcript of Webdesign New
![Page 1: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/1.jpg)
Managing information resourcesin the digital age
A CSE training programmeNew Delhi, November 21-25, 2006
DESIGNING FOR THE WEB
![Page 2: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/2.jpg)
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
![Page 3: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/3.jpg)
1WHY DO WE NEED DESIGN
![Page 4: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/4.jpg)
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
![Page 5: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/5.jpg)
2WHAT IS A WEBSITE ?
![Page 6: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/6.jpg)
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
![Page 7: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/7.jpg)
3WEBSITE STRUCTURE
![Page 8: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/8.jpg)
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
![Page 9: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/9.jpg)
WEBSITE STRUCTURE
www.unaids.org/en/
![Page 10: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/10.jpg)
WEBSITE STRUCTURE
www.lakme.com/ENG/index.htm
![Page 11: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/11.jpg)
4TYPES OF WEBSITES
![Page 12: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/12.jpg)
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
![Page 13: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/13.jpg)
5BASIC LAYOUT FOR
WEB DESIGN
![Page 14: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/14.jpg)
?
BASIC LAYOUT FOR WEB DESIGN
![Page 15: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/15.jpg)
BASIC LAYOUT FOR WEB DESIGN
A two column layout for a simple basic website
![Page 16: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/16.jpg)
BASIC LAYOUT FOR WEB DESIGN
www.geocities.com/nankingatrocities/Introduction/introduction.htm
![Page 17: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/17.jpg)
BASIC LAYOUT FOR WEB DESIGN
A three column layout for a simple basic website
![Page 18: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/18.jpg)
BASIC LAYOUT FOR WEB DESIGN
www.undp.org/
![Page 19: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/19.jpg)
BASIC LAYOUT FOR WEB DESIGN
www.ebay.com/ www.fedex.com/us/
![Page 20: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/20.jpg)
6DESIGN FOR SIMPLICITY
![Page 21: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/21.jpg)
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!
![Page 22: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/22.jpg)
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
![Page 23: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/23.jpg)
7ELEMENTS OF HOMEPAGE DESIGN
![Page 24: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/24.jpg)
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
![Page 25: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/25.jpg)
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
![Page 26: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/26.jpg)
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
![Page 27: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/27.jpg)
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
![Page 28: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/28.jpg)
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.
![Page 29: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/29.jpg)
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
![Page 30: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/30.jpg)
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
![Page 31: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/31.jpg)
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
![Page 32: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/32.jpg)
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
![Page 33: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/33.jpg)
ELEMENTS OF HOMEPAGE DESIGN
Amount of information displayed without a single scroll
![Page 34: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/34.jpg)
ELEMENTS OF HOMEPAGE DESIGN
Amount of information displayed after scrolling
![Page 35: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/35.jpg)
ELEMENTS OF HOMEPAGE DESIGN
Scroll free websitewww.fedex.com/us/
![Page 36: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/36.jpg)
ELEMENTS OF HOMEPAGE DESIGN
Organize information clearly to show a clear & logical structure
![Page 37: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/37.jpg)
ELEMENTS OF HOMEPAGE DESIGN
Organizing information www.mothernature.com
![Page 38: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/38.jpg)
ELEMENTS OF HOMEPAGE DESIGN
Group related information to decrease spending time searching for information
www.who.int
![Page 39: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/39.jpg)
ELEMENTS OF HOMEPAGE DESIGN
Grouping related information
www.worldbank.org
![Page 40: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/40.jpg)
ELEMENTS OF HOMEPAGE DESIGN
Icons
![Page 41: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/41.jpg)
COLORS / CONTRAST8COLOURS
![Page 42: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/42.jpg)
COLOURS
Helps establish the brand identity
- Always use 3 Color palette for the web
BBC website MSN website
![Page 43: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/43.jpg)
COLOURS
BBC website MSN website
Help you identify sections within a website
![Page 44: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/44.jpg)
COLOURS
Colors are good visual indicators to links & where you are in a website
BBC website
![Page 45: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/45.jpg)
- Using the wrong colors is likely to turn your visitors away.
- Use of too many colors makes it look complicated
COLOURS
However
![Page 46: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/46.jpg)
COLOURS
An example of a website with bad design sense
![Page 47: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/47.jpg)
COLOURS
Some color schemesWhile designing always try and use
the three color palette scheme
Bright
Corporate
Pleasant
Relaxing
![Page 48: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/48.jpg)
9CONTRAST
![Page 49: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/49.jpg)
- A well balanced contrast between text and its background color is what you need to keep in mind
CONTRAST
![Page 50: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/50.jpg)
CONTRAST
Black text on white backgroundstands out the best
![Page 51: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/51.jpg)
CONTRAST
At times a color maybe good for the background but maynot be applicable for your text
![Page 52: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/52.jpg)
CONTRAST
The website below shows how information maybe lost if there isn’t much contrast
Sport website
![Page 53: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/53.jpg)
CONTRAST
Whereas this site has its information displayed much betterEntertainment website
![Page 54: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/54.jpg)
10TYPOGRAPHY
![Page 55: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/55.jpg)
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
![Page 56: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/56.jpg)
Typography
There are basically two types of fonts: serif and sans serif.
![Page 57: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/57.jpg)
Typography
The most popular font types
Arial ABCDEFabcdef
Verdana ABCDEFabcdef
Times New RomanABCDEFabcdef
![Page 58: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/58.jpg)
Typography
The ideal size for you to use and for the users to
read is between 11–12pt
![Page 59: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/59.jpg)
Typography
Good text size and easy readabilitywww.grist.org
![Page 60: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/60.jpg)
Typography
A few websites with good text size and easy readabilitywww.msn.com
![Page 61: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/61.jpg)
Typography
Avoid making text long horizontally as it becomes harder to read
![Page 62: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/62.jpg)
11IMAGES FOR THE WEB
![Page 63: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/63.jpg)
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
![Page 64: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/64.jpg)
IMAGES FOR THE WEB
A page without images can look dull and bore your users
![Page 65: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/65.jpg)
IMAGES FOR THE WEB
Adding an image or two canmake the page much more visually appealing
![Page 66: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/66.jpg)
IMAGES FOR THE WEB
www.bbc.co.uk
News website
Homepage
Some examples of the websites using images …
![Page 67: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/67.jpg)
IMAGES FOR THE WEB
www.bbc.co.uk
Some examples of the websites using images …
News website
Inside page
![Page 68: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/68.jpg)
IMAGES FOR THE WEB
www.mondomix.com
Some examples of the websites using images …
Entertainment website
Homepage
![Page 69: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/69.jpg)
IMAGES FOR THE WEB
www.mondomix.com
Some examples of the websites using images …
Entertainment website
Inside page
![Page 70: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/70.jpg)
IMAGES FOR THE WEB
www.unicef.org
Some examples of the websites using images …
NGO website
Homepage
![Page 71: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/71.jpg)
IMAGES FOR THE WEB
www.unicef.org
Some examples of the websites using images …
Inside page
NGO website
![Page 72: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/72.jpg)
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
![Page 73: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/73.jpg)
A few other websites that faced similar problems..
www.cinematicorchestra.com
Entertainment website
IMAGES FOR THE WEB
![Page 74: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/74.jpg)
DESIGN SUMMARY
Always design forSimplicity and Consistency
Don’t confuse the user!
![Page 75: Webdesign New](https://reader035.fdocuments.in/reader035/viewer/2022081414/54c817914a7959ee7a8b4628/html5/thumbnails/75.jpg)
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]