UI Design10 minute read

UI Design Best Practices and Common Mistakes

The most progressive and interesting designers steer clear of visually stale design solutions and ditch restrictive rules by learning UI design best practices and avoiding common design mistakes. 🔊


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

The most progressive and interesting designers steer clear of visually stale design solutions and ditch restrictive rules by learning UI design best practices and avoiding common design mistakes. 🔊


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.
Micah Bowers
Verified Expert in Design

Micah helps businesses craft meaningful engagement through branding, illustration, and design.

Read More

Expertise

Share

Listen to the audio version of this article

Although the title UI designer suggests a departure from the traditional graphic designer, UI design is still a part of the historical tradition of the visual design discipline.

With each movement or medium, the discipline has introduced new graphic languages, layouts, and design processes. Between generations, the designer has straddled the transition from press to Xerox, or paper to pixel. Across these generations, graphic design has carried out the responsibility of representing the visual language of each era.

As UI design transitions out of its infancy, what sort of graphic world can we expect to develop? Based on the current trajectory, the future looks bleak. Much of UI design today has become standardized and repeatable. Design discussions online fixate on learning rules to get designs to work safely rather than pushing the envelope or imagining new things.

The tendency for UI designers to resort to patterns and trends has not only created a bland visual environment, but it has also diminished the value of the designer as processes become more and more formulaic.

As we review UI best practices and common mistakes, the most pressing concern is not technical proficiency but avoiding an onslaught of repetitive and visually boring designs.

The top five most common UI design mistakes are:

  1. UI designers have become rule-obsessed.
  2. The grid is restricting the creative process of UI designers.
  3. UI design has been standardized with patterns.
  4. Typefaces are tragically misunderstood.
  5. Contrast is not a design cure-all.

Best practices for interface design

Common Mistake #1: UI Designers Have Become Rule-obsessed

The world of graphic design has always followed sets of rules and standards. Within design disciplines, common mistakes closely coincide with a standard rule that has been broken. From this perspective, design rules appear to be trustworthy guides.

However, in every design discipline, new movements and creative innovation have resulted from consciously breaking rules. This is possible because design is conditional and requires designer discretion. Design is not a process with finite answers. Therefore, design rules should be considered as guidelines rather than cold, hard facts. The experienced designer knows and respects the rule book just enough to be able to break out of the box.

The way design is discussed online often revolves around lists of do’s and don’ts. Master the 10 Easy Steps to Design Perfection! Unfortunately, design requires a much more robust understanding of principles and tendencies. The path to good design does not run through systematic adherence to checklists.

Interestingly, if designers stop breaking rules, then no creative breakthroughs can be made. If UI designers only develop the ability to follow guidelines rather than honing their decision-making abilities, they may quickly become irrelevant. How else will we argue that our work adds greater value than off-the-shelf templates?

Be Wary of “Top 10” Design Rules

The issue with design rules in today’s world of UI design is their abundance. If designers need to solve problems, they can simply look to the existing UI community and their set of solutions. However, the plentitude of these guides and rules undermine their credibility.

A Google search for “Top UI Design Mistakes” yields a half million results. What are the odds that most, if any, of these authors agree with one another? What is the likelihood that each design tip offered accurately coincides with the design problems of a reader?

Often, online educational articles discuss acute problems rather than the guiding design principles behind an issue. The result is that new designers never learn why design works the way it does. Instead, they become dependent on what has come before. Isn’t it a concern that so few of these articles encourage design experimentation or play?

Designers should draw on a toolkit of guiding principles rather than a book of predetermined rules and design templates. “Press x for parallax scrolling and y for carousels. Before choosing, refer to the most recent blog post on which navigational tool is trending.” B-o-r-i-n-g-!

Trends are like junk food for designers. Following them produces cheap solutions that offer some initial payback but little value over the long haul. Trend-following designers date themselves quickly. The reward for following someone else’s design path? A gnawing sense of professional emptiness.

It’s true that working to invent your own styles and systems is hard work, but it’s absolutely worth the effort. The daily gains and breakthroughs are all your own. There’s something about copying that never seems to feed the designer’s soul.

Common Mistake #2: The Grid Is Restricting the Creative Process of UI Designers

Despite my rant against rules, here’s one: It’s impossible for a UI designer to work without a grid. Web and mobile interfaces are fundamentally based on pixel-by-pixel organization—there’s no way around it.

However, this does not mean that UI designers should only strive for grid-centric appearances. Likewise, there’s no reason for all design-related decisions to be based on a grid.

Avoid Using the Grid as a Trendy Tool

Generally, designing in response to trends results in poor design. At best, trends lead to satisfactory outcomes, but the overall impact is almost certain to be underwhelming. To be trendy is to be ordinary.

Therefore, when employing a grid in a design, understand what the grid has to offer as a tool and what it might convey. Grids generally represent neutrality as everything within the constraints of a grid appears equal.

Grids also allow for an unbiased navigational experience. Users can jump from item to item without any interference from the designer’s curatorial hand. With other navigational structures, the designer may be able to group content and establish desired sequences more intentionally.

UI design best practices and tips and tricks

Don’t Default to the Grid as a Workflow

Dylan Fracareta, faculty at Rhode Island School of Design (RISD) and director of PIN-UP Magazine, points out that “most people start off with a 12-column grid…because you can get 3 and 4 off of that.” The danger here is that designers immediately predetermine their work.

To prevent this, Fracareta only uses the move tool with set quantities, as opposed to physically placing things against a grid line. This has the double effect of establishing order and opening up the potential for unexpected outcomes.

Designing for the browser used to mean that we would input code and wait to see what happened. Nowadays, web design is similar to traditional layout design, where the process is “more like adjusting two sheets of transparent paper.” How can we, as designers, benefit from this process?

Although grids can be restrictive, they are one of our most traditional forms of organization. The grid is intuitive. The grid is neutral and unassuming. Grids allow content to speak for itself and users to easily navigate an interface. Despite my warnings towards the restrictiveness of grids, different arrays allow for varying levels of guidance or freedom.

Common Mistake #3: UI Design Has Been Standardized with Patterns

The concept of standardized design elements predates UI design. Architectural details have been repeated and applied to similar design circumstances for centuries. This practice makes sense for parts of a building that people rarely perceive.

However, once architects standardized common elements like furniture dimensions and handrail heights, people began to express disinterest in the beige physical environments that resulted.

UI architecture best practices

Not only this, but standardized dimensions were proven to be ineffective. Based on statistical averages, they often failed to serve large segments of the population. Repeatable details have their place, but they should not be used uncritically.

Designers Shouldn’t Use Patterns as Products

Many UI designers view patterns as something greater than a simple time-saving tool. They see them as off-the-shelf solutions to complicated design problems. Patterns are intended to standardize recurring tasks and artifacts in order to make the designer’s job easier. Regrettably, certain patterns like carousels, pagination, and F-patterns have become the entire structure of many of our interfaces.

Is Pattern Use Justifiable?

Designers tell themselves that the F-pattern exists as a result of the way that people read on the web. Espen Brunborg points out that perhaps people read this way as a result of our F-pattern overuse. “What’s the point of having web designers if all they do is follow the recipe?” Brunborg asks.

Common Mistake #4: Typefaces Are Tragically Misunderstood

Many “Quick Tips” design lists suggest hard and fast rules for fonts. Each rule is shouted religiously, “One font family only! Monospaced fonts are dead! Avoid thin fonts at all costs!” This is nothing more than hot air.

The only legitimate rules on type, text, and fonts center on enforcing legibility and conveying appropriate meaning. As long as the text is legible, there may be opportunities to employ a variety of typefaces. The UI designer must take on the responsibility of knowing the history, uses, and design intentions for each font implemented in an interface.

Typeface Legibility Reigns Supreme

Typefaces convey meaning and affect legibility. With all of the discussion surrounding rules for legibility on devices, designers are forgetting that type is designed to imbue a body of text with an aesthetic sensibility. Legibility is critical—this isn’t to be disputed—but it really should be an obvious goal. Otherwise, why would we have a need for anything beyond Helvetica or Highway Gothic?

The important thing to remember is that fonts are not just designed for different contexts of legibility. They are also essential for conveying meaning and giving bodies of text nuanced moods.

UI design tips and tricks for typography

Avoiding Thin Fonts at All Costs Is Unwise

Now that the trend has come and gone, a common design criticism advocates avoiding thin fonts entirely. But do we need more regulations? Shouldn’t the goal be a deeper understanding of the design principles supporting typefaces?

Some designers are convinced that thin fonts are impossible to read or untrustworthy between devices. Legitimate points. Yet, this represents a condition in the current discussion of UI design where typefaces are only understood as a technical choice relating to legibility. If legibility is the only design concern, why not banish thin fonts altogether?

A more holistic approach begins with understanding why a thin font might be advantageous, and within what contexts. Bold, thick text is actually much more difficult to read at length than thinner text. Yet, as bold fonts carry more visual weight, they’re more appropriate for headings or content with little text.

Thin fonts often employ serifs, making them suitable for body text. How so? Serif characters flow together when viewed in rapid succession, making them more comfortable for long periods of reading.

Additionally, thin fonts are often chosen because they convey elegance. If a designer is hired to create an interface for a client whose mandate is visual sophistication, it would be difficult to find a heavier typeface to do the job.

Fonts Require Variation to Establish Hierarchy

A common UI design mistake is failing to provide adequate variation between fonts. Changing fonts is a good navigational tool that helps to establish a visual hierarchy within an interface. In general, the largest items (or boldest fonts) are most important and carry the most visual weight. Visual significance helps users identify content headings and frequently used functions.

Too Much Variation Undermines Hierarchy

The issue with making every font choice unique, especially when an interface contains many typefaces, is that nothing really stands out. If every font is different, it becomes difficult for users to recognize important content or establish a sense of visual order.

Common Mistake #5: Contrast Is Not a Design Cure-all

A common thread that appears on many “Top Mistakes” lists encourages UI designers to avoid low-contrast interfaces. It’s true that there are many instances in which low-contrast designs are illegible and ineffective. However, my worry, similar to my points on thin fonts, is that the use of absolute language leads to a homogenous, high-contrast design culture.

Defaulting to High Contrast Is Careless

High contrast visuals are undeniably stimulating and exciting. However, there are many more states within the human emotional range worth conveying. To be visually stimulating may also be visually safe.

Take, for instance, the entire industry of contemporary sci-fi film. It seems as though every production has resorted to black and neon blue visuals as a way of tricking viewers into excitement. Would it not be more effective to interweave narratives with both high and low contrast images that provoke a broader scope of emotional responses?

Functionally, if every element in an interface is in high contrast to another, then nothing stands out. This defeats the potential value of contrast as a hierarchical tool. Considering different design moves as tools, rather than rules, is essential to avoiding stagnant, trendy design.

Conclusion

At best, design rules are guides. They provide decision-making safety and warn designers of the dangers of thoughtless choices.

Conversely, design rules are not laws. They are not unbreakable, and they are certainly not deserving of our undisputed surrender. In fact, design rules, when followed recklessly, can become serious crutches that weaken our ability to solve problems creatively.

Designers are not scientists. We are not bound to provide empirical evidence for every aesthetic decision we make. It’s true that our profession is one of process and deliberate judgments, but there is room for instinct and ingenuity. In fact, our ability to help our clients stand out in a cluttered world of trendy content depends on our willingness to imagine new possibilities.

We must experiment. We must play.

Design rules exist to be leveraged for visual advantage. They may be bent, even broken, but they are never to be blindly followed.

Understanding the basics

  • What makes a good user interface?

    A good user interface has a clear design hierarchy, meaning that information is clearly organized in terms of importance and easy to access and understand. Additionally, a good user interface embodies a visual mood or aesthetic that is meaningful to the people who interact with it.

  • What are the principles of user interface design?

    The core principles of user interface design are clarity, flexibility, familiarity, efficiency, and consistency. Of these, clarity is the number one objective. Clarity in user interface design empowers users to have confident interactions and easily find the information they’re seeking.

  • What is the function of the user interface?

    While there are varying levels of design complexity, the primary function of the user interface is to act as a bridge that allows a person to interact with a computer system.

Hire a Toptal expert on this topic.
Hire Now
Micah Bowers

Micah Bowers

Verified Expert in Design

Vancouver, WA, United States

Member since January 3, 2016

About the author

Micah helps businesses craft meaningful engagement through branding, illustration, and design.

Read More
authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Expertise

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Join the Toptal® community.