4 things that made my UI design much better

4 things that made my UI design much better

Have a lot of color scales.

As you keep designing, you will realize you need way more colors than you think. You need a color for accents and backgrounds, to show elevation, to show hierarchy, to emphasize elements, and so on. So, having a variety of color scales at your disposal is crucial. When you limit yourself to just a few colors, you end up in a situation where you just can’t get the right color balance for your design.

By scales, I mean each of your brand colors should have a considerable amount of tints and shades. I barely did this when I started. I would previously just set up the brand colors and leave it at that. By creating multiple scales of each brand color, you end up with a wide range of colors to choose from when looking for something lighter or darker. This is especially helpful for grays as you would be using them frequently.

I find using 10–12 scales of a brand color to be a perfect fit between having too little and having too much. To generate color scales, I use tools like Colorbox and Coolors. These tools allow me to quickly generate and organize color palettes.

If you’re not familiar with creating color scales, I put together a quick tutorial on how to do so with Colorbox. You can watch it?here


No alt text provided for this image
Colors scales for a project

Have a direction in mind

In the past, I start designs without a clear direction in mind. I always felt all the pieces would fit as I kept designing. In some rare cases, the pieces fit; most of the time, they didn’t.

It’s essential to start with a clear direction in mind. This way, you structure your designs around a specific goal or outcome. This direction could range from an outcome you want to achieve, an emotion you want to evoke, or an aesthetic you want to create. The key is to have something that will guide and inform all your design decisions.

You could approach your design towards a specific style such as brutalism—a design stripped of every extravagance to show what is absolutely necessary. Using this direction, you end up with something cohesive and consistent across all screens.

Your design direction can vary based on your preferences or the client’s needs. You could also have multiple directions as long as they complement each other and ultimately achieve the desired outcome.

However, it helps to be flexible with your direction—some unexpected events might show up or you might see an opportunity to explore something else. Be willing to adapt your direction to changes while designing.

No alt text provided for this image
I used gradients and shapes to show the direction of a web3 app.


Use references and copy them…a lot

Sometimes, to get started, you need to look at what has been done.

References are designs or ideas similar to what you are aiming towards. They provide you with inspiration and ideas to get you started. This could be a website, portfolio, app, or anything at all. You can find references in the most unexpected places, so it’s important to keep an open mind and be willing to explore different sources.

In the past, I used to look for design ideas from other sources but never took the time to examine why they caught my attention. However, I’ve learned to always create a moodboard for projects I am working on. I simply copy or screenshot references into my moodboard (which is always close to my artboard)

The goal of a moodboard should be to critically examine why a particular design looks interesting and what you can take out from it. This could be the font, the color combination, the spacing, or a specific element of the design. After discovering what caught your attention, make a deliberate effort to see how you can use those elements in your current design.

There are a lot of sites for UI design references. Some of my favorites are?Dribbble,?LandingFolio,?Mobbin,?Godly

No alt text provided for this image
Moodboard for a project I am working on.


Find places to go the extra mile

Consistency is crucial in UI design as it helps users to understand the interface and navigate it with ease. However, there are certain areas in every design where you have the freedom to be more creative and add some flair. These are the places you can go the extra mile and add some personality to make your design stand out.

For instance, if you’re designing a fintech mobile app, you can add an element of surprise by using exciting illustrations on the hero page or designing an eye-catching card display section. The goal is to look for sections like these where you can get creative.

By going the extra mile, you’re spending more time exploring different design options and finding ways to make the design more visually appealing. For example, instead of a typical radio button, you can experiment with adding a shadow or stroke to the active state, giving the user a more immersive experience.

Putting in that extra effort adds some polish to your design and users will appreciate the experience. When going extra, take risks and try out some wild ideas as this could be the difference between a good design and an amazing one. It is more like seeing something great after going through a lot of good.

However, the goal is not to sacrifice usability for aesthetics. Instead, to create a design that is both functional and visually appealing.

No alt text provided for this image
A section on Flutterwave’s website


And that’s it. Those are the major things that made my UI design better. If you found this helpful, I suggest we connect here on?LinkedIn?and?Twitter.

Hope you found this useful.

要查看或添加评论,请登录

Godwin John的更多文章

  • How to get ideas you can move forward with

    How to get ideas you can move forward with

    Here is what I do when I need to get ideas running. This is no exhaustive list, just some things that have worked for…

  • 5 reasons I was slow while designing and how I solved them.

    5 reasons I was slow while designing and how I solved them.

    Starting from scratch a lot of the time Before, I always started from scratch when designing components. But then I…

  • Navigating on Figma

    Navigating on Figma

    Have you ever worked on a large Figma file where you often have to move from one frame to another? Then, you know how…

  • Opportunity

    Opportunity

    Does it come just once? Is there an event that changes your whole life? I don’t think so. I think it is a chain of…

  • Decision making?

    Decision making?

    Making decisions isn't the thing to avoid. It is the time that we spend on making each decision that should be…

  • How I make logos

    How I make logos

    I can’t say I have a process of creating logos. I like to call it sort of a structure.

    4 条评论

社区洞察

其他会员也浏览了