Client Site Introduction and Design Phases

1
Client Site Introduction and Design Phases
Define
Design
Structure
Test
Build
Launch
Market
2
Define Phase
Define

• Interview the client to understand goals,
  audience, content, design, and delivery
  requirements.
• Organize and outline interview information to
  help define the site.
• Develop and communicate structure and
  organization of site based on interview and
  content.
• Use a flowchart to organize information across
  site.

Dr. Epps Design
3
Structure Phase
Structure

• Use screen views with simple shapes for buttons
  and graphics to show location of information on
  pages.
• Show how site information will flow without
  providing too many details about each page.

Index (Home) Page
4
Structure Phase Content
Structure
5
Structure Phase Details
Structure
6
Design Phase

• Create visual comps to present the site brand or
  visual expression through colors, fonts, and
  images.
• Leave comps rough, with room for changeenable
  client to participate in the design process.

A 'comp', which is short for composition, is
simply a large graphic that determines the
direction a web design would take. Designers have
used comps for years. Usually before a site was
developed, the designer would create 2 or 3 (or
more) comps, and give the client a choice. Once
the design was approved, site development would
commence.
7
C.R.A.P.
Design

• Color
• Repetition
• Alignment
• Proximity

8
Design Principles
Design

• Balance/symmetry
• Emphasis
• Color

9
Design Phase
Design

• Present at least two visual comps and describe
  how they meet audience, goals, style, and
  delivery needs.
• Incorporate client feedback, adding more content
  as client approves design elements.
• Create production storyboards to help define
  content and navigation.
• Examples/Description _at_ journalism.berkley.edu

10
Build Phase
Build

• Create Templates using Comps and Storyboard for
  guidance
• Create External CSS
• Create Library Items
• Use a word processor to type text (do not
  format), spell check and grammar check
• Create/collect graphics and optimize
• Build the pages and add CSS formatting
• Keep the customer involved periodically
  throughout this phase

11
Test Phase
Test

• Conduct a technical test to validate content,
  links, and graphics against production
  storyboards
• Validate pages keep logs for proof of validation
• Edit pages to correct invalid content keep logs
• Compare site to original interview questionnaire,
  comps and storyboard
• Conduct a usability test to make sure the site is
  easy to use
• Create an evaluation form
• Have 3 outside parties test your site and provide
  feedback regarding look, feel, and navigation
• Incorporate feedback from usability testers
• Show test results and corresponding fixes.

12
Launch Phase
Launch

• Obtain domain name and space
• Publish site

13
Market Phase
Market

• Use effective page titles to help search engines
  that look for content.
• Use alternative text for images to help search
  engines that look for images.
• Submit to topic-specific search engines to
  promote the site.

14
Benefits of this Project

• Upon completion of this challenging assignment
  you will have attained
• Web Design Skills
• People Skills
• Love
• Power
• Freedom
• Fun

15
Review Phases of Project

• Define
• Interview, Organize Info, Site Flowchart
• Structure
• Screen Views, Site Info Flow, Little Detail
• Design
• Visual Comps w/Site Brand (color, fonts, images)
• Low Detail
• Share with client
• Build
• What we already do (templates, library items,
  build, etc.)
• Test
• Compare against storyboard/interview
• Validate site and fix errors
• Have others test and evaluate navigation and
  redesign based on feedback
• Launch
• Publish
• Advertise

16
First Assignment

• Form a team of 1-3
• Find a client and interview them to collect info
• Kamiakin Class/Club
• Local business
• Must be an adult (no siblings/friends)
• Use suggested questions for interview
• Create Flow Chart
• You have 7 days (Due 1/17)