Summary

In this article, we’ll outline the end-to-end steps of what takes place in a thorough user experience (UX) and user interface (UI) web design process and discuss what modern web design requires to be successful.

—

You may have read our in-depth guide to creating a brief for a web design and development project. A brief can be used to capture all your ideas and requirements before discussing your project with any web design and development agencies. 

Once you’ve completed your brief, and evaluated your options for agency partners, you’ll be ready to launch into your website project. 

An end-to-end website project is typically organised into phases, which will usually be structured as follows: 

1. Design
2. Development
3. Quality Assurance Testing
4. Migration and Launch.

We’ve provided a detailed breakdown of these phases in a recent series of articles. This series is intended to give you a clear understanding of the full end-to-end process involved when working with an agency to design and develop a website. This will help you remove any apprehension heading into this kind of project and set you up for success.

The Current State of Web Design

“Design is not just what it looks like and feels like. Design is how it works.”

Steve Jobs, Co-Founder and former CEO of Apple.

While web design does focus on the visual aspects of the site, there’s a lot more to it than just the aesthetic elements like colour schemes and typography. 

Web design is a complex blend of branding, user experience (UX) design, user interface (UI) design, graphic design, content creation, layout and structure, accessibility, and much more.

The design of your website needs to be visually attractive but, more importantly, it also needs to be simple and easy-to-use. Your website needs to find the perfect balance between supporting your strategic objectives and serving your clients with a seamless experience. Of course, that’s much easier said than done, which is why it’s so important to find an experienced partner you can trust to guide you through the process. 

Outlining the Web Design Process 

Phase 1 – Research and Planning

The phase that underpins  EVERYTHING!

A good agency will have absorbed everything in your project brief. They should also have worked hard to understand your perspective and your requirements from your website, before you’ve even agreed to work together. 

Once you’re preparing to launch the project, the research and planning phase will then go beyond that initial information gathering exercise. 

The objective of this phase is to define the full scope of the website, including its design, its features and functionality, its content, and everything else involved. 

Your site will be discussed in extensive detail, and then research will be conducted into some key areas that will inform your design and development, such as:

• Strategy
• Website Data 
• Target Audience
• Industry Landscape
• Competitors.

Whether you’re making small updates to an existing design or completely rebranding your business, it’s equally important to use this research to inform every decision you make. That’s because every element of your site’s design must be made to support your business goals and serve your target audience with a great user experience (UX). 

This research and planning phase is essential in enabling you and your agency partner to do that. 

Phase 2 – Visual Exploration

This exploratory phase involves defining the most appropriate and effective visual direction to take with your site. 

The main tool used to help determine the right visual identity for your website is a set of mood boards. These are a visual compilation of different options for colour, typography, structure, images, and other visual components that are used to tell your brand’s story through your website’s design. 

A good agency partner will usually present around three mood boards to help shape the direction, then collaborate with you to narrow it down to one final version. 

Visual exploration, like most processes within web design and development, will be collaborative and iterative. You’ll be presented with ideas by your agency partner, then given the chance to provide feedback across several rounds of revisions. 

Phase 3 – User Experience (UX) Design

The UX design process is the phase in which you work with your agency’s UX specialist to create a blueprint of the website functionality. 

This involves creating wireframes (either low-fidelity or high fidelity) that help you visualise the design and outline your website visitors’ flow through the pages into your main calls-to-action. This is the way the website’s design works strategically to drive outcomes that align with your business goals.

This phase takes place before working on the site’s visual design to ensure the two separate aspects complement each other. 

Phase 4 – User Interface (UI) Design

From there, your user interface (UI) will be designed. The styles, fonts, and look and feel of the site from the mood boards will be applied to the wireframes. 

Your agency will likely present you with a design for your homepage before moving on to the rest of the site. This will typically be done on a desktop screen size, but it can be done on mobile if you want to take a mobile-first approach. Once this is complete, it will then be designed across the relevant breakpoints.

After completing this process, your agency partner will be ready to enter into developing your website.

Making Complex Processes Simple

As technology continues to become more advanced, more and more of our daily lives now take place in a digital-first context. This means:

• Your target audience now has a shorter attention span, and less patience when browsing websites and services online
• Your target audience also has more choice of options than ever before when choosing who to buy from. 

In order to succeed, your website’s design requires careful planning, research, and a strategic approach if it hopes to meet the demands of the modern client.

Working with a specialist design and development agency is a proven approach to ensuring you gain a website that meets your requirements and delivers on the expectations of your target audience. 

Completing a process like the one outlined in this article will enable you to design a website that can become your clients’ go-to online source when they have a need. 

As mentioned earlier, we’ve provided a step-by-step guide to each of these phases to make the process even easier for you. 

To learn how to easily navigate the research and planning phase of a web design and development project, read our next article here.

Would you like these insights straight to your mailbox?

Your emailSubmit

I consent to my submitted data being processed and stored by SoBold in compliance with Privacy Policy

We recently had a friendly debate in our office of which we thought was a better experience but putting personal bias aside there is no right or wrong answer. It all depends on the type of service you are providing.

Content is what defines your website and the reason why your audience will return again and again. Choosing the right browsing experience based on your unique content will enrich the experience rather than leave your audience feeling confused and frustrated.

What is infinite scrolling?

I think it’s fair to say at some point we have all fallen down the rabbit hole of endless scrolling. In short infinite scrolling is a technique used to fetch a continuous source of information as a user reaches the bottom of a page. Pinterest and Unsplash are great examples of the use of dynamic content.

What is pagination?

Pagination is the sequence of numbers used up to divide pages of content that a user can control, you’ll see this commonly used on large e-commerce sites or information websites that update content regularly. 

The pros and cons of:

Infinite scrolling 

Pros:

• Continually scrolling as we know is addictive, a pro…debatable but it does have a better usability experience than clicking

• There is a better chance of user engagement

• Users have the opportunity to discover new content with little to no thinking

• Thanks to social media continuously scrolling on mobile has become the prefered way to interact with content

Cons:

• There is no way for the user to reference or bookmark content of interest
• If done incorrectly it can have an impact on site performance as the page needs to load infinite content as the user scrolls
• Your user will never reach the footer which may house important information for them

Pagination

Pros:

• Your pages will have a good conversion rate because as people are searching it will show in a specific list of items
• It will give your users a scene of control and clarify how long it will take them to find what they are looking for.
• A returning user will be able to identify quickly where the content is

Cons:

• It obstructs the user experience which will lead to lower engagement rates
• If not implemented properly can cause confusion
• So which one is better for you? The bottom line is no ideal or stronger one, it all comes down to your UX and content requirements. The best thing to do is to analyse web and user goals and make decisions based on them. 

Would you like these insights straight to your mailbox?

Your emailSubmit

I consent to my submitted data being processed and stored by SoBold in compliance with Privacy Policy

Technical Director, Sam Phillips and Managing Director, Will Newland were interviewed by Brent Weaver at Cloudways.

SoBold has been working with Cloudways since 2019 to help host development environments for all of their clients.

You can learn more about Cloudways, Managed Cloud Hosting services by visiting their website here.

See what they had to say in the video below.

Would you like these insights straight to your mailbox?

Your emailSubmit

I consent to my submitted data being processed and stored by SoBold in compliance with Privacy Policy

Deciding between two content management systems (CMS) is no easy task. Your CMS is an important long-term investment, so you must ensure you choose a platform that will meet all your requirements, both now and in future.

If you’re currently weighing up the pros and cons between Contentful and WordPress, there are some key differences between the two platforms that you should be aware of. 

To make this evaluation process easier for you, and help you pick the best option for your business, this article provides a direct, objective comparison between these platforms.

Platform Overviews

Different types of software will provide you with different capabilities and limitations. The Contentful and WordPress platforms can both deliver quality enterprise-grade websites, but they each take a slightly different approach.

Contentful 

Contentful is a cloud-based “headless” CMS. Being headless means that the back-end of the platform you use to publish, edit, and manage content is not directly connected to the front-end of your live website.

Your content is managed and stored in one central hub, hosted within the cloud, and this is the back-end of your platform (also known as the “body”). APIs are then used to take your content from the back-end and present it in website form. 

A headless CMS gives you a high level of flexibility and customisation with your website’s front-end. These same APIs allow you to publish your content in different formats in different channels as well, facilitating a multi-channel approach to marketing. 

This makes Contentful a flexible platform that can meet a range of different content requirements, but it is admittedly more complicated than the traditional approach to website management.

WordPress 

WordPress is a traditional CMS that provides a more straightforward approach to managing your website. You can use WordPress to build sophisticated, dynamic sites with a simple, user-friendly set of tools. 

While most  businesses use WordPress in the traditional way, the platform can be leveraged with a headless approach as well, allowing it to match the scalability and multi-channel capabilities of solutions like Contentful. 

WordPress gives you the flexibility to choose how you’d like to develop your website, based on the complexity and size of the project, and the objectives you’re trying to achieve. In the likely case that you’re working with a web design and development agency, that can all be handled for you by your partner. 

The Scalability of Each Platform 

Your business will grow and evolve over time, so you need a platform that can quickly and easily scale up with new features and functionality. You also need to ensure the platform can handle high volumes of traffic and maintain performance as your audience grows. That’s why scalability is one of the most important aspects to consider when choosing a CMS. 

How Scalable is Contentful? 

One of the main benefits of a headless CMS is that the infrastructure allows you to grow your digital presence rapidly, on a large scale. 

The back-end offers easy customisation, and the cloud-based nature of the platform allows you to scale up dynamically whenever you need to. 

Its multi-channel capabilities also inherently promote the idea of developing your content in different formats at a larger scale, while always maintaining consistency. This enables you to produce individual pieces of content once and easily repurpose them across different channels a number of times, saving valuable time and resources. 

This can all be done without any concerns over technical issues like server capacity or network bandwidth, because the platform is delivered in a software-as-a-service (SaaS) model. 

How Scalable is WordPress? 

WordPress is a highly scalable platform in its own right, currently used to power the websites of some of the largest and most successful businesses in the world.

The platform is agile and scalable enough to grow seamlessly alongside your business and adapt to your changing requirements, whichever way you decide to use it.

As mentioned earlier, taking the headless approach with WordPress can provide the same enhanced scalability and pervasive multi-channel capabilities as Contentful, if you require those aspects from your CMS. This can also deliver benefits with speed of development and time-to-market, saving you valuable costs with your agency partner. 

Expanding your WordPress site with the more traditional approach is made even easier than most other CMSs as well, thanks to the platform’s unique block-based editor. This is a method of building websites that provides great benefits in the areas of flexibility, efficiency, and ease-of-use. 

WordPress also allows you to continually enhance your site with new features and functionality through bespoke development, with almost no limitations on what can be achieved. 

Ease-of-Use

Like all technology, some tools are more approachable for the majority of users, while others will require some existing skills. This makes ease-of-use a key part of your criteria when selecting a platform to manage your website. You’ll be using it almost every day, after all, so you need to be comfortable with it.

How Easy is Contentful to Use?

While Contentful being solely a headless CMS does have its advantages, such as scalability and customisation, this approach also creates some challenges for the average user.

For example, adding content to Contentful can be difficult because it doesn’t provide you with a way to preview how your content will look in the front-end of the website. 

Contentful doesn’t have a simple editing interface on the front-end, so there’s a much higher risk of error with this platform than with most others. 

Granted, Contentful’s user interface (UI) is well structured and intuitive, but it’s also known for being more difficult for non-technical users than platforms like WordPress.

Handling the API rules is also complicated without the help of an experienced web development team. If you’re working with an agency, you may end up calling on them regularly for tasks that you could likely handle yourself in other CMSs.

How Easy is WordPress to Use?

Conversely, WordPress is renowned for its simplicity and ease-of-use. Even if you don’t have any existing knowledge of coding or content management, WordPress is very approachable and easy to learn. 

When you first get started with WordPress, virtually everything you need to set up and manage your website will be readily available within the platform.

Publishing, managing, and editing in WordPress are all quick and convenient, thanks to an intuitive back-end that provides you with everything you need to build out a content-rich website.

Thanks to this ease-of-use, most of the people within your team will be able to use WordPress, allowing you to share the responsibility of the daily management and running of your site. 

It is worth noting that taking a headless approach with WordPress does also require experienced web developers to be able to manage the platform though.

Security 

Security should always be a top priority with any software you introduce into your business. If you’re considering a CMS that seems like it could be unable to provide the enterprise-grade security you need, it’s wise to continue looking for more reliable alternatives. 

How Secure is Contentful?

As a cloud-based SaaS product, Contentful comes with useful in-built security features, including HTTPS data encryption, role-based access controls, and multi-factor authentication.

Headless CMSs also take a different approach to security compared to traditional platforms like WordPress. Its use of APIs allows you to control access to your content through a token-based authentication system, and it uses industry-standard encryption and secure storage measures to protect your data. With that in mind, Contentful should be seen as a very secure and robust platform. 

How Secure is WordPress?

WordPress is a secure, platform. To find proof of this, you only need to look as far as the wealth of global enterprise businesses that have chosen WordPress as their CMS.

As with any software, though, there will always be vulnerabilities or potential risks that can arise in certain scenarios. For example, WordPress regularly releases updates to its software, and failing to test your platform upon these releases could lead to bugs or security issues creeping in. Similarly, certain plugins can create security problems if taken from the wrong sources or left untested for too long.

Finding an experienced agency partner you can depend on is usually a wise move to reinforce the security of your website. That partner will also be able to support you with important related services like hosting, maintenance, and ongoing optimisation. 

Discover how the WordPress platform can deliver enterprise-grade security in our related article here. 

Cost and TCO 

Your CMS also needs to deliver good value for money and a low total cost of ownership (TCO).

To understand your long-term TCO, you’ll need to take into account things like license fees, hosting costs, maintenance, bespoke development with your agency, and more.

Contentful’s Initial Costs and Ongoing Investment 

Contentful has basic and premium pricing plans for businesses, although you can use the platform for free to see if it’s a good fit first. 

The basic plan starts at around £250 per month and supports up to twenty users, so it’s only suitable for small businesses. The premium plan is priced based on the resources you’ll use, such as number of users, API requests, and storage. You can usually expect this to start at around £450 per month.

However, as mentioned earlier, most businesses will require a lot of support from an agency to get the platform set up in both the back-end and front-end. You’ll likely need ongoing work from an agency to ensure you can use the platform to its full potential as well, which won’t come cheap. 

All these things tend to add up to a high TCO over time, making Contentful less cost-efficient than some of the other CMSs around today.

WordPress’s Low TCO

WordPress is one of those solutions that is far more cost-efficient than Contentful, with a much more reasonable TCO. 

Its software is open-source and the platform free to use. This means your initial costs are limited to just hosting, agency fees, and any other support you may need once your site is live. Plugins and extensions of the platform are licensed and paid for separately.

As WordPress is such an intuitive and easy-to-use platform, it’s also affordable to run it and manage it, even if you do use an agency to handle that for you. This includes any bespoke development or customisation requirements you may have, which experienced agencies can often deliver with a very fast time-to-market as well.

Which Platform is Right for You?

Both these CMSs will enable you to build sophisticated, high-performance websites that will support your business goals and allow you to gain an edge over your competition.

As you’ve seen throughout this comparison article, they each have their strengths and weaknesses, as do all the other CMSs available today. That means you need to base your decision on which one is the best fit for your specific business.

For example, a headless CMS, whether that’s Contentful or WordPress, may be too complex in many cases. But if you’re looking to execute a holistic multi-channel marketing strategy, it might be the right choice for you. 

In the early stages of your evaluation process, it’s crucial to carefully consider your own unique requirements, objectives, budget, resources, agency relationships, and various other factors.  

In order to make the right decision between two CMSs, you need to understand which one will be more suitable to deliver on your needs and expectations, both in the immediate term and for years to come. 

Still not convinced? Discover five key benefits of WordPress’s industry-leading scalability in our related article here. 

Would you like these insights straight to your mailbox?

Your emailSubmit

I consent to my submitted data being processed and stored by SoBold in compliance with Privacy Policy

The end-to-end process of web design is made up of a number of different phases that should all inform and complement each other. 

When working with a web design and development agency, they should use their expertise and experience to guide you through this process, which consists of:

• In-depth research and careful planning
• Visual exploration and mood boards
• User experience (UX) design 
• User interface (UI) design.

Once you’ve completed each of those phases and you have a design that you’re proud of, your agency partner will be tasked with preparing your website for development.

This article will explain the process of preparing a website for development, helping you understand what’s involved, what to expect, and how to approach it.

Designing  Your Website Across Different Break-Points 

In a recent article, we explained how the purpose of your UX is to help your visitors complete a task or process on your website as easily as possible, ultimately leading them to follow a call-to-action. 

Your UX is brought to life by your UI, which includes all the visual and interactive elements of your website, from colour and font to buttons and scrolling. 

Towards the end of the UI design phase, the next step will be to roll out your designs across a number of break-points. 

Break-points are the screen sizes of devices that your design will fit within. This allows your website to be designed as responsive and optimised for use across a wide range of different devices and channels. 

This is important because certain aspects of your site may not translate down perfectly across different screen sizes. 

Here at SoBold, we design sites across the following break-points, but this may vary from agency to agency:

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

If you want your website to be designed as mobile-first, it’s important to raise it at the beginning of the project so your agency can create your wireframes in that context. However, you should only ever make that decision based on real data regarding your target audience’s preferences. 

In this case, your agency should work with you to conduct some additional research and determine the best screen size for your particular audience. This will ensure the UX designers work with the right starting point for your high-fidelity wireframes.

A Thorough Hand-Over from Design to Development 

This phase of a website project involves a process that takes a lot of careful work and close collaboration between the different teams within an agency. 

Here at SoBold, we make a point to ensure the design team talks the development team through all the work they’ve done on your mood boards, UX design, and UI design in detail. This includes explaining the decision making process behind everything they’ve designed.

While a lot of agencies will just hand the designs to the developers and ask them to start building, we believe this is something that should be treated as more of a team effort. Doing so as a core part of our process has proven to add tremendous value to the work our clients have received in recent years. 

It’s beneficial to the overall project for the developers to fully understand why the decisions have been made about the designs. It’s also important that they’re given a detailed run through of what they’re building within the context of the whole site.

For example, there may be a fairly complex block which is built early on in the development process. If the developers are made aware that slight variations of this same block will be used several times throughout the site, they can save valuable time and work more efficiently by repurposing the first block when it’s first built. 

This hand-over is crucial in ensuring the development process runs smoothly, providing you with a high-performance website that meets your expectations, delivered on time and within budget.

A Well Designed Website Ready to Be Built 

After the hand-over is complete, your agency will be able to export all your design assets and the developers will begin building your website. 

While web design may seem straightforward when explained like this, in reality it’s a complex process that requires a great deal of specialist skills and expertise. That’s why it’s so important to have the support of an agency partner you can trust and rely on to guide you. 

Working with a talented agency will ensure you’re able to create a unique design that will resonate with your target audience and help you achieve your strategic business goals through your new website. 

Keep an eye out for our upcoming blog series where we’ll walk you step-by-step through the web development process, making it far more approachable and easy to manage for you.

If you’d like to discover how generative AI technology is transforming the web design and development space, read our recent article here. 

Would you like these insights straight to your mailbox?

Your emailSubmit

I consent to my submitted data being processed and stored by SoBold in compliance with Privacy Policy