A Beginner’s Guide to UX/UI Design

Over the last decade, we have seen a ton of changes in the digital space. To put it in perspective, the iPhone came out 12 years ago. Part of the huge success of the iPhone was the user experience (UX) and user interface (UI) design elements. The simplicity and ease of use made a sophisticated technological concept become easy to grasp and adopt. 

The user experience of an item, technology, or service is not a new concept. However, in today’s world, it is frequently talked about in the digital space because it can affect sales, how long a visitor stays on your site, or how they perceive your company. It is critically important to consider UX and UI design elements when creating a website, email campaigns, or any other form of digital media.

What is the difference between UX and UI? 

We love this analogy from Emil Lamprecht on Career Foundry:

UX Design refers to the term User Experience Design, while UI Design stands for User Interface Design. Both elements are crucial to a product and work closely together. But despite their professional relationship, the roles themselves are quite different, referring to very different parts of the process and the design discipline. Where UX Design is a more analytical and technical field, UI Design is closer to what we refer to as graphic design, though the responsibilities are somewhat more complex.

There is an analogy I like to use in describing the different parts of a (digital) product:

If you imagine a product as the human body, the bones represent the code which give it structure. The organs represent the UX design: measuring and optimizing against input for supporting life functions. And UI design represents the cosmetics of the body–its presentation, its senses, and reactions.

The man who coined the term, “user experience,” Don Norman, says “User experience encompasses all aspects of the end-users interaction with the company, its services, and its products.” It is not strictly for digital or online goods or services. It is for everything! Car interiors, door handles, office chairs, the mouse you’re using right now to scroll through this article. Everything has some sort of user experience or interface, and oftentimes, we don’t even notice when a design is good because it is so intuitive. On the other hand, we notice poor design right away. 

Why is Web UX/UI important?

UX/UI is the very fabric of every product you use. It’s the reason we have left-handed scissors, doors with handles that also say pull, and it’s why Apple is worth billions of dollars. What society considers “luxury” is actually just an extremely well-designed user experience. It’s the difference between a happy customer and a bad review online. We challenge you to visit your website as a first-time visitor would. What are the top three things they might want to do while on your website? Is it easy to achieve those goals? Chances are it’s already amazing but, here are 3 tips for improving your website’s UI/UX.


Tip #1 – Make it simple

Easy Reading

Websites that are easy to read are more likely to convert visitors. Not only does it make it easier for people who know what they are looking for, but it helps people take action. When putting together content for a web page, double-check your Flesch- Kincade score to ensure you’re not above an 8th grade reading level… really! You want to make sure of this not only for the visitors’ sake but for Google’s indexing of your site. Increase your searchability by keeping the content simple.

Clear Design Hierarchy

People like to look at one thing at a time. Make it easy for users to find what they are looking for quickly by putting the most important information out front.

See a few great examples of clear design hierarchy below from Instagram and Spotify:

Things like buttons, contrasting colors, and page placement make it easy for visitors to find exactly what they are looking for extremely quickly.

Follow Standards 

People like intuitive design. When navigating your site, most do not want to see something completely foreign or too far from what they’re used to. Orbit used this analogy of a car, “Some cars look amazing. They’re different. They’re beautiful. But they still have doors on the sides, wheels on the bottom and headlights in front.” People like all the standards to be there. What makes you different is your content and what brings people to your site. They studied the top 50 marketing website and discovered what some of the standards among the sites were. 


Tip #2 – Use Faces 

Whether we are aware of it or not, when we see a face on a screen, it is often one of the first things we’re drawn to. So, use it to your advantage and guide attention towards important text by using a directional face.

The heatmap image below shows that a face pointing towards the text guides viewers to the actual content. 

Where do your eyes go first when you look at the image below?

It works, doesn’t it?


Tip #3 – Mind the Fold

Above the fold, as it applies to web design, is the portion of a web page that is visible in a browser window when the page first loads. The content that requires scrolling down in order to see is considered “below the fold.”

Some things should always be above the fold. Such as your contact information, the website navigation, and things that assure the user they’re in the right place. Other things, like the call to action, for example, can actually be placed below the fold. Studies show that users do not mind scrolling down. 

The example below shows that when you add calls to action below the fold, there is a large increase in conversions and interaction. 

moving call to action

Next Steps

Be aware that digital experiences are powerful and should be carefully crafted. The points we mention here barely begin to scratch the surface on user experience and interface design as industry professionals spend years honing their craft in both disciplines. A good place to start is to spend time thinking through how you want a user to experience your landing page, website, email etc., then, try out different designs that accomplish those goals using the guidelines above.


Need help with intuitive design? Reach us at applied@vsg360.com

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email