I've been designing professionally for nearly a decade. If you do anything for that long, you start to notice recurring themes. One of those themes is that most laypeople have no idea what these terms that designers throw around really mean. They don't understand what a UX or a UI is, what a wireframe or a mockup is, what's the difference between a frontend person and a UI person, etc. The result is that you have all of these terms thrown around interchangeably, and it makes communication very difficult.
It's not their fault – the terms are confusing and I'd wager that half of the designers don't fully understand the terms(I didn't for years). Believe it or not, there's no simple, down-to-earth guide that explains design to the layperson. This is my attempt to fill that void. I've been using a similar explanation for people I encounter in real life, and it's been received well. It contains almost no design-lingo.
How Design Works – A Primer
The key thing to remember about design is that no matter what you design – whether it's a website, an app, a shoe or a helicopter – the process is always the same. Whether consciously or unconsciously, you're always going through the same 3-step process:
- Who is it for and how are they going to use it
- Sketch out how it could work and where things will be roughly placed
- Clearly define what it will look like and how it will work
Let's go through each of the steps in a bit more detail.
Step 1: Who Is It For And How Are They Going To Use It
In design-lingo, we call this phase "User Research". This is the most important part of the process. It sets the trajectory for the rest of the project, and also focuses the thoughts and energy of the group around something clear and measurable.
So if, for example, we are tasked with designing a new watch, the first question we ask is "What kind of watch?" – Dress watch? Sportswatch? Will men or women be wearing it, or both? Will they be using it underwater? On a plane? Each watch is for a different purpose and a different audience. This line of thinking applies to anything you're creating.
You always have a rough idea of the group you're targeting. From there, you can use different tools to find out more. The easiest way is to do some internet research. It's fast and can give you some rough ideas.
However, the two best ways to find out about who you're designing for, are 1) to ask people from the group you're targeting, and 2) watching them in action their environment, using the thing that you're looking to improve with your new design.
When you hear a designer talk about contextual inquiries, heuristic evaluations, focus groups, use cases and personas, those are all just tools to clarify who it's for and how they will be using it. It's a complex, fascinating field and there's people out there who dedicate their entire lives to mastering the details of it.
Step 2: Sketch, Get Feedback, Sketch Some More
In design-lingo, we call this phase "rapid prototyping". It's really just glorified paper sketches. Even if you're using a computer, even if you're 3D printing stuff, you're still sketching out rough ideas of where things will go and how they could work.
You then take those rough ideas to people from step 1, get feedback, and refine your sketches. Continue doing this process of sketch-feedback-refine, until you either run out of time, run out of money, or you have enough information to move forward to step 3.
So when you hear designers talking about wireframes, rapid prototyping, iterative prototyping, rapid iterations, and show you something that looks like a bunch of unfinished sketches that roughly resemble the finished product, they're figuring out how it could work and where things will be roughly placed. It's a signal that you're working with a really good designer.
When you're designing websites and apps, this step also includes discussions on what types of text and images you will have in your product. This step is called "content strategy" and is very important. You can't design a website or app without knowing what will be in there.
Step 3: Get More Specific On Shapes, Materials & Colors
This is the part of the process that most people associate with "design". In design-lingo, we call it "visual design", or "(user) interface design". It's where you get very specific about how the product will look and feel. It's when you talk colors, shapes, typography, materials, smells, etc.
Especially when you're working on a complex project, or a completely new idea, step 3 can get very complex. There's many different combinations of elements you can use to define the look and the feel of a project, and some of them are stylistic choices where there is no clear, measurable winner. For example, how are you going to decide between two shades of red? Or how pronounced you're going to make a shadow on an interface? Or by how many degrees you're going to taper off the watch strap at the ends?
There's methods to narrow down these choices, and in extreme cases, you'll see designers going through a customized version of step 2 just to roughly sketch out a multitude of styles you could go with. Ultimately, however, this is the part of the design process that's not entirely rational.
After you've gone this entire process, the end result will be a set of documents that very specifically define how a product will look, feel, and function. At this point, you can hand it off to developers, or a production factory.
In Real Life, It's Not That Simple
Of course, if it were as easy as it sounds in this rundown, there wouldn't be such a need for good designers. Here are some real-life situations you might run into when you try to design that way:
- No money/time for research
This happens more often than you might think, and it always leads to problems.
- Involving developers/manufacturing too late in the process
This can lead to problems, because you may find out that you can't manufacture it in the way you intended. That's why it's always good if the designer has a background in development/manufacturing.
- Inflexible developers/manufacturers
I recently worked on a small project where the developer told me he can't automatically refresh the search results page when a user clicks a checkbox, because "The Content Management System doesn't allow it". I had worked with that particular CMS many times and used to do HTML/CSS development for a living. I knew that what he was saying wasn't true. Bad developers make excuses, good developers tell you "This is possible, but we need to do X, Y and Z to make it happen".
- Step 2 and step 3 blurring together
This can happen either because 1) the product is very simple and you don't need to seperate steps, or 2) the decisionmakers don't understand step 2.
- Conflicts of interest
What the user wants and what the business wants isn't always the same, so you'll get very disparate information that you need to turn into something cohesive.
More Examples Of This Process In Action
Published by: Jamal Nichols in Brands