VIS 117

1
VIS 117

• UI Design Principles

2
UI Tips and Techniques

• Consistency, consistency, consistency
• Set standards and stick to them
• Be prepared to hold the line
• Explain the rules
• Nav between major items is important
• Nav within screen is important
• Word labels effectively
• Understand UI Widgets
• Use color appropriately

3
UI Tips and Techniques

• Follow contrast rules
• Align fields
• Expect users to make mistakes
• No busy interfaces
• Group things effectively

4
UI Design Principles

• The structure principle
• The simplicity principle
• The visibility principle
• The feedback principle
• The tolerance principle
• The reuse principle

5
Web Design Process
6
Web Design Process
7
Site Diagram (Flowchart)
8
Wireframes (Storyboard)
9
Web Design Process
10
Visual Design

• "Structuring the site on paper before starting
  visual design is a critical step toward effective
  presentation of content to your intended
  audience.
• "Designers are not mindreaders or magicians. Good
  design is dependent on good site structure and a
  solid project definition."

11
Visual Design

• 1st draft of visual designs for home page and one
  sub-page
• Client provides feedback on designs
• 2nd draft of visual designs for home page and one
  sub-page
• Client selects design and provides feedback
• 3rd draft of visual design for home page and all
  unique sub-pages
• Client provides feedback on design
• Final visual designs for home page and all unique
  sub-pages
• Client approval of final design

12
Web Design Process
13
Site Development

• Functional Plan
• Build and Integrate

14
Site Development (Functional Plan)

• Tech Specs
• Browsers - what browsers will you target?
• Operating Systems - Mac, Windows, Other?
• Display Resolution - what is the screen
  resolution the site will be designed for? what
  other screen resolutions will be supported
  gracefully?
• Connection Speed - what is expected connection
  speed for your primary users, what other
  connection speeds will you target?
• Page Download Size -

15
Site Development (Functional Plan)

• Functional Specs
• CSS
• Flash
• (X)HTML version
• JavaScript
• Rich Media (video, audio)
• Search
• Secure Credit Card Transactions
• Backend Technologies (database, cgi, CMS,
  personalization, login)
• Web Analytics

16
Web Design Process
17
Testing

• Content - accurate, understandable, spelling,
  grammar (review conducted by content contributors
  / content editors)
• Links - review site for broken links using an
  automated tool like WebXM
• Functionality - does the site perform the
  functions defined in the original project
  definition, create task list and conduct
  methodical testing
• Validity - validate (X)HTML, validate CSS
• Accessibility - automated section 508 tests using
  an automated tool like WebXM , manual section 508
  tests
• Browser/OS/Resolution - test site on the target
  browsers your defined earlier either manually or
  using browsercam
• Connection Speed - use the Web Page Analyzer to
  get analysis and recommendations on the
  speed/size of your pages
• Usability - conduct informal or formal usability
  testing
• Search Engine Optimization - review your site for
  semantic markup. Read 10 Tips on SEO by Alan
  K'necht in his article entitled SEO and Your Web
  Site
• Load Testing - contact your server administrator
  to discuss load testing techniques
• Security - request automated SecurityXM Scan,
  review file authorizations, review authentication
  method, conduct authentication test

18
Web Design Process
19
Style Guide

• Visual Design Standards - logos, colors,
  typography (to keep the site on brand)
• Naming Conventions - for files, directories, css,
  images, titles
• Site Structure - document the site diagram and
  indicate how the structure is built to handle
  growth
• Templates - provide the (X)HTML templates and CSS
  indicating layout, typography, size, color,
  navigation, menus