And that could mean any number of things: a slick, original animated interaction that intuitively draws the user\u2019s attention to a certain element, or an uncluttered, clean design and clever use of white space that imbues the user with a sense of calm, for example.<\/p>\n
In this article, I\u2019ll tackle the question of what makes a good user interface\u2014with a bit of help from the Nielsen Norman Group\u2014before diving into eight examples of great website UI design<\/a> and an explanation of my choice.<\/p>\n Select an example from the clickable menu to jump straight to it, or simply read on.<\/p>\n So, if you\u2019re wondering how to evaluate whether a user interface is good\u2014or even great<\/strong>\u2014<\/em>how do you decide? I mean, you can determine whether you find a user interface visually appealing, and you can of course use the interface to ascertain whether it\u2019s an intuitive, straightforward experience. But is there anything more objective? More formalized?<\/strong><\/p>\n Personally, I always refer back to the usability characteristics<\/a> defined by the research company Nielsen Norman Group.<\/p>\n Nielsen defines Usability<\/strong> through the following five characteristics; learnability, efficiency, memorability, errors, and satisfaction.<\/p>\n And on top of those standards, a great UI<\/a> should also reflect the personality of the brand in order to stand out from the competition and provide users with a delightful experience. So let\u2019s check out a few examples of where I think companies have gotten their website UI design spot on.<\/p>\n Medium, an online reading and publishing platform, is just as gorgeous as it is functional. With minimal use of color<\/a>, generous line spacing, and a well-chosen combination of typography<\/a>, this website gets everything right.<\/p>\n With Medium, content is king. Once a user is logged in, a box appears at the top of the article list with the text \u201cWrite here\u201d, enabling and encouraging everyone to get writing quickly.<\/p>\n When users click on the \u201cWrite a Story\u201d link, they are presented with an almost empty white page, removing clutter and simply providing a clean space to focus on writing.<\/p>\n Articles are set up in a one-column format, making content easy to digest. With little touches like estimated read time and the ability to highlight and respond directly to specific pieces of articles, Medium truly provides users with an amazing and effortless editorial experience.<\/p>\n Bear with me on this one. Just for a moment.<\/p>\n When it comes to helping users complete the process of booking a flight, Virgin America was one of the first \u2013 if not the<\/em> first\u2014to put the user\u2019s interests front and center. For most, booking a flight is a chore.<\/p>\n Much like a dishwasher relieves us of having to scrub the dishes, Virgin America\u2019s site stripped back its interface to draw attention to the most important question: \u201cWhere would you like to go?\u201d By removing all the surrounding content, the user could immediately start the booking process.<\/p>\n And yes, the site might now look a little dated, but it deserves its place on this list as something of a trailblazer<\/a> in user-centered interface design. Unfortunately, since merging with Alaska Air<\/a>, their approach to UI has become decidedly more cluttered.<\/p>\n Back to what made Virgin America\u2019s site great though:<\/strong> Throughout the entire process of booking, the user was reminded of their selection by a bar at the top of the screen showing their current choices. By keeping this information visible, Virgin made it easy for users to constantly see and edit their choices instead of relying on them to recall the information themselves.<\/p>\n The UI here was clearly designed to ensure that a user can focus on completing their goal as quickly and efficiently as possible.<\/p>\n Source: Work & Co<\/a><\/p>\n Virgin also made sure to stand out visually from the competition. The use of bright colors, gradients, and fun illustrations created a unique brand personality and experience that sets them apart from other competitors\u2019 websites.<\/p>\n The website UI design of Airbnb does two things very well: booking a place to stay and creating trust between two complete strangers.<\/p>\n Airbnb, much like Virgin America, has prioritized making it easy to start booking a stay right from the home screen.<\/p>\n Paired with its characteristic use of conversational copy, such as the \u201cWhat can we help you find, Edward?\u201d below, and helpful cue text, a user is simultaneously and courteously invited and directed<\/em> to start planning their stay.<\/p>\n This conversational invite to start searching is a delightful way of portraying the voice of the brand, as well as making the process of finding a place to stay simple.<\/p>\n The only fields you need to specify during this initial search are: choosing a destination users would like to go to, along with the duration of their stay and the number of guests. By leaving out the additional filters until the next step, the process is streamlined, friendly, and approachable.<\/p>\n The listing pages are complete with a description of any additional fees that may be included. This is a very straightforward, easy process for just about any user. The \u2018Request to Book\u2019 button sits right under this, and being one of the brightest buttons on the page, invites users to click it in order to finalize their stay.<\/p>\n After a user has requested to book a location, they are taken to a new checkout page. The listing, pricing, and booking information sits to the right of the page to reduce the need for the guest to retain the information from the previous page.<\/p>\n On the left, instead of getting right into the payment, the page prompts you to \u201csay hello to your host and tell them why you\u2019re coming\u201d. By placing this prior to the payment information, it starts a conversation and connection between the guest and host and further invests the user in the experience.<\/p>\n Airbnb takes pride in bringing people together and gives the conversation importance over the transaction\u2014the UI reflects this perfectly.<\/strong><\/p>\n Airbnb has cleverly thought out its copy and used engaging photos and videos to ensure that the interface conveys an emotional tone that helps create a sense of trust between strangers.<\/p>\n Now, this is a website UI design with personality. Upon arrival, users are immediately greeted with evocative and dynamic stills of the products on offer.<\/p>\n From an image showcasing the portability of their electric scooter to the explosive action of electric skateboards in action to their newest electric scooter offering, you get a glimpse into their product offering with one quick look.<\/p>\n Directly above these images, the product tabs are clearly laid out for easy navigation.<\/p>\n You\u2019re suitably impressed and inquisitive, and now it\u2019s time to see what\u2019s behind all the bold imagery. A click into a product tab gets you down to business\u2014the interface is stripped of color but for the highlight points of the product and any special sale information.<\/p>\n Alongside that, you\u2019re delivered a rundown of the most crucial information alongside a spec breakdown. And, of course, the crucial ‘Add to cart’. What\u2019s stopping you? Very little.<\/p>\n All in all, it\u2019s a great lesson in how to combine different simple but bold graphics and text elements to generate a convincing whole.<\/p>\n Dropbox has one of the most easily understandable interfaces by far. Having a folder and file organizational structure is easily recognizable to, you know, anyone who\u2019s ever used a computer before. In terms of learnability, there isn\u2019t much that the average user won\u2019t already know how to do from the start. It\u2019s natural for most users to try dragging and dropping files from their desktops to the page without them even knowing if it\u2019s possible or not, just because it\u2019s so familiar.<\/p>\n Dropbox\u2019s friendly personality, created by lighthearted illustrations, helps the user feel comfortable when using the product. This addition to the interface makes the product feel like an old friend, ready to help users complete their file-sharing tasks.<\/p>\n And they have\u2014possibly\u2014the best blog design in the world right now<\/a>. I know, I know, there\u2019s a healthy dose of subjectivity in a comment like that, but rarely have I seen such a successful mix of experimental UI, usability, and multimedia content in one place.<\/p>\n There\u2019s so much attention to detail, with sequenced color palettes<\/a> and animated icons<\/a>, and wonderful illustration that is coordinated with all the other wonderful illustrations\u2014it manages to come across as experimental, creative, and consistent. That\u2019s quite an achievement! Check it out!<\/p>\n If you want some help in coming up with an amazing color palette yourself, there are a lot of online color palette generators<\/a> you can try out. Just be sure to avoid some of these common mistakes UI designers make with color palettes<\/a>.<\/p>\n Pitch, a mobile and web application that helps you to build and manage beautiful presentations, is very much a design-led technology company. They want to convince you that they can do for presentations what Slack has done for communications. And they do a pretty good job of it.<\/p>\n Goodbye Powerpoint, hello Pitch.<\/p>\n As soon as you land on their homepage, you can tell that an enormous amount of thought has gone into every single element. You’re immediately greeted with their slogan, which sums up the product: \u201cStunning presentations. Made together.\u201d Like the website itself, the slogan is simple, direct, and elegant. With two quick lines, it tells you exactly what to expect.<\/p>\n The UI designers<\/a> at Pitch\u2019s site do a great job of walking the user through an example of what their journey would be like if they were actually using the application. They\u2019ve struck a good balance between clean and comprehensive, avoiding clutter but ensuring the primary product features are covered, so that the site itself really gets out of the way.<\/p>\n Their site gives a nod to recent design trends<\/a> with their comprehensive use of illustration, but it errs away from the kind of flat, cartoonish character design that you see on so many sites currently. The Pixar-like use of 3D character design is unusual in this space, and therefore instantly identifiable\u2014if I show you a Pitch hand tomorrow, you\u2019ll recall the company, guaranteed.<\/p>\n And the merits of their website UI design don\u2019t stop there. They\u2019ve also added some smart, subtle dynamic elements and animations which bring the site to life and nudge the user from one scroll to the next. They gently draw your attention from right to left, and the delayed onset of each animation encourages you to pause at each product feature and benefit. You\u2019re left with a sense of gentle familiarity, playfulness, and professionalism\u2014making presentations will never be tedious again!<\/p>\n Cleo<\/a>, a chat-based mobile application that helps you to organize and manage your finances, has also taken an intriguing approach to its UI, which may be of interest to those of you looking to feature more attention-grabbing imagery.<\/p>\n Their focus is obviously on the download, but they incorporate cartoon design and animated graphics alongside the product\u2019s features, using a scrolling approach to walk you through the product’s features.<\/p>\n I like this touch, but unfortunately, the experience as a whole evokes anxiety, with the high contrast between the cheap Ryanair blue<\/i> and the white, the rushed dynamism of the animations, and the inability to focus on any particular feature.<\/p>\n The old adage that less is more<\/em> is so often true with UI. Other apps which have developed fantastic landing page experiences include Blinkist and Slack<\/a>. Blinkist,<\/a> which is a reading app, has won awards for its product design. And good design is obviously in the company\u2019s DNA.<\/p>\n Just look at the gorgeous color palette below, how they funnel the user\u2019s attention towards the main call-to-action from their imperative-driven slogan, and how they place their product alongside the juxtaposed color scheme.<\/p>\n It draws your focus to the explanation on the left while leading the eye naturally to the product examples so efficiently displayed on the right. So much communicated, so efficiently.<\/p>\n Frank and Oak, a clothing retailer with a strong media and lifestyle focus, uses its UI to grab the attention of its users and their taste in style.<\/p>\n While it is a fairly straightforward online shopping experience from a UX perspective, the company<\/a> uses bold photography and clean, sans-serif typography to capture the personality of the brand and its target audience.<\/p>\n Despite some bold, sales-driven marketing messaging\u2014Join Frank Rewards and earn 1 point for every dollar spent\u2014<\/em>their brand image is firmly stamped from the very first touchpoint with the company. Cool, clean, up close, and personal.<\/p>\n After clicking on an item, the product page is focused on two things: the product photography, and the call to action button, as they are essentially the only colored elements on the page.<\/p>\n With a nice touch, the add-to-cart button won\u2019t work until a size is selected. When a user tries to click the button first, the text switches to ‘Select Your Size’.<\/p>\n Filling out personal information during the checkout process for the first time is never an ideal experience. It\u2019s unavoidably a clunky process\u2014or, at least, no one has figured out how to make it smooth for first-time buyers.<\/p>\n Frank and Oak do a good job though\u2014they help users out by breaking the form into smaller chunks of input fields to reduce the cognitive load on users. And yes, it\u2019s clean and uncluttered.<\/p>\n By now you will have learned that those are some of my most important criteria for good user interface design!<\/p>\n In all, a lot of the underlying UI\u2014and certainly the UX\u2014of Frank and Oak can be seen on many other websites, but it\u2019s the way they have interwoven a very logical, intuitive user journey, a bold, impactful and clean UI, and a tight, aspirational brand image and messaging that really makes this stand out.<\/p>\n I guess that\u2019s the lesson from the seventh site on the list: good UI can only be great if it arrives hand-in-hand with good UX<\/a> and well-researched, confident messaging.<\/p>\n One of my personal favorite examples of a gorgeous and functional UI can be found with Semplice Labs, a WordPress portfolio created by superstar designer Tobias Van Schneider<\/a>, who\u2019s designed for Spotify, BMW, Google, and even NASA. Suffice it to say he knows what he\u2019s doing.<\/p>\n The copy here really speaks to the audience, instructing them in bold, confident terms about Semplice’s best qualities. The rest of the website UI is actually an example of what users of the product can achieve with their own websites. Fluid animations and smooth transitions between pages make this interface memorable and desirable to users.<\/p>\n These are just a few of my favorite examples of good website UI design. Creating a usable, frictionless UI is an essential part of creating a positive connection with a user, not to mention making sure that it’s a user-centered design<\/a>. When designing or evaluating an interface, it\u2019s best to refer to the usability guidelines set forth by Nielsen in order to build a product that provides the best possible user experience.<\/p>\n If you\u2019re interested in becoming a qualified UI designer, I recommend taking a structured UI design course<\/a>. Speaking as a former student at CareerFoundry, I can not only vouch for their UI Design Program’s quality and effectiveness in training me and landing me a job\u2014they offer a job guarantee in conjunction with the course\u2014but also for the fact that the whole experience was thoroughly enjoyable.<\/p>\n Want to learn more about UI design? Check out these great articles:<\/p>\n 1. Which website has the best user interface?<\/strong><\/p>\n There is no definitive answer to this question, as different websites excel in different aspects of website UI design. However, some websites that are often cited as examples of excellent UI design include Airbnb, Dropbox, and Virgin America.<\/p>\n 2. Where to get UI ideas?<\/strong><\/p>\n There are several resources you can use to get UI ideas, including design blogs, UI design galleries, design books, and UI design communities such as Dribbble and Behance. You can also find inspiration in everyday objects, such as magazines, packaging, and signage.<\/p>\n 3. What makes good website UI?<\/strong><\/p>\n Good website UI design is characterized by several key factors, including clear navigation, consistent branding, user-friendly layouts, fast loading times, and accessibility. It should also be visually appealing and easy to use, with intuitive controls and clear feedback.<\/p>\n 4. What is a UI site?<\/strong><\/p>\n A UI site is a website that is specifically designed to showcase examples of UI design and provide resources for UI designers. These sites may include galleries of UI design examples, articles on UI design best practices, and tutorials on UI design techniques. Some examples of popular UI sites include Smashing Magazine, UX Collective, and A List Apart.<\/p>\n","protected":false},"excerpt":{"rendered":" Looking for some inspiration for your first, or next, user interface design? Need some examples of great design to aspire to? Check out this post for a host of the most cutting edge UI designs.<\/p>\n","protected":false},"author":90,"featured_media":312,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"yes","_lmt_disable":"","footnotes":""},"categories":[4],"tags":[91],"class_list":["post-4375","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design","tag-category-page"],"acf":{"homepage_category_featured":false,"cards_inner_programs_lists_left":"","cards_inner_programs_lists_right":"","related_plan_cards":""},"modified_by":"Rash SEO","_links":{"self":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/4375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/users\/90"}],"replies":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/comments?post=4375"}],"version-history":[{"count":5,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/4375\/revisions"}],"predecessor-version":[{"id":40516,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/4375\/revisions\/40516"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media\/312"}],"wp:attachment":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media?parent=4375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/categories?post=4375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/tags?post=4375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
How do you know if the website UI design is good?<\/h3>\n
\n
1. Medium<\/h2>\n
![\"Example](\"\/en\/wp-content\/uploads\/old-blog-uploads\/user-interface-website-examples-best-ui-designs.jpg\" "\\"Example")
<\/p>\n2. Virgin America<\/h2>\n
![\"Example](\"\/en\/wp-content\/uploads\/old-blog-uploads\/travel-website-interface-virgin.jpg\" "\\"One")
<\/p>\n![\"Example](\"\/en\/wp-content\/uploads\/old-blog-uploads\/cross-platform-user-interface-experience.jpg\" "\\"A")
<\/p>\n3. Airbnb<\/h2>\n
![\"Example](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/airbnb-website-1024x460.png\" "\\"\\"")
<\/p>\n![\"Example](\"\/en\/wp-content\/uploads\/old-blog-uploads\/airbnb-conversational-website-copy-in-ui.jpg\" "\\"Example")
<\/p>\n![\"Functional](\"\/en\/wp-content\/uploads\/old-blog-uploads\/airbnb-functional-user-interface-for-booking.jpg\" "\\"Functional")
<\/p>\n4. Boosted Boards<\/h2>\n
![\"Boosted](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/boosted-website-1024x408.jpg\" "\\"\\"")
<\/p>\n![\"Boosted](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/boosted-boards-product-image-1024x509.jpg\" "\\"\\"")
<\/p>\n5. Dropbox<\/h2>\n
![\"Example](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/dropbox-website-1024x531.jpg\" "\\"\\"")
<\/p>\n![\"Example](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/Dropbox-blog-1024x507.jpg\" "\\"\\"")
<\/p>\n6. Pitch<\/h2>\n
![\"Example](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/pitch-website-1024x459.jpg\" "\\"\\"")
<\/p>\n![\"example](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/cleo-website-1024x509.png\" "\\"\\"")
<\/p>\n![\"Example](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/blinkist-website-1024x498.jpg\" "\\"\\"")
<\/p>\n7. Frank and Oak<\/h2>\n
![\"Frank](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/frankandoak-landing-page-1024x499.jpg\" "\\"\\"")
<\/p>\n![\"Frank](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/frank-and-oak-product-page-1024x509.jpg\" "\\"\\"")
<\/p>\n![\"Frank](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/Frank-and-Oak-checkout-page-1024x552.jpg\" "\\"\\"")
<\/p>\n8. Semplice Labs<\/h2>\n
![\"Semplice](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/semplice-landing-page-1024x497.jpg\" "\\"\\"")
<\/p>\n![\"Frank](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2021\/06\/semplice-service-page-1024x504.jpg\" "\\"\\"")
<\/p>\nConclusion<\/h2>\n
\n
FAQ<\/h2>\n