WebDesign Tutorial - User experience

This is part 14. You can find the part 13, Let it breathe, here

User experience

---

Until now we talked mostly about User Interface (UI) design and general theory of aesthetics. All of this is, of course, very important, but you should know it's part of the bigger process.

This process is called User Experience design

UI & UX design

The two terms are often used together, although they mean different things. However, the relationship between them is so close that it's hard to talk about one without touching the other.

The main goal of UI design is to create a visually appealing and easy-to-navigate interface.

The main goal of UX design is to design the best possible user experience. This means that the product should be functional, accessible and fun to use. But not only that. UX design goes beyond UI and its functionality.

In UX design, we need to look from a broader perspective.

“No product is an island. A product is more than the product. It is a cohesive, integrated set of experiences. Think through all of the stages of a product or service – from initial intentions through final reflections, from the first usage to help, service, and maintenance. Make them all work together seamlessly.”

— Don Norman, inventor of the term “User Experience.”

Working on a sample project

This theory may seem a bit abstract, so we will discuss it using an example. Let's assume we are about to build a blog project. Click to see live Demo

This will not be just any blog. Its leitmotif will be low-budget travel with a backpack, i.e. the so-called backpacking.

This detail will be very important for us, because we will use it to learn UX design. And if at first glance, the UI of this project seems simple to you, you will change your mind when your perspective shifts from interface design to user experience design.

How to design the best possible User Experience for the Blog project?

We should always start the UX design process with asking a few important questions:

• Who is the target group?

• What is the main goal of the project?

• What are the secondary goals?

• What will be the perfect flow for the user? In what order and from what pages he should he go? And what pages should he go to?

You may think: "These are not questions for me! I am here to design the website, not to think about the target group or weird marketing stuff."

But you will be wrong. If you want to create a high quality project that will delight your customer (that is, the person or company that hired you to do this) you need to embrace his perspective. Remember, that you are NOT creating this blog just to create a blog. You are doing this to help your customer to achieve his goals.

This is much more important than creating a beautiful UI, that you can later place in your portfolio to satisfy your ego. Even if the interface is ugly, but implements its goals, the customer will be happy (and the other way - a beautiful interface that completely does not achieve the client's goals will be useless for him).

Happy customer means he will come back to you to offer you more work and recommend you to the others.

Next part - Don't start with the roof

Material Minimal, which is basically Material Design on steroids can be found here on Figma.
Material Design for Bootstrap is a UI Kit, that uses Material Minimal, check it out here.
And TW Elements, our newest child is based on Tailwind CSS. Check it out!