Skip to content
Your user interface is your digital first impression. And as we all know, a good first impression can change everything.
UI design is often thought of as the creation of pleasing aesthetics. While this may be a part of what we focus on, the broader concern of the UI designer is to manage how someone feels while interacting with your content or page. Such feelings will translate, both consciously and subconsciously, into how people feel about you and your brand. Even minor confusion or frustration about what to click or how to input information can erode trust — who’s to say working with your business won’t be similar to using your website?
With ever-higher expectations for our digital world, and such high stakes, UI should not be an afterthought. Grand Studio’s UI team has compiled some tips for any teams taking on a new — or evolving — digital product.
Tip 1: When everything calls out for attention, nothing calls out for attention
In an effort to get important components noticed, many designers try to crunch a lot of content above the fold (at the topmost part of a page, before needing to scroll down). Unfortunately, this most often ends up backfiring. Even if your user can see all the pieces in one glance, you risk overwhelming them, and generating confusion about what they should pay attention to.
We recommend placing one (or maybe two) areas of focus up top, sending the rest more into the background. Use color, contrast, size, and placement on the page to guide a user cleanly from primary to secondary focus. White space is your friend.
Tip 2: Your top priority is helping your user know what to do when
It may sound obvious, but it’s far too easy to get caught up in components of the design and lose track of its primary purpose — helping the user take the action they need to take on the page. Consider the user’s paths through the page, and make sure they have everything they need to complete their journey. Never let your user wonder things like, “is this text interactive?” “what does this icon mean?” or “how do I fix the error I’m seeing?”
At its most basic level, a visual interface is a means to communicate efficiently with your user so you can guide them through what they need as elegantly as possible. You want your UI to be a good communicator.
Tip 3: Everything that can be consistent should be consistent
If we think about a visual interface as a means of communicating with the user, it is critical that we are always using consistent language to do so. Though it may sound minor, using a color to mean one thing (e.g. red button = “remove”) at one point and another thing (e.g. red = “edit!”) at another point can be cognitively taxing on a user. As you establish your visual language, make sure there is always just one meaning attached to any given visual component, whether that’s an icon, a color, a word, or a button.
These things not only save your user time, they help the user feel better on your page. Smooth sailing = trust generated.
Tip 4: Consider your breakpoints, and don’t skip testing on the end device!
While of course there may be slight differences between different breakpoints or devices, there should always be visual and functional similarities across them. The idea here is to create an experience that is seamless and consistent for everyone, regardless of the device and its size.
To create the type of layout that will be clear and usable no matter the size of the window, we recommend designing for breakpoints — points at which a design will “break” if you stretch your browser window wider — to ensure all of the page’s elements will nicely fit the available screen space, no matter the size. Considering breakpoints will naturally optimize content for viewing on different devices (even ones that haven’t been invented yet), ensuring everyone gets a clear and usable view.
That said, it’s still very important to view your design on the end device to be able to visualize it in a realistic way. You can do this by downloading your design and opening it up in your browser or device, like a mobile phone. Seeing your design in context with the device will ensure that elements or text are sized correctly and comfortably.
Tip 5: Accessible designs are better for everyone
Making sure your design can be used by as many types of people as possible not only increases the number of people who can interact with you, it can also help you find and resolve points of confusion that go on to help everyone. Accessibility isn’t icing on the cake; it is a critical component of good design.
For example, take alt text for images, or text that describes what is happening in an image. Alt text’s primary function is to help those with visual impairments hear through text-to-speech what each image contains. But alt text can also be really helpful for Google searches, and helping people find content on your page. It’s invisible for those who don’t need it, but there for people who do. (For more on this, check out our blog post on accessibility.)
At Grand Studio, our UI team does way more than “pixel push.” Because we see UI as a critical part of a holistic design practice, UI is integrated into product strategy, UX, and even design research. We know that the best user interfaces come out of a deep understanding of not just UI best practices, but an understanding of the particular context and goals of each client we work with. When you’re making a first impression with your users, nothing could be more important.
Got a user interface project? We’d love to hear from you?