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:
- 1,920px – This covers most external computer monitor sizes
- 1,366px – This covers most laptop screen sizes
- 992px – This covers most Notebook and iPad devices
- 768px – This covers most other tablet devices
- 375px – This covers most smartphones.
You’ll then reach the exciting part, where your website is fully designed for you to view, test, and play around with. Once you’re happy with the design across the different break-points, your agency partner will be ready to prepare the design for a development handover.
What Does Effective UI Design Involve?
Good UI design is something that should feel seamless and almost invisible to your visitors when they land on your website. The aesthetics and visual style should be simple and engaging, while not distracting from the UX.
These days, you only have a matter of seconds to make a positive impression that can retain your visitors’ attention, so it’s crucial you don’t over-complicate things. But what differentiates good UI from bad UI in practical terms?
Like with UX design, there are some best practices you can follow to ensure your website has an effective, attractive UI.
Follow these guidelines to create a UI that delivers the desired experience for your visitors and supports your website’s strategic objectives:
- Keep your design simple and your content succinct
- Prioritise the preferences and best interests of your target audience
- Make your design elements as clear as possible
- Maintain consistency
- Ensure your brand, and your company’s identity, have been accurately represented through the design
- Use power of visual imagery to capture and retain your visitors’ attention
- Make your call-to-action as strong and compelling as possible
- Don’t create anything that interferes with the goals of your UX.
Check out our related article for seven helpful tips to ensure your website is designed with great usability here for additional guidance.
The Importance of Accessibility
Accessibility is the practice of making technology as easy to use as possible, and fully accessible to everyone. While web accessibility is largely intended to help people with disabilities gain better usage of technology, it’s also much broader than that.
There are people who have difficulty using certain types of, or aspects of, technology who don’t have a disability. For instance, someone with deteriorating eyesight may find it difficult to read small text on a smartphone screen.
It’s also important to ensure your website is as easy to use as possible for the average person as well, because you should always strive to deliver the best possible UX for all your visitors. Accessibility is a key driver of this.
The Web Content Accessibility Guidelines (WCAG), which are used to define what constitutes good accessibility, lists four key principles of web accessibility that should be followed by all websites.
This means your website must be:
- Perceivable
- Operable
- Understandable
- Robust.
Web accessibility is an important topic, so we’ll talk more about that in a separate article. For now, it’s worth noting that any web design and development agency you work with should consider accessibility a top priority when designing the UI of your website. If they don’t, you should challenge them and ask why not.
Here at SoBold, this is built-in to all our design processes. We believe that all technology should be inclusive and equally available to everyone, regardless of their physical ability, location, personal background, or any other factors.
Some design best practices that we’d recommend you always follow to ensure your website is fully accessible, from a UI design perspective, include:
- Use contrast and blank space to make your content easy to perceive
- Use bold colours
- Use font sizes no smaller than 14px for desktop and 13px for mobile across the whole site (although, this does depend on the font you use)
- Use headings and structure correctly to organise content clearly on each page
- Make all your content easy to both see and hear
- Write all your copy in plain, simple language
- Avoid any flashing or blinking imagery or video content
- Write simple, clear, and helpful error messages.
Preparing Your Website for Development
As you can see, UI design is mainly a case of applying the visual design that was created with the mood boards to your UX wireframes with the agreed flow. Good UI is no more than a clean, simple design that accurately represents your brand identity. While it sounds straightforward, it’s important to remember this is just one phase in the holistic, end-to-end process of web design.
To conclude the design process after the UI is complete, your agency will prepare your site’s designs for development. To learn how this process works, understand what to expect, and ensure your own web development process runs smoothly, read our next article in the series here.
Would you like these insights straight to your mailbox?
- Read our comparison between Sitecore and WordPress here.
- Read our comparison between Umbraco and WordPress here.
- Design
- Development
- Quality Assurance Testing
- Migration and Launch.
- Strategy
- Website Data
- Target Audience
- Industry Landscape
- Competitors.
- 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.
Industry News
12 January, 2023
WordPress vs Drupal – Comparing Both Content Management Systems
There are plenty of similarities between WordPress and Drupal. That can make it particularly hard to choose between the two if you’re tasked with finding a new content management system (CMS) for your business. But when you’re about to invest in a new CMS, it’s an important decision that needs careful consideration.
After all, your CMS will be the platform upon which your website is built, and the influence that will have on your business growth and success today shouldn’t be underestimated. With that in mind, it’s crucial to find a platform that aligns with your specific requirements and enables you to achieve your strategic objectives.
To help you gain a clear understanding of the differences between WordPress and Drupal, and decide which one is better suited to your business, we’ve provided this helpful side-by-side assessment.
This article is part of a new series where we’ve explored direct, objective comparisons between some of the leading options for CMSs. In the third article of this series, we’re looking at Drupal and WordPress. You can find links to the other articles in this series at the bottom of the page.
Approachability and Ease-of-Use
A CMS is a big investment, and so you’ll want to begin getting good use and value from your platform of choice as quickly as possible. Like any type of software, though, some platforms are more approachable for the average user, while others will require you to have some previous experience to get going.
How Approachable is Drupal?
Drupal is aimed at users with some prior coding skills or content management experience. If you have technical skills at your disposal, Drupal can provide great functionality once you’ve put some time and effort into setting everything up.
For non-technical users, however, working with the platform and getting comfortable using it can be a long-term process. It’s an advanced CMS that doesn’t offer much in the way of straightforward usability “out-of-the-box” unfortunately. If your team is made up of non-technical users and beginners, this might not be the best platform for you.
Even if you work with a web development agency to help you get everything set up and tailored to your preferences, the complexity of the code will make their project timelines and costs higher than the average CMS.
How Approachable is WordPress?
WordPress is very approachable for anyone, even beginners without any previous experience using a CMS.
Simplicity is one of WordPress’s greatest strengths, and many would argue that elevates it above all its peers.
This usability allows you to get up-to-speed immediately with a very fast time-to-market for your site. That means you’ll begin to achieve a positive return on investment (ROI) much quicker than most other platforms. Almost everything you need to build and manage your website will be readily available when you first begin using WordPress, making it more approachable for the average user than Drupal.
As it’s such an intuitive platform, pretty much anyone in your team will be able to use WordPress. That will make it easier to handle the daily management and running of your site as a shared responsibility.
Functionality and Customisation
As touched on above, you should be looking for a platform that you and your colleagues will be comfortable using on a daily basis. If you don’t like the way a CMS functions, you should remove it from your shortlist of options.
While Drupal and WordPress are similar at first glance, with the same fundamental functionality of a CMS, there are some unique features and capabilities that differentiate them. There’s also a wide range of ways to customise them to your own liking.
Working with Drupal
While the complexity mentioned in the previous section does require considerable time, effort, and money to get past, once you’ve got there you’ll likely find Drupal is a good CMS to use for building and editing your website.
Drupal’s user interface (UI) is fairly easy to get used to. You can publish, edit, manage, and organise content with flexibility, adjusting your page structure and site navigation. You can also lean on a large library of website themes and modules, which are additions similar to WordPress’s plugins, to tailor your CMS to your own unique specifications.
Working with WordPress
As a CMS, WordPress’s simple, intuitive functionality allows you to seamlessly launch and manage your site. It’s very convenient editing content on a page-by-page basis with WordPress with its block-based design. This allows you to create quality content from day one, with the freedom and flexibility to make adjustments to the platform as and when you require.
WordPress also allows you to customise it as well with a vast selection of plugins and themes. The difference between WordPress and other CMSs, though, is that there’s not much you’ll need to change about it out-of-the-box before you can begin using it comfortably.
Because it has a lower cost and faster time-to-market, it will free up more time for you (or your agency) to focus on higher value work, like differentiating your site from competitors or developing personalised content for your customers.
Platform Security
When writing down the criteria that you’ll use to select your CMS, security should be one of the first things on that list. Threats to cyber security and data protection are increasing by the day, for businesses of all sizes across all sectors, so it’s crucial to ensure you select a secure, trustworthy platform.
How Secure is Drupal?
One of the major advantages of a CMS that’s aimed at those with web development skills is that the users of Drupal work hard to ensure the platform is highly secure. Drupal regularly receives security updates and additional reinforcements to protect the platform.
Of course, you still need to test thoroughly and continuously double-check there are no vulnerabilities in your system. This is usually the responsibility of your agency, and a good partner should always prioritise security at the core of any development project.
How Secure is WordPress?
WordPress is a secure platform, but some still carry the misconception that it isn’t suitable for large businesses. To find evidence of its enterprise-grade security, though, you only need to look at the number of organisations using WordPress as their CMS of choice today.
Still, there are some potential vulnerabilities that are important to be aware of. For instance, be careful when adding plugins to your WordPress platform. As WordPress runs on open-source software, some developers will inevitably release plugins that aren’t secure, so you should only use plugins from reputable sources.
When you do use plugins, you’ll also need to test them thoroughly and keep them updated, and ideally have them working alongside security-specific plugins such as WordFence. These are issues that a good agency partner should be well aware of and handle for you.
Security is also influenced by the hosting environment of your platform. You can reduce your security risks further with WordPress if you find a trustworthy, well-managed hosting partner to look after your system.
The Global Communities
An active community of developers is a valuable asset for a CMS to have. This is a selection of dedicated users who work hard to contribute to growing and improving the platform, either by releasing new updates and plugins or fixing bugs in the software’s code.
For businesses like yours, the community could make the difference between having a small issue resolved quickly or growing into a big problem. Communities also provide resources to learn more about the technology, to further develop the digital offering you provide to your customers.
Drupal’s Community
Drupal has a fairly niche, but very passionate developer community supporting it. The size of Drupal’s community is considerably smaller than more popular platforms like WordPress, mainly because of that higher degree of coding skill required to use the CMS easily.
However, that doesn’t detract from the level of support or added value you’ll receive if you do opt for Drupal. New themes, modules, and updates are often released to contribute to the quality of websites that can be built on the platform.
WordPress’s Community
Most of what’s been discussed as strengths of WordPress in this article can be put down to the hard work of the community adding to the software.
WordPress’s community is truly global, with millions of users regularly producing innovative new themes and plugins that your business can pick up and begin using with ease.
No matter what issues you run into with your WordPress site, there will always be help readily available from the community.
WordPress users are renowned for their events as well, with free meet-ups and conferences often held to help users learn more about the technology. WordCamp, for example, is a non-profit event that has been run by the WordPress community since 2006 across several continents. WordPress also hosts an annual event called WordPress accessibility day, designed to help increase awareness of the importance of accessibility in modern technology.
The Cost and TCO
Another important aspect of your evaluation will be the cost of your CMS, and its long-term total cost of ownership (TCO).
The platform you choose will need to deliver good value for money and a strong ROI. How easily you can achieve these will vary depending on the CMS and how well it aligns with your business’s requirements.
Drupal’s Up-Front Investment and Ongoing Costs
Drupal is an open-source platform, which means it’s free to use. In most cases, Drupal is a good option in terms of value when compared to other CMSs.
You’ll only need to worry about costs like agency fees for development, your platform hosting, and post-deployment testing and maintenance.
However, the aforementioned complexity of Drupal often causes agency work to be more costly and time-consuming than it would be when working with platforms like WordPress. From basic set up and development to customisation, it’s possible your TCO will continue to grow over the years the longer you’re working with Drupal.
WordPress’s Low Cost and TCO
WordPress, on the other hand, is a very cost-effective solution with a much lower TCO than with Drupal.
It’s another open-source platform with no license fees, and you’ll rarely need to add on new features or capabilities because it comes with so much “out-of-the-box” already.
WordPress development is more simple and affordable, as are its maintenance and support. As mentioned earlier, the fast time-to-market helps you get a high quality website launched quickly so you can begin seeing ROI almost immediately.
Understanding the Role of an Agency
The role of an agency has been mentioned several times throughout this article. That’s because most businesses with a great website will have worked with an agency partner with platform-specific skills to help them bring their vision to life.
An agency can support you with hosting, design, development, maintenance, security, and updates, each of which can be highly complex and challenging to handle alone.
Therefore, it becomes even more important to consider how easy your CMS is to work with, not just for you and your team but for your development agency as well.
With a platform like Drupal, that has a reputation for being difficult and time-consuming to work with, agency projects are likely to be quite a big investment, and an ongoing one at that. WordPress is a platform that’s far easier to work with, meaning that the cost of releasing a quality, secure website will be much more affordable.
A CMS becomes far easier to use when you find an agency with the experience and expertise to help you gain as much value from the technology as possible. Whichever platform you choose, you’ll find it easier to achieve positive ROI if you have a specialist partner supporting you.
Deciding Between Drupal and WordPress
Both WordPress and Drupal are perfectly good options for most businesses looking for a new CMS. While there are strengths and weaknesses to consider, the most important thing is to keep your business’s specific needs in mind.
Make sure you’re clear on your strategic objectives, unique requirements, users, budget, and other factors to inform your decision. Once you’ve done that, use the comparisons in this article to see how each CMS lines up against what you’re looking for. It should then become evident which platform is more suitable for you.
If you need more help in your evaluation of the various CMS options:
Would you like these insights straight to your mailbox?
Company Milestone
10 June, 2021
Clutch recognizes SoBold as a top web developer in the UK
As a web developer team, our responsibility is in providing support to other companies. We make sure that websites look and work well for the businesses that need them. Our team serves as an expert extension of our clients so they can focus on their actual operations.
We take pride in our work and it looks like our efforts are paying off. We’re very happy to announce that we’ve been given an award. SoBold was named as a top UK web developer by Clutch for the year 2021.
Clutch is a ratings and reviews company that uses a unique verification process that ensures all of the content on their platform comes from legitimate sources. They then leverage this information to create ranked lists of the best performers in every industry around the world. The best of the best then get an award.
The best part of all this award is that it’s not decided by a panel of faceless judges. It’s based on the reactions of the people that worked directly with us. They’re the people in the best position to judge or critique our work. In fact, here’s what our Director had to say when we got the news.
“We are absolutely delighted to be chosen as one of the leading WordPress Development agencies in the UK by Clutch and look forward to continued growth and development to fulfil our potential.” Will Newland, Managing Director, SoBold.
If you want to partner with a team that will provide expert support and service to ensure your website is the best it can be, give us a call. Fill out our contact form and we’ll set up an appointment as soon as possible.
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?
UX Design
11 July, 2022
Speak our language: UX/UI Glossary
For designers, it’s almost an impossible task to effectively deliver a project without understanding the joint language of design. This terminology and jargon can often get thrown around in meetings, although it’s good practice to read the room and speak a mutual language it’s good to get a little insight. Below is a glossary of essential UX/UI terms grouped into topics.
General terms
Accessibility
A measure of a web pages usability for a range of people, including people with disabilities.
Design system
A document that houses design components and styles to use across a website or product, ensuring consistency.
Design thinking
The process of creating and executing strategic ideas that solve problems.
Flat design
A form of design that focuses on minimalism using 2D elements and strong colours.
Human-centred design
An approach that finds solutions with a human perspective in every step of the design process.
Information architecture
Or otherwise known as a sitemap, is the structural design of information.
Landing page
A stand-alone page that a person lands on after clicking from a digital location.
Onboarding
A flow that guides the user through a set of instructions such as choosing preferences, product usage and UI elements.
Responsive design
A design and usability process that adjusts content based on the device screen size.
UI Design
This determines how an interface will look and guide the user on how to interact with a product such a colour choices and layout.
Usability
The quality of the start-to-end user experience.
UX Design
The process of determining how a digital product should work based on relevant user research and best practices.
Acronyms
CTA (Call to action)
A graphical component that guides the user through the main flow and encourages them to take a specific action. Normally it will be the element that stands out most on a page.
CWV (core web vitals)
Are three metrics that score a user experience loading a page, those are: how quickly content loads, how quickly a browser loads the webpage and how unstable the content is as it loads.
GA (Google Analytics)
A web analytics service offered by Google that tracks and reports web traffic.
KPI (Key performance indicators)
A Performance measurement approach based on certain metrics over a certain time period.
MVP (minimum viable product)
A version of a product that is released with just enough features that deliver on the initial user needs to then improve and develop further.
PM (Project manager)
A person that leads a team in order to achieve all the project goals in a set of timelines.
SVG (Scalable Vector Graphic)
A two-dimensional vector-based graphical element that is scalable and widely supported across the web.
SWOT (strengths, weaknesses, opportunities and threats)
A marketing tool that identities assess your business and analyse your competitors.
Design Process
A/B testing
A UX method that involves showing two versions of a specific page or product to see which one works better.
Card sorting
A technique that can be used by both UX designers and users that help determine the information architecture of the product based on logical ordering.
Cluster mapping
In other words, an affinity diagram is for sorting UX user findings into organised sets to lay down the foundations for desirable features.
Competitor analysis
A research method that shows strategic insights into a competitor’s features, functions and even visual positioning.
Eyetracking
A study that allows researchers to evaluate the movements of a particular user when they are using a product.
Focus group
Typically a researcher will talk to a group of people to find out opinions and generate ideas on the product or service.
F shaped pattern
Is a layout designed to guide the user’s eye to specific information based on human behaviour.
Mockup
A visual representation of a product in an environment could be a concept or the finished product.
Moodboard/style scape
Is a collection of visual inspiration gathered from an initial concept to visually communicate an idea.
Prototype
Is an early version of a product that is simplified to test main user journeys and functionalities.
Sketch
There will always be a place for pen and paper. At this stage in the prototyping process, a researcher can quickly come up with design solutions and compare them to determine the best one.
Storyboard
A visual way of communicating the user journey.
Usability testing
An approach that is done typically throughout the whole design process, ensuring that the product has ease of use and matches the user’s requirements.
User flows
A flow that represents a users task from an entry point to a desirable end one.
User interview
A one-on-one chat that can gather information for a user persona and insight on their behavioural habits on a product and or service.
User journey
Like the user flow, a user journey is a route that maps out their journey from beginning to end, the difference is that a journey includes emotions and behavioural choices.
User Stories
A narrative-based resource that sums up the patterns of how they interact with the product, focusing on motivations and frustrations.
Wireframes
A low-fidelity design that focuses just on structure and layout without clouding the mind with visuals. Its purpose is to ensure the interaction between user and interface is solid.
Design elements
Breadcrumbs
A layered component that allows users to navigate through multi-level pages.
Contrast Colour
Ensuring there is enough visibility between two colours to the layer or text is legible and ideally meets WCAG standards.
Grid
Is a layout system with rows and columns, making it easier for designers and developers, also for making clean and symmetrical interfaces for users.
Layout
The order of certain content such as text and images are laid out on a page.
Navigation
An organised hierarchy of information allows the user to find the information they are looking for.
Typography
Typeface or Font. there is a difference. A Font is a weight or variation of a typeface and typography is the arrangement of those styles to ensure it’s legible and appealing.
White space
Or negative space is the strategic positioning of elements on a page so they have room to breathe and for people to absorb content.
Widget
A self-contained design component that has certain functionality.
Would you like these insights straight to your mailbox?
UI Design
18 April, 2023
Exploring the End-to-End Process of Web Design
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:
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:
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:
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?
