Full confession: I didn’t study design in school. I learned visual 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. 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 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 of our role as a UX designer. Wireframes capture the page level details and layout to best 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 to know what to do next.
In modern UX, design system components already have visual elements baked into the system. However, components cover most use cases but not everything. You’ll find yourself creating wireframes and designs that don’t have a design system component. That’s where knowing visual design becomes important.
1.Use a grid.
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 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 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 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.
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.
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. If you’re interested in more UX content, check out some of my courses.