Essentials of UI and UX

Importance of UI and UX

It may not seem like it, but people do judge the book by its cover, even more so today. If your webpage isn’t visually appealing or doesn’t feel intuitive to use, most visitors will leave within seconds.

Modern websites are no longer just about functionality. They are more and more connected to marketing, and you need to compete for the attention of potential customers.

Ready! Set! Go!

Not so fast, it’s not the time to write code just yet. Of course, everyone has their own way of working, and you’ll find what suits you best over time. However, when it comes to design, one rule applies more than anywhere else: before you start, you can’t skip at least some level of preparation.

If you jump straight into coding and start throwing elements onto the page, you’ll probably end up frustrated, unsure where to begin, and the result won’t look quite right — especially if you don’t have much experience with web design yet. Try sketching out your idea first. Tools like Figma, or even just a pencil and paper, can go a long way in helping you shape your design before you touch the code.

Don’t Be Afraid to Prototype

In practice, you’ll often receive a brief or specification from your client. However, that’s not always the case, and even when you do, your client might not be very familiar with how websites are made. As a result, their ideas may not always make sense in a real-world implementation. Of course, the client should always have a strong voice in the process, but if something doesn’t seem right to you, make sure to discuss it with them.

Try to think about what your application truly needs and build from there. Create a few simple prototypes step by step. The key is not to get stuck. Each draft should be quick to make and not overly detailed. The main goal of this process is to explore multiple ideas, and then take the most promising one and refine it further.

And don’t be afraid to look for inspiration! Anyone can tell when a website looks good. When you find one that stands out, try to analyze it and figure out why it feels appealing to you. And why limit yourself to websites? Design is everywhere — on posters at bus stops, creative bus wraps, or even a coaster at your favorite café.

Give your design soul

A banking website will look completely different from a page full of children’s games. Adjust the overall look and feel of your design based on the audience you’re targeting. Sharper fonts and clean geometric shapes tend to feel more professional, while rounded edges and softer forms convey a sense of playfulness and friendliness.

Colors and how you use them also have a huge impact on the impression your visitors get from your site. Green feels calm and natural, while red gives off energy and excitement. Most of the time, you can rely on your instincts when choosing the right style for your audience — but if you’re unsure, take a look at other websites aimed at a similar demographic.

Be careful, though, with colors used for system messages. There are some widely accepted conventions:

Red indicates an error or forbidden action.
Orange is used for warnings,
Green represents success or a positive outcome.

Source: The Power and Psychology of Color in Design [Beyonddesign Inc.]

Limit your choices

If you pick from all 16 million colors every time, your designs won’t just lose consistency. You’ll also waste a lot of time. At the beginning, choose a small set of base colors and their shades, and stick to them.
You can always tweak or completely change them later if needed.

Do the same with font sizes, inner and outer spacing, heading margins, corner radius on elements, button shadows, and so on. It doesn’t make sense to have one gap set to 13 px and another to 14 px. Keeping them consistent will make your design look cleaner and your decision-making easier. If you don’t want to create your own design system, you can use Tailwind CSS, which already provides predefined sets of sizes, spacings, and colors that you can easily apply as utility classes.

Explore, discover, and stay curious

Reading this article won’t make you a professional UX / UI designer overnight, but it has hopefully given you a solid foundation to build upon. The goal was to show you what really matters in the world of design, so that you have an easier start and know where to dive deeper next.