1 Web Site Design Principles Source: Principles of Web Design, Joel Sklar

Websites that suck mistakes-in-web-design html mistakes-in-web-design html 10 Principles of effective web design /01/31/10-principles-of-effective-web- design/ /01/31/10-principles-of-effective-web- design/ 2

3 Define the Purpose  Why are you building the Web site?  Share Personal Information  Publishing  Special interest  Job Listings  Online shopping  Product support  What is the goal of the site?  Write a two or three-paragraph mission statement that briefly states the site’s goals?  How will you judge the success of the site?  What are the measuring factors you can use to assess the effectiveness of the site?

4 Develop a Web Site that Stands Out  The challenge is to develop a web site that gains the attention of users who are already suffering from information overload Gather ideas: Explore other web sites; identify those that impress you Describe design elements that contribute to that impression Identify how information was presented: photos, text, video, sound Describe what made the information easy to find List the reasons you want to return

5 Identify the Audience Produce an audience definition Who will read your page? What is it that users want? Do they want information? Are they seeking entertainment? Do they have any biases regarding your message Do they want to download files? Are they looking for links to other Web sites? How can you attract them and entice them to return for repeat visits? What type of computer and connection speed does your typical visitor have?

6 Analyze Your Audience What does your audience have in common? Are they male or female? What level of education do they have? What is their reading and vocabulary level? What level of technical aptitude do they have? Are they all in the same career / company? Are they international How do they compare to the ‘average web user’? 16% are retirees 58% of new users are female Average household income is $46,000 65% are married or have a domestic partner 24% have completed college or university 61% expect to increase their online spending

7 Build a Team What skills do you need to build the site?  Server Administrators  HTML Coders  Designers  Writers and Information Designers  Software Programmers  Database Administrators  Marketing Who will create the graphics, code the pages, and write the text? Do you have the talent and economic resources that you need?

8 Identify and Collect Your Content Text – typically the primary content of a web site chunk information for readability use active voice and a friendly tone remove transitional phrases as stated previously similarly as a result Photographs – can personalize and familiarize the unknown select high quality, relative pictures that will add value can be used to deliver a message or prompt an action

9 Other Content Types Multimedia – adds action, excitement, and interactivity combination of text, graphic images, animation, audio, or video require considerable investment of time and other resources to develop Animations – are widely used to attract attention and enliven web pages with rotating objects, scrolling text, or advertising banners use them subtly and sparingly excessive amounts become distracting and annoying Audio – an effective, low bandwidth alternative to video can persuade, inspire, personalize, motivate, or sooth Video – incorporates the powerful components of movement and sound efficiently delivering quality video is the most challenging

10 Plan the Web Pages Organize your information the initial, visible screen provides the first glimpse of your Web site and the opportunity to “hook” your visitors create web pages no longer than two screens of information provide links at the top to select areas within the page so information can be readily accessed Establish a Visual Connection create a consistent look and feel, which unifies and strengthens the web site’s visual identity

11 Plan the Web Pages Color Scheme as a general rule, limit the numbers of colors in your scheme to three. Layout consistent layouts of pages and page elements create unity location of navigation links and search mechanism should be consistent sketch your layout (using a grid)  major text blocks  photos  navigation controls  headings

12 Web Browsers  The two most widely used browsers are:  Netscape  Microsoft Internet Explorer  HTML has a set of rules called its syntax.  A web browser interprets the HTML code to determine the text’s appearance.  Different browsers might make different choices, resulting in varying interpretations of the way the HTML file is displayed

13 Coding for Multiple Resolutions  A computer monitor’s screen resolution is the horizontal and vertical width and height of the computer screen in pixels  The three most common screen resolutions (traditionally expressed as width x height) are 640 x 480, 800 x 600, 1024 x768  User screen resolution is a factor over which you have no control

14 Fixed Resolution Design As the screen resolution changes, the content remains aligned to the left side of the page The negative white space on right hand side fills the remainder of the screen

15 Pages Viewed on Smaller Canvas Text extends beyond screen

16 Flexible Resolution Design  As the screen resolution changes, the content expands to accommodate the varying screen width

Design for Graphics

18 Design the Whole Site Plan the unifying themes and structures Colors Fonts Page Layouts Create smooth transitions Use a grid to provide visual structure Use active white space Know your Audience

19 NASA Web Site

20 NASA Web Site for Kids

21 Create Smooth Transitions Plan to create a unified look Reinforce the identifying elements Avoid random, jarring changes in format

Design Examples

23 Use Active White Space Use white space deliberately in your design Create breathing space between headers and subhead Separate paragraphs Place ‘gutters’ to separate columns Good use of white space guides the reader and defines the areas of your page Active white space is an integral part of your design that structures and separates content

24 Use of White Space

25 White Space Enhances Clarity

26 Impact of Color Use color to enhance your web site’s purpose and personality  Warm colors (red, orange and yellow) tend to be associated with activity and power  Cool colors (green, blue and purple) suggest tranquility and peace

27 Design for the User  Keep your design efforts centered solely around your user  Design for interaction  Design for location  Guide the user’s eye  Decide whether the user will read or scan

28 Paper Based Reading Pattern

29 Screen Based Reading Pattern

30 Areas of Screen Importance Most important and current information Company logo / navigation bar Consistent appearing links Changing Features Suitable for reading content

31 Areas of Screen Importance

32 Plan the Navigation Provide enough location information to let the user answer the following navigation questions: Where am I? Where can I go? How do I get there? How do I get back to where I started?

33 Navigation Guidelines  Place primary navigation elements in the same location on all pages  All secondary pages should include: link back to the home page logo or other type of site identifier page title  Ensure that links are functional, relative and worthwhile  Remove the link to the current page from the list of link options

34 Hard To Read Links

35 Using Text-Based Navigation Text-based linking often is the most effective way to provide navigation on your site It can work in both text-only and graphical browsers Always provide a text-based set of links as an alternate means of navigation Limit information overload Create manageable information segments Control page length Use hypertext to connect facts, relationships and concepts

36 Identical Text and Graphics Links