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

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

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!