Lecture 4 Web Design. Part 1

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

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

Web Site Publishing Step 4 – Hosting Step 5 – Publish Free Host Servers Paid Host Servers www.hosting-obzor.uz www.hosting.uz www.uzhosting.com Domain Name - Internet Assigned Numbers Authority - Internet Corporation for Assigned Names and Numbers (http://www.cctld.uz) Step 5 – Publish FTP

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

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

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

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.

Navigation Example

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

Site Map examples

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

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

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

Menu home page

News-oriented home pages

Path-based home pages

Splash screens

Graphics or text?

Both

Best Web Sites Obtained from WebbyAwards.com & DeviantArt.Com http://www.awwwards.com

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

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

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

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.

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!

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

References http://www.adobe.com/support/dreamweav er/layout/site_planning/ www.useit.com/alertbox/20020106.html HomePage Usability, 50 websites deconstructed, J. Nelsen, M.Tahir http://www.awwwards.com