UX: 5 powerful visual design tips for delightful interfaces

by | Mar 27, 2020 | visual design | 0 comments

➡ Practical visual design tips to create usable and beautiful interfaces.

Full confession: I don’t have a design background. My degrees are in Psychology, Library Science and Informatics. I learned visual design the hard way- through experience on the job. 
 
Early in my career, I was perfectly capable of designing flows and complex interactions, but my wireframes were unattractive. Unattractive wireframes make it difficult for colleagues to understand the design, because they’re so distracted by visual design issues. 
 
Part of the UX process includes designing high fidelity interfaces.
 
✔️ These are the key tips that I wish someone had told me when I was first starting out.
 

1.Use a grid. straight ruler 

Please, please, please 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.
 

2. Establish hierarchypushpin

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 and our layouts 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 hugging face

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 do this, 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 looking at the wireframe.

 

4. Be consistent, but not boring. sparkles

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. 
 

5. Left align. triangular ruler

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.
 
These are some deceptively simple, but powerful quick tips for you next wireframe or interface design.
 
 
 
 
 
Watch my Interface design course on LinkedIn Learning for more tips.

Subscribe