How To Build A World-Class Website In 2022

‍

‍

Discovery Workshops + Competitive Analysis

‍

Setting Up For Success

Before beginning to build a landing page, web app or e-commerce platform for a client, it critical to identify the most appropriate tech stack to build on.

In 2022, the quality of low-code tools such as Shopify, Webflow, Magento, and even Woocommerce has developed to a point where building out from scratch is seldom the most efficient, or optimal route.

For example, if you want to build an e-commerce store with a relatively normal supply chain set-up, our recommendation would be Shopify. The team at Shopify have built a relatively understandable front and back end, an expansive ecosystem of apps which can supplement your site, a vast collection of themes, seamless multi-payment gateway integration and omni-channel selling.

However, if you wanted to build an ultra-optimised landing page to generate sign-ups for your new app; Shopify would be a sub-optimal choice. For this, we would recommend Webflow. As the most powerful visual code editor for writing HTML, CSS & Javascript, it allows developers to fully-customise the experience of your site for a fraction of the price that this would cost with pure-code.

Having clarified the appropriate tools for the site that you want to build, it is important to establish the vision & guidelines that you want to build your website with.

It is critical that you give yourself direction (if building your own site), or put your agency in the best possible position to execute on your goal.

You must work out what kind of message you want to send to the customer, as this is communicated through each tiny component of any online site or store.

The most effective way to do this is by collaborating with your employees/co-founders, or interacting with your agency across two separate sessions or workshops.

‍

Brand Discovery

The first of these should be a Brand Discovery Workshop (made on figma.com). You will work with your team /agency, aiming to align all stakeholders with the vision for the brand. This is achieved through several collaborative exercises, such as a visual keyword exercise, mission statement alignment, (brief) competitive analysis, creation of a target persona, and clarification of brand tone.

This session will enable you and your team to make informed and educated design decisions that are approved by your clients, and that won’t come back to bite you later.

‍

Competitive Analysis

The next workshop that we recommend undertaking to achieve exceptional results is a competitive analysis session.

This helps you and your stakeholders better understand your position in the market. Not only does it vastly improve your understanding of the end-customer, but it also serves to validate assumptions on branding further. At the end of this, you will understand your customer emotions, have boosted your value proposition, and will be able to write more effective copy. There are generally two main parts to this session: an advanced strategy analysis exercise, followed by a style & design evaluation of 3 of your primary competitors.

By completing these two sessions, you can be sure that you and your client are aligned on your vision for the site, and you can prepare to move forward and begin the design and development process!

‍

User Research

User Research is often skipped by web-developers & designers, but it is arguably the most important step of them all. It is obsolete to build a site that you are not sure people actually want. It is imperative to gain as much data, and knowledge as possible about the site you want to build to support, validate, and substantiate your assumptions.

‍

Understanding Your Customer

User research is vital for understanding how customers in your clients’ industry really feel, and for identifying real life pain points that they experience. Once you understand exactly what holds people back from shopping with certain retailers or using certain sites, you will be in a much better position to produce an efficient and effective product for your client.

The most cost-effective way to undertake user research is through leveraging Maze. This platform allows you to create challenges, surveys & tasks for your ideal customers to participate in; allowing you to get valuable data, for minimal cost.

You can create a survey on maze.co using your findings from the previous two sessions, and by working with your web-development agency to create specifically tailored questions, which will then be send out to the target audience. You can then analyse this data and produce a report, which will help massively when figuring out what the main priorities are for building your web app, e-commerce store, mobile app or landing page.

This process is often skipped, but can be the difference between producing a site that is truly world-class, or a site that is average. We have never worked with a client that has not benefitted from undertaking some form of user research.

‍

Wireframing

Having clarified your branding, the competitive landscape, and substantiated your assumptions through user research; you are now in a great position to begin building.

The first step when designing any software is always to draw up wireframes.

Essentially, they are 2D visual sketches which outline the skeletal framework of a website or digital product’s interface. They are like blueprints which provide a lay out and give guidance on what elements will go into your design.

Wireframes help us to ideate rapidly, and identify potential issues with designs before they reach development. This saves you both time, and money.

The sketches that you draw up when wireframing are not meant to be pixel-perfect. In fact, quite the opposite. Their purpose is to be simple and changeable, so that you can gather input from all parties involved in your project and make necessary adjustments without causing major disruption.

Wireframes should not be detailed with colouring, fonts and logos. This avoids styling issues, which very often become major blockers in the design and development process. Rather, when wireframing, you should focus on UX, space allocation, functionalities, intended behaviours, and content prioritisation.

Wireframes are usually created by specialist designers, but they should be simple enough so that everyone involved in your project, from clients to developers, can understand your ideas and visualise what you are trying to achieve with your designs.

‍

Low vs High Fidelity Wireframes

There are two different types of wireframes: low-fidelity and high-fidelity.

Low fidelity wireframes are very simplistic and quick to develop. They are great for team project communication and ideation, and are usually more abstract, using simple shapes and filler content to visualise the basics of the design of your interface.

High fidelity wireframes build on this and add more detailed elements, making them ideal for documentation. They include information about each particular component on the page, including dimensions, behavior, and actions relating to interactive elements. They may also include the first aspects of your colour palette, allowing you to visualise your site in more depth; in a short period of time.

Upon completion, and agreement that the low-fidelity wireframes are built to a satisfactory standard; you should move on to higher-fidelity wireframes.

‍

UI Design in Figma

Once your wireframes are completed, you (or your agency) should begin designing your interface in pixel-perfect depth via Figma.

Figma is a collaborative SaaS UI design software which is cloud-based, meaning it can be accessed with internet connection from any device, anywhere in the world. It’s ease of use and accessibility have put it ahead of other design tools such as Adobe XD and Sketch.

So, that’s all well and good, but how do we actually go about building out our UI design on Figma?

We have talked about wireframes above, so you will have these in place already. These wireframe sketches form the basis of your designs, like a foundation that you can build from that will set you on your way to complete the remaining structure of your website. What next?

Before we explain the process of designing individual components, it’s worth mentioning one commonly used guideline for Figma design: the grid system. Utilising a grid allows you to place all elements in a consistent order and keep the layout visually accessible to collaborators who review the content.

We recommend building all interfaces with a 4pt grid. This is followed by both Google, and Apple. It makes the process of using variable units such as REM or EM significantly smoother.

After you have this set out, its time for the fun part. Now you can begin designing the individual elements. Bear in mind that every component you design should be done according to what you have agreed with the client in your previous meetings and workshops. You should have set out a colour palette, typography guide and an image collection that will be used throughout.

First, you need a navigation bar or a header area. Next comes the ‘hero’ section, the first introductory section of the website which often includes a large image with a catchy description. Then you should complete one of the most vital parts of UI design, the typography: text, font and sizes.

You may then want to design your forms and input fields where the visitor performs an interaction and writes on the site. Next come the buttons, which lead visitors to new pages or pop-up windows. Some other common features of UI design that you may need to implement are tables, cards and modals.

‍

Setting up Style Guides || Figma to Webflow

Now that you have built out your design, it is time to begin development. If you are building a landing page, we recommend using Webflow for the reasons expressed in the first section of this e-guide.

‍

What is Webflow?

Webflow is an extremely powerful visual website builder. It does not require any coding skills to be used effectively because it writes the code for you as create and edit your designs visually. Webflow offers dual benefits: the accessibility of a visual editor, but also the flexibility of building a custom website from scratch.

Designs in Figma are static, but this does not mean that the same is true when imported to Webflow. You have the ability to implement animations and interaction in Webflow that will breathe life into your Figma designs and really make them pop.

‍

The Style Guide

The first step of your Figma to Webflow process is setting up a Style Guide in Webflow. This guide acts as the base point for all aspects of your design, and will govern all your design decisions, keeping your headings, typography, colours, and spacing consistent throughout.

One way to speed this up and make it a whole lot easier is by using the Finsweet client first cloneable, which can be downloaded here: https://webflow.com/made-in-webflow/website/client-first-cloneable

This cloneable contains a style guide page along with pre-built classes that adhere to Finsweet’s Client First System. The system regulates your whole build and enables a smooth hand over to clients upon project completion. The idea behind it is to use a specific class nomenclature and structure that is clear and easy to understand for non-technical clients, who will need to review your site and use Webflow themselves after you have delivered the final product.

‍

Building in Webflow

In Webflow it is exceptionally important to remain organised. We highly recommend following a naming convention, and wider framework when building. Our top 3 recommendations would be Knockout by Allan Poe, Client-First by Finsweet, or Wizardry by Timothy Ricks. These frameworks aid in avoiding common pitfalls, and keeping your build clean and simple to understand.

We recommend finding a method of building efficiently across breakpoints and sticking to it. As with all websites, you will be building across several breakpoints (Monitors, Desktop, Tablets, and Mobile). It is not optimal to build the full desktop site, and then the full tablet site.

How you decide to build efficiently is largely a matter of personal preference, and it will take some testing. One way that you can build quickly is to develop a full section in one breakpoint, and then build that section for the other breakpoints. This will help you to identify issues quicker, and make de-bugging them much faster than if you have to do everything at the end.

‍

Adding Interactions & Transitions

Over the years, the web and our digital devices have become responsive and powerful. As designers and developers, we have access to tools that let us build complex interactions and impressive animations.

Traditionally, these tools are often built with highly-specificJavaScript libraries, requiring tools and plugins complete with conflicts, quirks, and obscene code-based learning curves.

In the Webflow Designer, we have access to all the tools we need to manipulate this content with insanely granular control — by building interactions visually.

CSS Transitions

Building a top-site requires attention to detail when building additional states for functionality. It is wise to think carefully about what hover, clicked & focussed states you apply to buttons, forms, and other functional elements within your site.

CSS transitions are very lightweight, and will not slow your load speed but do add a great deal toward the quality of your overall site.

Javascript Interactions

Webflow also gives you the option of adding interactions to your elements, allowing for more complex animations.

Used appropriately, these animations can transform a site from top 10% to top 1%, but require a lot of skill & expertise to execute optimally.

They can also slow your build down, Javascript animations take longer to load than CSS transitions and thus we would advise you to operate with measured caution.

‍

SEO

SEO means Search Engine Optimization and is the process used to optimize a website's technical configuration, content relevance and link popularity so its pages can become easily findable, more relevant and popular towards user search queries, and as a consequence, search engines rank them better.

Within web-development, SEO consists of three interconnected, but often misunderstood categories:

• Baseline optimisation

• Accessibility

• Core web vitals

‍

Baseline Optimisation

This section will explain the must-do’s to achieve baseline optimisation SEO for your website.

• Add Title Tags. Title tags are a code tag that help you give a title to a page, these should be descriptive but also short. It is a good place to sprinkle in a few keywords. The first thing that people see in Google. The ideal length is somewhere around 50-60 characters. Can be changes through title tag in webflow pages. You should do this for both static & dynamic pages. You can apply a title tag to all blog posts in a collection, Add a field called title tag, also write SEO for the client.
• Write Meta Descriptions. A meta description summarises the content of your page, benefits the user & the search engine. Often the results that show up in google are meta-descriptions. These should be between 50 & 160 characters, but can be up to 300. On dynamic pages you should set the dynamic page up the same way as you did for the title tags.
• Set up your Open graph settings. This is the information that shows up when sharing information across socials. You can add an open graph description & an open graph URL. All you have to do is go to the asset panel and copy to clipboard on an image. Then just paste it into to the graph settings tag.
• Keep URL’s short. Short URL’s rank better than long URL’s. Easier to read, and easier to remember. If you are changing the URL, make sure to set up redirect links to avoid broken links.
• Avoid duplicate or thin content. If every page is unique, you don’t have to worry. But when using a CMS, duplicate content can easily exist, the first solution is to add unique descriptions to each category page, and have everything on one page. Alternatively, you can tell google not to rank certain categories, although this will require some technical know-how.
• Add Global Canonical tags, sometimes an article from your site will be republished. By adding a canonical tag, google understands what the original content was. You do this in Webflow by going to site settings and setting a global canonical tag URL.
• Add your site to google’s search console. This gives you access to google search data and allows you to submit your site map so your site is indexed on google. This is very simple to do on Webflow, simply choose the HTML tag option, and paste your verification ID into site settings. You only need to submit your website to Google once. A sitemap is a page on your site which tells search engines how to crawl your site. Webflow does this automatically for you. Under project settings, you have a section called sitemap, if you auto-generate sitemap you just click this. Future new pages will be automatically updated.
• Use heading tags for the right purposes. Only have 1 h1 tag on a page. Don’t skip heading levels, having the right heading structure benefits both search engines & humans, and helps Google’s web crawlers to understand the structure of your page.
• Add image alt tags. Alt tags help people with screen readers understand images. Alt tags show as a placeholder for your images. They fall into baseline optimisation and accessibility. Keep them descriptive, describe the image. Make sure to get alt text from the blog field. By selecting a static image, you can also add an alt tag. Set ‘get alt text from asset’, so that whenever you use that image again it will grab it.

‍

Accessibility

Making your site accessible provides it with a massive SEO boost. Check out Webflow’s accessibility checklist, the A11y Project Checklist & the Finsweet accessibility for more extensive advice.

• Ensure your site is mobile friendly. Make sure people can access your site from their phones. Publish your site and then inspect by choosing several devices to see how the site looks on different devices. Once you make sure your site is not falling apart w no horizontal scroll, you can move forwards.
• Make your typography accessible. Use a variable unit such as REM or EM to build your website out instead of a static unit like pixels.
• Make sure to have enough contrast between text and backgrounds. You can use the contrast checker in Webflow to achieve this outcome simply.
• Set your line height for paragraphs between 1.3 and 1.7. Should never be below 1.3, this ensures maximal legibility for your content.
• Use highly legible fonts. Pay particular attention to the letters i, l & I + m & n.
• Keep your line length between 45 & 75 characters per line. The ideal line length is between 45 & 75.
• Use left line alignment for longer text blocks, don’t align blog posts centrally.
• Aim for a flat structure with your site. This means the user can access any page on your site from any page. Keep most important pages at the top level, and the least important at the bottom. Make sure you don’t have orphan pages (pages that are not linked to any page in your site).
• Make a sitemap page that is accessible from your homepage. You should build a sitemap for humans too. This should be a section that contains links to all pages on your site. Minimises the chance of having orphan pages.
• Build internal links where it makes sense, ie links inside of paragraphs. Google pays attention to what is put inside of hyperlinks, make this specific not just ‘read more’.
• Add breadcrumb navigation to your site, helps orient the user, at any moment they can see exactly where they are.
• Add Semantic HTML tags. Use semantic tags to help people understand our site. Inside of Webflow, you should switch over to the setting panel & select your HTML tag. Header describes the header of your website ie nav bar & hero. The footer tag should be added to your footer section. Any navigation list should have a nav tag. Even breadcrumbs. Your main should be divided into sections. You need to use a section tag aswell. You can add a section tag to any div. The article tag specifies independent self contained content ie blogs. An aside explains content which isn’t in the main page content ie ads, sidebar etc. The address tag is good for phone numbers, social media handle etc.
• Remove broken internal links from your website. If you link to a site and they change the URL, that isn’t a big deal. But broken internal links are bad. Download an extension named ‘check my links’ which will show you if you have broken internal links, and how to rectify them.
• Use simple language. Write at a 5th grade level, don’t overcomplicate language where possible. Aim for brevity and concision within your writing.
• Add your website to Google my Business. Helps you get found on Google Maps & google search results. Sign up on google.com/business

‍

Core Web Vitals

Crafting a good user experience is the best SEO optimisation strategy. Therefore, establishing strong core web vitals may be the most important section of the three main pillars of on-page SEO.

Firstly, some definitions.

Largest contentful paint: The time it takes the site to load is referred to as LCP.

First Input Delay: how long it takes a site to become interactive is referred to as FID.

Cumulative Layout Shift: This tests for visual stability, is the site stable when loading? Recently, Google has increased the importance of this metric.

1. Poor LCP is caused by slow server response time, render blocking JSS or CSS, slow resource load times, and client-side rendering. Poor FID is caused by long tasks, long JS execution, large JS bundles, render blocking Javascript.

Some tips for reducing your LCP:

• Self-host fonts. If you use Google fonts, you can slow down your first contentful paint. Self-host these fonts. While this is slightly technical, tutorials can be found easily and it will improve your site’s performance.
• Avoid using Recaptcha if you can. Adding a native recaptcha block to your site slows it down significantly. Once added to a site, it is loaded on every page on your website even after you delete it. If you need to add it, use custom code and only add it on the page you need it.
• Minify your code. You can do this in just a few clicks on Webflow, in the site settings.
• Don’t overuse interactions. Complicated javascript interactions slow down your site by a lot. Use as few as possible, or use CSS animations wherever possible. CSS animations are much lighter & don’t affect site performance as much.
• Delete unused interactions. Delete unused CSS. Do this by clicking on the style manager panel and clicking on it. Finsweet have an extension which helps you to do this.
• Delete any non-critical javascript, delete any non-essential third party scripts ie comment widgets, school social sharing widgets.
• Optimise your images. Keep them at the size they should be. Resize the image to the width of the parent element. You can make the element exactly twice the size to optimise for retina displays.
• Compress your images before adding them to Webflow. You can do this by using a tool called tiny.png.
• Lazy loading. Make sure to lazy load your images. Webflow does this automatically now.
• Minimise CLS. This is caused by images without dimensions, ads, embeds & frames without dimensions, dynamically injected content & web fonts causing a flash of unstyled content. Avoid CLS by animating elements using transform properties. Avoid inserting elements above other elements unless it is caused by a transition ie opening an accordion.
• Always include size attributes on your images & video elements. Don’t keep it as ‘auto’, just write it out.

Following these pointers will put your site in the top 1% of websites in terms of SEO optimisation, and is something that we would recommend for all sites.

‍

Testing

Finally, we have testing strategies. This is another step that is often skipped, but one that can help you identify and mishaps or issues before formally launching.

‍

Testing

You should leverage Webflow’s native staging branch, Webflow.io domains. These will allow you to publish your site to a webflow.io link that you can provide access to for a limited number of testers. This is a good practise, as it allows you to gather feedback and identify issues from a wider number of people.

We also recommend implementing Hotjar, or other heatmapping software. These platforms can provide you with heatmaps of user activity, providing you with more valuable data for improving & further optimising your site.

‍

Conclusion

It is not easy to build a world-class website, but it can be broken down and systematised into a structured series of steps. If you execute each of the steps above, we can guarantee that you will have a much better result than if you went straight into development.

From all of us at Step Labs, we hope that you found value in this e-book. Please do get in touch if you have any questions.

‍

—

We are Step Labs - a Webflow & Shopify web design & development agency! If you would like to build a beautiful and high-performing website, contact us at victor@steplabs.xyz.

‍

Written By: Matthew @ Step Labs