Your UI/UX Cheat Sheet

Sarah Thuet Picture

by Sarah Thuet | Last Updated: Jun 11, 2018

UI and UX–user interface and user experience. As marketers, we know the importance of these two concepts when it comes to providing a stellar mobile experience. A lot of the time, we’re tasked with coming up with UI/UX concepts and handing them over to the technical powers-that-be for execution and finalization. There’s a lot that goes into these two concepts, which is why I wanted to put together a quick-start guide to UI/UX principles to help get your entire team on-board with a mobile-first mindset for your next mobile project.

But...let’s not get ahead of ourselves. I’ll be the first to admit that I sometimes get these two concepts a little jumbled. Let’s start by really getting these two terms straight–they are some of the most misused and confused concepts in tech today.

User Experience Design is a human-first way of designing. It focuses on enhancing the user’s view of the product–in this case the mobile page–by improving usability, ease of use, and pleasure following an interaction with the page. Think of this as the user’s experience on the page.

User Interface Design is the process that controls how the user and the system interact–specifically, transferring the brand’s information and messages and creating an attractive, guiding and responsive experience. Think of this as the physical elements or design of the page.

Ultimately, both UI and UX are necessary for an ideal mobile site or application. And striking a balance isn’t always easy! Something that is aesthetically pleasing but impossible to use is knocking it out of the ballpark in the UI category, but failing miserably in UX. Fear not, I’ve compiled a short list of UI/UX basics to help you achieve a mobile experience your customers are sure to enjoy.  

Color
Color can communicate a message without using any words; therefore, you must decide the personality you want the platform to take on. For example, neutrals present a more sleek, elegant and polished message while brighter colors present a much more upbeat and energetic message.

When it comes to picking a color palette for a mobile experience, less is more: pick a palette and stick to it. Follow the 6:3:1 rule: the 60% + 30% + 10% principle is the best proportion to reach balance among colors–creating a neat, harmonious interface that brings pleasure to the users while guiding users' eye naturally from one point to the next. Lastly, color can serve as a differentiator. By making a specific button or portion of the screen a different color, it will bring the viewer’s attention naturally in that direction.

Navigation
Creating a mobile experience that is appealing to the eye is the first step, but that only goes so far. If a user cannot figure out how to get from one place to another or find what they are looking for on your page, then you’re going to lose them. To combat losing users because of poor navigation abilities, keep these mobile navigation best practices in mind:

Animation
There was a time when animation was viewed as more of a visual luxury–but in today’s mobile world, animation is seen as a functional requirement from users. Animation can function in many different ways–but here are a few to get you started:

To users, UI and UX seem like they are just part of the package–but everything that happens on a web page is intentional and carefully planned. It’s important to take the time to create a highly user-friendly site–or risk losing users altogether.

Digital Experiences Made Easy

What digital experiences do you want to create?