Journey

Start your designs with a concept

How to stop designing on autopilot.

Fabricio Teixeira
UX Collective
Published in
3 min readApr 4, 2018

--

The best designers I know always start a project with a concept (or conceptual model). What’s your design concept for this project? How do you envision people interacting with your product? What model are you trying to emulate in your UI?

“A conceptual model is a representation of a system, made of the composition of concepts which are used to help people know, understand, or simulate a subject the model represents.” — Wikipedia

But other designers go straight into crafting what the interface will look like, before defining a solid vision on the conceptual model for that system.

The result?

Interfaces that are conceived and designed on autopilot — interaction patterns that aren’t strategically aligned, user paths that don’t follow a clear logic, screens that are inconsistent and do not ladder up to a consolidated metaphor or concept.

Defining a concept upfront can help shape everything that follows: the interactions, the relationship between elements, the tone of voice and copy, the transitions, the animations, etc. Once you have a strong concept, all these aspects start to align.

But conceptual models are abstract.

It can be hard for designers to get used to thinking this way.

Here are a few examples:

  • Tinder’s cards model. The user has a deck of cards in their hands, and they start to split those cards in two other groups: the chosen ones, and the discarded ones. Great, that’s the concept. This informs the visuals (digital cards that actually look like cards), the interactions (swiping left means “discard”, swiping right means “choose”), the UI transitions, and so forth.
  • Google Earth’s planet model. Nothing more obvious if you’re trying to navigate around Earth than letting users “play god” and rotate the planet in each and every direction. This affects the visuals (the planet is floating on a dark background when you first load the application), the interactions (dragging and dropping the map will reposition it on the screen), the transitions (when you “release” the planet, it continues to spin for a little bit, emulating a physical globe), and so forth. This concept has also had ripple effects on Google Maps for mobile and web.

There’s a chance some of the most memorable interfaces you have played with remind you of another interaction model you have used in real life.

Skeuomorphic interfaces (when iOS was first launched) utilized quite explicit conceptual models that helped users understand how the interface would behave.

Concepts are simply metaphors that designers use to help people understand how a system will work.

But conceptual models can make stakeholders anxious, because they are not necessarily interfaces. They require time, and thinking, but they don’t necessarily look like the interface people will interact with (sometimes they look like a diagram, or like boxes and arrows, or just a few paragraphs of text).

Still, they are important.

Products that start with a conceptual model have bigger chances of remaining consistent as they evolve and as new features are added. Creative concepts act as a north star to align everyone in the team in regards to how the product should evolve.

Having a creative concept doesn’t mean that the product has to always look the same. Quite the opposite. It’s interesting to see how certain products evolve, visual design trends come and go, functionalities expand — and yet, the conceptual model can remain consistent over time.

So…

What’s the concept behind the product you’re working on right now?

This article is part of journey: stories about the amazing ride of being a designer.

--

--