Project Milestone

1
Project Milestone

• Phase III Visual Design and Testing

2
Tracks

• In an idea situation, this phase has two tracks
  which are developed in parallel
• Visual designers experiment creatively with
  looks, feels and ideas for the interface.
• Functionality of these concepts are tested by the
  production designers.
• The visual design should not begin until the
  content has been determined.

3
Facts to Consider-Mac vs. PC

• 90 of all websites are designed on Macs
• 90 of all websites are viewed on PCs
• If you are developing the site on a Mac, consider
  getting a PC to view the content on as you
  develop the site.

4
Fonts

• PCs render HTML fonts 2 to 3 points larger than
  Macs do.
• IE renders fonts larger than Netscape.
• Optimum HTML font size is 2.
• Considerations for using graphic fonts
• Download times
• Users may have their graphics turned off or may
  be on hand-held devices
• Disabled people often dont receive graphic
  information due to accessibility limitations.

5
Defining Smart Design

• Eye-pleasing design
• Functional
• Able to communicate
• Serves the users environment and capabilities
• Fast loading
• Focused on users experience rather than the
  ambitions of the designer

6
Practicing Smart Design

• Think like the user
• Browse, click and download like the user
• Test Test - Test

7
How to start designing

• There are two methods for beginning the designing
  of a site
• Put pencil or pen to paper
• Go straight to the computer

8
Flash Considerations

• Dont use unless there is a reason
• If you use it, make sure your audience can access
  it
• 96 penetration rate for the latest plug-in
  most browsers ready to view
• Provide an HTML alternative
• Provide ALT text alternatives
• Incompatible with text-to-speech readers
• Harder to update than HTML
• Thwarts search engines flash content cannot be
  indexed.

9
User Feedback

• Take advantage of any and all user-testing
  opportunities
• Does your navigation get misunderstood or
  misinterpreted?
• Is your labeling sensible?
• Is the site organized in a comprehensive manner?
• Is the interface appealing?
• Should you move forward and execute your designs
  or backtrack and redo?

10
Squint Test

• Information heavy sites must pass the squint
  test
• As a designer, push your chair back, squint (or
  take off your glasses) and skim.
• Duplicates how a majority of your users will view
  your site
• Can you identify where to click quickly and
  easily?

11
Take Squint Test One Step Further

• Ask someone totally uninvolved with your site
  (like the UPS delivery person)
• Sit them in front of your layout
• Give them 10 seconds to find what you ask them to
  find.
• If the person cant do it, redo your site to make
  the path of navigation obvious.

12
HTML Protosite

• Extension of wireframe concept
• Used to confirm the flow of the pages, the
  navigation and the content.
• Usually does not include functionality
• Usually is just a simple wireframe design with a
  few colors and clickable navigation
• Exposes content and information-flow design
  issues as well as navigational issues.

13
Protosite Definition

• Also called HTML click through
• Skeletal representation of the site that allows
  you to go through the content, navigation and
  light functionality.

14
Graphic Template

• Takes the final approved look and feel and gets
  it ready for optimization and HTML production.
• Called template because it will be used for the
  HTML page it was originally designed for as well
  as any similar pages
• Master graphic file that will later be used for
  slicing the optimization.
• Creating the graphic template refines the look
  and feel.

15
Graphic Template Considerations

• Develop graphic templates for
• Home Page
• Main Pages
• Secondary Pages
• Dont forget
• Error pages
• Pop-up windows
• Redirects following form submissions

16
Graphic Templates should include

• Text
• All individual layers intact
• All individual layers clearly labeled
• Each state (on/off/rollover) on separate clearly
  identified layers
• Flash/animation placeholders
• Accompanying GIF or flattened graphics file that
  shows how the page should look in HTML

17
Graphical Template Creation Software

• Microsoft Word
• WordPerfect
• Create page with landscape orientation
• Microsoft Publisher
• Paint Shop Pro
• Photoshop
• Create as a 760 x 460 pixel image

18
Documentation Page Dimensions

• Specify
• Target window size
• Viewable and maximized

19
Documentation - Headers

• Include
• navigation and subnavigation dimensions
• Text sizes
• Text styles
• Whether you are using graphic vs. HTML headers

20
Documentation - Colors

• Specify hex numbering for
• Background color
• Body text/content, link, etc.
• Buttons, Bullets, Arrows, Stars and other graphics

21
Documentation Text

• Document all HTML text treatments including
• Color
• Specific HTML font (by name) or size
• Document all graphical fonts including
• Color
• Font used (by name and size)
• Any special kerning, leading, drop shadows