Get our weekly updates, including high-value tips and free resources that will help you take your design career to the next level.
But before we dive into some examples of websites with good UX design, let’s cover the basics. What’s the difference between UX and UI and do you really need to know both as a web designer?
User Experience, also abbreviated as UX, is a general term used to describe the overall experience a user has when interacting with a digital product like a website or an app. Some tasks a UX designer might work on for a project are user testing, user flows and journey maps, wireframing, design low and high-fidelity UI mockups, and create working prototypes. Essentially, UX includes the entire end-to-end process.
Wireframing is a crucial part of the UX design process, it’s how you map out content for individual landing pages as well as how these pages interact with each other to create a user journey. Wireframes can range from simple pen and paper sketches to low and high-fidelity designed mockups, each serves a purpose in the design process. You might want to quickly sketch by hand at the beginning of your design process to get more ideas flowing. Later, you’ll want to create high-fidelity wireframes to share your thinking and ask for feedback from a client or for user testing.
To learn more about wireframing including visual examples, check out 20 wireframe examples for web design.
Also part of the UX design process is prototyping, where you bring your wireframes to life as if a user is actually interacting with your product. Here is an example of a prototype a UX designer might work on for an app. This is considered a high-fidelity prototype since there’s a good amount of detail in the wireframes and you have a clear sense of how a user might interact with the app.
To learn more about UX/UI best practices for web design, check out this video where Ran walks you through how to apply them to your next web design project.
When you hear the term UI, also known as the user interface, this refers to designing the look and feel for a website or app. When you’re designing the UI, you need to have strong visual design skills. You work with grids, typography, color, and layout to organize information in a clean and concise way for a user to navigate through. You’ll refine visual details and make design decisions such as button size, color, and rounded vs square corners to name a few.
You might work on wireframing but for the most part, you’re taking these wireframes and creating polished UI mockups ready for development. Take a look at this example, starting with the wireframe on the left and the final UI design on the right. Notice how the structure remains the same, the only difference is the addition of color, typography, illustration, and design elements.
To learn more about UI design, check out this article What is UI design: More than just making things look pretty.
Now that we have a basis for our understanding of UX and UI design, let’s take a look at a few examples of the best UX websites that you’ve probably already encountered as a user.
Netflix is a great example of UX done right. From their website to how the app is designed for mobile and TV, all platforms are a seamless experience. With a product like Netflix, you have to consider the intent of the user. When someone logs onto Netflix, they’re in the mood to watch something right now. They might already know what they want to watch but more than likely, they’ll need to browse for a bit. Netflix does many things right to help the user on this journey.
First, the top half of the screen begins to auto-play after a few seconds, this helps the user get a sense of the movie or show from a quick “mini-trailer” clip. If someone is interested and wants to learn, they have the option to press play or more info.
As you scroll through more selections of what to watch, you get the same auto-play feature when you hover over one thumbnail for more than a few seconds. While this feature helps solve the problem for the user of finding something that interests them to watch, it can get annoying after a while. Netflix also thought of this and gave the user the option to disable the sound and previews why browsing.
What can we learn from this simple feature Netflix implemented? Think about how you can solve the problem of your users but also consider other alternatives just in case they don’t want to use your solution.
With a product as comprehensive as PayPay, it’s important to take UX design seriously. They have several types of users all coming to their site or app for different reasons. Here’s a screenshot of the primary dashboard when you log in to your account. The first thing you notice is your PayPal balance with the option to transfer your money. Then follows a summary of recent activity with details of the latest transactions. After this, hierarchy is split between multiple actions.
The option to Send and Request money stands out in slightly larger blue circle buttons near the top right-hand side. Even smaller are some buttons geared toward sellers.
Once you click through to send money, you’re met with a simple yet informative page to help you along the process with ease. There are several options such as typing in the name, username, email, or mobile phone number to identify who you’re sending to. On the right-hand side there are 6 bullets of text paired with icons to understand how sending money works at a glance.
What can we learn from how PayPal designed the UX/UI of their site? When you’re designing the website for a complex product serving multiple customers, think about the primary focus when someone logs in, what makes sense for all of these various customers to view first? But don’t neglect all the other reasons someone uses the product, how can you incorporate secondary and tertiary levels hierarchy in your CTAs? When designing for actions like sending money, think of how you can inform the user of the process but minimize distractions from the design.
Probably one of the most simple yet effective examples of good UX design is the Google homepage. We’ve all used it at some point and we’ll continue to come back to it for the same reason, it solves our problem when searching the web for an answer.
All you need to do is enter your question or a phrase into the search bar and you’ll see this auto-suggest feature where Google tries to guess what it is you are searching for. This is a big solve for the user. The more words they add, the more likely Google is to correctly guess what the user is searching for.
What can we learn from the UX and UI design of Google’s homepage? Simplicity is key. We might not always be able to solve with a super minimal landing page like Google but think about ways you simplify how someone uses the site you’re designing. Also think about interactive touches that greatly solve a problem for your user, like the auto-suggest feature.
Airbnb’s business has grown over the years. What once started as a site to find a home to stay in on your next vacation has evolved with the addition of in-person and online experiences. Take a look at their homepage and how clean and simple the design is. At the top, you can immediately search for a vacation rental by adding your location, check-in / check-out dates, as well as the number of guests. Since this is the main reason people come to Airbnb, it’s at the top in prominence but it’s not overpowering.
As you begin to scroll you can search vacation rentals nearby, giving you ideas for close-to-home vacations, especially during an ongoing pandemic. They emphasize the “live anywhere” concept by showing you places you might never have thought of staying at.
When you switch from Places to Stay to Online Experiences, you’re met with a similar UX design on the landing page but instead, you’re browsing through new activities and hobbies to explore. There are filters like great for groups, family-friendly, animals, art & writing, fitness, and more to quickly help you narrow down and find something new to enjoy doing solo or virtually with a group.
What can we learn from Airbnb? Keep the UX and UI design of your website consistent even when sharing different aspects of a business. More than likely, you will design a website for a business that has more than one focus. Think about ways you can serve each part of the business best but keep some design rules the same throughout.
Duolingo is a free language learning app, offered both on the web and as a mobile app. The statement on their homepage is simple and to the point: Learn a language for free. Forever. Who wouldn’t want to get started?
When you click on the main CTA to Get Started, you discover all the languages available to learn for free at your fingertips. From Spanish, French, German, Italian, Portugues, Dutch, Japanese, and so many more, they are truly catering to an international audience.
What can we learn from the UX and UI design of Duolingo? Use clear language that supports the mission of the website, state exactly what your product or service does, and allow the user to get started immediately. Think about ways to delight the user with fun illustrations and be inclusive of other cultures as Duolingo tries with the language landing page.
Check out other articles from the Flux blog where you can learn more on web design, Webflow, and freelancing. If you’re looking for in-depth video tutorials on design, check out our YouTube channel where we publish new videos weekly.
Want to learn more about how to create a stunning and interactive portfolio with Webflow? Check out our Webflow style guide so you can design faster.
If you want to learn more about the web design process from start to finish, consider checking out our program The $10k Website Process. You’ll discover a step-by-step process to design beautiful, high-value websites that achieve strategic goals for your clients. Master the art and strategy of website design, and increase the value of your services, as well as your rates.
Get our weekly updates, including high-value tips and free resources that will help you take your design career to the next level.
