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.

The type of hosting environment you select will have a strong influence on the success of your website. It’s important for you to find a secure, scalable web hosting service that you have 100% trust in to deliver high-performance at all times.

To simplify the options available to you, this article will break down the various types of web hosting services, and explore the non-negotiables we believe you should be considering in your criteria when making your decision. 

The Fundamentals of Enterprise-Grade Hosting 

Some of the most important things to look for with your hosting environment include: 

Security – Cyber security is obviously an essential priority, and this should be top of your list of criteria in the current climate.

Performance – Your hosting environment should be set up in a way that makes your site capable of handling large surges of traffic.

Scalability – As your business grows, it’s likely that your site’s audience will grow. You need a hosting provider with the capacity to scale your services seamlessly to meet your needs, both now and in future. 

Resilience – It’s important to ensure your hosting infrastructure is robust, and that it can gauruntee you certain performance levels and up-time.

Support – If anything does go wrong, you need to be assured that you have a quick, efficient support service in place to get your site back up and running as soon as possible.

Sustainability – With sustainability a growing priority on the corporate agenda, the carbon footprint of your data centre may be another important factor in your decision.

Option 1 – Shared Hosting Services 

Shared hosting services can provide you with a basic secure server for your website. However, as the name suggests, these servers will be shared with a large number of other businesses. You won’t have any dedicated server of your own with shared hosting. 

This approach does have some advantages, particularly in the area of cost. These shared hosting environments can cost as little as £1,000 per year.  However, the down-sides to this often outweigh that cost benefit. 

In many cases, the low cost of shared hosting services can often be reflected in the performance levels. This is because, with such a high volume of websites hosted on the servers, your performance has no protection if other sites are experiencing high volumes of traffic. 

It’s also likely that you’ll only have access to limited support services when any issues arise. Many of the shared hosting options will have a ticketing system for support, where you’ll be at the mercy of the number of requests ahead of you in the queue. This could result in your website being ‘down’ during times where it’s business-critical.

Option 2 – Private Servers with Shared Hosting Providers 

Most shared hosting providers will offer the option of having your own private server for an extra cost. This is often referred to as a VPS, which stands for virtual private server. 

Rather than sharing a server with thousands of other businesses, you’ll only be sharing with a few others. While this is significantly better than the regular shared hosting options, you can still end up facing similar problems with performance and scalability.

This is another cost-effective approach, though, with some improvements over standard shared hosting. If you rely on an agency to set this up for you, they’ll likely put their smaller clients on a shared VPS and give their larger clients their own dedicated servers to minimise any potential problems.

Option 3 – Enterprise-Grade Private Web Hosting

Often the most reliable and trusted approach to take is to have your own dedicated server, which comes with a wide range of additional benefits. 

With this option, your website is placed on its own private server in the cloud, managed by a dedicated team of specialists who offer personalised, hands-on support and ongoing optimisation.

Security

Enterprise-grade security should be a core part of the hosting service you choose, regardless of whether it’s private or shared. However, you’ll be guaranteed far greater security, with drastically reduced risk, when you work with a private hosting service.

For instance, a hosting provider should offer robust protection for your site, including: 

• Configured firewall options, IP access lists, and anti-phishing attack technologies 
• Full responsibility for rapidly patching OSes and libraries 
• Long-term-supported Linux distributions for maximum security. 

Of course, compliance and certifications are another crucial aspect of cyber security these days. While some shared hosting providers may have the basic levels of compliance in place, most private hosting services will boast: 

• Compliance with ISO 27001/PCI-DSS/TIA-942 
• A 100% pass-rate for any data centre audits 
• 24/7 data centre staffing with experienced engineers and specialist security teams 
• Document review services for your external audits 
• Bespoke consultancy available if you have any major certification requirements. 

Performance 

When taking this approach, you’ll receive your own bespoke service and will be provided with a hosting environment tailored to your specific requirements. 

This will optimise everything included in your hosting package, from your preferred caching, loading speeds, performance requirements, up-time, and more.

You’ll also be able to set up a content delivery network (CDN) to make your website faster and more readily available to all visitors around the world. 

Scalability 

Private hosting gives you the capacity and flexibility to scale seamlessly anytime your website’s traffic increases, or if you have peak times for traffic.

This is an intelligent way to future-proof your investment, with the confidence that your website’s performance will be consistently excellent as the size of your audience increases and your site expands. This also applies to situations in which you need to scale unexpectedly due to short-term increases in demand, ensuring business continuity is always maintained on your site. 

Resilience 

Private hosting providers have guarantees for their resilience, and for your site’s up-time, covering all possible bases. This even counts for unusual scenarios like floods or fires.

It’s wise to look for a provider who offers back-up and disaster recovery services for the maximum resilience. 

Back-Ups: Managed back-up services provide you with a tailored regiment, alongside rigorous testing, for guaranteed restorability. 

Multi-level back-ups are taken for you, both locally and remotely, to minimise risk. You’ll also be able to choose from a range of replication technology options for your load-balancing and various fail-over scenarios. 

Disaster Recovery: Private hosting providers will also use disaster recovery measures, such as geographically-distributed platforms and back-up data centres, providing you with full assurance that your performance and up-time are always maintained.

Your primary hosting platform will be replicated to a disaster-recovery platform, which means that if the primary data centre is ever out of action for a prolonged period of time you can fail-over to the back-up systems. 

While the more basic hosting services can take days to recover in similar situations, which could result in losses of business and even reputational damage, disaster recovery can often be done in a matter of minutes with a private hosting environment.

Support and Optimisation

Trust and confidence in your provider’s ability to deliver on your requirements are a vital part of your hosting service. 

It’s highly beneficial to take an approach that gives you – or your agency partner – a close working relationship with your hosting provider. Availability and accountability are much greater with a private hosting service than with a shared approach. 

A close working relationship provides other advantages as well. For instance, anytime you want to make upgrades to your hosting environment, they can analyse your traffic and identify the best time and date to do that with minimal disruption. 

This is all part of collaborating with your agency and hosting provider, so they understand your unique business and tailor your hosting services. This is all done based on the conventions of your target audience and your specific requirements to deliver the best possible service. 

In terms of support, private hosting providers will have powerful automation tools to proactively, continuously monitor your environment. That allows them to resolve the majority of issues before they’re able to have an impact on your site. 

This can also involve 24/7 custom alerting systems, as well as a fully customisable monitoring portal, and multi-channel systems to alert engineers rapidly in the event of any problems. 

In terms of your overall service with an enterprise-grade private hosting provider, you should also expect to gain: 

• A fully-managed service provided by a team with decades of experience 
• Round-the-clock, hands-on assistance, 365 days per year 
• Deep technical understanding and expertise 
• Proactive support from dedicated engineering teams and account managers 
• High-level consultancy, including advice on new projects and technologies. 

Sustainability 

If your business has sustainability as a priority or core cultural value, then this is another reason to opt for a private hosting service. While it’s not impossible to find shared hosting services with carbon-neutral data centres, it’s much less common. 

Sustainability is also a key focus for us here at SoBold as an agency. As a result, we’ve worked hard to ensure we have an environmentally-conscious, carbon-neutral service offering.

The Verdict?

Having a fully dedicated, bespoke private server is usually the preferred choice of web hosting services. This is due to the unmatched levels of security, scalability, and performance that come with private hosting providers. 

Of course, it’s important to note that this does also come with a higher cost than other options. However, the benefits and trust gained through their strengths in these key areas ensure strong ROI. 

Not only do their flexibility and optimisation provide you with a high-performance website set up for success, but enterprise-grade security and resilience will also minimise your risk and save you significant costs in the long-term. 

The moment Marti joined us at SoBold, we were excited and eager to see how she would translate her enthusiasm and energy towards development towards real life projects. We were not let down and she hit the ground running.

2 years later, largely hampered by COVID, we now are getting the absolute best out of Marti. She is incredibly reliable, diligent and talented and she is involved in all of our biggest projects.

Marti has never been one to code for the sake of coding, and she always makes sure she understands the bigger picture before diving into a project. 

⅓ of the Italian SoBold Office crew, we are very fortunate to have Marti and we truly can’t wait to watch her skillset improve and see her continue to work on the biggest and best projects!

We caught up with Marti to find out more about what she gets up to in her day to day life.

At what point in your life did you decide to become a developer?

Having studied Foreign Languages and Literatures, since uni I had a dream to become a successful translator. I came to London to fulfil this dream but I wasn’t sure which field to specialise in yet. So I started working at a restaurant, and in my spare time, I would translate articles for online media sites and magazines, and also produce subtitles for tv series.

Later on, I started a course in software localisation, and this opened up the dev world to me as I had to put my hands on the software source code. When it was time to search for a job, reality had a massive hit: competition was high, work was difficult to find, it was clear I had to invest more time and specialise furthermore.

I felt stuck and didn’t really know what to do with my life. So I went backpacking around the world for a few months, and I decided to dive more into that dev world that I found so interesting. Time wasn’t really a problem while travelling, so I read a lot about web development and took a lot of online courses. I devoured so many online resources, I just couldn’t believe they were all a click away! Since my first “Hello World” project, I’ve found the process of coding and building a website from scratch a beautiful mix of creative problem solving that never disappoints. Long story short, that’s when I knew I wanted to become a developer.

Describe your typical day

I wake up at 6:30am, I feed Coco and Lucy (my cats), I put some tunes on while having breakfast, quick shower. Then it’s checking the weather time: if it looks cloudy and rainy I’ll take the tube, otherwise, I’ll most probably board my Brompton and off we go to the office! Ideally, I like to conclude the evening by doing some form of exercise, usually rollerskating or a walk/run.

What’s your favourite project to date

I really enjoyed working on the new SoBold website, it’s been a huge team effort and the result it’s simply amazing!

What is the best advice you have ever heard?

I once read this quote: “If we all threw our problems in a pile, we’d grab ours back.”

I think it’s a beautiful sentence, it makes me appreciate life every day and makes me very grateful for all I have.

If you had to change careers what would you do instead?

Not sure what but surely something related to sport.

What was your most recent challenge and how did you overcome It?

When you’re a developer, every day there’s a new challenge. You just have to learn how to tackle them. In general, I think talking with a colleague helps a lot. Also “rubber ducking” can be a useful method for debugging code. In both cases, they’re powerful methods that consist in taking a break and articulating the problem in plain language.

What’s your favourite thing to do outside of work?

I’m a big ramp skate fanatic. https://www.instagram.com/martymcroll/

What 3 items would you bring to a desert island?

🇨🇭 🔪  🎸 and  🛌🏽

SoBold are delighted to announce that they have been awarded the world’s most recognised Quality Management System Standard, ISO 9001.

SoBold have worked incredibly hard over the past few years to set and follow processes and procedures as a company that ensure they are providing quality work to their clients. 

As the number of enterprise clients grows, SoBold’s ISO 9001 certification will be able to give their clients the assurances they need around SoBold’s consistency and quality services in the work they produce. 

ISO 9001 is one of the most commonly used management system across the world and SoBold believes this is going to open up considerably more opportunities with winning tenders and contracts to ensure SoBold continues to be one of the leading WordPress Website Design and Development Agencies in the UK.

As SoBold continue to scale as a business, the need for efficiency has never been greater. It is absolutely essential that all internal communication works to the same processes and agenda and the ISO 9001 certification allows this to be possible.

In order to achieve our ISO 9001 certification, SoBold worked closely with QMS International, who provide expert consultancy to businesses looking to achieve their certification. QMS have a team of over 50 consultants and auditors and they ensure the experience they provide is streamlined and uncomplicated. 

SoBold Technical Director, Sam Phillips said:

We are delighted to have been issued with our ISO 9001 certification, recognising our commitment to quality. Over the past 12 months we’ve spent a great deal of time improving and documenting our internal processes to help streamline delivery of projects and ensure we continue to deliver on the high standards we set for ourselves. Achieving this certification is a reflection of all this work.

When a visitor lands on your website, the visual design is likely to be the first thing they’ll notice. It’s also usually the thing they’ll remember most. 

75% of consumers reportedly judge a business’s credibility based on its website design. This first impression can make or break a prospective client’s interest in working with you. 

The ultimate goal of your website is to attract and retain as many prospects as possible, and then convert them into clients. But most websites are designed in a way that leaves those goals unfulfilled, failing to reach their full potential. 

With that in mind, your visual identity should be treated as a top priority within the overall design of your website. Believe it or not, this can have a significant influence on the growth and success of your business.

When working on a web design project, you should always go through a careful visual exploration phase to find the right visual identity for your website. 

Whether you’re going through a full company rebrand or just refreshing the style of your website, it’s important to ensure your design is tailored to your specific target audience. This is how you begin to drive business growth through your website. 

Without a visual exploration process, your website may not convey your company’s brand identity and values as clearly as you’d like it to. 

In this article, we’ll outline the steps taken so you’ll know what to expect when working on a website design project. 

What Does the Process Involve?

The purpose of this process is to define the best visual direction to take with your site. 

This is a crucial aspect of your overall design, with aesthetic elements being brought together to create a look and feel that engages your site’s visitors and retains their attention. To achieve that, your visual design needs to establish a connection between your audience and your brand immediately. It should also demonstrate why your visitors should work with you. 

Exploring your visual identity will cover a wide range of elements, including: 

• Your brand 
• Your company values
• Your colour scheme 
• Your typography
• Imagery and other visual content
• Structuring of pages
• And other visual components that are used to tell your brand’s story across your website’s design. 

What are Mood Boards and How Can You Use them? 

The main tool used to help determine the right visual identity is a set of mood boards. 

These are a visual compilation of all the various elements that make up your website’s visual design. Each mood board is essentially just a single-page collage of design styles based on previous discussions and the findings from the research and planning phase of the process.

The aim of these is to capture your brand’s visual style and tone. This will give the stakeholders, and your designers, a shared understanding of the design you’re working towards. 

Mood-boarding helps you visualise the work on your website’s design before it begins and agree on a design aesthetic that accurately reflects your brand identity and values. 

Think of this like a problem-solving exercise. Your design agency will take a research and data-driven approach to conveying your brand identity, while also catering to your target audience and accommodating the latest industry trends.

Collaboration and Iteration

Like most processes within web design and development, this visual exploration process should be collaborative and iterative. 

You’ll typically be presented with a mood board and a set of ideas by your agency partner, then given the chance to provide feedback across several rounds of revisions. 

Rounds and revisions are always important in any creative process. It’s usually necessary for your agency to develop and present a minimum of three mood boards before the optimum aesthetic is agreed upon. This is a crucial step towards the ultimate goal of creating a new website that accurately reflects your brand and has a positive impact on your target audience. 

Connecting with Your Clients Through Design

Your website’s visual identity is what makes your brand resonate with your target audience. Your design needs to clearly convey the values of your business, the quality of your products and services, and the reason why your visitors would benefit from working with you. 

Working through this visual exploration phase is an important step towards designing a website that will attract more visitors and increase your conversions. 

Once this visual exploration is complete, the next phase of your web design process will be to craft your website’s user experience (UX).