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?
- Brainstorming and ideation
- Assistance in research and information-gathering
- Writing copy
- Writing code
- Image and video creation
- Data analysis
- Automating manual processes.
- GPT-4 was released as an upgrade to Chat GPT. GPT-4 can understand images, process 25,000 words in one go, earn a top 10% score on complex exams, and even demonstrate some advanced reasoning capabilities.
- Adobe released Firefly, which is a programme with a range of new generative AI features. It can create outstanding new content using simple language, with almost-unlimited creative options like turning 3D compositions into photorealistic images and automating advanced video editing processes.
- GitHub launched CoPilotX, which can supposedly boost coding speed by up to 55%. CoPilotX has similar features to Chat GPT, but will be used by software engineers and developers to boost productivity and time-to-market.
- And, just last week, Stability AI released its Stable Diffusion XL model, offering photorealism through an intricate editing interface. It’s reportedly built with around 2.3 billion parameters.
- 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.
- 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.
- Perceivable
- Operable
- Understandable
- Robust.
- 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.
Industry News
14 January, 2025
Five Things We Learned at Brighton SEO
Back in early October, SoBold made our debut visit to Brighton SEO. Since then, we’ve been busy putting the invaluable lessons from the event’s talented speakers into action, all while navigating Google’s November and December Core Updates. Now the dust has (hopefully) settled on the update-front, and the with next iteration of Brighton SEO still a few months away, we’ve taken the opportunity to reflect on our key takeaways and their impact on our approach.
A functional relationship with your development team is critical for SEO success
During Brighton SEO, a recurring theme across different talks was the challenges SEOs face when working with development teams, particularly those that operate in silos. Whether in-house or outsourced to separate agencies, a lack of communication, deprioritised SEO tickets, and limited understanding of SEO best practices often lead to delays, errors, and missed opportunities. Many speakers and attendees expressed frustration at the need for excessive hand-holding to ensure even basic tasks were actioned correctly.
At SoBold, we avoid these risks with a collaborative effort between our development and SEO teams. As a WordPress-first agency, our integrated approach ensures SEO tickets are prioritised appropriately, and implemented to the highest standard. By removing barriers between teams, we’re more efficient and deliver results that drive SEO success.
Don’t discount the basics
It sounds very simple, but one of the biggest takeaways from Brighton SEO was how critical the fundamentals remain to SEO success. Numerous case studies and real-world examples shared by speakers reinforced that many websites fail to rank well simply because they lack a strong foundation. While advanced techniques and tools may sound exciting, the potential is often wasted on websites that haven’t addressed core issues.
Speakers emphasised that getting the basics right still yields some of the highest returns. Core Web Vitals, metadata optimisation, fixing 4xx and 3xx errors, a clear site hierarchy and URL structure, proper indexation, robots.txt configurations and ensuring basic analytics are in place all play a pivotal role. These essentials are often the difference between stagnation and significant ranking improvements. Ensure your fundamentals are sound before turning to more advanced methods and strategies.
AI can be a game-changer for audits, but nothing beats human written content
AI has been the buzzword of the industry in the past two years. Incorporating AI into everyday tasks to maximise efficiency was a key theme at Brighton SEO, specifically the use of AI to streamline time consuming tasks like audits and data analysis.
Audits are central to developing an SEO strategy and crafting roadmaps, and leveraging different AI and machine learning strategies to research, collate, and organise relevant data was a hot topic at the conference, with lots of very knowledgeable people offering extremely useful and actionable insights into how existing workflows can be enhanced through AI.
By leveraging AI tools and machine learning, SEOs can quickly identify technical errors, gather keyword insights and generate comprehensive reports, freeing up more time for the higher-impact strategic work. Speakers showcased actionable ways to integrate AI into workflows, potentially revolutionising the process of audits, roadmaps, and reporting.
However, there are clear limits to the use of AI. While it excels behind the scenes, it falls short when it comes to creating authentic, engaging content. Google’s guidelines, a number of algorithm updates, and leading voices within the SEO community on social media continue to emphasise that nothing beats human-written content based on real expertise and experience. The message was clear: AI can enhance efficiency, but content that resonates with users, builds trust and meets the intent of the searcher must remain in the hands of skilled human writers.
Google’s AI snippets are traffic thieves
Generative AI has been a hot topic across numerous industries since the launch of ChatGPT 3.5 in November 2022, especially in SEO. Google has released numerous updates (to mixed responses) to combat the large influx of AI generated content and the ability for anyone to churn out masses of content on subjects outside their areas of expertise.
There’s no doubt the rise of AI sent internal shockwaves at Google, who had to quickly innovate to withhold a potential threat to their dominance. As a consequence, they released the Google Generative AI Snippets, which generates AI answers at the top of the search results for a range of queries, based on information it’s gleaned from the top ranking pages for said query.
While the concept may seem beneficial to users, the reality is stark for website owners and their SEOs: visibility is drastically reduced. Data presented at Brighton SEO revealed that URLs in Position 1 under these snippets suffered traffic drops of 70%.
Many SEOs and site owners argue this practice borders on theft, as Google repurposes content with minimal credit or incentive for users to click through, and wouldn’t be able to surface any of this content without the websites creating it in the first place. This controversy isn’t going away anytime soon, and SEOs will need to strategise carefully to adapt to this new reality.
Test, test, and test again
Many of the talks were very insightful, offering new methods and solutions for a range of tasks. But each website is different, and what may have a profound impact on one website may not do the same on another.
There are very little one size fits all in SEO, and our testing of the new methods and techniques detailed at Brighton SEO has shown just that. We can take the direct learnings from these talks and apply them literally with minimal change, but with benchmarking the initial metrics, examining the difference once recommendations are applied, and tweaking these with our own insights, we can maximise the impact.
Whilst the wealth of talent and expertise of the speakers at Brighton SEO was at a very high standard, SEOs shouldn’t rest on the laurels and only go as far as these talks suggest, but leverage their own expertise and knowledge, pairing it with the expertise from these conferences to get the best results. Building upon some of the strategies outlined at Brighton SEO and putting our own SoBold-spin on these is already bearing fruit, and testing is at the heart of this.
Final Thoughts
From the importance of solid fundamentals to embracing AI’s potential while recognising its limitations, these takeaways are invaluable for SEOs and developers alike. By testing, adapting, and collaborating, we can turn these learnings into impactful strategies allowing us to navigate the uncertainty of Google Updates, as we look ahead to the next conference in April.
Would you like these insights straight to your mailbox?
Industry News
25 April, 2023
The Changing Roles of Web Design and Development in the Age of AI
Summary
In the first few months of 2023, generative AI has burst on to the scene and begun to change our relationship with technology forever. Already, there’s plenty of evidence to suggest that people in a wide range of jobs will have to adapt quickly or risk being replaced. In this article, we explore the impact AI is having on the web design and development industry, as well as how businesses, and people, should approach working with this innovative technology.
———
AI tools are nothing new. We’ve all been using them for years, from chatbots to predictive text to voice-controlled assistants like Siri and Alexa. But the recent mainstream adoption of AI tools such as Chat GPT, and the rapid advancement of the technology itself, has caused huge disruption across a number of industries.
Many assumed that people like marketers, software developers, and UX and UI designers would be some of the last ones at risk of having their jobs taken by AI, due to their need for creative skill and use of human emotion. Ironically, these roles have been some of the first to come “under threat” over the past few months.
AI’s speed and efficiency is already forcing us to ask questions about the future of the web design and development industry. With that in mind, one question in particular has dominated discussion online so far this year:
Are our jobs in danger of being taken by AI?
By now, you’re almost certainly aware that AI offers incredible value by accelerating workflows and augmenting skills. Some of the most beneficial use cases lie in:
AI can also devise entire business and marketing strategies, solve complex problems, and even create its own AI-powered applications from scratch. Perhaps most importantly, it can do all these tasks in a matter of seconds, when most of them would take a human several hours, days or even months.
The Latest News and Tools (at the Time of Writing)
Over the past few months, there are more and more AI-powered tools being released on an almost daily basis.
The number of AI tools that have been released recently is staggering, and the capabilities of some of them is truly mind-blowing. Just last month, in March 2023:
It’s both exciting and terrifying to think these highly intelligent tools are just the tip of the AI iceberg. When you consider how common it’s now become to use AI to develop even more advanced AI, it seems that the rate of evolution will only continue to increase exponentially from here.
How is AI Transforming Design and Development?
While these AI tools are extremely impressive, it’s not as straightforward as simply plugging them in and sitting back while they literally do your work for you. It’s possible we may get there one day, but right now we believe we’re a long way off.
These tools are highly sophisticated and intuitive, and their adoption is probably going to change the way we all work forever. However, this should be seen as technology that will augment and enhance people’s ability to do their jobs, or create new jobs entirely, rather than “steal” them away from us.
The current use cases for AI are mostly just ways for you to do your work, much faster and more effectively. This could either be done by automating processes to save time, or by supplementing your existing skill-set with new capabilities with the help of AI. For example, if you wanted to convert your code from one language into multiple languages, you would be able to do this with the help of Chat GPT.
When it comes to user experience (UX) design, one crucial thing AI will always be missing is human empathy, emotion, and understanding. A company looking to create a high-performance website that supports their strategic business goals and engages their target audience will fail if they don’t take into account human understanding and collaboration between them and their web development agency.
Outlining the What and the How is important, but the Why is arguably what drives great UX and UI.
“Design is not just a visual experience, it’s an emotional one. It should make people feel something.”
Nathan Shedroff, Author and Professor of Design Strategy
UX design is a nuanced, collaborative process, focusing on the specific requirements of the business and the specific needs of the target audience. You can save a lot of time using AI to produce a high volume of early conceptual designs or accelerate your copywriting process. But without the human element, none of these things will be authentic or anywhere near the required standard.
Potential Concerns and Risks with AI
Of course, we’ve not even mentioned the rising concerns and risks associated with AI yet. Just last month, over 1,000 technology leaders and influencers signed a petition to halt the development of generative AI until more governance can be introduced to ensure its safety.
There are still some serious grey areas regarding the use of this technology in business as well, from regulations and legal implications to the copyright of creative work like logos and images. These are providing opportunities for a wide range of new forms of cyber crime, phishing, and “deep-fake” imitations which could spiral out of control if left unchecked.
There are also plenty of moral issues surrounding AI that we must consider. For example, what implications will there be for our society if global businesses do begin replacing humans with AI on a large scale?
A key concern is that Generative AI is also having a significant impact on the environment, which is a conversation most people seem to be avoiding for the time being. With the global fight to reduce carbon emissions intensifying, and more businesses placing sustainability at the core of their values, there needs to be some action taken to balance those priorities with the efficiency and speed enabled by AI.
The SoBold Perspective
From our perspective, as a leading design and development agency, we believe that people will always want and need to work with other people. Personable relationships, real-life experience, and critical thinking are all essential parts of our work. In many cases, that’s also what many of our clients value most about our services.
Granted, we’re always looking for innovative new ways to push the boundaries, and AI is an incredible tool that will help us do that. But it won’t replace crucial human characteristics like empathy, emotion, and subjective opinions.
It will, however, help us spend less time on low-value tasks, and more time to focus on building stronger relationships and gaining a deeper understanding of our clients’ needs. That will only result in improving the work we deliver, which is something we’re always striving to achieve.
The Verdict on AI (for Now)
This year will probably be looked back on as a turning point in history when AI was introduced to the world. But this technology won’t replace too many jobs just yet. Instead, it will enhance our ability to work smarter, faster, and more efficiently.
For now, the only people at risk of losing their jobs to AI are those who fail – or refuse – to adapt to this new way of working and embrace the change. Similarly, if you’re using AI because you’re being lazy or complacent, that will also cause problems. You should never use work produced by a generative AI tool without checking its quality and accuracy, and you’ll always need to add a human touch before considering it finished.
On the other hand, if you’re forward-thinking and agile, embracing AI will make you exponentially better at your job. Here at SoBold, we’re personally most excited by how AI has the potential to help us vastly improve the service we deliver for our clients.
Of course, this technology is evolving so fast that it’s difficult to predict where we’ll stand a year from now. We’ll be discussing this, and lots of other important trends, in our new monthly newsletter.
Would you like these insights straight to your mailbox?
Announcement
24 September, 2022
SoBold is an accredited Living Wage employer
SoBold has continued to be an accredited Living Wage Employer and has formally made a commitment to ensure all new and existing staff contracts are renewed at the Living Wage rate as a minimum.
SoBold has been a Living Wage Employer since 2019 and they are committed to ensuring that all staff are treated fairly and remunerated fairly in line with the Living Wage Foundation.
The new Living Wage rates were announced on Thursday 22nd September 2022 and SoBold ensured that all staff pay is in line with this.
SoBold hope to see more agencies within the technology sector follow suit and become accredited.
SoBold Managing Director, Will Newland said:
We are proud of the people that work at SoBold and we truly care about them. Our staff have always been the life blood of our organisation and it is an absolute no brainer for SoBold to be a Living Wage employer.
Would you like these insights straight to your mailbox?
Announcement
1 November, 2022
SoBold announce Cyber Essentials certification
SoBold announce their Cyber Essentials certification for the third consecutive year which demononstrates their commitment to delivering secure technical solutions to their new and existing clients.
Cyber Essentials is scheme which helps guard your organisation against a range of common cyber threats. SoBold’s resilience across a range of internet facing devices was tested and approved, ensuring there were not any major critical vulnerabilities discovered
SoBold Technical Director, Sam Phillips said:
With an ever growing cyber threat, Cyber Essentials certification is becoming more and more important to maintain. Protecting both our clients data and websites is of the upmost importance and successfully passing the more thorough Cyber Essentials guidelines new for 2022 shows our commitment to this.
Would you like these insights straight to your mailbox?
UI Design
15 May, 2023
What Does Successful User Interface (UI) Design Look like?
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?
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:
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:
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:
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:
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.