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 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 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 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 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, KeynotopiaMarvel

Source: unknown


What do you find yourself having to repeat or struggling to explain?

This article was originally published on Medium