Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply



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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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