Designing user interfaces can seem like a notoriously hard task, especially when you’re used to seeing highly-polished results from the work of multiple designers in bigger teams. When you only have an idea in mind, it can be hard to get it onto (virtual) paper. Most design sessions started with me working on ten areas at once to come up with designs like the following.
While the fundamental ideas were there, the design just didn’t come together and I quickly discarded the task altogether. As an engineer, I really like clear processes and I’ve often spent nights figuring out a repeatable way for producing wireframes, mockups, and other designs for my projects.
After multiple iterations, I’ve narrowed this idea down to a workflow that anyone (yes, anyone) can go through to come up with acceptable results. I say acceptable because I’m not a professional designer and there’s still a lot of potential for polishing, but as you will see, you can create the foundation for polishing and then spend time on adding the latest blur and gradient techniques Linear just used on their landing page. In fact, a good user interface design requires less creativity than you think, and most people expect experiences to follow well-understood patterns (if you want to discover these, read up on Don't make me think by Steve Krug or The Design of Everyday Things by Donald Norman).
Most recently, Tim and I had to prepare some preliminary mockups for our current iteration of Anzu. After running dozens of interviews, we repeatedly heard that finding knowledge, files, conversations, and other artifacts is a huge challenge for teams. As increasingly more tools are used at work, the harder it gets to find what you’re looking for, especially in environments with multiple projects and high attrition. Just try finding that one attachment sent in a mail three months ago, I bet you can’t. While we’re still validating possible solutions to this issue, a reasonable starting point is a universal search experience. Imagine Google, but for your company. And in the age of generative AI, why stop at search when you can offer a natural language interface to answer any question? Anyway, this post wasn’t to pitch our current iteration, so let’s continue with the design questions we need to solve.
Instead of trying to solve everything at once and ending up nowhere, let’s move ahead in well-defined stages and create the design we imagined iteratively, step by step.
What makes UIs and software design good?
While all the attention is usually paid to the last touches applied to a design, the truth is that corner radius, blur, shadows, and gradients matter less to the end user. What actually decides whether users stay on your landing page or keep using your application versus immediately ditching the site are a few essential design aspects.
Good designs respect common standards. Don’t reinvent the wheel when users expect your product to work a certain way based on their experience with other products. There’s a reason why standards exist, and going against the tide makes your life infinitely harder. Good products have a clear layout and hierarchy. Users instinctively follow the layout you provide, determining their experience subconsciously. Inconsistent font weights and color contrasts will mislead users. Good products use consistent spacing. Few things look more unprofessional than a mess of paddings and margins across a page.
When your design fulfills these requirements, you’re free to add colors and follow the latest trends. If you take a shortcut instead, you’ll end up spending hours on something that’s doomed to fail. Get your foundation ready, then make it pretty.
Step 0: Moodboard
As always, I started by creating a moodboard, a loose collection of leading product and UI designs (looking at you, Linear) to analyze trends and find a common ground to build on.
The designs in the moodboard usually reflect the exact area I’m working on: If I’m designing a landing page, I’ll collect a couple of landing pages I really like, if I’m building an onboarding experience, I’ll get just that. Occasionally, you can add generic design artifacts to the moodboard, such as design languages used by other teams, if it helps you later down the road.
Don’t spend too much time on this step, get 2-4 designs you really like and move on.
Start with the layout
With the moodboard in place, I started completely from an empty frame and slowly created a rough wireframe at the lowest possible fidelity. I had a vague idea of what we needed to get our value proposition across, so I started with a skeleton-like view of the product.
To deliver an intuitive universal search experience, I focused on figuring out the input and search result components of the interface as users will spend most of their time on those.
While there’s no content in the skeleton whatsoever, you immediately understand the layout on different viewports. We essentially start with a search interface and display a list of results. To allow users to narrow down the search, we add some filtering inputs below the search bar and next to the results, a pretty standard UX all things considered.
If you’re already rounding corners and adding gradients, stop right there. Your wireframe should look like you grabbed random shapes and put them on the artboard, that’s the whole point. It’s way too early for adding fidelity, so don’t waste your time.
Another helpful tip is to make sure the frame represents a reasonable viewport size like a MacBook screen. Don’t start with a frame that’s millions of pixels wide, even if it looks all the same within Figma, it’ll get much harder to implement the design down the road because sizes are off by multiple orders of magnitude.
Once you’re done with the wireframe, be honest with yourself and double check-whether it represents the experience you want to build. If you’re not convinced by the layout or users might have a hard time, start over. In the worst case, you just added some shapes, so the damage is limited. Only continue to the next stage if the skeleton checks the UX layout boxes.
Add your content
While the wireframe is a great first step, we need to add some general notion of content. Up until this point, you might guess what the depicted product is doing, but you’re going to have a hard time continuing if you don’t narrow it down with some real-world content.
For our search experience, I added content I expected the real product to include. No lorem-ipsum, no placeholders. Sure, you might not have all details figured out just yet (especially if you’re designing a prototype), but make an educated guess and go for real content wherever possible.
And while you’re designing, don’t forget that the same rule as earlier holds: This is not the time for adding fidelity. Add the text and images needed to represent the experience, and feel free to iterate until you’re satisfied. Once the content represents your envisioned experience, we can move on.
Essential design elements
I heard you loud and clear and I’m granting your wish to “start designing”. Even though the steps we just went through were nothing less than a good design process, we can satisfy the inner voice that tells us to round corners. In this stage, we’re making essential adjustments to the design, concerning sizing, contrast, and text layout. The result of this step should be a slightly more polished version of the last stage, highlighting specific areas a user should focus on and setting display priorities by defining text size, and font weight, and adding basic contrast to different elements.
Note how we didn’t add any accent colors, gradients, shadows, blurs, and color blending modes yet. This stage is designed to validate the hierarchy and structure of your user interface, highlighting or pushing less important content into the background.
It is essential to lock in your typography and contrast in this step. These aspects are far more important to the overall experience and will enable a great design later on. If you’re not convinced by the way your text is displayed or how different elements are displayed, go back to the drawing board. As a goalpost, you should be satisfied enough to ship this design for your MVP as is, without any further improvements. If you’re at that point, you may continue.
Make it pretty
In the final stage, you can go crazy with different colors, gradients, and whatever trick you’d like to try. Color blending modes and gradients can drastically change the appearance of your design, so feel free to experiment a ton and keep what works.
Because you followed the previous steps and created a solid foundation, there are no real restrictions other than to consider the end user in this step.
Once you’re satisfied with your result, you can move on to implementing it (or put it on a great read deck).
As I said before, I’m lots of things but not a professional designer. I’ve always wondered how great designs come together, and I believe I found a workflow that, if followed, allows anyone to create solid designs, every time. User interface design is not magic, the creative part only comes due in the end and if you’ve spent some time aggregating a moodboard, you can wing this part.
Always remember, the user doesn’t care about your thoughts on the design, instead, they follow their instincts developed by using lots of products over multiple years, so you’re better off following what’s been proven to work and applying your personal touch at the end.