As part of our web design series, we recently explained the process we follow when designing the UX of a website. If you’ve not read that already, it will be useful to go and have a look first before reading this article.

A study by Forrester Research has found that a well-designed UI has the potential to increase your website’s conversion rates by up to a 200% while UX design could raise conversion rates by a staggering 400%. 

Whether you’re working with a web design and development agency or an independent designer, this process is equally important. Nailing the UI design process is a crucial step towards producing a website that will maximise engagement with your target audience and help you achieve your business goals. 

So, let’s take a detailed look at how to run a successful UI design process.

User Interface (UI) Design at a Glance

The UI design process is the creation of the visual design elements of your website. Think about UI as the way in which you convey your brand’s visual identity and bring your UX to life. The UI is there to facilitate the UX.

How Does the UI Design Process Work? 

As mentioned in our related article, UI design is typically the fourth phase of the end-to-end process of web design.

Earlier in the process, we recommend conducting a visual exploration exercise, using mood boards to gain a clear understanding of how your brand will be conveyed and how your website will look and feel.

That visual exploration phase of the project is a pre-cursor to your UI design, as it creates the visual identity of the website, including use of colour, font, blank space, buttons, and more. Some agencies do this as part of the UI phase, but here at SoBold we like to keep it as its own stand-alone phase. You can learn all about the visual exploration phase and how it works here. 

After you’ve been through the UX design process, you’ll have approved a set of wireframes, which give you a blueprint of your website’s structure and flow before anything is built properly.

Once you’ve approved those wireframes, then the visual design created with the mood boards will be applied to bring them to life. This is essentially how you create your UI.

Your agency will typically begin with the design of your website’s homepage. Like each phase previously, you can expect this UI design process to be collaborative. Be prepared to have all the stakeholders available to provide feedback to your agency, and work with them to perfect the design when it’s combined with the wireframes.

Once the homepage is approved, your design will then be applied across all the pages of your site. Again, this is an iterative, collaborative process based on feedback and revisions.

Responsive Design Testing 

On completion of the desktop designs, your agency partner will work on designing the site across multiple break-points. To ensure your site is responsive across all the most popular devices, the following break-points should be tested as a minimum:

  • 1,920px – This covers most external computer monitor sizes
  • 1,366px – This covers most laptop screen sizes
  • 992px – This covers most Notebook and iPad devices
  • 768px – This covers most other tablet devices
  • 375px – This covers most smartphones.

You’ll then reach the exciting part, where your website is fully designed for you to view, test, and play around with. Once you’re happy with the design across the different break-points, your agency partner will be ready to prepare the design for a development handover. 

What Does Effective UI Design Involve? 

Good UI design is something that should feel seamless and almost invisible to your visitors when they land on your website. The aesthetics and visual style should be simple and engaging, while not distracting from the UX. 

These days, you only have a matter of seconds to make a positive impression that can retain your visitors’ attention, so it’s crucial you don’t over-complicate things. But what differentiates good UI from bad UI in practical terms? 

Like with UX design, there are some best practices you can follow to ensure your website has an effective, attractive UI. 

Follow these guidelines to create a UI that delivers the desired experience for your visitors and supports your website’s strategic objectives: 

  • Keep your design simple and your content succinct
  • Prioritise the preferences and best interests of your target audience
  • Make your design elements as clear as possible 
  • Maintain consistency
  • Ensure your brand, and your company’s identity, have been accurately represented through the design
  • Use power of visual imagery to capture and retain your visitors’ attention 
  • Make your call-to-action as strong and compelling as possible
  • Don’t create anything that interferes with the goals of your UX.

Check out our related article for seven helpful tips to ensure your website is designed with great usability here for additional guidance. 

The Importance of Accessibility 

Accessibility is the practice of making technology as easy to use as possible, and fully accessible to everyone. While web accessibility is largely intended to help people with disabilities gain better usage of technology, it’s also much broader than that. 

There are people who have difficulty using certain types of, or aspects of, technology who don’t have a disability. For instance, someone with deteriorating eyesight may find it difficult to read small text on a smartphone screen.

It’s also important to ensure your website is as easy to use as possible for the average person as well, because you should always strive to deliver the best possible UX for all your visitors. Accessibility is a key driver of this.

The Web Content Accessibility Guidelines (WCAG), which are used to define what constitutes good accessibility, lists four key principles of web accessibility that should be followed by all websites. 

This means your website must be:

  1. Perceivable
  2. Operable
  3. Understandable
  4. Robust.

Web accessibility is an important topic, so we’ll talk more about that in a separate article. For now, it’s worth noting that any web design and development agency you work with should consider accessibility a top priority when designing the UI of your website. If they don’t, you should challenge them and ask why not.

Here at SoBold, this is built-in to all our design processes. We believe that all technology should be inclusive and equally available to everyone, regardless of their physical ability, location, personal background, or any other factors. 

Some design best practices that we’d recommend you always follow to ensure your website is fully accessible, from a UI design perspective, include: 

  • Use contrast and blank space to make your content easy to perceive
  • Use bold colours 
  • Use font sizes no smaller than 14px for desktop and 13px for mobile across the whole site (although, this does depend on the font you use)
  • Use headings and structure correctly to organise content clearly on each page
  • Make all your content easy to both see and hear
  • Write all your copy in plain, simple language
  • Avoid any flashing or blinking imagery or video content 
  • Write simple, clear, and helpful error messages.

Preparing Your Website for Development 

As you can see, UI design is mainly a case of applying the visual design that was created with the mood boards to your UX wireframes with the agreed flow. Good UI is no more than a clean, simple design that accurately represents your brand identity. While it sounds straightforward, it’s important to remember this is just one phase in the holistic, end-to-end process of web design. 

To conclude the design process after the UI is complete, your agency will prepare your site’s designs for development. To learn how this process works, understand what to expect, and ensure your own web development process runs smoothly, read our next article in the series here.

Would you like these insights straight to your mailbox?

    Profile picture of Will Newland - Managing Director of SoBold.
    By Will Newland
    Managing Director
    UI Design
    15 May, 2023

    Keep reading

    Announcement

    SoBold and Kapow Primary shortlisted for the B2B Website of the Year at the UK Digital Growth Awards
    Development

    Regulation of digital markets: Comparing UK and EU approaches