Introduction to Responsive Visual Design

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


We’re going to practice designing a responsive experience. You are going to select two contexts/formats and you will need to design a page for each. Remember that the differences between each design should be driven by the differences in user need for each context.

Cooking/Recipes or Fashion/Purchasing clothes

Try to be innovative in the way you approach this design. I don’t want you to just redesign an existing web experience into a responsive experience. Start by drafting a simple persona statement:

“Sam needs to cook food for an party of thirty 5 year olds.”

“Kim wears an odd size of clothing and often has trouble knowing what size to purchase when shopping online.”

“Chris only wants to cook food that he knows his friends have tried and liked”

Once you’ve written this basic persona statement, you can start to visualize more to their story. To make a truly good solution, you need to see how the site integrates into the user’s life. A storyboard is a good way to do this. Once you have a storyboard, you will know what screens you need to design and you can get started.


Learning Outcomes

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

  • Isolate user goals tied to a context.
  • Draft a high fidelity mockup of an original web page design at various screen widths.
  • Determine what content is necessary for a user to achieve a goal.
  • Describe the a complete visual design process for responsive web design (from concept to sketch to refinement).
  • Utilize best practices in visual design at various screen widths.


  1. Select a topic area (recipe or clothes).
  2. Define a user and problem.
  3. Storyboard the interaction of the user using the design in each context
  4. Define the appropriate format/view sizes.
  5. Define content necessary for user to achieve goals.
  6. Organize content via wireframes/sketches.
  7. Begin designing the first view.
  8. Begin designing the second view.