1. Lecture 4
Web Design. Part 1

2. Agenda Web Site Creation Planning Navigation / Site Map Home Page
Consequences of BAD Web Design
How to evaluate your site

3. Web Site Creation Step 1: Cost Analysis Step 2:Methodology Selection
People
Equipment
Software
Time
Step 2:Methodology Selection
Online wizard supplied by ISP, Google Page Creator
Construct on your own computer
Adobe Dreamweaver
Microsoft Front Page
Step 3: Develop/Outsource
WYSIWYG Editors
Microsoft Publisher
Free Open source

4. Web Site Publishing Step 4 – Hosting Step 5 – Publish
Free Host Servers
Paid Host Servers
Domain Name - Internet Assigned Numbers Authority - Internet Corporation for Assigned Names and Numbers (
Step 5 – Publish
FTP

5. Web Page Design Introduction
Create a clear visual hierarchy on each page
The more important something is, the more prominent it is.
Related logically – related visually
Things are nested visually to show what’s part of what.
Very Important
A little less important
Nowhere near as important

6. Web Page Design Break up the pages into clearly defined areas
Make it obvious what’s clickable
Keep the noise down
Omit needless words

7. Planning Goals - know what you are doing Your audience
Navigation Scheme
Design look – page sketches
Planning resources
The “Golden Rule” (Design, proportions, balance)

9. Navigation Answers users questions: Rules:
Where am I?
Where can I go
Where have I been?
Rules:
Never, ever link to the page you’re on
Show where you are
Think before you link
Navigation is not just links – it is about communicating with the user.

10. Navigation Example

11. Site Map What is it? Common approach to facilitate navigation.
Overview of the site’s areas in a single glance

12. Site Map examples

13. Home Page HOME PAGE = HOTEL LOBBY
Clearly point people to the right direction
First impression

14. Home Page Goals “What is this place?”
Don’t get in the repeat visitor’s way
Show what is new
Provide consistent, reliable global navigation

15. Home Page Usability Don’t make your “banana” hard to find
Your company name and logo should be a reasonable size and in a noticeable location
Quickly give your audience a sense of what makes your business unique - how you differ from your competitors
Spotlight what is important
Legibility - easy to read text
Present a solution before simply giving information

17. Menu home page

18. News-oriented home pages

19. Path-based home pages

20. Splash screens

21. Graphics or text?

22. Both

25. Best Web Sites Obtained from WebbyAwards.com & DeviantArt.Com

26. How to drive away your site visitors
Research results:
Pop up ads %
Installation of extra software – 89%
Dead links – 86 %
Confusing navigation – 84 %
Required registration – 83%
Slow- loading pages – 83%
Ineffective site search tools – 80 %

27. How to evaluate your web site
First Impressions
Navigation
Content
Attractors
Findability
Making Contact
Browser Compatibility
Knowledge of Users
User Satisfaction
Other Useful information

28. CSS CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files

29. Styles Solved a Big Problem
HTML was never intended to contain tags for formatting a document.
HTML was intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers.
Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.

30. CSS Saves a Lot of Work!
To solve this problem, the World Wide Web Consortium (W3C) created CSS
In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file
All browsers support CSS today
CSS defines HOW HTML elements are to be displayed
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

31. Home work Check http://www.mcil.co.uk/review/7-10- criteria.htm
Find out in more details how to evaluate the site

32. References
er/layout/site_planning/
HomePage Usability, 50 websites deconstructed, J. Nelsen, M.Tahir