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

What is a wireframe? — a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.

Capture ideas and sketch lo-fi interfaces. At this stage you are thinking about what features not whether or not we should have a radio button or a dropdown. The lo-fi interface is useful because people are more inclined to give honest feedback. They are less apprehensive to make comments about a prototype than they something that looks as though someone has put a lot of effort into polishing.

Do not go down the color and typography rabbit hole right at the start.

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

Wireframes only communicate partial information to the developers.

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

What is a common pattern that frustrates people? Are we doing something that potentially makes someone feel stupid just to meet the requirement? (Ex: GMail asking if you want to send an e-mail with no attachment after you mention that attachment in the email.)

Tools

  • Axure
  • Balsamiq
  • Pencil and Paper
  • PowerPoint
  • Keynote
  • MockFlow
  • PhotoShop
  • Illustrator
  • InDesign
  • Visio
  • OmniGraffle
  • more…

Start with a low detail wireframe, and work your way through medium and high, testing all the way. You may not always make it to the high detail phase, if you are able to hand it off to your developers before hand.

Do not put real content in your Wireframes, because people tend to focus on the content then and not the design.

Wireframes help to communicate page layout, information priority, and content, and behavior relationships.

Wireframes do not communicate:

  • 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

Engage the visual designer earlier in the process. Do not just hand them off a stack of wireframes. Work with them, so that they are not locked in to your layout choices, etc. You can use color for things like grouping, but try not to use too much. Being prescriptive doesn’t provide the best solution.

How to Create a Wireframe

Arranging the Information

Create content groupings of similar information types that are likely to be used together. This will help users when they are searching for information.

Consider chunks. The parts that need to be on every page (content, primary nav, utility nav, site logo, image, news, left nav, footer, etc). Add callouts and and annotations to these chunks about what you think might work for that chunk.

Don’t forget that you can always be sketching as you are designing.

Good wireframes will achieve a balance between being too detailed and too vague.

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)

How will users navigate around the site? Determine this early.

What information should be included in a wireframe? Content, layout, behavior?

Primary StakeholdersHow have our business goals been met? DevelopersWhat do I have to support ad how does the site work? Visual DesignersWhat visual elements need to be displayed on the page? CopywritersWhat do I need to write? Wireframe CreatorsWhy did I make these decisions?

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

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