This guide aims to help those Juniors or newly transitioned designers with good rules of thumb and processes that they can use when creating a UI design on their own.

Gather and understand your requirements

Firstly, you need to know what your UI is and what its purpose is. To gather these, it’s important to sync up with your client to know what feel they want, how it should look like, what features they want to see, and what they’re for. Knowing what the client wants is the no. 1 thing you need to know.

Next, it’s time to understand what these requirements are and this requires a good amount of research. Let’s say the client wants a clean and minimal approach to a podcast website page, we can’t just put words and buttons with just using “Arial” as the font and call it “minimal.” It’s a good rule of thumb to look for references and inspirations that we can then present to the client.

Build the information architecture

After gathering your requirements, you should build your UI’s foundation. This requires information architecture, which is the backbone of your design.

Information architecture is understanding the audience of your UI, thinking about how it can make our designs better, friendlier, and more functional for them, and creating a better flow for the users to navigate your UI. Start thinking about how your UI should be organized, and where elements should be and shouldn’t be, and consider if it can be comprehended.

“Information architecture is the way that we arrange the parts of something to make it understandable." - Abby Covert, How to Make Sense of Any Mess

Place your design’s basic elements

A good practice of UI design I learned is to fix your basic elements first like texts, fields, buttons, etc. before you make your design “pop.” This is so you can add good hierarchy and flow to your designs to make the user have an easier time understanding your UI, which is in conjunction with your information architecture.

Build your layout first, add the texts or “copies” that are needed, and take a step back and ask yourself if it flows well and is understandable. In this way, we don’t have to risk taking too much time with doing both elements and aesthetics, especially if it doesn’t work well. Focusing on organizing your elements will help you speed up your process and understand your UI.

Designing your UI

We can start making your interface! Add color, use proper fonts, make use of proper white space, and other best UI design practices. For this, I would recommend that you use a style system, which is like a preset system containing color swatches, font sizes, weights, and probably even illustrations to help you get started. There are many style systems that you can use online, especially for free!

Profit (?)

Congrats! You have finished creating your UI design! But do you know why there is a (?) to this section’s header? Maybe for some reason, you don’t feel confident with your design, or you feel like there’s something off with it?

This calls for feedback, and a good way to get this is to ask from a team you’re in, someone you know who’s good with design, or from a community that you’re in. Asking for feedback is a very important thing for you to do to improve your design and know the opinions of other people concerning your design. Not only will this help your UI but it will also help you learn how to create better and more effective UI in the future.

But if you’re confident with the outcome of your UI, then congrats! You’ve just created your first UI and you have learned the basics of UI design.

What’s next?

UI design is honestly a wonderful career if you have ever chosen this path. It’s full of opportunities to learn, research, grow, and understand how design works, not just for UI, but even for design in general.

This guide is just a starting guide for juniors and newbies, but I believe this is a good way for them to kickstart their knowledge about UI design and their eagerness to create designs.

But if you’re looking for a community that can help you build your UI designs, go check out our design community “Design Hive” on Discord! We’d be happy to help give you feedback that you need to improve your designs.
‍

You can join through this link: https://discord.gg/5ZuEPJt6mV

‍