We all know that great UI design brings about great success.
By great success, I mean GREAT to the extent that you can raise your website’s conversion rate by 200% thanks to your improvements on the UI design, as a report suggests.
What exactly is great UI design, and how can a designer achieve it?
In this article, I will try to explain what makes a great UI design with examples across various formats and businesses.
Focus on the User
Yeah, I know it sounds like stating the obvious but sometimes as a UI designer, you should check up on the needs of the users again and again. It is not a one-time task to define what your users might want to see and experience while using your digital product or visiting your website.
For example, go for familiar design elements for your user personas. Do they use Instagram mostly? You can adopt a similar design for your icons.
Actually, it is how you can build an intuitive UI design.
Users look for these three in a design:
- Accomplishing the task easily
- Not spending so much time doing it
- Enjoying the experience
And for providing each of them, you need to stick with the KISS rule.
No, not a literal kiss.
KISS rule means Keep It Simple, Stupid.
That’s to say, don’t try to add more and more to your design if they are not needed.
Great UI design turns what is complicated into simplicity and looks stupid, covering all the complex functions working in the background. This way, it serves the needs of the users I mentioned above. Although I will focus more on the enjoyment part of it in this article, I will try to touch on some functional aspects, too.
By the way, if you are interested in UI and UX design trends, check out this article in the UG blog.
Without further ado, let’s look at great examples that applied those rules to their design or failed at some points…
1. Asana
What do I like about it?
Asana is a SaaS product with an outstanding design.
What makes it outstanding is primarily the use of animations in its design. For example, a unicorn appears on your screen to celebrate you when you complete a task. Isn’t it cute?
You would feel grateful to be accompanied by these animated characters while working on a stressful task. This is exactly how you can make the user experience more fun.
Also, Asana’s great UI is extremely easy to use and requires almost no prior information.
Last but not least, the card design provides a better visual experience for the user.
What could have been better?
I must say that even if its intuitive design makes it a great product, it has its problems.
As a user in Asana’s community forum indicates, you need to open up each task to see if subtasks are under its heading. In other words, you cannot see the details of the tasks without clicking on them and viewing the totality of the task. There might be a sidebar for previewing the subtasks and their assignees.
Plus, a very subtle problem of the product in terms of design is the appearance of closing buttons [X] and [done] at the same time, even though they function the same.
This is a good example of presenting unnecessary elements which take you a step back from accomplishing the rule of KISS.
2. Gumroad
What do I like about it?
Gumroad decided to step into a new design system and has gone with it since then. If you don’t know Gumroad, it is an e-commerce product for digital publishing, and its UI design is more than impressive.
But what is a design system? A design system is a database of components and guidelines that can be combined into several other applications and used multiple times. Most of the big apps you know, such as Dropbox, Google, and Mailchimp, use it for efficiency.
The color palette is what distinguishes it from other e-commerce platforms.
It is like back in the 80s with its lively hues. It is called Memphis design, and it is famous for its bold contrasting colors and abstract shapes. You might call it retro or vintage, but it works nowadays.
What could have been better?
There are loads of people who hated Gumroad’s new design.
And there is even a roasting video for its landing page on YouTube.
The main reason for that criticism is its outdated look and loud style. I can’t say I agree with them as I am a bit of a hipster myself, maybe 🤭
Although I agree that it does not totally match its business aim, I am still on the side of daring color schemes to shine among the others.
3. Headspace
What do I like about it?
We are all more open to diversity, and some mobile apps seem to be adapted to it, too.
One of the most famous well-being and mindfulness apps, Headspace, wins my heart with its inclusive UI design with accessibility tools.
You can also change the font and the color of the texts within the app, which is a big plus.
But more importantly, Headspace integrates VUI (voice user interface) into its design. It is basically a speech-recognition interface to respond to human voice and turn voice into text.
What could have been better?
Umm… “Nothing” can be an answer sometimes.
I really can’t say anything bad about Headspace’s excellent UI design, and my research also concluded that it is peerless in terms of the combination of UX and UI. You might want to check out this article I enjoyed reading.
4. Hello Monday
What do I like about it?
Hello Monday is a digital creative studio, and it proves its success with its webpage.
The use of white space makes all the elements more catchy and meaningful.
And the interactive cards make the user feel something, like touching a puddle and watching the reflections move.
The custom illustrations and drawings are an important part of its visual design and look damn good. It provides us with a special and unique experience contrary to the ready-made world of design elements and images. Also, it gives a genuine vibe to spend more time on the page.
What could have been better?
There is no scroll-down bar on the right side of the page against the expectation. There appears the navigation icon which doesn’t serve my aim of seeing the rest of the page quickly and easily.
Although it is nice going against the design conventions sometimes, I don’t think scrolling down via mouse pad is a nice experience.
5. Dribbble
What do I like about it?
Dribbble is an alive and huge database for designers. That’s why its UI design is a success story.
The cards serve the function of creating a gallery and seeing many pieces of wonderful design at once.
It is also nice how you can search based on color codes to see the designs with that color dominant.
What could have been better?
I wish the cards were interactive. For example, I would love to see some details of the designer or read about the design when I come upon a card with my cursor.
The cards are much better used when built with interactive design in mind.
Key Takeaways
UI design process requires more than just design skills or design tools. You can be great at graphic design but fail at satisfying real users. In order to prevent that, UI and UX design work together in all the successful examples I mentioned in this article.
So, try focusing on the user while browsing through design inspirations.
Frequently Asked Questions
What is UI design, with an example?
UI design or user interface design is the creation of any visual element, interaction, or animation in a product or a webpage, such as Google Docs’ sidebar and top toolbar. The buttons to click, the texts, images, sidebars, layouts, and sliders are some elements of UI design.
Where can I find good UI design examples?
Dribbble is the best web page to view tons and thousands of UI design examples. You can use the search bar to find good examples based on your industry or preferred style. Furthermore, you can share your portfolio as a designer or hire top-tier designers on this platform. However, keep in mind that it is highly criticized for not taking user experience design and functionality into account. So, be aware of it, and don’t forget to combine UI and UX to achieve better solutions.
Also, you can check Awwwards for viewing landing pages with great UI design and awarded by designers’ and users’ votes.
