The 8 Best Examples of Website UI Design [2022]

by Assessor
0 comment

We’ve all encountered web sites and functions that make us wish to throw our gadgets throughout the room in frustration. At the very least, I hope it’s not simply me. Essentially, a superb consumer interface allows customers to finish the duty that they got here to the web site to do with ease and with out confusion.

Really nice UI designers obtain this and extra. Actually distinctive consumer interfaces won’t simply please the consumer by facilitating the frictionless achievement of the duty at hand—they will even please them aesthetically and experientially.

See more: Top user interface for websites console

And that would imply any variety of issues: a slick, unique animated interplay that intuitively attracts the consumer’s consideration to a sure component, or an uncluttered, clear design and intelligent use of white house that imbues the consumer with a way of calm, for instance.

On this article, I’ll sort out the query of what makes a superb consumer interface—with a little bit of assist from the Nielsen Norman Group—earlier than diving into eight examples of nice web site UI design, and a substantiation of my selection. Choose an instance from the clickable menu to leap straight to it, or just learn on.

  1. Medium
  2. Virgin America
  3. Airbnb
  4. Boosted Boards
  5. Dropbox
  6. Pitch
  7. Frank and Oak
  8. Semplice Labs

So, in the event you’re questioning easy methods to consider whether or not a consumer interface is nice—and even nice—how do you determine? I imply, you may decide whether or not you discover a consumer interface visually interesting, and you may in fact use the interface to determine whether or not it’s an intuitive, easy expertise. However is there something extra goal? Extra formalized?

How are you aware if the web site UI design is nice?

Personally, I all the time refer again to the usability traits outlined by the analysis firm Nielsen Norman Group.

Nielsen defines Usability by means of the next 5 traits; learnability, effectivity, memorability, errors and satisfaction.

  • Learnability: Can the consumer full their duties with little problem?
  • Effectivity: Does the interface permit the consumer to finish duties in a well timed method?
  • Memorability: After leaving a web site, how possible will the consumer be capable to keep in mind easy methods to use it the subsequent time they go to?
  • Errors: What steps does the interface take to reduce the possibility of consumer error, and the way do they let the customers right an error?
  • Satisfaction: Does the consumer get pleasure from interacting with the design?

And on prime of these requirements, an important UI also needs to replicate the character of the model with a view to stand out from the competitors and supply customers with a pleasant expertise. So let’s take a look at a couple of examples of the place I believe firms have gotten their web site UI design spot on.

1. Medium

Medium, an internet studying and publishing platform, is simply as attractive as it’s useful. With minimal use of shade, beneficiant line spacing, and a properly chosen mixture of typography, this web site will get the whole lot proper.

With Medium, content material is king. As soon as a consumer is logged in, a field seems on the prime of the article record with the textual content “Write right here”, enabling and inspiring everybody to get writing shortly. When customers click on on the “Write a Story” hyperlink, they’re offered with an virtually empty white web page, eradicating muddle and easily offering a clear house to deal with writing.

Articles are arrange in a one column format, making content material straightforward to digest. With little touches like estimated learn time and the power to spotlight and reply on to particular items of articles, Medium actually supplies customers with an incredible and easy editorial expertise.

2. Virgin America

Bear with me on this one. Only for a second.

On the subject of serving to customers full the method of reserving a flight, Virgin America was one of many first – if not the primary – to place the consumer’s pursuits entrance and centre. For many, reserving a flight is a chore. Very like a dishwasher relieves us of getting to wash the dishes, Virgin America’s web site stripped again their interface to attract consideration to crucial query: “The place would you wish to go?” By eradicating all the encircling content material, the consumer might instantly begin the reserving course of.

And sure, the positioning would possibly now look somewhat dated, but it surely deserves its place on this record as one thing of a trailblazer in user-centered interface design. Sadly, since merging with Alaska Air, their strategy to UI has change into decidedly extra cluttered.

Again to what made Virgin America’s web site nice although: All through your complete strategy of reserving, the consumer was reminded of their choice by a bar on the prime of the display exhibiting their present decisions. By maintaining this info seen, Virgin made it straightforward for customers to always see and edit their decisions as an alternative of counting on them to recall the data themselves. The UI right here was clearly designed to make sure that a consumer can deal with finishing their purpose as shortly and effectively as attainable.

Supply: Work & Co

Virgin additionally made certain to face out visually from the competitors. Using brilliant colours, gradients, and enjoyable illustrations created a singular model character and expertise that units them other than different rivals’ web sites.

3. Airbnb

Editor’s Choice: 22 Amazing Sites With Breathtaking Free Stock Photos (2022 Update)

The web site UI design of Airbnb does two issues very properly: reserving a spot to remain, and creating belief between two full strangers.

Airbnb, very like Virgin America, has prioritized making it straightforward to start out reserving a keep proper from the house display. Paired with its attribute use of conversational copy, such because the “What can we assist you discover, Edward?” under, and useful cue textual content, a consumer is concurrently and courteously invited and directed to start out planning their keep.

This conversational invite to start out looking out is a pleasant approach of portraying the voice of the model, in addition to making the method of discovering a spot to remain easy. The one fields you’ll want to specify throughout this preliminary search are: selecting a vacation spot customers wish to go, together with the length of their keep and the variety of company. By leaving out the extra filters till the subsequent step, the method is streamlined, pleasant and approachable.

The itemizing pages are full with an outline of any further charges which may be included. This can be a very easy, straightforward course of for nearly any consumer. The ‘Request to Ebook’ button sits proper below this, and being one of many brightest buttons on the web page, invitations customers to click on it with a view to finalize their keep.

After a consumer has requested to e-book a location, they’re taken to a brand new checkout web page. The itemizing, pricing and reserving info sits to the fitting of the web page to cut back the necessity for the visitor to retain the data from the earlier web page.

On the left, as an alternative of getting proper into the cost, the web page prompts you to “say hi there to your host and inform them why you’re coming”. By inserting this previous to the cost info, it begins a dialog and connection between the visitor and host, and additional invests the consumer within the expertise. Airbnb takes pleasure in bringing folks collectively and provides the dialog significance over the transaction – the UI displays this completely.

Airbnb has cleverly thought out its copy and used participating photographs and movies to make sure that the interface conveys an emotional tone that helps create a way of belief between strangers.

4. Boosted Boards

Now that is web site UI design with character. Upon arrival, customers are instantly greeted with an explosive, fun-filled, dynamic video of the product in use. You’re enraptured by a characterful skateboard on its very personal journey, twisting and turning, multiplying, earlier than disintegrating into its part elements – it’s fairly a experience. And then you definately discover the “Store Now” call-to-action, sitting patiently proper on the heart of your display.

You’re suitably impressed, inquisitive, and now it’s time to see what’s behind all this bravado. A click on on the “Store Now” will get you right down to enterprise—the interface is stripped of shade however for the luminous orange wheels of the board, and also you’re delivered solely probably the most related info: picture, prime pace, vary, worth, transport time, and, in fact, “Purchase Now”. What’s stopping you? Little or no.

Not but satisfied? A click on on “Be taught Extra” will ship all the data you’ll want to take you from consideration to consciousness: Key product options are damaged down expertly into picture, textual content and graphic elements that help each other. As you scroll down additional, optimistic product critiques and finance choices cut back nervousness by lowering the sense of danger. All in all, it’s an important lesson in easy methods to mix completely different graphic and textual content components to generate a convincing entire.

5. Dropbox

Dropbox has one of the crucial simply comprehensible interfaces by far. Having a folder and file organizational construction is definitely recognizable to, you recognize, anybody who’s ever used a pc earlier than. When it comes to learnability, there isn’t a lot that the common consumer received’t already know easy methods to do from the beginning. It’s pure for many customers to attempt dragging and dropping recordsdata from their desktops to the web page with out them even realizing if it’s attainable or not, simply because it’s so acquainted.

Dropbox’s pleasant character, created by lighthearted illustrations, helps the consumer really feel snug when utilizing the product. This addition to the interface makes the product really feel like an outdated pal, prepared to assist customers full their file sharing duties.

And so they have – probably – the very best weblog design on this planet proper now. I do know, I do know, there’s a wholesome dose of subjectivity in a remark like that, however not often have I seen such a profitable mixture of experimental UI, usability and multimedia content material in a single place.

There’s a lot consideration to element, with sequenced shade palettes and animated icons, and great illustration that’s coordinated with all the opposite great illustrations – it manages to return throughout as experimental, inventive and constant. That’s fairly an achievement! Test it out!

If you would like some assist in arising with an incredible shade palette your self, there are quite a lot of on-line shade palatte mills you may check out! Simply make sure you keep away from a few of these frequent errors UI designers make with shade palattes.

6. Pitch

Pitch, a cell and net utility that lets you construct and handle stunning shows, may be very a lot a design-led know-how firm. They wish to persuade you that they’ll do for shows what Slack has performed for communications. And so they do a reasonably good job of it.

Goodbye Powerpoint, hi there Pitch.

As quickly as you land on their homepage, you may inform that an infinite quantity of thought has gone into each single component. Simply think about the slogan. “All palms on deck” performs in so some ways; not solely is it an immediately recognizable idiom, but it surely additionally evokes each the spirit of collaboration—a central characteristic of Pitch—and the technobabble of the “all palms conferences”. Lastly, the “deck” is a intelligent reference to the presentation deck. A gold star to whomever got here up with that!

Editor’s Choice: Top 5 Websites To Download Full Movies Absolutely Free

The UI designers at Pitch’s web site do an important job of strolling the consumer by means of an instance of what their journey could be like in the event that they had been really utilizing the appliance. They’ve struck a superb steadiness between clear and complete, avoiding muddle however making certain the first product options are lined, in order that the positioning itself actually will get out of the best way.

Their web site offers a nod to latest design tendencies with their complete use of illustration, but it surely errs away from the sort of flat, cartoonish character design that you just see on so many websites at present. The Pixar-like use of 3D character design is uncommon on this house, and subsequently immediately identifiable—if I present you a Pitch hand tomorrow, you’ll recall the corporate, assured.

And the deserves of their web site UI design don’t cease there. They’ve additionally added some good, delicate dynamic components and animations which carry the positioning to life and nudge the consumer from one scroll to the subsequent. They gently draw your consideration from proper to left, and the delayed onset of every animation encourages you to pause at every product characteristic and profit. You’re left with a way of mild familiarity, of playfulness, and of professionalism—making shows won’t ever be tedious once more!

Cleo, a chat-based cell utility that lets you set up and handle your funds, has additionally taken an intriguing strategy to their UI, which can be of curiosity to these of you seeking to characteristic actual customers in your imagery. Their focus is clearly on the obtain, however reasonably than incorporating character design and animation to show the product’s options, Cleo loops video of the product in motion, together with its resultant glad customers.

I like this contact, however sadly the expertise as an entire evokes nervousness, with the excessive distinction between a budget Ryanair-blue and the white, the rushed dynamism of the animations, and the repetition of the call-to-action buttons at each alternative.

The outdated adage that much less is extra is so usually true with UI. Different apps which have developed unbelievable touchdown web page experiences embrace Blinkist and Slack. Blinkist, which is a studying app, has received awards for its product design. And good design is clearly within the firm’s DNA. Simply have a look at the attractive shade palette under, how they funnel the consumer’s consideration in direction of the principle call-to-action from their imperative-driven slogan, and the way they place their product on the heart of an ecosystem of a typical millennial’s important studying merchandise—the self-improvement books, the Kindle, and the hipster glasses. A lot communicated, so effectively.

7. Frank and Oak

Frank and Oak, a clothes retailer with a powerful media and life-style focus, makes use of their UI to seize the eye of their customers and their style of favor. Whereas it’s a pretty easy on-line purchasing expertise from a UX perspective, the corporate makes use of daring images and clear, sans-serif typography to seize the character of the model and their audience. Regardless of some daring, sales-driven advertising and marketing messaging—20% off sitewide—their model picture is firmly stamped from the very first touchpoint with the corporate. Cool, clear, up shut and private.

After clicking on an merchandise, the product web page is concentrated on two issues: the product images, and the decision to motion button as they’re basically the one coloured components on the web page. With a pleasant contact, the ‘Add to Cart’ button received’t work till a measurement is chosen. When a consumer tries to click on the button first, the colour is desaturated and the textual content switches to ‘Choose Your Dimension’.

Filling out private info in the course of the checkout course of for the primary time isn’t a really perfect expertise. It’s unavoidably a clunky course of – or, no less than, nobody has discovered easy methods to make it easy for first time patrons. Frank and Oak do a superb job although – they assist customers out by breaking the shape into smaller chunks of enter fields to cut back the cognitive load on customers. And sure, it’s clear and uncluttered.

By now you’ll have realized that these are a few of my most vital standards for good consumer interface design!

In all, quite a lot of the underlying UI—and definitely the UX—of Frank and Oak might be seen on many different web sites, but it surely’s the best way they’ve interwoven a really logical, intuitive consumer journey, a daring, impactful and clear UI, and a decent, aspirational model picture and messaging that actually makes this stand out.

I assume that’s the lesson from the seventh web site on the record: good UI can solely be nice if it arrives hand-in-hand with good UX and well-researched, assured messaging.

Oh, and did I point out additionally they have an superior weblog – or journal? They’re clearly properly and actually versed within the artwork of constructing out a media and life-style arm of an organization, going as far as to construct out a newspaper-style journal that harks again to newsstand newspaper codecs, but juxtaposed with trendy, daring, cut-and-paste imagery. Adore it!

8. Semplice Labs

Certainly one of my private favourite examples of a beautiful and useful UI might be discovered with Semplice Labs, a WordPress portfolio created by celebrity designer Tobias Van Schneider, who’s designed for Spotify, BMW, Google and even NASA. Suffice to say he is aware of what he’s doing.

The copy right here actually speaks to the viewers, instructing them in daring, assured phrases to seek out out extra about Semplice. The remainder of the web site UI is definitely an instance of what customers of the product can obtain with their very own web sites. Fluid animations and easy transitions between pages make this interface memorable and fascinating to customers.

Conclusion

These are only a few of my favourite examples of fine web site UI design. Making a usable, frictionless UI is a vital a part of making a optimistic reference to a consumer, to not point out ensuring that it’s user-centered design. When designing or evaluating an interface, it’s greatest to consult with the usability pointers set forth by Nielsen with a view to construct a product that gives the absolute best consumer expertise.

If you happen to’re all for turning into a professional UI designer, I like to recommend taking a structured UI design course. Talking as a former pupil at CareerFoundry, I can’t solely vouch for his or her UI Design Program’s high quality and effectiveness in coaching me up and touchdown me a job—they provide a job assure along with the course—but in addition for the truth that the entire expertise was totally pleasing.

Wish to be taught extra about UI design? Take a look at these nice articles:

Editor’s Choice: Top 50 Websites in the Philippines (2012 Alexa Ranking) | Business Tips Philippines

  • 10 Examples Of Lovely Blogs That Have Nailed Their UI Design
  • 9 Examples Of UI Design Portfolios That Will Encourage You
  • What abilities do you’ll want to change into an animation designer?
  • 5 UI animation tendencies to observe

Related Posts

Leave a Comment