Design terminology, demystified
“Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works.”
Steve Jobs was right: “design” means wildly different things to different people. One reason, I think, is confusing terminology.
OK, but who cares? If you call yourself a designer, you should.
Explaining to your coworkers what you do and why it’s valuable isn’t a nicety, it’s essential. And it all starts with being able to communicate in terms everyone can understand.
USER FLOWS
User flows are process maps for performing tasks in an app. Put simply: they’re boxes with user actions and app responses connected by arrows.
Why they’re important
You need a clear idea what steps the user should take before you start designing (and building) the pages they’ll interact with.
How they’re made
Pencil & paper, Keynote/PowerPoint
WIREFRAMES
Wireframes are rough physical or digital sketches. These are bare-bones versions of an app’s actual pages, often using placeholder images & text.
Why they’re important
Wireframes strip an element down to its basic components. This helps brainstorm at a high level — what’s on this page? — without getting bogged down by details like fonts and colors.
How they’re made
Pencil & paper, Balsamiq
MOCKUPS
Mockups are pixel-perfect, static designs. This is where you want to focus on the details.
Why they’re important
Although they aren’t functional, mockups look like the real thing. This let’s you show potential features to clients or stakeholders and get a more honest reaction than you would from a rough sketch.
How they’re made
Photoshop, Sketch
PROTOTYPES
Prototypes vary in fidelity from paper to actual code, but they’re all representations of “the real thing.”
Paper prototypes are often a series of cards that represent different pages and states of an app. The user navigates by “clicking” (i.e. pressing) on elements and the experimenter swaps cards to represent changes.
Digital prototypes often use Keynote (or Powerpoint) to create an “app” you can demonstrate on a desktop or mobile device. They’re simple to set up but you can also get fancy with animations.
Why they’re important
Just talking to customers about a feature is good, but watching them interact with what you’re planning to build is much, much better.
How they’re made
Paper & pencil, Keynotopia, Marvel
AND?
What do you find yourself having to repeat or struggling to explain?
