Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Page Design Chapter 5
  2. 2. Page Design <ul><li>Beyond CONTENT </li></ul><ul><li>Visual appearance </li></ul><ul><li>Performance </li></ul><ul><li>If serious about design (and struggling) </li></ul><ul><ul><li>Study other sites </li></ul></ul><ul><ul><li>Experiment </li></ul></ul><ul><ul><li>Consider a design class </li></ul></ul>
  3. 3. The Home Page or Index <ul><li>Entryway or gateway </li></ul><ul><li>First piece of visual information </li></ul><ul><li>Similar to the table of contents in a book. </li></ul><ul><li>Should be attractively composed </li></ul><ul><li>User gets information quickly </li></ul><ul><li>30seconds or less </li></ul><ul><li>Like a magazine cover or book cover </li></ul><ul><li>Sometimes proceeded by a splash page </li></ul>
  4. 4. The Splash Page <ul><li>Often Dynamic </li></ul><ul><li>Often animated </li></ul><ul><li>Introductory page </li></ul><ul><li>Consider Flash technology </li></ul><ul><li>Give users a way to opt out </li></ul><ul><li>Usage may adversely effect site rankings </li></ul>
  5. 5. Home Page/Index continued <ul><li>Some Elements to Include on the Home Page </li></ul><ul><ul><li>As much of the major site structure as possible </li></ul></ul><ul><ul><ul><li>Be able to get almost anywhere from the home page </li></ul></ul></ul><ul><ul><li>Simple text links </li></ul></ul><ul><ul><li>Major design element </li></ul></ul><ul><ul><li>One click to major site divisions (primary level information) </li></ul></ul><ul><ul><li>Three to five clicks to get to site bottom </li></ul></ul><ul><ul><li>Include an email link </li></ul></ul><ul><ul><li>Alternate contact </li></ul></ul><ul><ul><li>Name and telephone number </li></ul></ul>
  6. 6. Other Things to Think About <ul><ul><li>Design for smaller monitors, or size independence </li></ul></ul><ul><ul><li>Monitors are designed horizontally </li></ul></ul><ul><ul><li>Site pages can deviate from the home page orientation </li></ul></ul><ul><ul><li>Each section should look and behave consistently </li></ul></ul><ul><ul><li>Changes should only be made at major junctures </li></ul></ul>
  7. 7. Grids <ul><li>Structure providers for visual information </li></ul><ul><li>Grids are essential </li></ul><ul><li>Provide an organization </li></ul><ul><li>Tables assist in keeping things aligned properly </li></ul><ul><li>Positioning may be done using CSS </li></ul><ul><li>Grid allows design using proportions </li></ul>
  8. 8. Page Structure <ul><li>Printed page and the screen page have a lot in common </li></ul><ul><li>Grids basically describe places and relationships for elements on a page </li></ul><ul><li>Assist in determining the size of a graphic element </li></ul><ul><li>Where repeating elements might go </li></ul><ul><li>Provide an overall unified and cohesive feeling </li></ul>
  9. 9. Page Structure  <ul><li>Assist in group design projects </li></ul><ul><li>Once a grid is developed all the people involved can follow that structure </li></ul><ul><li>Page length </li></ul><ul><ul><li>Very long- include an index and index markers </li></ul></ul><ul><ul><li>One print command sends all to the printer </li></ul></ul><ul><ul><li>Consider print control using CSS </li></ul></ul>
  10. 10. Grid Types <ul><li>One-column Grid with Display Headings </li></ul><ul><ul><li>Single column of text </li></ul></ul><ul><ul><li>Average-sized margins </li></ul></ul><ul><ul><li>Has some sort of display heading </li></ul></ul><ul><ul><ul><li>A company logo </li></ul></ul></ul><ul><ul><ul><li>Masthead </li></ul></ul></ul><ul><ul><ul><li>Banner </li></ul></ul></ul><ul><ul><li>Graphics inserted into a one-column structure </li></ul></ul><ul><ul><ul><li>Justified left </li></ul></ul></ul><ul><ul><ul><li>Right </li></ul></ul></ul><ul><ul><ul><li>Centered </li></ul></ul></ul><ul><ul><li>Text wrapped around the graphic </li></ul></ul>
  11. 11. Grid Types <ul><li>One Narrow, one Wide </li></ul><ul><ul><li>A narrow column on the left side </li></ul></ul><ul><ul><li>Wide column stretching to the right margin. </li></ul></ul><ul><ul><li>The left column is good for navigational items </li></ul></ul><ul><ul><li>Right-handed as well as left-handed </li></ul></ul>
  12. 12. Grid Types <ul><li>Two-column Grid </li></ul><ul><ul><li>Two equal columns </li></ul></ul><ul><ul><li>Formal </li></ul></ul><ul><ul><li>Best for text-heavy sites </li></ul></ul><ul><ul><li>Graphics are usually placed squarely in one column or the other </li></ul></ul><ul><ul><ul><li>Sized to be the width of the column. </li></ul></ul></ul><ul><ul><ul><li>Straddling both columns. </li></ul></ul></ul><ul><ul><ul><li>Still equal in width to the column size </li></ul></ul></ul><ul><ul><li>Symmetry and balance </li></ul></ul>
  13. 13. Grid Types <ul><li>Multi-unit grids </li></ul><ul><ul><li>2,3,4 or 12 columns! </li></ul></ul><ul><ul><li>Let the grid guide you as to where text goes </li></ul></ul><ul><ul><li>Graphics should span </li></ul></ul><ul><ul><ul><li>A column </li></ul></ul></ul><ul><ul><ul><li>One and a half columns </li></ul></ul></ul><ul><ul><ul><li>Two columns, etc. </li></ul></ul></ul><ul><ul><li>Whole and half units lend a consistency to the layout </li></ul></ul><ul><ul><li>Flexibility makes these grids very easy to use </li></ul></ul>
  14. 14. Grid Types <ul><li>Common Web Grid Formats </li></ul><ul><li>The L and Inverted L Grid </li></ul><ul><ul><li>The L </li></ul></ul><ul><ul><li>Most common </li></ul></ul><ul><ul><li>Navigation organized </li></ul></ul><ul><ul><ul><li>Vertically </li></ul></ul></ul><ul><ul><ul><li>Left hand side of the page </li></ul></ul></ul><ul><ul><ul><li>Additional navigation on the bottom of the page </li></ul></ul></ul><ul><ul><li>Good for text-dominated sites </li></ul></ul>
  15. 15. Grid Types <ul><li>The inverted L </li></ul><ul><ul><li>Horizontal section that dominates the top </li></ul></ul><ul><ul><li>Vertical navigational elements on the left </li></ul></ul><ul><ul><ul><li>This pushes the eye into the center of the page </li></ul></ul></ul><ul><ul><ul><li>Ideal layout for graphic-intensive sites </li></ul></ul></ul>
  16. 16. Grid Types <ul><li>Two Narrow, One Wide </li></ul><ul><ul><li>Not a recommended design choice </li></ul></ul><ul><ul><li>Used when there are more than seven navigational choices on the home page </li></ul></ul><ul><ul><li>Crowds other information into the center </li></ul></ul>
  17. 17. The Last Word On Grids <ul><ul><li>They are the invisible structure beneath the page elements </li></ul></ul><ul><ul><li>Use them to assist with the layout before you code </li></ul></ul><ul><ul><li>Look at proven print and web pieces </li></ul></ul><ul><ul><li>Reverse engineer the grids </li></ul></ul>
  18. 18. Look and Feel of the UI: Ideas for Helping the User Find Their Way <ul><li>Less is still more </li></ul><ul><li>Simple can most often be the best choice. </li></ul><ul><li>Assist the user with visual and interactive feedback </li></ul><ul><ul><li>Users don’t like </li></ul></ul><ul><ul><ul><li>Getting lost </li></ul></ul></ul><ul><ul><ul><li>Not understanding where they are </li></ul></ul></ul><ul><ul><ul><li>Being confused about how to operate a Website. </li></ul></ul></ul><ul><li>Make every attempt at meeting user expectations </li></ul><ul><li>Consider a metaphor such as index tabs, or spokes of a wheel, or…look at successful sites </li></ul>
  19. 19. User Expectations <ul><li>Users expect </li></ul><ul><ul><li>They will be able to know where to click </li></ul></ul><ul><ul><li>When the cursor changes there is interactivity </li></ul></ul><ul><ul><li>You must let the user know how to recognize links </li></ul></ul><ul><ul><li>Use rollovers to signal a clickable spot </li></ul></ul><ul><ul><li>Teach the user simply and quickly how to use your site </li></ul></ul>
  20. 20. Navigational Elements <ul><li>Aid the user in understanding </li></ul><ul><ul><li>Where they are in relation to where they’ve been </li></ul></ul><ul><ul><li>Where else they can go </li></ul></ul><ul><ul><li>“ You can get anywhere from anywhere” </li></ul></ul><ul><ul><li>If navigation is an impedance they will leave </li></ul></ul><ul><ul><li>Navigational graphics should </li></ul></ul><ul><ul><ul><li>Clearly denote what section of the site a user is currently at. </li></ul></ul></ul><ul><ul><ul><li>Be a “You are here” marker. </li></ul></ul></ul>
  21. 21. Gestalt Side Note <ul><li>The human mind recognizes patterns </li></ul><ul><li>The idea of proximity and grouping of navigational elements that perform similarly creates these organizational patterns and associations that assist the user </li></ul><ul><li>Similar and repeated items should always be found in the same place from page to page </li></ul>
  22. 22. Gestalt Side Note <ul><li>Use similarity to cement home the relationships </li></ul><ul><li>Similarity of </li></ul><ul><ul><li>Color </li></ul></ul><ul><ul><li>Shape </li></ul></ul><ul><ul><li>Texture </li></ul></ul><ul><li>Visual clues that will assist in navigation </li></ul><ul><li>Planned in the early stages of the design </li></ul><ul><li>User-centric design approach is critical in Web and interactive media design. </li></ul>
  23. 23. User Assistance <ul><li>Label the sections of your site </li></ul><ul><li>Use color coding </li></ul><ul><li>Strong ways to help a user keep track of their journey </li></ul><ul><li>Don’t create too many different routes to the same place in your site </li></ul><ul><ul><li>Graphical link </li></ul></ul><ul><ul><li>Textual link </li></ul></ul><ul><li>Be sure a user can go back </li></ul>
  24. 24. Color <ul><li>Color and the Computer </li></ul><ul><li>Traditional Print-Pigment </li></ul><ul><ul><li>Primary colors-red, yellow and blue </li></ul></ul><ul><ul><li>Secondary colors-green, purple and orange </li></ul></ul><ul><li>Computer-Light </li></ul><ul><ul><li>Primary colors-red, green and blue (RGB) </li></ul></ul><ul><ul><li>Secondary colors-cyan, magenta and yellow </li></ul></ul><ul><ul><li>Additive color mixing </li></ul></ul>
  25. 25. Color <ul><li>Monitors and Color </li></ul><ul><li>Color shifting is part of the deal </li></ul><ul><li>Gamma </li></ul><ul><ul><li>Macintosh gamma is 1.8 </li></ul></ul><ul><ul><li>PC gamma is 2.2 </li></ul></ul><ul><li>Calibration </li></ul><ul><ul><li>Recalibrate your monitor </li></ul></ul><ul><ul><li>Compensate for gamma inconsistencies </li></ul></ul><ul><ul><li>PC monitors tend to be much darker </li></ul></ul>
  26. 26. Resolution <ul><li>72 pixels per inch Mac, 96ppi PCs </li></ul><ul><li>Web image resolution should be designed for screen resolution </li></ul><ul><li>Always work in pixels per inch when preparing graphics for the Web </li></ul>
  27. 27. Computers and Color <ul><li>Hexadecimal </li></ul><ul><li>Base-16 number system </li></ul><ul><ul><li>Values are the numbers 0 to 9, letters A to F. </li></ul></ul><ul><ul><li>Decimal number 10 would be represented by the hexadecimal value A </li></ul></ul><ul><ul><li>10 hexadecimal would be decimal 0 *16 0 + 1*16 1 = 16 </li></ul></ul><ul><ul><li>Represent each byte (or 8 bits) as two consecutive hexadecimal digits </li></ul></ul><ul><ul><li>Hexadecimal FF = decimal 15 *16 0 + 15*16 1 = 255 </li></ul></ul>
  28. 28. Web Color <ul><li>Hex values </li></ul><ul><ul><li>00, 33, 66, 99, CC, and FF </li></ul></ul><ul><ul><li>Six values </li></ul></ul><ul><ul><li>Combinations of three pairs </li></ul></ul><ul><ul><li>Represent all of the available colors that a Web browser recognizes </li></ul></ul><ul><ul><li>Results in the Web-safe color palette (implied safe for 256 color systems) </li></ul></ul>
  29. 29. What is Web Safe Color? <ul><li>Browsers handle 8-bit (2 8 ) color </li></ul><ul><ul><li>256 colors </li></ul></ul><ul><li>HTML limitation </li></ul><ul><ul><li>For the simplicity of information exchange </li></ul></ul><ul><li>256 colors - 40 reserved for the OS </li></ul><ul><li>216 web safe colors </li></ul><ul><li>Colors will not be changed, but they do not necessarily match the designer’s intent </li></ul>
  30. 30. Why Only 216 Colors? <ul><li>216-color palette created mathematically </li></ul><ul><ul><li>Six shades of red,green, blue </li></ul></ul><ul><ul><li>RGB color is specified on a 0 to 255 (=256) scale </li></ul></ul><ul><ul><li>Converting Hex to RGB: 00=00, 33=51, 66=102, 99=153, CC=204, and FF=255 </li></ul></ul><ul><ul><ul><li>Increments of 51. </li></ul></ul></ul><ul><ul><li>Sometimes color specified in percentages - 0 to100 percent </li></ul></ul><ul><ul><ul><li>RGB values or 0, 20, 40,60, 80 or 100 % are all web safe colors </li></ul></ul></ul><ul><li>Web-safe palettes standard in most image programs </li></ul>
  31. 31. If We Ignore Browser Safe? <ul><li>If not web safe? </li></ul><ul><li>Browser converts the color to the nearest browser-safe equivalent </li></ul><ul><li>Text color could shift to be the same color as your background and disappear! </li></ul>
  32. 32. Using Browser Safe Colors <ul><li>Use browser-safe colors for </li></ul><ul><ul><li>Background color </li></ul></ul><ul><ul><li>Text color </li></ul></ul><ul><ul><li>Link color </li></ul></ul><ul><ul><li>Line art images </li></ul></ul><ul><li>JPEG images (photographs and continuous tone images) should never be converted to browser-safe colors </li></ul><ul><ul><li>JPEG format handles color differently </li></ul></ul><ul><ul><li>AOL compression methods change unpredictably </li></ul></ul>
  33. 33. Techie Color Info <ul><li>VGA colors on a PC </li></ul><ul><li>Defined by name in the HTML 3 and 4 standards. </li></ul><ul><li>Only seven are truly browser-safe </li></ul><ul><li>Colors that are browser-safe correspond to: </li></ul><ul><ul><li>Black </li></ul></ul><ul><ul><li>White </li></ul></ul><ul><ul><li>Primary and secondary colors of light: </li></ul></ul><ul><ul><ul><li>RGB </li></ul></ul></ul><ul><ul><ul><li>CMY </li></ul></ul></ul>
  34. 34. Color Use <ul><li>Background Color </li></ul><ul><ul><li>Not too overpowering in relation to the other elements </li></ul></ul><ul><ul><li>Unifies and ties together the elements in the frame. Subtler better than garish, </li></ul></ul><ul><ul><li>Distinct and dynamic backgrounds have been successful </li></ul></ul>
  35. 35. Color Use <ul><li>Text Color </li></ul><ul><ul><li>Readability </li></ul></ul><ul><ul><li>High-contrast color choices </li></ul></ul><ul><ul><li>Text should remain readable in each state a link can possess. </li></ul></ul><ul><ul><li>Black text on white most readable </li></ul></ul><ul><ul><li>If the background value passes the halfway mark </li></ul></ul><ul><ul><ul><li>Text color needs to switch from dark to light </li></ul></ul></ul><ul><ul><li>Darker backgrounds tend to make text appear smaller </li></ul></ul><ul><ul><ul><li>Increase the size of light text on a dark background by a point or two. </li></ul></ul></ul><ul><ul><li>Background color is omitted in printing. </li></ul></ul><ul><ul><ul><li>White or light text on a dark background </li></ul></ul></ul><ul><ul><ul><li>The text will not print on white paper </li></ul></ul></ul>
  36. 36. Chapter Summary <ul><li>Utilizing grids can be a time-saver. </li></ul><ul><li>Grids leave nothing to chance. </li></ul><ul><li>Aid in creating a unified and consistent design. </li></ul><ul><li>Web color can be a tricky and difficult thing to tame, </li></ul><ul><li>Embracing the limitations of color and type will ease stress. </li></ul><ul><li>User satisfaction is directly proportional to interface consistency, navigability, and feedback </li></ul><ul><li>The whole should be greater than the sum of the parts! </li></ul>