LAYOUT AND DESIGN

1
CHAPTER 5 LAYOUT AND DESIGN
22 Slides
2
THE WEB AS A MEDIUM
3
(No Transcript)
4
Klick Me!
Robust user interactivity is what separates web
content from other forms of media such as radio
and television.
Functional
Feedback
Real-Time
You can use Text, Graphic Images, Buttons--any
object can be used as a link to another web page
or location
5
Dont forget that the most important content
should appear above the fold or where the
majority of users, regardless of their screen
resolution, will view your vital information.

• Important information quickly accessible
• Use links to quickly take the customer to the
  information they want

Maintaining site data currency is one important
advantage of the World Wide Web.
6
WEB DESIGN PRINCIPLES
7
Web Design Rules to Live by . . .

• Clarity
• Consistency
• Contrast
• Simplicity
• Structure
• Emphasis

Ladies and gentlemen, your clients (and their
customers) dont want to be dazzled and beguiled
by your web site! They only want to get
information quickly and with a minimum of fuss!
8
RULES TO LIVE BY II

• K.I.S.S. rule
• Small Packets of Info
• Body Copy Minimized
• Summarization
• Link to Specifics
• Use Negative Space

• Beginning (Draw the User In)
• Middle (Explains)
• End (for User Interaction)
• Importance by prominence
• Group Logically related items
• Nesting for relatedness

• Guide the Users Eye with
• Color
• Placement
• Text Formatting

9
WEB DESIGN ISSUES
10
THE BROWSER WARS!
Typical Browserwatch Statistics
The Score Is . . . Vendors 6, Web Designers
0 Use http//www.browserwatch.com to keep up!
11
VIEWER ISSUES

• Immediate Visual Obstacles
• Browser (IE, Navigator, etc.)
• Browser Version
• Monitor Size Age
• User Settings

PPI (Pixels per Inch) Macintosh RGB 72
PPI Windows VGA 96 PPI Issue Customers may not
be seeing what you expect them to see!
12

• Color Issues
• Color Choices (do they excite or soothe the
  customer?)
• Do You Have a Scheme? (Are dominant colors from
  the same color Family)
• Whos Color Palette? (yours-16 Million colors,
  or your customers--256 colors)
• Avoid a situation where your colors must be
  dithered on the customers side!
• Remember 1 Most browsers only support 256
  browser-safe colors!
• Remember 2 This is the web youre developing
  for, not some glossy brochure!

13

• Text Issues
• HTML Type Tags should be viewed as a necessary
  evil
• Youll be learning to use Adobes Illustrator
  and Photoshop, both are excellent text creation
  tools
• Anti-Aliasing improves the clarity appearance

• Font Issues
• With only two common fonts, Mac and Windows
  users may be seeing two completely different web
  sites!
• Graphical font rendering is only a partial
  solution as web page download time can suffer

• More Font Issues
• Readability (Important)
• Multi-platform capable?
• HTML Font Tags range in size from smallest 1
  to largest 6
• HTML Header Tags are reversed smallest lth6gt to
  largest lth1gt

14

• Type Style Rules 1 2
• Strive for Visual Emphasis, Avoid Visual
  Confusion!
• Never use more than Two (2) Fonts, with Three
  (3) Sizes, or Three (3) Styles

• Type Style Rules 3 4
• Text Alignment can impact web page readability
• Rule minimize justification changes
• Leading (led?ing) - the spacing between lines of
  text.
• Rule The more the better!

15
ITS THE DOWNLOAD TIME, STUPID!
Remember the Save for Web option in the Adobe
product line!
16
SEPARATION OF CONTENT AND FORMAT
17
MAXIMIZING PERFORMANCE
The use of Style Sheets allows you to keep
structural functions (design elements) separate
from content . . . saving time and HTML coding.
18

• Remember
• Style Sheets dont work the same on all browsers
  and platforms!
• The CSS specification is undergoing remarkable
  developmental change

19
OTHER DESIGN ISSUES
20

• Usage Issues
• Navigation Must Be Obvious and Easy-to-Use!
• Content Must Not Be Out of Date!
• Background? (lt 10 kb)

Re-Visit Issues Keep Up to date E-Contact
Lists Current News Items, Promotions, etc.

• Advertising Issues
• Who Wants It?
• Will It Work?
• Must Be Clear
• Animation Helps!
• IAB Banner Home

• Startup Issues
• Homepage Must Load Fast!
• Splash Screen?
• Background? (HTML Tutorial)

21

• FRAME PROS
• Allows Division of Page into Multiple Sections
• Page Zone control
• Each Frame Is Linked to Another Web Page
• FRAME CONS
• Uneven Browser Support
• Extra HTML Coding Required
• Accessibility Issues Made More Difficult

22
WHERE WEVE BEEN!
23
THE END! ?