[2013–11–14] Workshop: Wireframing Tools and Techniques w/ Carolyn Chandler

Why You Should Wireframe

  • Don’t let “perfect” be the enemy of the GOOD.
  • Don’t let the “good enough” be the enemy of the GOOD (or the great).
  • Strong foundations: What do we need before we start developing?
  • Common vocabulary: How do we speak about experience design details?
  • Valued checkpoints: When does “good enough” become “good” or “great”?
  • Owned by the WHOLE team, guided by the designers

Key Benefits

  • Develop a shared understanding of site layout and functionality
  • Define page requirements
  • Focus project team on critical elements
  • Bring up questions the team hasn’t thought of
  • Explore user behavior and understanding (via usability testing — although prototypes are better)
  • Remote
  • Thinking (Visually)
  • Streamline the process

Tools

  • Axure
  • Balsamiq
  • Pencil and Paper
  • PowerPoint
  • Keynote
  • MockFlow
  • PhotoShop
  • Illustrator
  • InDesign
  • Visio
  • OmniGraffle
  • more…
  • Look and Feel
  • Treatment of buttons and/or graphic elements
  • Exact copy or verbiage

Partial Views

  • Allows you to hone in on single elements or portion of the page without trying to understand that piece of the project within the context of the entire project.

Storyboarding

  • Tell the story of the user.
  • Why is somebody trying to do this in the first place?

Before and After

How to Create a Wireframe

Arranging the Information

Prerequisite Knowledge for Creating a Wireframe

  • Business requirements
  • Content requirements
  • Existing brand and style requirements
  • Technical requirements
  • User insight (personas, mental models, usability testing, results, etc)

Terms that are Good to Know

  • Elements
  • Modules/Widgets
  • Columnar Grid (960)
  • Margins
  • Padding

Pages You Should Create

  • Home page
  • Secondary page templates (as many as needed)
  • Unique pages (search or login)
  • Process pages (registration or check out)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Neil Dahlke

Neil Dahlke

Engineer. @hashicorp , formerly @memsql , @UChiResearch . @depaulu alum.