The Subtle Fundamentals of UI Design

There are countless techniques, tips, tricks and rules to craft resonant and functional interfaces, however, it’s a small group of truly effective methods that rise to the top when attempting to deliver a truly useful and at the same time, beautiful design.

Much of creative web technique is centered around interface design, as it is the front line of media engagement. Attention to every detail is what sets apart an outstanding website from it’s sub-par counterparts. Paying attention to, and applying a few benchmark, high-level details can ensure a more intuitive experience, and a more satisfied user.

Grouping items and subjects that are interconnected must be grouped together and visible on screen to show they are related. Alternately, if they are completely individual, they should be separated.

Focusing on consistency by keeping the same implementations in place throughout a site with allow the user to become more comfortable with the material at hand. Placing buttons and content in the same places across windows, using related wording and color will enable the user to navigate smoothly through the experience.

The use and choice of color can make or break a design. Color selection expands well beyond brand colors, but can create powerful connections and calls to action, particularly in button form. Bolder tones attract the users eye, and can also be used to create an expanse of space when contrasted with cooler colors.

By playing with contrast, a designer can steer the focus of a users attention. Aesthetic technique must be used to ensure that screens and content are still readable. A good rule of thumb is to use dark text on lighter backgrounds, and the reverse for dark backgrounds.

Users need to know how to use the application that was built for them. This important aspect should follow the old ‘one and done’ adage: you should only have to explain the way the application works once. Further, the design should be fail-safe via intuitive design. Even when users are steered in the wrong direction, your system should provide results from which your users can be directed and learn how to use the application ongoing.

Set user interface design guidelines and standards – and stick to them. This is the only way to ensure consistency. The ultimate goal is to aim, is to elevate the holistic user experience by making application interfaces more intuitive and consistent.

A whole new world of web fonts become available to designers all the time, however, there are a few heavy hitters such as open sans that seem to be at the top of the usability list. While font choice is important, spacing can impact the user interface on a meaningful level. Tracking can be used to adjust the space between letters and words. This is applied with CSS using ‘letter spacing’.

User comprehension is vastly improved by working through verbiage on links and buttons. A great way to take a cognitive approach is by using verbs, or simplifying to a one to three word phrase, question or statement. Instead of ‘no’ or ‘yes’, which will ultimately lead to another question, create a call to action, like ‘cancel’ or ‘save’.

Finding balance in simplification – deciding what is edited down to the basics is truly a skilled effort, requiring restraint and a deep understanding of the user being communicated with. Much of this implementation is subtle, however, when applied in tandem, provide a user experience that becomes highly intuitive, both for the user and designer.

Vanessa Petersen

As Executive Director of Brand Strategy based in ArtVersion’s Portland office, Vanessa manages both national and West Coast accounts. She brings with her a passion for strategy with extensive experience in creative marketing, brand growth and development. She is a true advocate of storytelling and brand building from the inside out, and her keen knowledge of the marketplace, trend patterns and usability lead her to identify opportunities that can inspire powerful design strategies.

More Posts - Website - Twitter - Facebook - LinkedIn


Leave a Comment