What my first two years as a Digital Product Designer taught me about UI Design

Oct 12, 2019 · Design

Designing easy-to-use, valuable and well-crafted UIs is one of the main goals of every Digital Product Designer. Two years ago, I started my journey with no real formal design background (Computer Science & Media). This post summarizes some of the insights I learned along the way as well as advice, that would have been helpful at the start.

Nail the basics of graphic design ‍‍‍

Every discipline has its abstract concepts that are (mostly) easy to understand but hard to actively create in the beginning. For graphic design, there are fundamental concepts like balance, depth, spacing, layout, visual hierarchy, color or typography. There is immense value in spending time to internalize those concepts as they are an essential part of every thoughtfully designed UI.

For me, learning about those design concepts felt impractical at first. It requires experience to transform these abstract concepts into a concrete design. But as you begin to grow as a designer, these basic concepts will pop up more and more and you will find yourself actively looking for them. So, while you do UI design work, try to keep the basic concepts in mind and use them as a tool to evaluate your design. Thereby you can internalize the concepts and learn how to establish them on purpose.

There is one skill in UI & graphic design fundamentals that stands out to me: typography. Most web-based applications primarily consist of type. It’s type arranged in a certain way to make a desired functionality accessible. If you want to master UI Design, you have to learn how to use type effectively. Take a look at the products and services you use each day. Most likely, they are examples of a great use of type. And because type is everywhere, there are learning opportunities all around you: you can pay close attention when creating documents, writing emails or building slides. Learning how to use type effectively is a good starting point to master all the other fundamental concepts of graphic design mentioned above.

The most practical resource I found to learn more about the basic concepts of UI Design (including graphic design) is the book Refactoring UI by Adam Wathan & Steve Schoger. Read it. Read it again. Maybe even read it a third time. In the book, they cover all the most important basics with concrete examples.

Consume and reverse-engineer a ton of good design ️‍

In order to make delicious food, you must eat delicious food. The quality of ingredients is important but you need to develop a palate capable of discerning good and bad. Without good taste, you can’t make good food. If your sense of taste is lower than that of the customers, how will you impress them?

Jiro in Jiro Dreams of Sushi

Commercial break: Watch Jiro Dreams of Sushi. Jiro Ono is quite an interesting character.

When I started, I tried to reinvent the wheel with every UI I built. It is a pattern I recognize in a lot of people who start doing UI design work. Breakthrough ideas do not come from not being inspired by other people’s work. There is a ton of good design out there and there is a lot to learn from it. Look at functional as well as perceptual/visual patterns of great designers. That’s where your creative work begins. And as time passes by, you will start to actively create your own character and style, which will inevitably be a mixture of the designs you’ve consumed.

Moreover, consuming good design enables you to create your personal collection of sources to draw inspiration from. That is one of the attributes determining your seniority: if you have a collection of patterns in your head, it will speed up your design process and help you to make better-informed assumptions about what kind of solution might be effective.

Take a closer look at your favorite applications and try to figure out the reasons behind their decisions.

  • What makes this UI stand out?
  • What makes their context unique (e.g. users or use case scenarios) and how does this influence their design?
  • How do they establish hierarchy, balance or depth?
  • How do they use typography and color?
  • Which (un-)common patterns do they use?
  • Which trade-offs did they possibly make?

Sometimes these applications have a publicly available Design System (e.g. Shopify’s Polaris or Mailchimp). Well-crafted Design Systems are great sources of inspiration and learning. But be careful: don‘t worship your heroes too much. Apply their ideas to your context and come to your own solution.

Learn to write concise and helpful copy

Great UI designers are great communicators and an important part of communication is text. It plays an essential role for good UX. With good copy, you make your system’s functionality more accessible and even make your system feel more human. A few small words can decide on the success of a system.

Some things I learned along the way:

  • Speak the language of your users (or aim to make it even easier) → Be careful with jargon and slang; do not assume, that everybody knows as much about the application as you do
  • Use active voice → Turn passive sentences like „This product was bought by you“ into active ones „You bought this product“
  • Get rid of useless words → less is more; make your text easy to scan; every word/sentence in the application should have its purpose
  • Be consistent → use a consistent vocabulary within your system and also in regard to other systems (due to Jakob‘s Law)
  • Express character → define upfront, what attributes best describe the kind of language you are trying to establish

Moreover, test your copy. Create some alternatives and talk to users. This is the fastest way to learn more about their mental models and get one step closer to words, that perform.

Keep in mind: write for humans. Especially in corporate applications, I‘ve seen a lot of technical jargon which rather describes what the system does or how it is built rather than being helpful to users (implementation model vs. user model). I think that copy is not only one of the biggest issues in badly designed applications, but also one of the easiest and fastest things to fix. (At least to reach an acceptable level.)

Further reading material:
Google’s Material Guidelines are a great resource to learn more about writing better copy
How to build a better product with UX writing (Medium post)
16 rules of effective UX writing (Medium post)
Book Summary: On Writing Well by William Zinsser
Cringeworthy Words to Cut from Your Online Copy

Start on paper, start with text

I’ve wasted a lot of time getting into my screen design tools too early. The more projects I start, the more preparation I do on paper in the form of text and scribbles. It is the foundation for tight feedback loops and moving in the right direction as fast as possible.

Before I explore visuals, I take out my textbook/text editor and make a simple list of things that come to my mind regarding the problem I have to solve. Some of my usual questions are:

  • What is the main purpose of this screen (flow)? What problem am I trying to solve? Is it an actual problem?
  • What goals & metrics am I aiming at? What do I want to improve?
  • What research is available?
  • What information needs to be displayed? What’s most important?
  • What assumptions do I make?
  • What could be a small but useful experiment to learn more?
  • Who knows more about the topic than I do? Who solved a similar problem before?

Setting goals at the beginning helps you to keep sanity and to structure your thoughts. Without setting goals for your UI (e.g. “creating a memorable experience rather than being efficient”) it is hard to evaluate, why your current approach is good or bad. Goals help you to stay objective, rather than drifting into subjective discussions.

Moreover, the active part of writing down those things oftentimes already sparks some ideas about how to solve the problem or what the next steps might be useful. It is a way of exploring directions without going too deeply into one direction.

UI Design is way more than just screen design & prototyping tools. More often than not, writing down some words on paper is everything you need to find your next best step to take.

Create a lot of stuff (even if it’s not UI work)

In the end, there is still nothing more valuable than getting your reps in. Especially in the beginning. Try to create visuals for as many projects as possible, show them to people and observe their reactions.

If you want to improve your visual game, you do not have to restrict yourself to do UI work. For my first job, I joined the founding team of an Innovation Hub before their official launch. In the beginning, many tasks required visuals: marketing materials, logos or stickers. I gladly accepted these side tasks as they helped me improve my graphic design skills. And the more pure graphic design work I do, the better I become at UI Design.

Actively seek opportunities to do UI design or visual work. Volunteer on projects that seem fun. Help your friends with their side projects. Create posters for yourself. Build a logo for a fictional company. Create a lot of stuff with the intention to improve. Do not overthink it, just create stuff. Every project will help you to learn more about the basic concepts of graphic design, increase your repertoire of great inspiration, write better copy and improve your process.

Some additional insights

Be aware of the trade-offs you make: Whenever you add a UI element/feature, you also lose something (e.g. hierarchy, balance, flow).

Everything is better with more white space: UI Design isn’t Tetris. Give UI elements room to breathe.

Do not use Lorem Ipsum: Just don’t. Use real data. If you have no real data, think about how you can get real data.

Think in patterns/systems: Whenever you build something, think about how you might reuse it in other contexts. It establishes consistency and increases development speed which leads to accelerated learning.

Learn how to use your tools: Spend some time to set shortcuts for your most-used features. I see many people click features they use at least 100 times a day. Save yourself.

Create contrast by creating more than one solution: The key to finding good ideas is to know why they are better than alternatives. Always create alternative solutions and evaluate their strengths/weaknesses.

Fully intuitive might not be the goal: It‘s hard to make something fully intuitive and it ultimately requires you to say „no“ to a lot of other things. Maybe it‘s enough if the user understands the interaction after clicking it for the first time? The book Intuitive Design goes into more detail on that topic.

Learn to sell your design: Communication is everything. It is not enough to create awesome UIs, but it is necessary to learn how to communicate your design decisions to stakeholders. Book recommendation: Articulating Design Decisions by Tom Greever.

Look at your UIs the way your users will use them: Do not evaluate UIs on artboards in your screen design tool. For example, use plugins like Preview in browser to see how users will look at the UI. Keep the context of use in mind.

Keep the product in mind: The UI is just a piece of the big product puzzle. Sometimes the full-blown UI is not a sensible next step, but a stripped-down version of it. Leave your ego at the door. Do what’s right for the team and the product.