Tips To Step Up Your UI Game

UI, short for User Interface, is something that can make or break the success of your app or website. While the big guys like Google and Facebook have dedicated teams, its hard for a solo-maker to perfect the UI of their app or website without that expertise and those endless resources. Instead, there are a few core principals that will help lift your UI design to avoid the biggest pitfalls of bad design. Here are the top tips Visiwig recommends:

Design for Mobile First

When creating a web app or website, designers often embrace responsive design in order for users to be able to use layouts on a variety of device screen sizes. A design created for mobile devices is more likely to work on desktop without special consideration than the other way around (a desktop design on mobile).

Not only that, but the constraints of mobile UI force designers to prioritize and cut the fluff. Generally the results are a simpler experience to accomplish the core objectives of what the app sets off to do.  This is not to say both the mobile and desktop versions should be perfect copies of each other, the point is starting with mobile design iterations drives you to simplify the complex from the start.


Embrace Whitespace

The problem about not including enough whitespace is cluttered elements can create non-existent element groupings and associations. 90s websites tried fill substantial content above the fold, but this makes it harder for users to find that specific bit of information they seek. Breathing room paired with hierarchy helps users skim content to quickly determine which sections are relevant for their journey.


Incorporate Icons

A picture is worth a thousand words, while an icon is a constrained set of words that are precise and to the point. Icons can work in various places, but in websites they’re often seen in navigation and paired with sub-headings.

With navigation, short and often one-word terms are used to direct users to sections.  Sometimes, the exact idea can’t be conveyed with a single, small word. Icons can help fill in that gap.

Icons also assist skimmers with context. A reader might read the headings, but reinforcing the context gets users in the right frame of mind for digesting text.

Lastly, if your page is full of text, icons can help introduce visual interest to break the monotony of text and boxy design.