Workflow – Flyer/Brochure Design

Flickr Creative Commons image by Oslo Council
Flickr Creative Commons image by Oslo Council

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 flyer / brochure design cycle to better understand the steps needed to build a successful document and focus on continuous improvement, or Japanese kiazen design and life process influenced by American Edwards Deming, as a good 21st century work model.

Goal

  • Learn design workflow

Standards

  • Build a storyboard
  • Review and redesign
  • Demonstrate file management / naming
  • Define graphics file types
  • Explain Creative Commons, copyright and image standard practices

Product

  • Blog post with embedded images from Flickr

Examples

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
    • What icons, colors and fonts will help reinforce the web site’s theme
    • Brainstorm ideas
    • Respect legacy design (trademarks, logos, business identity)
  4. Make basic pencil and paper prototype drawing of page sections
    • No color or too much detail
  5. Revise basic drawing based on client feedback
    • Repeat this step until client is satisfied
  6. Build color layout combinations with colored pencils or markers
  7. Develop some color combinations based on color theory
    • Represent main color and highlights combinations
  8. Share numerous color layouts with client
    • Refine based on client feedback
  9. Ask client for flyer text
    • Scannability Checklist
      • Clearly written headings
      • 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. Buildcomputer-based outline of the flyer
    • This should just be a black and white outine with no text or images
    • Print it double-sided front and back on the printer to align the template so it folds properly
  2. Addtext and images
    • Create a refined layout with Adobe Photoshop or Illustrator
    • Include color combinations, design elements, logos, and text
  3. Use only Creative Commons images and cite them in design
    • Feel free to use images from the client, too
  4. Share with client and revise as many times as necessary

Tools

Resources

Feedback Form

Leave a Reply

Your email address will not be published. Required fields are marked *