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? 

As mentioned in our related article, UI design is typically the fourth phase of the end-to-end process of web design.

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:

1. Perceivable
2. Operable
3. Understandable
4. 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?

Your emailSubmit

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

Finding a content management system (CMS) that is secure, cost-effective, and capable of delivering a website that meets all your requirements can be challenging.

As we’ve discussed in a previous article, there are lots of excellent CMSs available today, and it’s difficult to know which one will be the best fit for your specific business. 

While most CMSs appear similar on the surface, with the same fundamental functionality, popular platforms like Webflow and WordPress have unique features and capabilities that differentiate them from each other. 

So, selecting between these two different platforms is an important process that requires careful consideration. After all, your CMS is a long-term investment, and you need to know exactly what you’re getting before you make your decision.

To ease this challenge for you, this article will provide a direct, objective comparison between the Webflow and WordPress platforms.

An Overview of Each Platform 

You want a CMS that will enable you to build sophisticated, high-performance websites, tailored to your business, with a set of tools that are simple and easy-to-use. 

Webflow and WordPress can both give you exactly that in their own distinctive styles. Both platforms allow you to build and manage complex websites without deep technical knowledge, but they each take slightly different approaches. 

Webflow

Webflow is a software-as-a-service product, not a typical CMS. That means it doesn’t require any hosting and is primarily delivered via Amazon Web Services (AWS) cloud servers. 

As it’s a complete, mostly self-contained SaaS application, with everything built-in to it from the start, you can get up and running with your Webflow website quickly and easily.

You can use Webflow as a basic no-code website builder straight away. However, as you’ll certainly want to create a more dynamic, engaging website with a high volume of content, you’ll have to enable its CMS functionality to get up and running properly.

WordPress 

WordPress, on the other hand, is a more traditional CMS, intended to build highly scalable, dynamic websites full of rich content. The platform will need to be downloaded on to hosting servers, which can all be taken care of for you if you’re going to be working with an agency partner. 

WordPress is also a free, open-source platform, which means all users have access to its code. That allows talented developers to contribute to improving the platform with innovative new additions and enhancements on a near-constant basis. 

As WordPress is used to build almost half the websites online today, it also has a global community made up of millions of users who offer support, collaboration, knowledge sharing, events, and much more. 

Approachability and Ease-of-Use

A shared benefit of both Webflow and WordPress over certain other CMSs is their ease-of-use.

Both these platforms are approachable with low barriers for entry, even if you don’t have any existing coding or content management experience.

Webflow’s Usability 

As a low-code or no-code SaaS tool, almost anyone can use Webflow to build a website.

It provides a visual drag-and-drop builder with an emphasis on enabling users to create websites quickly and easily.

When using the CMS functionality to add more content to your website, like blog posts, the CMS is simple, allowing you to publish and manage the pages of your site with great efficiency. This is in the style of a classic content editor, which will probably be familiar to you.

WordPress’s Usability 

Almost anyone can use WordPress as well, even if you have no previous content management experience, hence its global popularity. In fact, simplicity and usability are arguably some of WordPress’s greatest strengths.

Almost everything you’ll need to set up and manage your website will be readily available when you first start using WordPress, making it very approachable. The platform provides you with an intuitive user interface (UI) that allows quick and easy publishing, management, and editing of content.

This is made even more efficient thanks to WordPress’s block-based editor. This is a method of building websites that offers significant advantages in flexibility, scalability, and ease-of-use. 

Particularly for large-scale websites that are likely to grow and evolve, this can save your developers valuable time and money, while also reducing your time-to-market.

You can learn all about the advantages of the WordPress block-based editor in our related article here. 

Their Features and Functionality  

For your investment in your CMS to be successful, it will need to have a range of features and functionality which allow you to create a website that delivers on your business objectives.

Webflow’s Features 

As touched on earlier, Webflow is a SaaS application in which almost everything you need is included as standard.

The core Webflow platform is all you need to build your site, although your agency will be able to add extra features for you by embedding code snippets from other services if you need them. 

For example, if you want to create the ability for your visitors to subscribe to your site as members, you could take code from another platform that facilitates subscriptions and use that to integrate the functionality. 

This is where the platforms start to deviate in approach. Webflow’s self-contained nature perhaps makes it a simpler platform because it doesn’t require many plugins, but that also makes it a lot more limited than WordPress.

Because Webflow doesn’t offer any plugins, you won’t be able to add many extensions that work directly in the Webflow interface. This prevents you from having one unified approach to your website management and marketing.

WordPress’s Features 

Most of the things you require to publish content and manage your website on a daily basis come readily available on the WordPress platform. WordPress’s sophisticated, dynamic features that come “out-of-the-box” are a great point of value.

However, if you do need to go beyond the standard functionality of WordPress, that can also be done with relative ease. Working with an agency with WordPress-specific expertise means that you can develop bespoke features and functionality unique to your website with almost no limitations. 

This allows you to tailor your CMS to meet your specific needs, and working with an agency to achieve this can still be very cost-effective. 

Not only that, but passionate members of the global community are always working hard to create new features and extensions that continue to improve the capabilities of the platform for free. 

How Well do they Integrate with Other Systems?

Beyond features, extensions, and plugins, your platform of choice should also be able to integrate easily with other tools and systems that are already present within your business. 

Integrating with your customer relationship management (CRM) platform, your email marketing system, and other software products is an important quality for a CMS to have.

Integrating with Webflow

While Webflow can integrate with some third-party tools, this is another area where the platform is somewhat limited. You can integrate your Webflow site with other tools, but there aren’t many native integrations available. Your agency partner will need to use more code embeds to achieve this, and you’ll have to use separate interfaces in many situations.

For example, using a lead generation form from your CRM on a Webflow site will require you to build the form in the CRM first, then add it to your web page using the embed code.

Not only does this approach create inconvenience for you and your team, but the extra time spent by your agency on more complex integrations will increase the overall long-term cost of the platform.

Integrating with WordPress 

Thanks to WordPress’s vast popularity, and the work of the global community, there are native plugins that can seamlessly integrate your WordPress site with almost any other tool or system. 

Simply add a plugin for any third-party tool to create the ability to access that tool’s functionality directly within your WordPress CMS. 

Even for more advanced requirements that need some bespoke development, like cross-platform automation, it’s usually an easier job for your development agency than it would be with most other platforms. 

How Secure Are these Platforms? 

Security should be a top priority when selecting a CMS. Concerns over cyber security and data protection are ever-increasing for businesses, so you need to ensure something as important as your website is fully secure.

Webflow’s Security 

Webflow is mostly based on AWS, an industry leader in secure hosting, so you can rest assured your platform will be highly secure. Webflow also has additional protective measures in place to bolster the security of all the data on the platform. 

Again, because it’s a SaaS product, this all comes out-the-box and doesn’t require you to take any steps yourself to secure your site.

However, that does mean you’re entirely reliant on Webflow to ensure that security is continually updated and reinforced. Neither you nor your agency partner have any control over the security of your site, which some businesses see as a negative. 

WordPress’s Security 

Your agency partner will typically be responsible for the hosting, maintenance, and security of your WordPress platform. We mention hosting and maintenance here because these things are influential towards ensuring your platform, and your website, are kept secure. 

WordPress is already a very secure platform out-of-the-box, though. There’s no need to think that WordPress’s protection is not robust enough for a large business, even in today’s volatile security landscape. Evidence of this security can be found in the number of global enterprise businesses that have chosen WordPress as their CMS.

Of course, there are vulnerabilities that can arise in certain scenarios, like if your platform isn’t kept fully updated on a constant basis. For this reason, it’s crucial to work with an agency partner who you can trust and rely on when it comes to security, including enterprise-grade hosting and continual platform maintenance. 

You can learn more about the security of the WordPress platform in our in-depth guide here. 

You can also discover 10 useful tips to further improve WordPress security and minimise your risks here. 

The Overall Cost and CTO 

As mentioned earlier, your CMS is not only a big investment, it’s also a long-term one. You ideally need to find a platform that offers good value for money, and a low total cost of ownership (TCO), in order to achieve a strong return on investment (ROI).

Your TCO will be determined by combining everything from your hosting costs, license fees, work with your agency, maintenance, bespoke development, and more.

Webflow

In terms of costs and plans, Webflow is more expensive than WordPress. This SaaS product offers two different types of plans, a site plan and a workplace plan. 

The average enterprise business with a dynamic website will be looking at costs of between £300 and £500 with Webflow. This makes it a far more cost-effective alternative than large-scale CSMs like Sitecore. 

As discussed throughout this article, though, Webflow’s lack of native plugins and integrations will also make bespoke development work more difficult and time-consuming for your agency. This will inevitably drive up the platform’s TCO, and that’s something you should carefully consider when evaluating your options.

WordPress 

WordPress is a more cost-effective platform, with a generally low TCO for most businesses. Its open-source nature means it’s free to use, limiting your initial costs to just hosting, agency fees, and post-deployment support. Any plugins or extensions of the platform will be licensed and paid for separately.

Since WordPress is such an intuitive and easy-to-use platform, any bespoke development work you need your agency partner to complete will still come at a reasonable cost. Similarly, whenever the WordPress platform is updated, testing and maintaining your site can be done in just a few hours. This creates a significantly lower TCO than you’d have with almost all other enterprise CMSs.

Make the Right Choice for Your Business 

Webflow and WordPress are both good platforms in their own right, with plenty of value to offer. The key thing to understand when making this comparison is that your CMS of choice needs to align with your business’s unique requirements and specific objectives. 

For instance, Webflow might be a suitable choice for one of your smaller competitors, but that doesn’t mean it will necessarily be a good fit for you if you need more advanced features and functionality. 

Whether you’re developing a bespoke website from scratch, or migrating your existing site to a new platform, you must ensure your CMS can deliver on your needs both now and as your business grows over time.

If you need further help selecting a CMS for your website project, read our comprehensive guide to understanding and evaluating the options for large businesses here.

Would you like these insights straight to your mailbox?

Your emailSubmit

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

SoBold is pleased to announce that they have renewed their contract with Transport for London to manage and support a bespoke Cookie Consent Management Tool for use across TfL’s portfolio of websites which includes 30 domains.

SoBold recently became only the 3rd Platinum Certified Cookiebot Partner in the UK having been an authorised Reseller of Cookiebot since the new General Data Protection Regulation (GDPR) came into place on 24 May 2018.

Transport for London’s desire to extend its relationship with SoBold for a further year, highlights the importance of the work SoBold are doing to manage its bespoke Cookie Consent Management solution across its portfolio of website which have missions of visitors per month. The contract renewal cements SoBold’s position as one of the leading Cookiebot resellers. 

For more information on SoBold’s work to date with Transport for London, see their case study.

SoBold Technical Director, Sam Phillips said:

It is great to see Transport for London renew its cookie management contract with SoBold for a fifth successive year. Over the last year we have continued to evolve their bespoke solution adding in full IAB TCF support as well updating the design to reflect TFL’s updated guidelines. We’re looking forward to continuing to support TfL over the next 12 months.

Would you like these insights straight to your mailbox?

Your emailSubmit

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

Did you know you can use a block-based approach with your WordPress website to gain more value from the platform, with significant advantages in flexibility, scalability, and ease-of-use? 

In this article, we’ll explain what blocks are, how they work, and how you can use them to build enterprise-grade websites quickly and efficiently, without compromising on quality.

—

WordPress is the most popular content management system (CMS) in the world right now, and it has been for a while. Unfortunately, though, some people still have the wrong impression that it is a CMS that can only be used to build more simple websites that do not have any real complex functionality or integrations, but this couldn’t be further from the truth. 

In fact, WordPress is far more intuitive and robust than most realise. The fact that around 45% of all websites online today are built on the platform goes a long way to prove that. WordPress also provides more scalable, agile capabilities that are perfectly suited to building enterprise-grade websites if leveraged in the right way.

There are intelligent – but still very straightforward – ways to use WordPress that can unlock more value from the CMS. If done with the right guidance, this can make WordPress a far better option than the more traditional, rigid approach of building websites.

This is an opportunity most large businesses are currently missing out on. In this article, we’ll show you how using blocks is a more flexible approach that can provide you with a wealth of benefits.

Understanding How Using Blocks In Your Website Backend works

In 2018, WordPress released a new block-based design and editing user interface (UI), known as Gutenberg. Instead of the typical page creation and editing functionality of a CMS, where you’d input text and images into a rich text editor, you can now build your site by creating and using a set of components. Components are blocks of code which have pre-defined style and input types. 

Each component is named, to denote what it is from the perspective of the front-end of your site on the web page. 

Note: Some agencies only provide a list of block names, but here at SoBold we also provide screenshots of each block so you can see it first. This makes the process much easier and saves you a great deal of time.

Each part of each web page is made up of these components, as pictured below.

However, taking a bespoke approach, you can design and construct unique blocks that are entirely your own. Blocks or components can be built for you by your agency so they’re bespoke to you, your style guidelines, your design preferences, and so on. And, when building your site, you can go into your pre-built components and edit things, like changing background colours, adding images, adding text, and so on. 

This can be set up for you by your agency, so you have everything you need to create, edit, and publish new pages with your pre-built blocks. Anytime you need to create a new page, you just have to pick the appropriate components and place them in the correct position to quickly and easily build the page. 

You can see a great real-world example of an intuitive, bespoke enterprise website built using this block-based design approach here. 

The Business Benefits of Using a Component-Based Approach

Scalability 

Scalability is one of the greatest benefits of using these blocks, especially if you are wanting to continue to build out your sitemap and build out the content. 

This scalability is where WordPress really shines, enabling simple, rapid, virtually limitless scaling of your website with a high level of accuracy. This is a cost-effective way of growing without having to compromise on the quality of your design.

Flexibility 

Blocks provide you with a great deal of flexibility in building, editing, and structuring of pages as well. The ability to customise all your components, along with the intuitive drag and drop functionality, allows you to effortlessly adapt and expand on your website.

Efficiency 

Building components, and repurposing them repeatedly across your website, is a highly efficient way of growing your site. It also makes it very difficult to make mistakes or take a wrong turn.

This efficiency of reusing blocks across your website will free up time for you to develop innovative new features, or focus on improving the service and experience you provide your clients.

Ease-of-Use 

If you have non-technical members of your team who would benefit from using WordPress, blocks will almost certainly improve the usability of the CMS for those people. 

An easier design and editing function helps more members of your team create web pages within clear, pre-set brand guidelines. That’s another aspect that frees up more time and resources to focus on higher value tasks. 

If you’re working with a design and development agency, this also makes it much easier for them to be able to train you and enable you to use the platform to manage your site. 

Faster Time-to-Market 

All this efficiency and ease-of-use will enable you to achieve a faster time-to-market for new web pages, extensions of your site, or even entirely new websites. 

That can, in turn, create competitive advantages for your business, particularly if your competitors are working with CMSs that are slower and harder to use.

Whether it’s you or your agency handling this, you can create and publish new web pages quicker than you could with any other approach.

Lower Costs and TCO

As a result of all of the above, you can reduce costs on development and design, and achieve a much better total cost of ownership (TCO) with the WordPress platform. 

Something that takes an inexperienced agency days to complete with the classic design approach can be done in hours using bespoke blocks. This drastically reduces development costs and gives you a lower TCO in the long-term.

The Importance of Finding a Capable Agency Partner 

As mentioned earlier, bespoke blocks provide you with a proven way to unlock more potential with WordPress and gain greater value from the platform. However, in order to do that, it’s important to find the right agency partner. You’ll need an agency with enterprise-grade expertise and a certain level of skill to guide and support you through this process. 

Taking this approach to building WordPress websites is nothing new, but the real value here comes in creating blocks that are completely unique and specific to you, then enabling your team to use those to scale your site. 

Many WordPress agencies may lean on the generic block editor. But to get this right, you should push beyond that to find a partner who can educate you on the opportunities of using a bespoke design system to build a high-performance website that’s effortless to manage and edit. 

A great partner will also facilitate this for you in a way that ensures you have control, removing the risk of any users making mistakes with the flexibility of this system. You won’t need to worry about the integrity or quality of your site being spoiled because all your components will be built specifically to prevent that.

You’ll gain tremendous value from receiving an intuitive, quality website that you can easily grow at will, but one that’s also managed and supported by an experienced partner. Sticking to these blocks helps you stay within brand guidelines, adhere to best practices, and keep your site consistent. 

You then have the choice to manage, edit, and expand your site yourself, or rely on your partner to do it for you quicker, easier, and more efficiently than they would with a traditional CMS. 

Making the Most of Your WordPress Platform 

Modern businesses today require a powerful, sophisticated CMS that can deliver great websites at scale with enterprise-grade performance. WordPress is a platform that’s built to provide all those qualities and more. Embracing this block-based approach is the most effective and efficient way to achieve that. 

With a skilled agency partner to help you maximise the value your business gains from the platform, you’ll quickly realise just how well WordPress can deliver agile, intuitive websites. 

If you’re in the process of evaluating platforms to deliver a bespoke web development project, check our comprehensive guide to assessing and selecting the right CMS here

Would you like these insights straight to your mailbox?

Your emailSubmit

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

As of September 2017, SoBold has become the exclusive digital partner for Clanwilliam Group.

About Clanwilliam Group: Clanwilliam Group, headquartered in Dublin, Ireland, operate a number of industry leading brands in the private and public healthcare sectors across the Republic of Ireland, the UK, Australia, New Zealand as well as other worldwide locations. Formed in 2014, Clanwilliam has rapidly expanded in size, now with over 15 brands under the Clanwilliam Group umbrella. Clanwilliam is driven to establish itself as a global group of highly synergistic healthcare technology and services businesses.

About SoBold: SoBold Digital Marketing, founded by Managing Director Will Newland in 2014, work with companies and brands deriving from an impressive multitude of sectors including Healthcare, Fitness, Luxury, Hospitality and more. With a growing portfolio of over 80 brands, SoBold has a proven track record of delivering expertly crafted digital marketing solutions to help small and medium sized businesses grow and flourish.

We are delighted to become Clanwilliam Group’s exclusive digital partner. Clanwilliam is rapidly increasing their reach in the Healthcare sector and we at SoBold are proud to work with them to implement a powerful digital strategy.

Would you like these insights straight to your mailbox?

Your emailSubmit

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