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.

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

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

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

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

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

Designing  Your Website Across Different Break-Points 

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

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

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

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

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

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

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

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

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

A Thorough Hand-Over from Design to Development 

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

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

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

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

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

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

A Well Designed Website Ready to Be Built 

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

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

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

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

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

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. 

SoBold are delighted to announce that we have obtained a sponsor licence in order to sponsor international skilled workers to come and work at SoBold.

SoBold have always put heavy emphasis on hiring the best global talent for our needs, and we have strengthened our ability to do this by obtaining a Skilled Worker Sponsorship Licence. 

With all sponsorship licences that the Home Offices grants they need to be reassured that the sponsors can live up to the “significant trust” that the department places in them. The Home Office further made checks that SoBold is a “honest, dependable and reliable” workplace, and capable of meeting the responsibilities that it expects from sponsors.

Since being granted our Skiller Worker Licence, we have been fortunate enough to put it to use to hire two new team members. 

Anna de Moraes, joined SoBold, from Portuguese company, SpringParrot. Anna had been able to work remotely, and was living and working from the UK, when she got in touch with SoBold. Anna, who is natively from Brazil, said of the process: 

“​The steps were pretty clear and the whole process was quite simple. I’ve had friends waiting years for their visas to be approved while we were able to complete everything in a short period of time! I was already excited to start and, in a blink of an eye, I was finally part of the SoBold team!”

More recently, SoBold hired Santosh Gajera as a Back End WordPress Developer. Santosh has relocated from India in order to provide his services to SoBold. When asked about the process behind him getting his Skilled Worker VISA granted, Santosh said:

“To keep my IT career moving forward, I needed sponsorship from an organisation that sponsored my visa. SoBold has been an invaluable help in obtaining my Tier-2 (Skilled worker) visa. I am very thankful to their hard work and professionalism. My documents were handled very scrupulously by them, and they provided full support throughout the whole application process . I got my visa approved in two days, which is amazing, and they handled everything for me.”

SoBold worked with all-in-one digital platform, Nation Better in order to achieve our sponsorship licence and the process was streamlined, affordable and transparent.

SoBold already have a diverse talent pool, with staff from all over Europe, and with the help of Nation Better, we have been able to improve the way in which we hire international talent and open up opportunities further afield. We look forward to continue growing our team with exceptional overseas talent and have access to a wider talent pool.

SoBold Managing Director, Will Newland said:

We are absolutely delighted to welcome both Anna and Santosh to the SoBold team. Without our Sponsorship Licence we would be missing out on a large pool of talent that is the future of our business. We very much look forward to continuing to use our Sponsorship Licence to our advantage and giving skilled employees the opportunity to come and work here at SoBold.

For more information on what current vacancies we have, please visit our website careers page.

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

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

What is infinite scrolling?

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

What is pagination?

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

The pros and cons of:

Infinite scrolling 

Pros:

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

• There is a better chance of user engagement

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

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

Cons:

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

Pagination

Pros:

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

Cons:

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