How To Build An Amazing Website in 2022 by steplabs

IMAGERY PRODUCED BY:

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.

Beforedevelopment.beginning to build a landing page, web app or ecommerce platform for a client, it critical to identify the most appropriate tech stack to build on.

Discovery Workshops Competitive Analysis

Setting Up For Success How to Build a World-Class Website in 2022

At Step Labs, we believe that building a world-class website can be broken down into a science. This guide aims to break the process down into a systematic 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

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 pureClarifyingcode. the Vision

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.

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 multipayment gateway integration and omni-channel selling.

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.

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

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 TheCompetitiveDiscoveryAnalysisfirstoftheseshould 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.

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.

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 Bycompetitors. 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!

Understanding Your Customer Maze Survey

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.

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.

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, ecommerce store, mobile app or landing page.

06 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.

HavingWireframesWhatisawireframe?clarifiedyourbranding, 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 upEssentially,wireframes. 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.

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.

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

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.

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.

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

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.

UI Design in Figma Once your wireframes are completed, you (or your agency) should begin designing your interface in pixelperfect depth via Figma. Why FigmaFigma?isacollaborative

Grid Layout

The AfterComponentsyouhavethisset out, its time for the fun part. Now you can begin designing the individual elements. 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.

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?

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

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 Settingmodals. 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. 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.

The Style Guide Process Optimisation 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

What is Webflow?

Thepop.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.

12 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: understand.commonWizardrywouldwiderWeInManagingBuildingyouwillclearithandsystembuiltThiswebsite/client-first-cloneablehttps://webflow.com/made-in-webflow/cloneablecontainsastyleguidepagealongwithpre-classesthatadheretoFinsweet’sClientFirstSystem.Theregulatesyourwholebuildandenablesasmoothovertoclientsuponprojectcompletion.Theideabehindistouseaspecificclassnomenclatureandstructurethatisandeasytounderstandfornon-technicalclients,whoneedtoreviewyoursiteanduseWebflowthemselvesafterhavedeliveredthefinalproduct.inWebflowClassesWebflowitisexceptionallyimportanttoremainorganised.highlyrecommendfollowinganamingconvention,andframeworkwhenbuilding.Ourtop3recommendationsbeKnockoutbyAllanPoe,Client-FirstbyFinsweet,orbyTimothyRicks.Theseframeworksaidinavoidingpitfalls,andkeepingyourbuildcleanandsimpleto

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 highlyspecificJavaScript libraries, requiring tools and plugins complete with conflicts, quirks, and obscene code-based learning curves.

Building Efficiently 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.

Search Engine Optimisation (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,

CSS transitions are very lightweight, and will not slow your load speed but do add a great deal toward the quality of your overall Webflowsite.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.

14 CSS

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.

BuildingJavascriptTransitionsInteractionsatop-siterequires

15 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. relevant and popular towards user search queries, and as a consequence, search engines rank them better.

Write Meta Descriptions. A meta description summarises the content o your pa e, bene its the user the search en ine. O ten the results that show up in oo le are metadescriptions. These should be between 50 160 characters, but can be up to 300. On dynamic pa es you should set the dynamic pa e up the same way as you did or the title ta s Set up your Open graph settings. This is the in ormation that shows up when sharin in ormation across socials. You can add an open raph description an open raph URL. All you have to do is o to the asset panel and copy to clipboard on an ima e. Then just paste it into to the raph settin s ta .

Keep URL’s short. Short URL’s rank better than lon URL’s. Easier to read, and easier to remember. I you are chan in the URL, make sure to set up redirect links to avoid broken links Avoid duplicate or thin content. I every pa e is unique, you don’t have to worry. But when usin a CMS, duplicate content can easily exist, the irst solution is to add unique descriptions to each cate ory pa e, and have everythin on one pa e. Alternatively, you can tell oo le not to rank certain cate ories, althou h 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 h 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.

Ensureadvice.yoursite 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

Makeforwardsyour 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.

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

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.

19 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 Buildpagesinternal 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 o ent they can see exactly where they are Add Semantic HTML tags. Use se antic 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 breadcru bs. Your ain 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 ain page content ie ads, sidebar etc. The address tag is good for phone nu bers, social edia 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 na ed ‘check y links’ which will show you if you have broken internal links, and how to rectify the . Use simple language. Write at a 5th grade level, don’t overco plicate language where possible. Ai for brevity and concision within your writing.

Firstly, some definitions.

21 Add your website to Google my Business. Helps you get found on Google Maps & google sear h results. Sign up on google. om/business Core Web Vitals Crafting a good user experien e is the best SEO optimisation strategy. Therefore, establishing strong ore web vitals may be the most important se tion of the three main pillars of on-page SEO.

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 be ome intera tive is referred to as FID.

Cumulative Layout Shift: This tests for visual stability, is the site stable when loading? Re ently, Google has in reased the importan e of this metri .

22 Add your website to Google my Business. Helps you get found on Google Maps & google sear h results. Sign up on google. om/business Core Web Vitals Crafting a good user experien e is the best SEO optimisation strategy. Therefore, establishing strong ore web vitals may be the most important se tion of the three main pillars of on-page SEO. Poor LCP is aused by slow server response time, render blo king JSS or CSS, slow resour e load times, and lient-side rendering. Poor FID is aused by long tasks, long JS exe ution, large JS bundles, render blo king Javas ript Some tips for redu ing your LCP Self h st f nts. If you use Google fonts, you an slow down your first ontentful paint. Self-host these fonts. While this is slightly te hni al, tutorials an be found easily and it will improve your site’s performan e Av id using Recaptcha if y u can. Adding a native re apt ha blo k to your site slows it down signifi antly. On e added to a site, it is loaded on every page on your website even after you delete it.

23 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 li hter & don’t affect site performance as much Delete unused interactions. Delete unused CSS. Do this by clickin on the style mana er panel and clickin on it. Finsweet have an extension which helps you to do this Delete any non-critical javascript, delete any nonessential third party scripts ie comment wid ets, school social sharin wid ets. 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 li hter & don’t affect site performance as much Delete unused interactions. Delete unused CSS. Do this by clickin on the style mana er panel and clickin on it. Finsweet have an extension which helps you to do this Delete any non-critical javascript, delete any nonessential third party scripts ie comment wid ets, school social sharin wid ets.

24 Minimise CLS. This is caused by images without dimensions, ads, embeds & rames without dimensions, dynamically injected content & web onts causing a lash o unstyled content Avoid CLS by animating elements using trans orm properties Avoid inserting elements above other elements unless it is caused by a transition ie opening an Alwaysaccordioninclude size attributes on your images & video elements Don’t keep it as ‘auto’, write it out Following these pointers will put your site in the top 1% o websites in terms o SEO optimisation, and is something that we would recommend or all sites Finally,Testingwe have testing strategies This is another step that is o ten skipped, but one that can help you identi y and mishaps or issues be ore ormally launching You should leverage Web low’s native staging branch, Web low io domains These will allow you to publish your site to a web low io link that you can provide access to or a limited number o testers This is a good practise, as it allows you to gather eedback and identi y issues rom a wider number o people

Youquestions.should

ItConclusionisnoteasyto 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 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.

PRODUCED BY: