Wireframing dynamic layouts

KSU VCD / inVision Workshop
18-19 October 2014
Instructor: Aaron Ganci
Return to Workshop Home

Overview

Design a companion site for the book “Damn Good Advice.” If you’re not familiar with this book, it is a numbered list of advice from the design/marketing master George Lois. For this project, we’re going to create a digital version of the book that can be read online. With the provided list of content, layout a wireframe page for both a desktop site and a mobile site.

Use the provided wireframe templates to sketch out a layout. If you want to use those templates later, you can download them here: Dynamic Wireframe Template - Complete Set

Materials

Learning Outcomes

At the end of this exercise, you will be able to:

  • Create low-fidelity wireframes for multiple viewports.
  • Describe how content needs to re-flow when it responds to the screen size.

Content

  • “Damn Good Advice” logo
  • Navigation with “About Lois” and “Purchase book” links
  • Number (advice number) selector and/or Pagination
  • Number
  • Image
  • Advice quote
  • Body paragraph

Here is a scan of one spread from the book. It illustrates the type of content noted above.

Process

  1. Assess content and context
  2. Start with the smallest viewport, design layout
  3. Move to wider viewport, consider how context alters layout, design