When you think of excellent web design, what do you think of? The aesthetics? Some cool animations, bold images and video? Whilst that’s certainly part of it, designing websites involves so much more in order to really stand out from the crowd. That’s why we’ve put together KIJO’s Ultimate Guide to Web Design so you can understand the thorough ins and outs of what makes a truly good website.
KIJO’s co-founders Kirk and Jordan Thompson have honed and developed their methodology for over twenty years. They’ve launched over 100 business websites since KIJO’s launch in 2014. In our guide to web design, we’ll explain what each stage of our process entails. More importantly, we’ll unveil why each tailored step works to contribute to a successful finished product: a stunning, high-performing website that delivers results.
Before any meaningful process can begin, a focused but flexible strategy needs to be in place. This is how we kick things off with the companies we work with:
We dig deep and ask in-depth questions of our collaborators. Our questions include:
We explore these questions in a variety of ways. Initially we do so via a questionnaire and then follow up with meetings and our own exploration. This helps us to see if anything further can be uncovered; you can’t build anything you don’t fully understand.
Here we establish the objectives for the project and what needs to be measured.
We ask the client what their main project goals are. Then, depending on their response, we establish the metrics we need. For example, if it’s to increase traffic and conversions to the site, we’ll need to know:
Being specific helps make sure both sides of the collaborative teams are on the same page. It also supports in managing and meeting client expectations.
At KIJO, we create sitemaps using Figma; a collaborative web application for interface design. A sitemap will show all anticipated pages and all the sections with each page. These will be displayed as blocks that sit on top of one another; a wireframe of the website’s layout without any formal design. The sitemap’s output is the finalised structure that the future content for the site can be slotted into.
Sitemaps are an essential part of web design for us here at KIJO. They help us plan the content, identify the best user journey and it provides everyone on the design team a crystal clear direction.
Here’s an example of what a sitemap looks like on Figma. This is one we generated for our client ESPA Life at Corinthia London.
This is when we review what content is already in place, and experience the existing online offering for ourselves. This enhances our ability to identify what needs addressing and in what order. Our first step would be to establish whether a business we’re working with has a tone of voice (TOV) document.
A tone of voice document is a guide that introduces a brand’s voice and tonal values. TOV plays a very important role in brand perception. This is why we encourage every business to work with a tone of voice document. It provides detailed and practical information and support for all of those contributing to content. A good TOV document should also explain what the brand’s mission is and what the brand stands for.
We would then examine this TOV document and cross reference it with the content on the current site. We would ask:
KIJO would then establish which bits of copy are reusable, which need rewriting or what copy needs creating.
SEO is essential for expanding a customer base and attracting new and organic traffic to a site. When it comes to approaching the best SEO implementation for a business, we make sure that we understand who the target client is. Then, we conduct a full SEO audit of the company’s current website (if there is one) and other content. This includes technical SEO and offsite SEO:
Technical SEO: This involves analysing how fast the pages are loading, whether the pages are crawlable by search engines (can a search engine read and understand what the page is offering?), and whether a search engine can understand what’s on offer with ease. For example, are there keywords and is the structure of the site clear?
Offsite SEO: Offsite SEO refers to backlinks (how many external sites link back to the project’s site?), whether branded searches are happening, and social media activity – are people interacting and searching the brand/site on their social pages?
Our SEO report will show us:
From here, we use our experience and SEO understanding to make suggestions and identify opportunities for improvement:
Any good web design guide will also acknowledge that analysing competitor websites is good practice when considering yours. We’ll gather the data on a competitor site, see what keywords they rank for, their top performing pages and their biggest traffic driving keywords. We’ll also audit their backlinks too. Knowing the competition helps put us in good stead for understanding how to out rank them with the site we’re creating too.
Now we can collate our findings and put together an SEO strategy. This will include the target keywords we’ll be using in copy going forward, identifying backlink opportunities to capitalise on, and noting how we’ll achieve top-of-the-page rankings throughout the website’s structure.
Next up in our ultimate web design guide is content.
Essentially, content is everything that needs to be written, photographed and captured for the website. From the meta titles and descriptions (the text that’s visible on a search engine result), to the pictures of each product, all the way to the FAQs regarding the service or product on offer.
We put together a document that details the written content plan, detailing everything we’re going to need in written format. We then also put together a document that details the visual content plan. This highlights all the visuals we’re going to need to commission and/or source. Visuals range from photography, to videos, illustrations, and graphics.
Then, the content is produced. Production may involve commissioning a professional photographer or videographer to capture specific products or scenes, developing illustrations or graphics in-house to create a client’s vision. It most definitely involves instructing a professional copywriter too.
Here at KIJO, we offer copywriting in-house as part of our Design and Development packages. This enables us to remain constantly collaborative across teams and helps us deliver certain quality control for every client we’re working with. Some clients do wish to write copy themselves. However, we always recommend an experienced copywriter gives it at least a comprehensive read through.
Next up in our comprehensive web design guide, is Design. After we’ve completed our thorough discovery process with a client and considered SEO and Content, we get thinking about website design…
A website is something you look at and interact with; it’s an experience. So, here at KIJO, we like to lead with a mood board. We pull inspiration from sites that exist in the tone and realm of the project we’re working on and collate them together. We look at colours and fonts, how well a site creates impact, and unique factors we’d like to consider proposing and incorporating as the project develops.
Then, we collate the components that are necessary for ensuring consistency and attention-to-detail across our designs. We use the Figma platform for this process too. This consists of:
Here’s an example of what a Design System looks like on Figma. This is the one we used for our client Skyscape IT.
Next, the team put together a homepage design in order to obtain sign off on the visual direction for the rest of the site. This is also put together in Figma, presented to the client, and then opened up to feedback and redirection notes. This part of the process normally takes around two rounds of note implementation and design revisions.
Then, we unleash the prototype on users and conduct testing. We use Lyssna (formerly known as Usability Hub); a research platform which enables us to deeply understand a client’s audience and their response to our designs. The team uses this platform to ask a group of non-bias individuals – that fit our project’s target audience bracket – to run tests like:
We record the positives, negatives, direct feedback, and patterns in the UI across these multiple test-users (for example, perhaps a noticeable percentage got lost at certain points). Then, we discuss our next steps.
Next, we refine our designs building on our experience with the homepage. We assemble all of the fully-ready pages and sections of the sitemap using Figma. Then, we put together the different pages depending on screen size (desktop, tablet, mobile), the States board (these are visual representations that are used to communicate a component’s status or their interactive element) and the motion design (any visual elements the site has that require movement or motion).
For anything on the page that requires animation, the design team will leave annotations on Figma for the developer. They’ll provide examples of other sites that closely realise the animated style we’re trying to achieve too.
Once ready, the full fidelity design is presented to the client and they then provide feedback and notes. Again, this usually takes around two rounds of revisions until it’s absolutely perfect.
Now, we prepare a full handover to our development specialists. In order for this to be efficient and clean, we ensure to:
We hope you’re enjoying our thorough web design guide so far. Next, we’re taking you through our Development process. This is where our expert developers turn the designs into pixel perfect websites.
We build websites using WordPress – as do 43% of all websites on the internet! It’s the most comprehensive site-building software out there and the most widely recognised and used. During a full site build and edit, we utilise WordPress Global Styles which is where we can apply a change to the aesthetics of a site in one click; colours, fonts, spacing and the default appearance of blocks. This ensures the website has a cohesive look that can impress visitors and properly promote the brand.
A design system is a set of components, style guides, code snippets, relevant PlugIns, rules and documentations that make up a collection of resources. These can be used to build the user interface across the website, e-Commerce store, app and/or further UI designs. We make sure these are all fully integrated across the entire project scope which minimises the risk for irregularities.
We constantly refer to our best practice development techniques throughout our development process. This reduces unnecessary errors, saves time and ensures a quality deliverable. Having a go-to framework in place like this usually means we can commit to faster turnaround time too.
This is the process in which we take what was designed in the UX and UI stage; the prototype designed in Figma. Our developers then turn this into a responsive functional website which works across multiple devices. They convert the design into a fully functioning website following the design as closely as possible, following all the rules, styles and principles established in the design system.
We then run the website through our extensive testing and quality assurance process across desktop, tablet and mobile. We also run the website through our testing suite using all the modern browsers and devices. These will be the latest two versions of iOS and Android devices (mobile and tablet) and the latest two versions of Edge, Google Chrome, Mozilla Firefox and Safari browsers.
Once we feel confident everything’s ready, it’s time to set a live date for the new website. We want to build in enough time to create excitement for the launch. We see this as another opportunity to drive new and existing traffic to the site by having that launch date to work toward publicly.
Then, the website migration takes place. The website migration is where we switch seamlessly over from the old website to the new website, with no downtime. You can read more about our KIJO WordPress Hosting packages here.
As we head to the close of our Ultimate Guide to Web Design, we thought we’d highlight our KIJO Academy offering. When working with a client, after we’ve delivered a new website, we then make sure to provide the client the resources to empower them and their team in managing their site.
We provide videos, screen recordings and how-to guides for WordPress maintenance and management. In addition, we also provide up to 8 hours of direct, specific training too. Clients are also offered access to our KIJO Knowledge Base. This is a database of frequently asked questions we’ve received over our 9 years as an agency. These can be referred to whenever a client needs to.
Alternatively, they may just want to sign up to our KIJO Care packages…
Here at KIJO, we offer care packages to suit a website’s management needs. From premium hosting to maintenance updates with monthly reports, all the way to bug fixing, so a site is always secure and working optimally. Our care packages include WordPress Hosting and WordPress Maintenance.
Why not read more about our KIJO Care offerings here?
At KIJO, our KIJO Optimise service offers a professional, in-depth audit of your site. We delve into your website’s health, assess content quality with SEO in mind, analyse your competitors and uncover things like keyword and backlink opportunities. We will then develop a comprehensive roadmap pinpointing the most impactful optimisation tasks, and then action them for you.
You can read more about our KIJO Optimise packages here.
And there you have it; the KIJO Ultimate Guide to Web Design. Whilst this isn’t the only way to design a website, it’s certainly the methodology we’ve thoroughly tried, tested and refined. We’ve found that it’s enabled us to deliver high-end websites that meet – and many times, go above – client expectations.
If you think the team at KIJO can help you achieve your website aspirations, don’t hesitate to get in touch today.
