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:
- Design
- Development
- Quality Assurance Testing
- 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.
Would you like these insights straight to your mailbox?
Development
9 June, 2023
Exploring the End-to-End Process of Website Development
Approaching a website development project can be daunting if you’re unfamiliar with the process and unsure what to expect. In this article, we’ll provide a detailed overview of the web development process to help you understand what’s involved, making it easier for you to approach a project yourself and avoid any pitfalls.
Your Role as the Client
If you read our recent series of in-depth guides through the end-to-end process of web design, you’ll know that process will usually involve a lot of collaboration between you, your team members, and the agency you’re working with.
Once you’ve been through that process and your design is complete, you’ll need to move to the development stage of the project to bring your designs to life.
You’ll likely have less involvement in the development stage, and less collaboration will be required, so your role will primarily be to sit back and relax while a team of skilled developers do their thing.
Depending on the project size, complexity and project management approach, you may have some touch-points with your agency partner throughout the process. If you are taking an Agile approach, this may include sprint retrospective meetings, or if you are working in a different way, this may just include short demonstrations, walk-throughs of certain pieces of bespoke functionality, or it could just be allowing you to start familiarising yourself with different features as they’re being built.
A Smooth Handover from Design to Development
One of our core qualities here at SoBold is ensuring the design and development processes work closely together. That’s achieved by not only having a very integrated design and development team in the office, but also ensuring we hold a thorough, detailed handover meeting between the designers and the developers at this stage. This serves as a key aspect of every project we work on.
The purpose of this is to give the developers a full understanding of the website or platform they need to build before any work begins, reducing the risk of error and accelerating the delivery time.
Every agency will have their own approach to this. It should usually involve the project designer(s) and project manager(s) walking the development team through everything that took place during the design process and explaining the thought process behind the decisions they’ve made. They’ll also give suggestions and guidance for how the design might be best approached from a development point of view.
Any questions the developers have about their task at hand can be answered during the handover meeting, and at any time throughout the development process, allowing the development work to flow efficiently and effectively.
The Benefits of Working with a Full-Service Web Design and Development Agency
It’s so important to align your web designers and developers, because, more often than not, there are fundamental differences in how they think and approach their work. If you decide to work with an out-and-out web design agency to design your site, with a separate development agency building it, you may encounter gaps in understanding between the two processes.
Working with an agency partner that has specialist expertise for both disciplines in-house will ensure your website is delivered on time, within budget, and directly aligned with your requirements. Having designers and developers in the same team who can share knowledge throughout the processes will almost always result in the delivery of a higher quality project too.
Building Your Website
With the handover complete, the developers will begin building your website.
Most development agencies will likely start with setting up the base. This involves setting up the base styles of the site which includes and is not limited to default colours, typography styles and global components – including button and link styles.
Once the base is set up, your developers would typically move onto the navigation and footer set up before moving onto building out all the page templates and blocks in the design should they be taking a block based approach.
Part of this process will often involve integrating certain components of your site with other systems you use within your business.
Peer Reviews and Testing to Maintain High-Performance Standards
It’s important for your agency to review and test internally all the elements that have been built, so any bugs are identified and rectified as early as possible.
Again, different agencies will have differing approaches to this. Here at SoBold, we leverage the size and experience of our team to conduct a thorough peer review process on every single component we build.
Following this internal review process, you’ll usually be given a link to your site in a staging environment.
All your content will have likely been carried over from your existing site and redirects should also be in place so that when you push the site live, any old redundant links will be redirected to the appropriate page on your new site.
If you have any live marketing campaigns running, it’s important to ensure your development agency and your marketing team (or agency) are in regular communication prior to this, so they can keep your campaigns updated in line with your new site’s launch.
Smooth Sailing Post-Launch
Once your new website is live, you’ll likely have a period of time whereby your agency will be on hand to fix any bugs that relate to the content on the new site. Here at SoBold we work with our clients for a period of 30 days following the launch of their sites, and any ongoing support beyond this 30-day bug-fix window will require a separate maintenance agreement.
Your agency should also go through the back-end of your platform with you, so you know exactly how to make changes to your website. For the most part, agencies will understand how important it is for you to be able to manage the site yourselves internally, and this is something we believe is crucial for you to be shown in detail at the end of the development process.
Would you like these insights straight to your mailbox?
Latest from agency
26 May, 2023
Contentful vs WordPress: Which Platform is the Best Choice for You?
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.
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?
Company Milestone
8 June, 2021
SoBold is a Proud Clutch 100 Fastest-Growing Company for 2021
Clutch is a B2B review and rating platform that spans the IT, marketing, and business services industries. The site annually holds an awards cycle to celebrate the best and brightest service providers from the aforementioned sectors. SoBold are delighted to be one of the Clutch 100 fastest-growing companies for 2021!
“The Clutch 100 growth lists represent the top service providers based on revenue growth over the years,” said Clutch Founder Mike Beares. “Their recognition is only possible because of their willingness to participate and their commitment to delivering the best services to their clients.”
“We are delighted to be recognized as a Clutch Leader. This award highlights our consistent project success and growth as a business,” said SoBold Managing Director, Will Newland.
Would you like these insights straight to your mailbox?
Industry News
21 June, 2022
Pixel Pioneers Bristol 2022
If you’ve never been to a conference of any type before, you possibly think you already know the important areas of your profession and can find out any developments from your colleagues or the internet. At least that’s what I thought prior to attending Pixel Pioneers 2022.
Which option sounds more appealing to you? Pick up extra skills on occasion, or go to a conference and absorb a mega-dose of industry knowledge, make connections and enjoy exploring fresh surroundings? Luckily at SoBold we have the opportunity to do both.
The conference covered both ends of the telescope – from broad topics such as energy consumption, to a fifty minute talk about the brief three milliseconds your screen goes blank in between webpage loads. How the visually impaired experience the internet, to technical developments in styling / fonts.
My personal hero was Chris How – his mantra of valuing your customer’s time and giving them small moments of delight strongly resonated with me. In accordance, I want to guide you through the content of the conference, with links to the core material that will best replicate what the SoBold team saw, whilst valuing your precious time.
GAVIN STRANGE : Less Thinkering, More Tinkering
A must watch to boost your levels of creativity. Gavin shares his personal and professional projects with Aardman Studios. Lots of useful insights into reaching the pinnacle of creativity. Highly engaging delivery, visuals and plenty of ‘further reading’ material. Definitely worth watching in entirety. Gavin Strange website – will give you a sense of his creative flair and influences. https://www.jam-factory.com/
“It’s better to beg for forgiveness, than ask for permission.”
Gavin Strange
BIANCA BERNING : Variable Fonts – WTF?
From a technical and design standpoint, learning about variable fonts is incredibly useful. Towards the end Bianca veers into the potential application of variable fonts – imagine a world where your computer mutates its content to fit the viewer’s specific needs. If you’re looking for new avenues for unique artistic features for your website – this talk is for you. Everyone should have a play with variable fonts – try it here https://v-fonts.com/
CHRIS HOW : You Got to Fight for the Right to Delight
Chris’s choice of examples and commentary is intentionally entertaining and eclectic. His approach to design changes your criteria for success and also would decisively influence your next project. Essential viewing. Whether you’re a seasoned designer or developer short of a design, this talk will give you a guiding direction. Information on the Kano product roadmap here. https://www.productplan.com/glossary/kano-model/
LÉONIE WATSON : Accessibility: The Land That Time to Interactive Forgot
Visually impaired people experience the internet through screen readers – the internet described in words. Léonie’s valuable insight will definitely re-balance your priorities and appreciation for how websites should function. Some of the technical history she overviews was a bit lost on the audience but the switch in mindset is valuable. Important to dip into, especially for gleaming a deeper understanding of how a web document is compiled and loaded. It might sound ‘techy’ but it’s like understanding how our lungs work – illuminating. If you haven’t viewed any of your own websites using a screen reader – you definitely should. For a great sense of how the net is best experienced for visually impaired users – just check out her website – tink.uk
LUKE MURPHY : Lightning Talk: Design Tokens – Searching for a Source of Truth
Design Tokens act as a very useful tool for blending the boundaries of where design and development meet, in fact, they act as a technical element that affect design and development in equal measures. If you have no idea what a design token is – this talk could unlock a tonne of structure for your product. Here’s an overview article on design tokens
HANNAH SMITH : How to Make Digital Services More Sustainable
Hannah Smith’s talk invited us to critique our energy consumption and make changes to our habits as both consumers and producers of digital content. She makes the case that space travel is a waste of resources, and that using less lays the path to fulfilment. See if her arguments resonate with you. Hannah’s book recommendation – Doughnut Economics by Kate Raworth
JHEY TOMPKINS : Supercharge Your Skills with Creative Coding
A mad professor of CSS and JavaScript – Jhey has a mixture of technical tricks and interesting libraries for speech recognition. Deadpan yet full of colourful examples, Jhey clumsily demonstrates his collection of magical creations and challenges you, the developer, to break out of your ‘siloed’ mentality for visual presentation. Check out his catalogue of wondrous CSS/JS creations here
STUART LANGRIDGE : You Really Don’t Need All That JavaScript, I Promise
Painting with the broad brushes down to the nat-hair infinitesimally small details, Stuart reminds us of the importance of returning to the basics in order to best utilise the web. Unfortunately some of the libraries he suggests do not have extensive compatibility and thus aren’t for mainstream production… yet. His insight does provide a deeper understanding of the mechanics of the tools we use, although the message is quite drawn out. Example of the shared transitions js library https://codepen.io/drenther/pen/NjzeOO
RACHEL ANDREW : What’s New in CSS?
Rachel Andrew – new css features either in or emerging from or newly arrived from CSS-land. Truly at the coalface of emerging CSS features. For a frontend developer it was akin to being shown new letters in the alphabet that were being proposed. A summary of similar information can be found here – https://www.smashingmagazine.com/2022/03/new-css-features-2022/
Bristol itself is well worth a visit – a centre for nightlife, hedonism and youthful idealism. Simply walking around the harbour area in the daytime will refresh your appreciation for one-of-a-kind shops and overflowing street art. Make sure you have plenty of free space in your phone for all the photos. The SoBold team had a very enriching experience and bonded even tighter as a team. I hope to see you at the next one!
Links to the conference videos will be available via the Pixel Pioneers website.
Would you like these insights straight to your mailbox?
Latest from agency
8 December, 2022
Sam Phillips and Will Newland interviewed by Cloudways
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.