The Web Design Workflow (Mentorship Series)

Guidance on Web Design/Development workflow

A Practical Guide to Designing for the Web


The High Level Workflow

Get the Project

How to find, sell to a client and get the project

  • Finding Clients
    • Network: (Friends, Family, Associates)
    • Research: (New businesses, Est. businesses with lacking online presences)
    • Cold Call: Takes nerves of steel. Best to create a relationship first. Example: A bakery or restaurant that you frequent. The business doesn’t have a website. Speak to the owner, communicate your joy in their product or service, then ask about their web strategy. (See more on not selling immediately below)
    • Take on overflow work from design firms: Contact web design firms to find out if they have overflow work that they might send your way as a subcontractor.
  • Selling to Clients
    • Don’t immediately sell. Ask questions, listen, provide suggested solutions to problems.
    • Don’t expect immediate business.
    • Plan to plant seeds, harvest later
  • Getting the Project
    • Quote estimated price (project or hourly rate)
    • Use a contract; protects you & client (but get legal assistance when drawing up the contract … don’t so what I have done)
    • Don’t be afraid to ask for down payment in advance

Define the Project

Discovery, Clarification & Planning

  • Approaches to Creating Personas: Chapter (PDF) from the book “The User Is Always Right: A Practical Guide to Creating and Using Personas for the Web” by Steve Mulder
  • Discovery
    • Website goals; business/organization goals; audience goals
    • Client Surveys/Interviews
    • Existing Materials
    • Understanding the Audience (Personas)
    • Understand Industry/Competition
    • Technical Requirements
  • Clarification
    • Determine & Agree to Overall Goals
    • Prepare Creative Brief
      • Simply a stating of what the client wants and what has been agreed to
  • Planning
    • Create a project plan
      • Individual Tasks
      • Who’s doing what?
      • How long should each task take?
    • Determine Initial Budget
    • Creating Schedules
    • Determine Roles
    • Create Staging/Communication Area
    • User Testing Plan
    • Kick Off the Project

Developing Site Structure

Examining the content, site and pages

  • Content View
    • Addressing Content
    • Audit Existing Content
      • What content you have?
      • What content you need?
      • What content needs to be re-worked for the web?
    • Outline Content
    • Prepare a Content Delivery Plan
      • What content is needed?
      • When does content need to be ready?
      • Who will prepare the content?
  • Site View
    • Sitemapping
      • Visual representation of site’s structure, organization, flow, grouping of content, information architecture
    • Addressing Existing Site Organization
      • What changes will be made compared to the existing site?
      • Any feedback from user testing?
      • Information Architecture / User-centric Content Buckets
    • Setting Naming Conventions
      • User-centric
      • Consider SEO in naming conventions
  • Page View
    • Wireframing
      • Storyboards for the site; content layout
      • Shows a hierarchy of information but not visual design (color, style, typeface)
    • Addressing Navigation
      • User-centric; goal driven
    • Naming & Labeling
      • User-centric; result from card sorting or other discovery exercise
    • Defining Key User Paths
      • Key Tasks
        • Request a brochure
        • Signup for Newsletter
        • Purchase a product

Visual Design & Testing

Creating the visual design, confirming the design flow & functionality

  • Creating the Design
    • The Creative Process
    • Defining Smart Design
      • Must meet objectives; supports goals, functional, fast loading, etc.
    • Reviewing/Adhering to Site Goals
      • Use the creative brief, wireframes as guidelines
    • Developing Concepts
      • Low-fi; pencil sketches
    • Designing for the User
    • Presenting Designs and obtaining Feedback
      • Obtain internal feedback before presenting for client feedback
      • Needs to be managed: pre-briefing and efficient method for obtaining feedback
  • Confirming the Design
    • Confirming site flow & functionality
    • HTML Protosite
      • HTML low-fi design, click-through to test flow
    • Testing Functionality
      • Test interactive features to determine benefit, positive impact
        • Rollover menus
        • Pop-up windows
        • Form elements
    • User Testing
  • Handing Off the Design
    • Creating the Graphical Templates/Mockups
      • Create the final graphical template
        • PSD Photoshop file
        • Includes regular/hover/interactive states (layers)
    • Creating a Design Style Guide
      • Document / User Guide for the site
      • Colors, Typefaces & sizes, graphical elements, textual tone, etc.
      • Versions for both visual design & interactive design (front & back-end)

Production & QA

Prepping for Build out, Building the Site (code & functionality), Testing

  • Prepping for Build out
    • Review Project Status
      • Check for changes, scope “stretch” before building the site
    • Establish Guidelines
      • Refer to discovery information (Tech Specs) for relevant information (browsers to support, etc.)
    • Setting File Structure
      • Driven by current state, client desires, SEO impact
  • Building the Site
    • Slicing & Optimizing Images
      • Graphics sliced & diced from graphical template (mockup) to be coded back together.
      • Optimized for balance between smallest file size while maintaining quality of image
    • Creating HTML Templates & Pages
      • Build templates to based content pages on.
    • Implement Scripting
      • Front-end page-level scripting (JavaScript, Ajax) for effects (rollovers, pull-down menus)
      • Populate Pages with Content
        • Biggest delay point: is the content ready?
        • Includes Page , , tags
      • Integrate Backend Development (if it applies)
        • Connect Database back-end, server side scripting, CMS, etc.
  • Testing
    • Create a QA Plan
      • Quality Assurance
      • What to test?; Test Scripts (tasks to perform)
    • Prioritize and Fix Bugs
      • Document all issues
      • Prioritize & fix bugs
    • User testing
      • Last chance to perform user testing for usability, accessibility
    • Conducting a Final Check
      • Design Check: Does everything match design brief, specs
      • HTML Check: Is code sound, does it validate?
      • Functionality/Engineering check

Launch & Beyond

Delivery, Launch & Ongoing Maintenance

  • Delivery
    • Handing the site off to the Client/Production Server
      • Official sign-off from client, accepting the site for production
    • Complete the Production Style Guide
      • Review, edit, finalize the Style (User) Guide
    • Create Handoff Packet
      • All raw files (Photoshop, Illustrator, Flash files)
    • Tracking Documentation
      • Collect all documentation (reports, briefs, charts, emails, etc.)
    • Conducting Postmortem Meeting
      • Summary of project; what worked, what didn’t
    • Schedule Site/Content Maintenance Meeting
      • Show client how to maintain their site
  • Launch
    • Prepare Communications
      • Send out announcements of site launch
    • Index Site with Search Engines
      • Submit site to search engines (Google Webmaster Central, Yahoo Site Explorer, MSN Webmaster Central)
    • Launch the Site
  • Maintenance
    • Develop Maintenance Plan
      • Content Changes
      • Database/CMS maintenance/backup
    • Measure Success
      • Web site analytics
      • Gauging site traffic, conversion goals
    • Confirm Site Security
      • If site leverages security, test for security leaks, holes.
      • Can even include ordinary elements like web forms (check for SPAM-ability)



3 responses to “The Web Design Workflow (Mentorship Series)

  1. Pingback: Mentorship Series - Upcoming Schedule « Chicago Dreamweaver Meetup

  2. awsome piece of explanation , its so detailed , i know how much effort you might have put in to compile this post, thankyou for sharing this

  3. Dennis, thank you for the great instruction so far. I really appreciate this Mentorship Series–and all the time you’ve put into it.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s