Designing Web Pages

1. Designing Web Pages

2. http://webstyleguide.com/wsg3/index.html

3. Understand the problem • Brainstorm solutions • Introduce the constraints • Choose the solution • Paper design • Actual design • Evaluate • Revise • Evaluate, revise, …. A Design Project Involves Several Steps

4. They want/need information They want/need to make a purchase / donation. They want/need to be entertained. Why do people visit a Web Site?What is their “problem?”

5. What is the objective of your web site? • Who is the intended audience? • What should be on the home page and what should be on linked pages? • What is the best layout? – use of heading, paragraph text, images, color, special effects (VISTA). • What navigation is needed? – obvious links to and from your pages. Some Questions to ask yourself

6. Rather than concentrate on what to do, which would inhibit your creativity, we will learn some design practices to avoid.

7. Poor Use of Text Size, Contrast, Font You should be able to look at the home page of any site and figure out what the site is about within four seconds. If you can't, your site has failed. Using design elements that get in the way of your visitors Too much material on one page. Boring, Useless Intro Web Page Design Mistakes

8. Some of the mistakes include • Images that don’t fit the objective • using the wrong image format e.g. GIF for JPG, • large graphics • ugly background images • Images appear “pasted” on • lack of contrast Poor Use of Graphics

9. Navigational failure. All web navigation must answer:Where am I?Where have I been? (“visited link” color)Where can I go nextWhere's the Home Page Navigation must be simple and consistent.

10. Can't figure out what your web site is about in less than 4 seconds. You should be able to look at the home page of any site and figure out what the site is about within four seconds. If you can't, your site has failed.

11. Using design elements that get in the way of your visitors

12. Using Mystery Meat Navigation. Mystery Meat Navigation occurs when, in order to find specific pages in a site, the user must mouse over unmarked navigational "buttons" -- graphics that are usually blank or don't describe their function. JavaScript code then reveals what the real purpose of the button is and where it leads.

13. Too much material on one page. Yes, it's called a web page, but that doesn't mean you have to cram all your material on one page. It's very easy to keep adding material to your home page until it gets out of control. OR You can add additional web pages with links

14. Misuse of graphics. Graphic mistakes make the list because they keep showing up again and again.

15. Boring, Useless Intro You have to watch a boring, soundless, twenty second flash intro with no option to skip it. If you're still around when the content loads, the pain doesn't stop. There is a lovely 8 or 10 second delay between when you click one of the navigation options and when the content actually arrives.

16. Links should be clearly labeled so your visitors won't be surprised when they click. If you use a vague link description or just say "Click Here" and don't tell people where they'll end up, they could be horribly surprised (and/or shocked and/or disgusted). Also, remember Web Sites come and go and change content -- be careful about depending on an existing web site.

17. The thirty square inches at the top of a home page comprise the most visible area of the Web site. Most readers will be looking at your site on a seventeen- to nineteen-inch monitor, and the top four or five vertical inches are all that is sure to be visible on their screens.

18. The best visual metaphor here is to a newspaper page — position matters. It's nice to be on the front page, but stories "above the fold" are much more visible than those below. In sites designed for efficient navigation the density of links at the top of the home page should be maximal — you'll never get a better chance to offer your readers exactly what they want in the first page they see:

19. Here are some thoughts about web content. • Does your content solve your customers' problems or does it create problems? Look at it from the customer’s standpoint! • Does your content match your audience's expectations? Do you know your target audience? • Have you determined the purpose of your site? • Ask yourself: "What content do I have that would cause anybody to visit my site a second, third, or fourth time?" This is extremely important. You might con (seduce) someone to visit your site once, but why would they want to come back a second, third, or fourth time? • Is the content technically correct? • Does your customer want to know the content you're presenting? Or is it for you? • Is the content current and updated frequently? • Can people find the content they're looking for?

20. All Web sites are organized around a home page that acts as a logical point of entry into the system of Web pages in a site. All pages in the Web site should contain a direct link back to the home page. The World Wide Web URL for a home page is the Web "address" that points users to the Web site. • Your Web Site URL is http://oz.plymouth.edu/~yourloginname • IF your home page is in the Home folder and named “home” • Your Home Page file pathname is • M:\Home\home.htm Web Site Organization

21. The Master page Layout Grid The goal is to establish a logical and consistent approach to where basic graphic identity elements, navigation links, and other essential information appear on every page within your site. Terminology is also crucial here: choose your words carefully for links and titles, and solicit comments (peer review) and feedback from fellow team members and site users. A misleading or confusing label or phrase can ruin the functionality of a link.

22. The Grid Layout

24. Example Layouts

26. Menu Home pages

27. SPLIT THE AUDIENCE for Web Sites With a variety of Information

29. www.ynhh.org

30. As a Reviewer – • Can you tell the objective of the web site? • Can you tell who is the intended audience? • Is the layout – use of heading, paragraph text, images, color, special effects (VISTA) effective or distracting? • Are there obvious links to and from the pages and is the content of those pages evident.

31. Vincent Flanders Presents: The Biggest Web Design Mistakes

32. From Web Pages That Suck http://www.genicap.com/Site/ http://www.dokimos.org/ajff/ http://www.hrodc.com/ http://arngren.net/ http://www.qssis.com/web.html http://anselme.homestead.com/AFPHAITI.html http://coolhomepages.com/

33. Designing with Color AND TEXT

34. Choose Text Styles Sparingly for Emphasis with or without COLOR Bold Italic Underline Combination

35. Choose Text Fonts According to use of Heading, Readability or to set a Mood Ariel Times new Roman Algerian Script Old English Broadway Mixed case, high contrast is easiest to read. Avoid all caps. Browsers can only interpret a limited number of fonts Use Photoshop for other fonts or. These fonts are actually images and used for a few word titles rather than paragraphs. OR – next slide --

36. Displaying Text Text is measured in Points – 1 point = 1/72 inch, so 72 points = 1 inch 10 Point is usually the smallest that can be easily read Do not put a large amount of text on a web page. Instead, originate the text in MSWord save in pdf format and link to it to same as you link to another web page. ( MS Word allows you to save as a pdf format and use a variety of fonts) You can also save Power Point presentations and pdf and link to them. Most browsers can display pdf format.

37. Images are made of picture elements or pixels Each pixel could be black or white (1 bit/pixel) Or Up to 4 billion colors (32 bits/pixel) The more pixels per inch of display the greater the resolution and the clearer the image. More pixels and more bits/pixel means larger files.

38. Out of 256 possible for each RGB ==> 16,777,216 colors

39. Plan Your Color Scheme

40. Color WheelOrganizes colors to assist in color selection Additive Colors

41. Monochromatic Color Scheme The monochromatic color scheme uses variations in lightness and saturation of a single color. This scheme looks clean and elegant. Monochromatic colors go well together, producing a soothing effect. The monochromatic scheme is very easy on the eyes, especially with blue or green hues. You can use it to establish an overall mood.

42. A color scheme based on analogous Colors The analogous color scheme uses colors that are adjacent to each other on the color wheel. One color is used as a dominant color while others are used to enrich the scheme.

43. A color scheme based on complementary colors Two colors on opposite sides of the color wheel, which when placed next to each other make both appear brighter.

44. A color scheme based on nature

45. Color Context How color behaves in relation to other colors and shapes is a complex area of color theory. Compare the contrast effects of different color backgrounds for the same red square.

46. Choosing Background and Text Colors Examples

47. Downloading a “seamless” background Right-click, “Save image as” in Home “Hex” color codes

48. May specify text and Background for entire page Using page properties Text Hex color code Cell background Hex color code

49. Use the eyedropper to match an exact color Insert exact color from upper right cell to lower left cell.

50. To put a background image in a single cell So, Adobe has taken our handy Properties box away, making it impossible to figure out how to insert our background images.. 1) Select the cell. 2) Open the “Tag Inspector” panel to the right. 3) Select the “Attributes” button and show list view. 4) Click inside “Background” box and you’ll see the folder icon for you to navigate to the background image you want to use. It is best to construct your image in Photoshop and then insert in the cell. You can vary colors and opacity to assure there is adequate contrast.