scottleduc

Workflow (with WordPress)

wp-icon

Why are some web sites easy to navigate and enjoyable? How does one build a great web site? Creating good information architecture, like a web site, is challenging. It involves iterative design, a cyclic process of prototyping, testing, analyzing, and refining a product or process. Iterative design is integral with developing good creativity and problem-solving skills. This project will take students through the web site design cycle to better understand the steps needed to build a successful web site and focus on continuous improvement, or Japanese kiazen design and life process influenced by American Edwards Deming, as a good 21st century work model.

Workflow Perspective

Image from http://www.marleesoftware.co.uk

Goal

  • Learn web design workflow

Standards

  • 11.1 Explain project planning
  • 11.2 Build a storyboard
  • 11.3 Review and redesign
  • 11.4 Demonstrate file management and naming conventions
  • 11.5 Define graphics file types
  • 11.6 Explain Creative Commons, copyright and image standard practices

Product

  • Blog post with embedded images from Flickr

Examples

  • To be placed later

Workflow Steps

Mock-ups (on Paper)

  1. Interview client
    • Discover goal for the project and content needed for the site
  2. Diagram the site
    • Storyboard on paper the entire design of the site with client
    • Flow chart of the pages and content needed
  3. Develop a theme and visual interface metaphor to support visual thinking
  4. Build the navigation structure
    • What buttons are needed?
    • What look will the navigation buttons have?
  5. Make basic pencil and paper prototypedrawing of page sections
    • No color or too much detail
    • Just basic placement of page sections
      • Header
      • Navigation
      • Side Bar
      • Logo
      • Main Section
      • News
      • Pictures
      • White space
      • Footer
  6. Revise basic drawing based on client feedback
    • Repeat this step until client is satisfied
  7. Build color layout combinations
  8. Share numerous color layouts with client
    • Refine based on client feedback
  9. Ask client for web site text
    • Scannability Checklist (From Head First Web Design Book)
      • Clearly written headers
      • Small(ish) paragraphs
      • Use bold and italics to emphasize important words or phrases.
      • Use lists (ordered or unordered) for appropriate content
  10. Revise complete design, with text, until you get approval to build digital version

Digital Mock-up (with Abobe Illustrator or Photoshop)

  1. Build computer-based layout
    • Create a refined layout with Adobe Photoshop or Illustrator
      • Include color combinations, design elements, logos, and text
    • The mock-up should look just like the real web site, when the site is finished
  2. Use only Creative Commons images and cite them in the code, preferably in CSS or HTML comments
    • Feel free to use images from the client, too
  3. Share with client and revise as many times as necessary

HTML Mock-up (with Dreamweaver)

  1. Create a proper folder structure
    1. Use simple naming conventions like index.html, style.css, main_image.png
      • Use only lowercase text for all file and folder naming
      • Use only letter, numbers, hyphens “-” and/or underscores “_”
      • Create a project folder
        • Example: company_website
      • Createmedia folder inside project folder
        • Example: media
        • Place all pictures, videos, or other media in this folder
  2. Create a digital mock-up
    • Get feedback from peers and teacher and revise
  3. Read this article and revise
  4. Get feedback from professional designer and redesign

WordPress Option

  1. Use a WordPress template

Tools

Resources

Feedback Form