A 101 Guide to UX/UI in Web Projects

4 min read


Recently, the Well Done Marketing Web Development Team welcomed Kim Coles. If you haven’t read about her—and you totally should—she’s coming in as Well Done’s UX/UI designer. To say that we’re excited about having her here would be a bit of an understatement. 

Bringing a skilled designer and illustrator with experience in the UX/UI space is a huge win for our team—and for every single user of the websites and digital strategies that Well Done puts together. But before we talk about that, let’s talk about what UX/UI is in the first place. 

What is UI?

UI is the easier of the two to comprehend, so we’ll start there. It stands for “user interface,” or “the point of human-computer interaction” within a system. Even simple tasks involve several different layers of UI. For example, just by reading this blog on your desktop or laptop you could be using a few different interface systems:

  • Your keyboard
  • Your mouse
  • Your computer’s operating system
  • The browser you’re reading this on
  • The design system of WellDoneMarketing.com

However, if you’re reading this blog on a mobile device, you have a different set of interface systems:

  • Touch screen
  • Your mobile device’s operating system
  • A mobile version of the browser
  • A mobile design of WellDoneMarketing.com

A seasoned UI designer is always thinking about how you’ll be interacting with your computer or mobile device. That means asking questions like: Will you be navigating the pages of the website via text commands? Will you be switching between pages with arrow keys? What about using your mouse and the on-screen cursor to select elements on the page? It’s up to the UI designer to understand their audience so they make the right decisions about all this kind of stuff and much more. 

How About UX?

Where UI is the interface, UX—or “user experience”—comprises the small details that make up that interface. For example: Google.com as whole is the user interface, but the brand colors, logos, menu layouts, and small interactions are the elements that make up the UX. UI and UX are tightly intertwined, but they’re separate things when it comes to design.  

Interaction and Design at the Same Time 

The magic happens when you have someone like Kim whose experience allows the Well Done team to think about our users’ experiences from the earliest stages of web projects. It’s one thing to consider when and where to put a call-to-action button on a page, but Kim’s experience allows us to build our design to react when:

  • A user’s cursor moves onto the button
  • A user’s cursor leaves the button
  • A user clicks the button
    • What the interaction looks like when it’s a successful click
    • What the interaction looks like when it’s an unsuccessful click

How to approach a clickable button is just one small example out of the hundreds that a great UI/UX designer has to think about over the course of a website project. There are also website menus to click through, sign-in pages, share buttons—and the list goes on. 

Designing websites and other interfaces on this level is a skill unto itself, one that creates the immersive and engaging experiences expected by users on today’s web. When you approach a web project with a user experience design mindset, you make it easier—and more likely—for users to interact with content in the way that you want. A well-designed cart checkout system is going to invite more customers to finish their purchases than a cart that they can’t figure out. An interactive web advertisement might catch the attention of potential customers more than simple text on the page. At the end of the day, an early investment in UX and UI really increases the impact of any type of web content by going beyond just the plain content and addressing the accessibility of the content. When content is relevant and well designed, users read more words, watch more videos, fill out more forms, and click more times. 

With Kim joining the Well Done team, we’re bringing to bear a more focused and intentional effort into the UX and UI side of our web projects. She hasn’t been here long, but she’s already lending her expertise on multiple projects in progress. We’ve got big plans for how we can utilize those skills to create more accessible and engaging interactive experiences for our clients and their end users.