{"id":6967,"date":"2022-06-28T14:50:15","date_gmt":"2022-06-28T14:50:15","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=6967"},"modified":"2024-01-16T11:57:39","modified_gmt":"2024-01-16T11:57:39","slug":"good-ui-design-9-examples","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/good-ui-design-9-examples\/","title":{"rendered":"What does good UI design look like? 9 examples to delight and inspire you"},"content":{"rendered":"

UI design (or user interface design) refers to the look, feel and functionality of a digital product. It covers the design and curation of buttons, graphics, typography, colour palettes, spacing, animations and more. It\u2019s basically everything you see and interact with when you visit a website or use an app on your phone.<\/p>\n

When UI design is done well, it has the power to delight the user, guide them through the completion of specific tasks and to convey brand values and personality.<\/p>\n

But what does good UI design look like in action? Here are 9 examples of exceptional UI design.<\/p>\n

 <\/p>\n

\"Butter\"<\/p>\n

1. Butter<\/h2>\n

Butter<\/a> is an online platform designed to make virtual collaboration \u201cas smooth as butter\u201d \u2014 and, if their UI design is anything to go by, they\u2019re definitely nailing the \u201csmooth\u201d part.<\/p>\n

The Butter website is a delight to navigate. Popping colours, cute graphics, bold typography, and even the odd GIF or two perfectly convey the Butter brand: down to earth, straightforward, and fun to use.<\/p>\n

\n\t
\n\t\t
\n\t\t\t
\n \n

[GET CERTIFIED IN UI DESIGN]<\/p>\n Take our Professional Certificate in UI Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

Despite Butter\u2019s bright colour choices and playful visuals, their UI design is clean and clear with plenty of white space and contrast, ensuring the website is not only aesthetically pleasing. It’s\u00a0 also easy to navigate\u2014a true marker of good UI design.<\/p>\n

\"Butter\"Butter\"Butter<\/p>\n

See more on the Butter website.<\/p>\n

\"Omio\"<\/p>\n

2. Omio<\/h2>\n

Omio<\/a> is a travel website for comparing and booking train, bus, flight and ferry tickets. Unlike Butter (our previous example of good UI design), Omio has gone for a more understated \u2014 yet equally impactful \u2014 aesthetic.<\/p>\n

As you scroll through the Omio website, you\u2019ll find a calm colour palette, beautiful custom illustrations and seamlessly responsive design. You\u2019ll also notice excellent use of visual hierarchy to highlight the most important elements on the page.<\/p>\n

The Omio website is a good example of UI design that\u2019s elegant, sleek and effortlessly guides the user to accomplish their goals.<\/p>\n

\"Omio<\/p>\n

\"Omio<\/p>\n

\"Omio<\/p>\n

See for yourself on the Omio website<\/a>.<\/p>\n

\"Protagonist<\/p>\n

3. Protagonist<\/h2>\n

Protagonist<\/a> is \u201can app for readers to discover, read, and love literary magazine stories, poems, interviews and more\u201d. It\u2019s also one of the most impressive examples of good UI design we\u2019ve seen on the web to date.<\/p>\n

Protagonist is all about eye-catching colours, clean, high-contrast text, out-there visuals and, of course, the overall \u201cWow\u201d effect achieved through Parallax scrolling.<\/p>\n

Parallax scrolling is a web design technique where the background moves slower than the foreground, creating a 3D effect as you scroll down the website. It creates the illusion of depth, giving you the feeling you\u2019re moving immersively through the website rather than simply scrolling through it.<\/p>\n

This is a truly powerful UI design you simply have to experience for yourself.<\/p>\n

\"Protagonist<\/p>\n

\"Protagonist<\/p>\n

\"Protagonist<\/p>\n

Visit the Protagonist website<\/a> and scroll through for the full adventure!<\/p>\n

\"Superlist\"
\n4. Superlist<\/h2>\n

Superlist<\/a> is a productivity tool in the making and their website is a great example of the elegant yet dramatic power of dark themes in UI design.<\/p>\n

Superlist\u2019s UI centres around a simple colour palette of red, white and black. As you scroll past the initial above-the-fold red, the background transitions to black with white text and slick 3D graphics. You can\u2019t help but feel that Superlist is sleek, polished and professional.<\/p>\n

Pay closer attention and you\u2019ll spot some impressive button design and cheeky microcopy<\/a> (for example: \u201cDefinitely don\u2019t press this big red button\u201d), adding a hint of personality.<\/p>\n

Superlist\u2019s UI is sophisticated, polished, and extremely powerful. A wonder to behold!<\/p>\n

\"Superlist<\/p>\n

\"Superlist\"Superlist<\/p>\n

Experience this awesome UI design first-hand on the Superlist website<\/a>.<\/p>\n

\n\t
\n\t\t
\n\t\t\t
\n \n

[GET CERTIFIED IN UI DESIGN]<\/p>\n Take our Professional Certificate in UI Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

 <\/p>\n

 <\/p>\n

\"Kukla\"<\/p>\n

 <\/p>\n

5. Kukla Kit<\/h2>\n

Kukla Kit<\/a> is a comprehensive library of downloadable 3D elements. The library is made for UI designers, so it makes sense that the website itself is a work of UI design excellence.<\/p>\n

Everything about Kukla Kit is, quite simply, delightful: from the cheerful colour palette to the clear, beautifully legible typography and the array of charmingly quirky 3D characters featured throughout.<\/p>\n

Kukla Kit makes excellent use of white space and keeps text to a minimum, ensuring a clutter-free, easy-on-the-eye design. What\u2019s not to love!<\/p>\n

\"Kukla<\/p>\n

\"Kukla<\/p>\n

\"Kukla\"KuklaSay hi to Kukla\u2019s delightful 3D characters over on the Kukla Kit website<\/a>.<\/p>\n

\"Boldare\"<\/p>\n

6. Boldare Boards<\/h2>\n

Boldare Boards<\/a> is an online collaboration app for remote teams and their entire UI design is bursting with personality.<\/p>\n

As soon as you land on the website, you\u2019re transported to a retro, pop art-reminiscent world of colour, bold statement text and undeniably cool graphics. As you scroll, you\u2019ll notice how the cursor icon changes from a hand to a large arrow and even to a love heart.<\/p>\n

Along the way, you\u2019ll also find an array of spinning animated graphics and smooth transitions from one section to the next.<\/p>\n

This is a great example of how to pull off UI design that\u2019s daring, a little bit out-there and entirely unique, ensuring a delightful and wholly unforgettable user experience.<\/p>\n

\"Boldare<\/p>\n

\"Boldare<\/p>\n

\"Boldare<\/p>\n

 <\/p>\n

See this awesome UI design for yourself on the Boldare Boards<\/a> website.<\/p>\n

\"Picksell\"<\/p>\n

7. Picksell<\/h2>\n

Picksell<\/a> offers a payment solution for businesses who want to accept payments online. Their website is more information and text-heavy than some of the other UI design examples on our list, but they\u2019ve perfected the art of spacing, card design and clearly divided sections to keep things easy for the user.<\/p>\n

We love the bright yet modest colour palette, the simple graphics and clear call-to-action buttons and the neatly contained text blocks with their fuss-free font. Altogether, this evokes a professional yet friendly and accessible feel \u2014 right on-brand for the product on offer.<\/p>\n

Picksell is a great example of how to present lots of information without compromising on clarity or overwhelming the user.<\/p>\n

\"Picksell<\/p>\n

\"Picksell<\/p>\n

\"Picksell<\/p>\n

See more on the Picksell website<\/a>.<\/p>\n

 <\/p>\n

\"Boots\"
\n8. Boots Online Doctor<\/h2>\n

So far, we\u2019ve seen some rather bold and beautiful examples of UI design. But sometimes, you just need to keep things classic and simple, like the Boots Online Doctor website<\/a>.<\/p>\n

The pastel colour palette evokes calm and composure, while the use of card design clearly and neatly divides the different healthcare services and topics into easily identifiable sections. The typography is a plain, no-frills affair, allowing the user to quickly find the information they need.<\/p>\n

The simplicity and accessibility of this UI design is no coincidence. In a branch like healthcare, it\u2019s important to opt for a design that conveys credibility, authority and trustworthiness. And that\u2019s exactly what the UI designers behind this website have achieved.<\/p>\n

\"Boots<\/p>\n

\"Boots<\/p>\n

\"Boots<\/p>\n

Explore this example of good UI design further over on the Boots Online Doctor website<\/a>.<\/p>\n

 <\/p>\n

\"Builtin\"<\/h2>\n

9. Built In<\/p>\n

Our final example of good UI design comes from Built In<\/a>, an online community and recruitment solution for startups and tech companies.<\/p>\n

There\u2019s lots going on on the Built In website and this is one of the busier UI design examples we\u2019ve seen. However, it works because there\u2019s plenty of colour contrast, with the most important clickable elements emphasised in white, as well as a clear division between the individual sections.<\/p>\n

The colour palette and typography are pretty bold and funky, giving the UI a modern, science-y feel. We especially love the cool, somewhat abstract custom illustrations and bold lines that are featured throughout and the topic tags at the bottom of the homepage are a nice, user-friendly touch.<\/p>\n

The team behind this website have done an excellent job of creating something unique and presenting a wealth of information in a logical, cohesive manner.<\/p>\n

 <\/p>\n

\"Built<\/p>\n

\"Built<\/p>\n

\"Built
\nScroll through the Built In website<\/a> yourself to see this example of good UI design in action!<\/p>\n

 <\/p>\n

Learn more about UI design<\/h3>\n

When it comes to creating beautiful, functional, user-friendly UI designs like the ones we\u2019ve explored in this post, there\u2019s a lot that goes on behind the scenes. If you\u2019re curious about UI design and would like to learn more, we can recommend this guide explaining what UI design is<\/a>, as well as this one exploring what a UI designer does<\/a>.<\/p>\n

Want to become an expert UI designer yourself? Consider one of these UI design courses<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

What does good UI design look like? Here are 9 examples of good UI design in action, taken from the most stunning websites and apps online right now.<\/p>\n","protected":false},"author":24,"featured_media":7007,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[278],"tags":[],"class_list":["post-6967","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/6967","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=6967"}],"version-history":[{"count":10,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/6967\/revisions"}],"predecessor-version":[{"id":9706,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/6967\/revisions\/9706"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/7007"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=6967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=6967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=6967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}