How UI Design and UX Design Work Together to Make You Fall in (Website) Love

We’ve all experienced it: you pull up a web page you’ve never been to before’re in love. It’s beautiful! The layout, the buttons, the typefaces — it all comes together to create a wonderful experience. And it’s not just superficial elements, either.

Everything works exactly as it should work, and you’re left with a sense of satisfaction (and, okay, maybe a little bit of a website crush). We’ve certainly come a long way since the first website.

That first impression is the result of two very closely related — but not identical! —  fields of design known as UI (User Interface) and UX (User Experience). There’s a lot of information floating around on the web regarding UI and UX, and it can get a little overwhelming. Here’s a basic introduction to what each type of design is responsible for:

UI = User Interface

User Interface Design (or UI design) refers to the user-facing part of a  product. In other words, it’s everything that your customers see and interact with when they pull up your web page, from buttons to graphs to any other icons or viewable page elements. A website’s UI design is typically based on the company’s branding or style guide — the colors, typefaces, and other “physical” aspects should all be representative of your company aesthetic and communicate your brand.

UI design answers the What? when it comes to your website. What does your customer see and interact with? What do you want to be sure to include? What individual visual elements will immediately set your website apart at first sight?

If your website was a house, then the UI design would determine what color to paint it, what flowers you might put in the flower boxes, and whether you have a swingset for the kids to enjoy.

UI designers ultimately want your page to look good and provide that immediate aesthetic “it” factor as soon as a user visits.

UX = User Experience

If UI design answers the What? of your web page, then UX design answers the Why? Why is it important to include the “Log In” button on your landing page? Why do you want the link to customers’ rewards points at the top of the page? Why is it important to have an easily accessible shopping cart? The reasons for these and many other UX decisions boils down to wanting satisfied customers, more social shares, brand recognition, and loyal customers who will keep coming back to your site.

If we stick with the house metaphor, the UX design provides the structure of the actual building. It’s also the reason you have three bedrooms for your family instead of a studio apartment. It’s the walls and floors and doors and windows and everything that is focused on function over form (although to say it completely ignores form would be incorrect).

Whereas UI design might dictate the need for nice-looking buttons on your page, UX design demands that they actually get “pressed” when a user clicks on them. UX also focuses on placing content in the proper location for the user. For example, placing links to products within articles so users can quickly and easily purchase what they're reading about. UI is concerned with first impressions; UX wants to leave the user with an overall feeling of satisfaction. UX designers are going to be the biggest advocates for users, and it is their job to constantly focus on balancing the needs of the business with what the website has to offer. If there is research, testing, or development that needs to be done, it falls under the responsibilities of UX designers.

UX provides the structure, but it also must follow the main objectives of the client. For example, the main objective of an eCommerce site is to sell products. The user path from the homepage to adding products to their cart must be as simple and easy as possible. Within that path, you display product information in an organized way, but focus on the continuous path to the cart. 

The ultimate goal of UX designers is to create a website that functions in such a way that is easy to use, and pleasurable or satisfying to those users while meeting the customers' goals.

The Power of UI and UX Working Together

It can be easy to reduce both UI and UX to the simplest parts of their responsibilities — UI as only surface-level and UX as the real bones of a website — but both types of design are much more complex than that. They’re also completely interdependent, and your website has to be strong in both areas to be successful. UX without UI is an ugly, uncarpeted, unlivable empty building. And without UX, there’s no building in the first place! Just a bucket of paint splashed onto a facade. It’s only when UX and UI design come together to accomplish what they both are capable of that your website can truly thrive and provide your users exactly what they’re looking for. If you want your customers to fall in love with your website, why not tell CQL about your project? It just so happens that causing love at first sight is one of our specialties.

Continue Exploring




Our Work Services Commerce Cloud Approach Culture Blog Careers Contact

Grand Rapids:
3344 Grand Ridge Drive NE
Grand Rapids, MI 49525
616 365 1000
Ann Arbor:
8186 Jackson Rd
Ann Arbor, MI 48103
616 365 1000