The Nature of Web Design

1. The Nature of Web Design Learning Web Design: Chapter 3 and Supplemental Materials

2. Where to Begin? • What kind of content do you want to put on the Web? • Set goals for the Web site • Organize your content into main topics • Decide on the general structure for pages and topics • Create a Site Navigation Plan

3. Ask Yourself these Questions…

4. Why Do You Want a Web site? • Come up with another reason other than my instructor made me do it! • Will you promote a new product, a new business, or just providing information • Look at similar sites to get ideas on design and look and feel

5. Who is Your Target Audience? • Knowing your audience is the key to the success of your site • Are your developing for customers, employees, adults, children etc. ? • Identify not only group type but gender and age of your audience • The color scheme, layout, and number of pages may vary depending on your audience

6. Set the Site Goals • What do you want your site to accomplish? • Goals don’t have to be lofty • If you have a target audience, make sure you meet their goals • Goals help you resist the urge to obscure your site with extra information • Keep your goals in focus

7. What Browser will Used? • Will they be using Internet Explorer, Firefox, Safari or some other one? • What version of browser will they use? • The answers to these questions will determine whether you can incorporate newer technologies on your site

8. Avoid Browser-Specific Terminology • You cannot guarantee what browser your users will use • Avoid references like: • “Click here” • “To save this page, pull down the File menu and …” • Use the Back button to return …”

9. What Monitor Size Will be Used? • Will they be using 17” , 20” or largermonitors? • How many colors will their monitor display? • What resolution will be used? • The resolution standard most commonly used has changed from 800X600 to 1024X768.

10. How will you keep yourcontent fresh? • Surfers want new and exciting information and they want it often • If they don’t get what they want on your site, they will go elsewhere

11. How do I want users to respond to my site? • Do I want them to send email, fill out a form, visit me personally? • Make contact information available on the site

12. Creating a Usable Site • Use 3 Click Rule-it should never take more than 3 clicks to find information. • Provide Scent- Design site so there is a logical path to follow. Scent is kind of like a dog following its nose. • 30 Second Rule-If it takes more than 30 seconds for your page to load you’ve probably lost them. • Use Good Titles–Search engines use these to find your site, also used when saving page in favorites. Titles should be short and sweet.

13. Creating a Usable Site cont. • Use Navigation Menus - Use a consistent navigation bar on every page so viewer knows how to use it. Should never have more than 8 choices. • Avoid using “Back” – If a user has to use the “Back” button, you have failed in your navigation scheme.

14. Creating a Usable Site cont. • Consistent Look-You should create an interface with a specific look and feel. “Brand” your site with your unique touch! Use colors, backgrounds and fonts consistently. • Usability Testing –Have friends, colleagues and family try out your site. We are not good judges of our own site’s usability because we know it so well. Have a third party try it out.

15. Live Space • Is the actual viewing space within a browser window • Things that affect live space: • Is the window maximized? • Title bar • Menu and button bars • Scrollbars, status bars and Windows Controls

16. Basic Design Principles • Designing Above the Fold- Most newspaper place their main stories in the top half of the front page so they can be seen without having to open the paper. • Viewers do judge a book by its cover • Place your most important information in the live space of your page without forcing the viewer to scroll.

17. Fixed Vs. Flexible Design • You can structure your pages to allow for either fixed or flexible sized pages • Fixed- You set the pixel width of the image or table and no matter the screen size of the monitor, the content will be that size. • Flexible- Use percentage widths for images and tables . Use em for font-size measurements. Then your page will expand or contract with the screen resolution. Care must be taken to make sure it looks good at any setting.

18. List the Site Content • Break up the content into main topics • Don’t worry about the order of the steps yet • Make a list of points that describe your site • Keep each topic short • Group related topics together

19. Hierarchal Map Create a SiteNavigation Plan • Create a preliminary site map • Always provide navigation back to home page • The surfer should not have to resort to using the “Back” button!!! • Use hierarchies to move from general to specific information • Use linear navigation to flow through pages sequentially Linear Map

20. Home Web Plan Mixed Navigation Linear with Alternatives • You can combine several navigation schemes • Linear with Alternatives • Linear and Hierarchical • Web Linear and Hierarchical

21. Storyboarding Your Site • This process creates a rough outline and sketch of what your site will look like • This is a plan similar to what directors use when they storyboard a movie • We will focus on this process in a later lesson • Start thinking about it now

22. Writing for Online Publication • Write clearly and be brief • Organize your pages for quick scanning • Use headings to summarize topics • Use lists • Don’t forget jump menus for long pages • Don’t bury information in text • Write short, clear paragraphs

23. The Page Stands Alone • Write so that each page stands on its own merits • Use descriptive titles • Provide navigation links to previous pages in a sequence as well as to a home page • Avoid sentences that begin with pronoun references. Your reader might not have seen previous information.

25. Basic Design Principles • Use Color Wisely • Bright colors can grab a users attention • Pastel colors relax a visitor and get them to stay • Studies show that our attention span is shorter online, so it is important to get your message across quickly and easily.

26. Be careful with Emphasis • Use emphasis sparingly, or it will not have the affect you desire • Paragraphs with a lot of boldface, italics and all caps are hard to read • Link text can be used to add emphasis- Use phrases for hypertext • Animation, marquees, sound and blinking text are annoying if misused • Less is More

27. Spell Check and Proofread • Your reputation is on the line when your pages are online • Many pages are posted without checking these things • Think of creating Web pages like publishing a book or a paper • Thousands of people may be reading your content • These errors reflect badly on you or your company • Have someone else go over your work before you post it, they can see errors you might miss

28. Design and Page Layout • KISS – Keep it Simple Stupid (don’t take it personally) • Use Headings as Headings • Group related Information Visually • Use a consistent layout • Consistent page elements • Consistent navigation • Use external style sheets for whole site(more on this when we cover CSS)

30. Using Links • Without links, our pages would be dull indeed • Use link menus and descriptive text • Use links in text • Avoid the “Click Here” syndrome • Choose wisely- to link or not to link, that is the question

32. Using Images • Think about the need for every image you are tempted to use • Is it worth the load time to add it to your page? • Would a smaller images fulfill the need? • Use alternative text for every image

34. Watch Backgrounds and Link Colors • Poor use of background colors and images can make your text or links unreadable • Make sure you have enough contrast between background and foreground • Often, increasing font size can make a world of difference • Subtle patterns and colors are best

35. Other Hints • Every page should link back to Home • Don’t split topics across pages • Don’t create too many or too few pages • Sign your pages, provide contact information • Think about providing non-hypertext versions of your pages for printability

36. The Good, the Bad and the Ugly of Web Design:

39. Movie Quote Site • Poor background choice • Annoying animations: dog and flashing message board • Poor listing of categories • Required scrolling to see alphabetical listing of movies • Poor color choice of updated symbol

42. The Smithsonian Encyclopedia • Good Navigation Scheme • Alphabetical organization for rapid access • Professional use of color and images • Subtle background texture and colors • A bit boring, but very readable and accessible

44. Entertainment Site • Used three column format • Annoying flashing Alert message • Subdued gray background • Used “above the fold” organization • Navigation links on the left helpful

47. Wyoming Wildflowers- Online Shopping • Good use of whitespace • Sparing use of images • Nice image map • Good navigation • Good use of headings • Wonderful font graphics and image for company Logo

50. The Wreath Depot-Online Shopping • Consistent site look and feel • Good navigation • Nothing special – boring layout • Poor graphic design • Green text hard to read for long paragraphs • Poor use of titles and headings