Elegant Themes Blog

Stay up to date with our most recent news and updates

10 Rules of Good UI Design to Follow On Every Web Design Project

Posted on February 24, 2016 by in Resources | 22 comments

10 Rules of Good UI Design to Follow On Every Web Design Project

It’s pretty easy to find a designer willing to work on any project nowadays. Finding a professional in the area of UI design who is also familiar with best practices, however, is still an uphill battle. If you want to place yourself in contention for these kinds of positions, you’ll need to remain up to date with the latest developments in the field.

Knowing the best practices to follow on every interface design project will put you far ahead of most candidates who simply fire off designs without taking into consideration the variety of details that go into the creation of an interface.

Today, we’ve compiled a list of ten such best practices applicable for UI design in web projects, and to get things started we’re going to talk about the one of UI’s biggest misconceptions.

1. Understand How UI Plays Into UX

A graphic designer at work, surrounded by all of his tools.

Image by karnoff / shutterstock.com

First things first – sometimes these terms are used incorrectly, and while it’s important to understand that while UI does play an important role in UX, the second discipline has a much larger scope.

This is not to say that UI isn’t important, since as we all know, it can make or break a website or app. However, UX designers (or ‘architects’) need to take into consideration such diverse factors as interaction design and architecture, the creation of clear taxonomies, copywriting, coordination with designers and programmers, and so on. It’s the overall design of an entire experience (as the acronym implies), from top to bottom.

In order to create a great interface, UI designers need to rely on information from the user experience angle, such as identifying which problems need to be solved, how the user flow will play out, and determining key product areas and hierarchies. Ideally, serious work on the interface will begin after gaining access to all of this information, then mockups will be made, tested and approved by UX designers and a product will be launched without (too many) hiccups.

2. Know Your Audience

An audience watching a screen.

Image by Scott Richardson / shutterstock.com

It should come as no surprise that the most important insights into how to design a fantastic interface should be taken from your users. If you’re in the planning process of launching a website, you must already have an idea of what your future audience will want, but laying out the minutiae is a whole different ballgame.

You need to have a clear picture of what needs will bring people to your website, and exactly how it will go about providing a design that will draw them in further. If you’re a bit lost at this juncture, looking at the competition can be a great way to kickstart the creative process. Which websites are at the top in your project’s field? Are they using similar layouts or colors? Do they adhere to similar styles or seem to cater visually to the same demographics?

Using design patterns that users are comfortable with can help ease them into your website, which you can then differentiate with your own take on their needs.

Once you’ve identified your audience, you can test how your design plays out among them and take their feedback into consideration. Actionable feedback from your desired target audience is incredibly valuable, so get it and use it!

3. Keep Things Simple and Consistent

A magnifying glass looking upon a sign that says "Cosistency is key".

Image by BoBa22 / shutterstock.com

The hallmark of a great interface is simplicity. By this we don’t mean simply sticking a button or two here and there with some animations thrown in for the hell of it – we mean easy to understand and interact with. Your users shouldn’t need a map in order to navigate through your app or website, and it’s part of your job as an interface designer to subtly guide them from where they are to where they need to go.

MailChimp provides a good example of a simple, clean interface.

MailChimp provides a good example of a simple, clean interface.

In order to do this, you can make use of several elements such as colors, typography, feedback messages, and visual hierarchies, all of which we will cover point-by-point later on.

Interfaces must also be kept consistent throughout a design. This means not re-inventing the wheel on each part of your project, and reinforcing the most important facets of your design at each turn. As they navigate through your designs, users should be made to feel at ease with them progressively, and their immersion shouldn’t be broken due to jarring stylistic choices.

4. Implement a Visual Hierarchy

A visual representation of a top-to-bottom hierarchy.

Image by Rashad Ashurov / shutterstock.com

The most important elements of an interface should be highlighted in order to make users focus on them, and design provides an almost endless array of methods through which to achieve this effect.

The simplest example of this technique that comes to mind would be to make an element bigger in order to turn it into a focal point (which is, incidentally, the same reason no one ignores Godzilla). Take Netflix for example – when opening up its main page you will be hit right away with a few highlighted recommendations which draw your attention by being almost impossible to ignore:

Netflix's homepage establishes a visual hierarchy on its homepage.

Netflix’s homepage establishes a clear visual hierarchy on its homepage.

Other, more novel ways through which you can implement a visual hierarchy would be by using white space to highlight crucial parts of your interface.

UserApp uses whitespace to highlight the "Try it for free" button.

UserApp uses whitespace to highlight the “Try it for free” button.

Alternatively, simply introducing an unexpected element into your design in a tasteful fashion can work wonders. As we’ve said before, consistency in an interface is crucial, to the point where it can border on repetition. When something breaks that visual pattern, your users will sit back and take notice.

5. Make Good Use of Typography

A sign that says "The adventure begins".

Image by tunejadez / shutterstock.com

Another elegant way to establish a visual hierarchy is through the use of typography. This isn’t as simple as picking a nice font (three out of four designers swear by Comic Sans – give it a try!) and using it throughout your design, though.

For starters, every font has a personality, so to speak, and your picks should be influenced by your audience.

This font, for example, screams "I don't want to be employed as a designer anymore!". Image by Brosko / shutterstock.com

This font, for example, screams “I don’t want to be employed as a designer anymore!”. (Image by Brosko / shutterstock.com)

Size, of course, also plays a key component when using fonts in design. Important information such as headers are highlighted, much like in this very article, and as you may have noticed, throughout the entire design of the Elegant Themes blog (be careful not to highlight too much information, though!).

You can also make use of reverse type to make text stand out, by which we mean making use of contrasting backgrounds to make text pop out. In the example below, contrasting text is used in a menu to highlight which page is being viewed currently (which has the added benefit of simplifying the navigational process for your users).

An example of reverse type in action, on the Smashing Magazine Jobs section.

An example of reverse type in action, on the Smashing Magazine Jobs section.

Some color combinations, such as blue on red, translate terribly to reverse type, but this pitfall should be easy to avoid for any designer worth his salt.

6. Use Color and Contrast Properly

A banner showing blue, black, and red lines.

Image by Vlera / shutterstock.com

Picking the right colors for any given design is a science in and of itself. If you’re reading this, chances are you’re already more than passingly familiar with the psychology of colors, and as such, we won’t devote any time to that area at this point.

Instead, we’re going to talk about using colors to their full effect to design a stunning interface. Colors can be used to convey visual hierarchy, establish a relationship between elements, and generally elevate your designs and hold the attention of your users.

When working on an interface, you’ll want to maintain some uniformity as to which colors you’ll be using to convey visual cues, and keep your color scheme to a relative minimum (more colors aint always a good thing).

That said, contrasting colors can be used to great effect in order to draw users attention, as we mentioned in rule number five when discussing reverse type.

A good example of contrasting colors on an interface, taken from the Jurassic World website.

A good example of contrasting colors on an interface, taken from the official Jurassic World Spanish website.

A good rule of thumb when choosing which colors to use in your interface is that darker colors tend to carry more visual weight, and these kinds of elements need to be balanced out with lighter colors.

7. Consider Feedback Messages

A hand placing a card into a feedback box.

Image by Biro Emoke / shutterstock.com

Interfaces are meant to be used – that is something that you should never lose sight of during the design process. And one of the biggest advantages of web projects is that you can actually design feedback messages that convey crucial information to your users when they perform an action.

Is something loading? Why not use a simple animation as a feedback message to inform your users that numbers are being crunched in the background? Did someone fill a field incorrectly? Design a message to inform them right away so they know exactly what went wrong.

One of the most popular feedback messages of the web.

One of the most popular feedback messages of the web.

In an ideal world, every interface would be intuitive and fast enough that these sort of things wouldn’t happen in the first place. But trust us – users will always find new and innovative ways to break your site. Providing instant feedback as to what’s going on in an intuitive manner is a great way to teach users how your interface is meant to be used.

8. Simplify Your Forms

A generic sign up form.

Image by Anastasia_B / shutterstock.com

Forms are one of the main methods through which users will interact with your web projects. It’s right up there with clicking and, occasionally, cursing their computers because something isn’t working properly.

The problem, however, is that most users hate forms with a burning passion, thanks to any number of reasons. Your task, therefore, is to integrate them into your interface as painlessly as possible to stop your users from cursing out their computers any more than necessary.

You might, for example, begin by asking yourself, “Is this form really necessary?”. In many cases, sign ups are forced upon users for no particular reason, so if you can do away with them and not have to deal with designing an additional interface, it’s a win-win scenario.

In case your project does need users to sign up, why not design the forms to be as simple as possible? Take Twitter, for example. They barely ask for any information, which means users may not have enough time to get angry for having to type in the same information for the umpteenth time.

Twitter, once again providing a nice example with a short and sweet sign up form.

Twitter, once again providing a nice example with a short and sweet sign up form.

9. Collaborate Your Way to Success

Multiple hands working together to align some gears.

Image by Bakhtiar Zein / shutterstock.com

Depending on the scope of your project, at some point you might find yourself working as part of a team that can shoulder some of the work alongside you, and in such a scenario it’s crucial to make sure that all members of the team share the same information in order to create a usable and appealing interface.

Thankfully, there are a lot of collaboration tools available to help a team stay on track, the best of which are well-covered here. And while we’re talking about developers, you might also want to check out 8 Tips for Collaborating with Developers (A Designer’s Guide).

10. Bring It All Together

Four puzzle pieces on a red background.

Image by Naghiyev / shutterstock.com

Designing an interface is no simple task. You need to take multiple disciplines into consideration as well as arm yourself with technical information regarding your audience, and foresee their needs in order to create a design which will meet and rise above their needs.

Moreover, you need to maintain a close relationship between user experience design and the interface design, since one goes in hand with the other.

However, most of the rules we’ve covered during this article have something in common which will make your life a lot easier: they’re not limited to web design projects. In fact, most of the advice we’ve shared so far should be very familiar to you if you’ve got some design experience (which we bet you do!) – all we’ve done is expand on their relationship with interfaces.

All in all, we’re confident that taking this advice into consideration, you’ll be well on your way to becoming a seasoned interface designer.

Conclusion

Interface design, while being an intimidating field, can also provide you with the perfect opportunity to up your game due to all of the areas of design it entails.

Think about it. Your interfaces need to be easy to use, simple to navigate, make use of the right colors for your audience, employ the right fonts, integrate useful feedback messages, and remain consistent overall. If you can juggle that many factors and still produce an appealing design, perhaps it’s time for you to teach us some rules of web design.

In fact, let’s do that. Do you have any personal rules when it comes to UI design? Share your wisdom with everyone in the comments section below!

Article thumbnail image by vectorfusionart / shutterstock.com

download divi

22 Comments

  1. Excellent information but I think these days responsiveness is also playing very important role when it comes to taking decisions on designing part.

    • I completely agree; we are design for responsiveness and a quicker learning curve.

  2. Nice! for rules of good ui desing!!

    Thanks.

  3. Great article, thanks tom..

  4. A Fabulous Post! Shareing…

  5. I believe UI Design helps us to engage our customer.according to me,Ui design can easily maximize the conversion.Thanks for the UI Design rule.I appreciate your hard work 🙂

  6. I love Elegant Themes! I love Divi! But, you’ve had several blogs in which you use – and don’t define – acronyms such as UI and UX. For the neophytes among us, could you please define the terms you’re using?

    Thank you.

    • Nathan B. Weller

      UI is user interface. UX is user experience.

  7. Content architecture is also at the heart of UI design, especially in the WordPress sites sphere (as it is a content management system after all).

    If you have a strong content fondation, which has also consistency, you will be surprise how easy it can be to build pages with such great tools as the Divi Theme/Builder.

    Thanks for this nice round up of best practices. I most definitely agree that these skills are the ones that keeps you ahead of the pack as a web dev/designer (not being elitist here – just realistic about the service value).

  8. This is another great post by Tom Ewer. It is a great post for learning proper web design. I think every steps of this post are very helpful for every web designers. Thanks you Tom Ewer for such type of informative and knowledgeable article.

  9. A good summary, thanks. I agree with Ben that content and brand strategy are key drivers for vitrines / content-driven sites. When it comes to transactional or enterprise apps, the focus will be more on task flow, efficiency (of task completion), clear visualization of data, and feedback mechanisms.

  10. A great post, always good to be reminded of what underpins good designs. When we work with clients, we always highlight the importance of knowing your audience in designing the UX.

    It is amazing how many businesses do not know their target markets and prospects well. Going through the process of creating customer personas, we find, informs both the design and content creation processes and, in the end, makes for a site that creates more conversions.

  11. Great article Tom, thanks!

    Though I have to admit my ‘chuckling’
    when I see the phrase “User Interface/UI”.

    Largely due to having come from a career spanning stints as a graphic designer, art director, creative director, then director of creative services.

    Although heavily involved in most-things-web now, I still am responsible for “UI” for print marketing media, to include ads, direct mail, brochures, etceteras.

    Designing for the media.
    Designing for the market.
    Designing for the user.

    IMHO, interfaces are no better defined than “any visual that is in dialogue (if you will), with the user.”

    My chuckle is that although the above rings true– you rarely hear someone, working on a print campaign, discussing the media at hand for same (postcard, advertisement, pamphlet/brochure) in terms of UI when well they could.

    🙂

    Again, thanks for the article.
    And the chuckle.

    — Michael

  12. Fantastic article with some really good tips in it. Thanks for sharing

  13. Fantastic article with some really good tips in it. Thanks for sharing

  14. You sum it up! This is a good post and a good list of rules to follow on every web design project. Thanks for sharing.

  15. #11. Become best friends with your copywriter. And YES, use a copywriter.

    If design and copy aren’t working together, the UI (and the UX) suffers. It’s all about the easiest path through your website/app/anything, so the storytelling must be seamless. Intuitive. Natural. And that only happens when everyone (designers, coders, copywriters) are collaborating.

    I’ve seen so many UX/UI articles where copywriting is never even mentioned, and it’s one of the most important aspects. Not THE most important, but it’s critical.

  16. This is a very good article for every designer. Thank you very much

  17. That’s a nice article!!

    I think easy navigation and color appearance are the most important aspects for better UX.

    • Tom Ewer

      Thanks Raxix! Easy navigation and color appearance are certainly important, but we believe everything on the list above is important 🙂

  18. This is a good post

  19. Excellent Post
    You mentioned very good points for an attractive UI design
    Thanks for the Post.
    Regards,

Join 341,592 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today

Pin It on Pinterest

Share This