Design – UI design basics

Designing a user interface is easy. Designing a good and easy-to-use user interface is not. Or is it? Well, it requires you to put in quite a bit of thought and time. For me personally this is where most of the fun resides. So, grab yourself a piece of paper, a pencil, and put on some relaxing music without lyrics.

Before you start drawing right away, ask yourself the following questions:

  • Why?
  • What/How?
  • Who?
  • Where?

Write the answers down. Congratulations, you just have done the hardest part of the whole process. Now look at your answers. Especially the answer to the “Why?”-question is important – this’ll be the red thread leading you through the design process.

An example of using the four questions;

  • Why do I make this article? > To help beginner designers design good user interfaces.
  • Who is this for? > Beginner (UI) designers.
  • How? > By writing an article with fundamental tips and making them think about it.
  • Where? > On the web (my own blog).

As you can see, all other questions reside around the answer of “Why?”. And your design will too – as good UI design will help your user to achieve the “Why?”-goal with as little effort as possible.

So, now that we know what we want the user to achieve with our app, let’s get sketching!

Don’t hold yourself back, try sketching out even the craziest ideas; the most important thing to keep in mind is that it should help the user achieve it’s main goal with as little effort as possible. If you’re stuck, don’t hesitate to look at the competition! Grab a phone, PC, or any other device and start playing around with other apps. The design of my own app – Snips – had influences from things I like and dislike about the Notes-app on iOS, Google Keep.

Got a few sketches? Cool! Now it’s time to make them a bit more realistic. For this I always keep the following in mind:

What are the current design guidelines on the platform we’re aiming for?

This is sometimes necessary, but not all the time. Personally I like things to feel native for a user. This helps them give confidence as the looks are familiar and they don’t have to learn everything from scratch.

Restrict yourself to only 4 visible (primary) commands in a CommandBar;

This is a common mistake that I see happen a lot in UWP-apps. While more buttons can lead to more features, it also means more choice stress and distraction for the user. Try restricting the primary commands to only 4, unless you really need more. If you do need more it might be in your users interest to rework this CommandBar into something else entirely, such as a Ribbon interface.

Try using only 1 accent colour aside from black, white and grayscales.

This’ll help design for both light and dark-modes while keeping colour madness at bay.

Try using the accent colour sparingly.

By following this, you can use the accent colour to make things stand out and attract the user’s attention to something (while making it look pretty as well!) 😊

Once you have the main sketches down, choose one that you like the best and start building it for real in Photoshop, Illustrator, Figma or in your favourite IDE. Don’t throw those other sketches away, they might come in handy if the result doesn’t feel satisfying at all.

When you have the basics built, go and stress test it. Spam loads of items into ListViews, go nuts in TextBlocks and see what happens when you go outside the expected use-case. You’ll be surprised how many awesome little things can turn out weird when thrown in a “real-life” situation.

Now you know the pain points – try iterating on them! Change what you don’t like, try some more wacky stuff, and (above all) have fun!

If you want a sample of this part of the process, you can read an older article I’ve written here:

I hope this post can help some of you beginner designers out there get started. I know I’ve skipped over some specifics, but I wanted to give you a good basis when it comes to thinking about your design.

Please let me know what you think – if you like it-, why not buy me a cup of tea?

Shoutout to Michael West, who helped proofread this article. Go give this man your cheers on or on Twitter @itsmichaelwest.

 Until then, happy designing! 😊