1

5

Page Design

Chapter 5

2

5 Page Design

Beyond CONTENT

• Visual appearance

• Performance

• If serious about design (and struggling)• Study other sites• Experiment• Consider a design class

3

5 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

5 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

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

5

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

5 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

5 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

5 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

5 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

5 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

5 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

5 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

5

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

5 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

5

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

5 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

5Look 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

5 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

5 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

5 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

5 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

5 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

5 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

5 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

5 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

5 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 *160 + 1*161 = 16

• Represent each byte (or 8 bits) as two consecutive hexadecimal digits

• Hexadecimal FF = decimal 15 *160 + 15*161 = 255

28

5 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

5 What is Web Safe Color?

• Browsers handle 8-bit (28) 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

5 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

5 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

5 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

5 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

5 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

5 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

5 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!