Workflow with Wordpress Portfolio

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 1

Workflow Perspective 2

Workflow Steps

Pre-production Work

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
   • What icons, colors and fonts will help reinforce the web site’s theme
   • Brainstorm ideas
   • Choose some color palettes
4. Build the navigation structure
   • What buttons are needed?
   • What look will the navigation buttons have?
5. Make basic pencil and paper prototype drawing
   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
   • Develop some color combinations based on color theory
     • Represent main color and highlights combinations
   • Explore color meaning and psychology
   • Use some web color tools to establish good color combinations that relate to your theme
   • Color Scheme Generators
   • Evergreen State College’s Web Site Color Scheme
   • Choose web colors for a palette
     • This will ensure good color reproduction online
   • Keep the color combinations devoid of text or other design elements
     • We want to help the client choose just the colors schemes and not confuse with too much information
8. Share numerous color layouts with client
   • Refine based on client feedback
9. Ask client for web site text
   • Edit for ‘chunking’ and ease of reading
   • 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. Build computer designed layout
    • Create a refined layout with Adobe Photoshop or Illustrator
      • Include color combinations, design elements, logos, and text

HTML Mock-up

1. Create a digital mock-up
   • Get feedback from peers and teacher and revise
2. Read this article and revise
   • http://webdesignfromscratch.com/web-design/web-2.0-design-style-guide.php
   • Focus on:
     • Simplicity
     • Central layout
     • Fewer columns
     • Separate top section
     • Solid areas of screen real-estate
     • Simple nav
     • Bold logos
     • Bigger text
     • Bold text introductions
     • Strong colours
     • Rich surfaces
     • Gradients
     • Reflections
     • Cute icons
     • Star flashes
3. Get feedback from professional designer and redesign

Wordpress Option

1. Use a Wordpress Template
   • PSD2CSSonline.com
   • www.plaintxt.org

Tags: Demming, Improvement, Kaizen, Web Design, Workflow