Making Your Website Work: UX/UI

Why you need to think about your user’s experience

Websites have gone through a glow up in the last two decades. Picture yourself circa 2002, just having lived through Y2K. When you used the World Wide Web, websites were text-heavy and lacked engaging design elements, created solely for storing information. Flashforward to the internet of today, where thoughtfully designed and user-friendly websites are everywhere.

The best websites are tailored to meet the needs of their users. User-based website design theories are the standard for web design today. The two prominent theories of website design are User Experience (UX) and User Interface (UI).

Yakkety Yak’s UX/UI designer Cesar Molina covers UX and UI design 101.

What is the difference between UX and UI design?

UX design focuses on making a website easy for users to complete their goals. “UX is a structured approach to website development,” explains Cesar. “The focus is on creating systems for users that are learnable, efficient, memorable, free of errors and satisfying to use.” The idea is that if a user is able to find what they’re looking for easily, they’ll stay on the site longer and, ideally, come back for more.

In contrast with UX design, UI is all about the look and feel of a website. “UI is what people first think of when design is mentioned,” explains Cesar. “It’s made up of the visual and interactive components of a website. These are things like page layout, typography, colors, animations and links.”

How do UX and UI work together?

There are five tenets of UX design:

  1. Learnability – How easy is it for users to accomplish basic tasks the first time?
  2. Efficiency – How quickly can users perform tasks?
  3. Memorability – How easily can users reestablish proficiency?
  4. Errors – How easily can users recover if they make an error?
  5. Satisfaction – How enjoyable is it to use the site?

UX design impacts site usability and layout, which requires you to think about the site interface and design elements. So, it’s important to keep your user’s experience top of mind when designing your website.

Why you need UX and UI:

Designers need to take every detail into account as they create a new website. UX design theory helps designers focus their goals to give users the site they deserve.

UX and UI are connected, and both are necessary for a website’s success. When designers consider both UX and UI, a website will function well and include design elements that give visual interest to each page. In other words, website designers should create websites that work well and look good.

“Designers should be aware that they are designing websites for actual people,” says Cesar. “The solutions we provide should be validated through testing. Because there are processes in UX and UI, we are able to focus our efforts to make the website stronger for the user.”

How to create a website using UX and UI:

1. Research user intent

“First and foremost, designers should know the users,” says Cesar. “Understand their goals and motivations. Ask yourself what you can do to make their experience more fulfilling while achieving your company’s goals.” Define the problem that users come to your site to solve and ask yourself: are they coming to learn, purchase, play or do something else?

2. Problem solve

Understanding the user’s needs will give insight into the next step: solving the user’s problems. Once you understand the problem, you can develop solutions using improved user flow charts or performing card sorts, which involves organizing your site’s content.

3. Design the website

Draft a wireframe website using the information gathered in the previous stages. Wireframes should be the bare-bones version of the site, showing where items are placed and how the user moves from page to page. You’ll also need to consider UI during this step. Determine the colors, typography, images, video, buttons, transitions and other visual aspects of the website.

4. Test and build

Conduct usability tests with people who haven’t been involved in the project to get a fresh perspective. Take careful notes during the tests. How are users moving from one page to the next? Are they struggling to find important information? Is there a way you can shorten the workflow and streamline the user’s experience? Use this information to make changes to your site and voilà! You’ve got a website glow up worthy of before and after pictures.

For more on website design and how to build a stunning site, check out our guide to Web Design 101.

Suggested Stories

Hashtags 2.0: Beyond the Basics

Read More
5 Ways Yakkety Yaks Approach to Client Relationships is Different

Client Relationships Done Right

Read More
How to promote a large-scale event or trade show

Promoting a Large-Scale Event

Read More
Video Marketing Facts 2019

The Power of Video Marketing

Read More

6 Ways to Tell You Need a Rebrand

Read More
Need a new website?

How to Tell Your Website Needs a Redesign

Read More
megaphones with hasthag speech bubbles

How to Work with Influencers

Read More
question mark icon on laptop

Web Design 101

Read More
connect in center of connected lines forming a circle

Partner Programs: Why You Need Them and How to Do Them Right

Read More
GIF of speech bubble with different language for your brand

Using Consistent Language for Your Brand

Read More
Yakkety Yak Squarespace Tips

How We Use Squarespace

Read More

5 Signs Your Website is Out of Date

Read More
Writing A Company Boilerplate

Writing a Company Boilerplate

Read More