UX: 5 powerful visual design tips for delightful user experience

Full confession: I didn’t study design in school. I learned visual user interface design the hard way- on the job.

Early in my career, my wireframes were unattractive. The spacing was off, and the relationships between information wasn’t always clear. I didn’t think about padding or spacing and I had no idea how to fix these issues. 

Beyond the aesthetics, the spacing issues led to misunderstanding of how to use the products, and people like to use products they find attractive. These are the key visual design tips that I wish someone had told me when I was first starting out. 

What is visual design? 

Visual design refers to the surface level design of a digital user interface (UI), also known as the presentation layer. This layer focuses on white space, color, typography, iconography and layout. Both usability and desirability of the UI are compromised with poor visual design.  

Designing wireframes are a key aspect when creating user experiences. Wireframes capture the page level details and layout to communicate how a product should be used. If you’ve used a website that you found confusing, chances are its partly because the layout didn’t guide you to right set of actions. 

In modern UX, design system components already have some visual elements baked into the system. However, components don’t cover layout or determining what information is the most important on the page.  

Let's dive into these tips to enhance your visual layouts:

1. Use a grid 

Use a grid to layout your wireframes. Using a grid will help guide your design’s padding, margin and use of white space. The grid you use will be based on what your designing- common web based grids are based on 12 columns. 

Although a grid might be an approximation, when you’re taking into account responsive and mobile design- you’ll layout your designs according to the breakpoints. Check out these resources from Microsoft, IBM, and the United States Web Design system. 

I think of grids as training wheels. It helps me to understand how to divide up the page and use the space for maximum impact. Using a grid helped my design look more professional, and much cleaner.

2. Establish hierarchy 

I had a mentor early in my career who would characterize design as either weak or strong. “Weak” designs didn’t have a point of view. As a designer, our thought process is conveyed through our layouts to guide users to the actions they need to take. 

Your design should demonstrate hierarchy, which dictates importance of elements on the page and the priority ordering in which you want the user to see them. 

3. Embrace white space 

In my unscientific analysis, about 85% of your visual design issues will stem from not enough white space. Seriously though, sometimes it feels like you need to use every bit of space on the page. Resist that urge. 

If you’re using a grid, it’s easier to organize your design, because your padding will be increments of the base unit. 

Use more white space if your design needs it. Visual design is more art than science, so you’ll have to feel this out, and gather feedback. You’ll know it’s right, when everyone feels at ease and relaxed and the intention of the design is clear.

4. Be consistent, but not boring.  

Creating good visual interfaces involves creating a consistent overall appearance. Don’t arbitrarily center-align something, or decide to change your layouts from page to page for the same information. 

But… 

Symmetry in user interface design can be boring, so you’ll want to spice up some areas of your layout to insert some energy and draw focus, whether that be through the visuals or color– the choices are limitless.  

Tread carefully, because these choices must be in context to the experience you’re designing.  

5. Left align.  

Some of the best visual design advice imparted to me, was this: “Everything should align to something”. Left aligning your objects makes a clean scannable line which is much easier to read. This is especially true for left aligning text and headlines. 

Of course, this rule can be broken if you are intentionally trying to do something different. But if you’re not designing for a marketing site, and you’re working on agent portals, e-commerce, or developer tools, pretty much most things, you’ll want to left-align. 

These are some deceptively simple, but powerful quick tips for you next wireframe or interface design. If you’re interested in more UX content, check out some of my courses.