Web Design Background
KIJO’s Ultimate Guide to Web Design & Creation

KIJO’s Ultimate Guide to Web Design & Creation

  • 15 min read
  • January 15, 2024

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.

Strategy

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:

Discovery

KIJO's Brief Design Presentation

We dig deep and ask in-depth questions of our collaborators. Our questions include:

  • What does the business do and what makes it unique?
  • What problem do you solve for your clients?
  • What do you like/dislike about your current online offering?
  • Who is the primary/secondary website user?
  • What are your business goals? 

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.

Project Goals

KIJO's Project Goals

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:

  • What is the current average amount of monthly website traffic? 
  • What are the top 3 visited pages on the current site?
  • How many visits do these 3 pages get per month, on average? 
  • What is the current average session time of a user?
  • How does the business class a website conversion (e.g. enquiry, lead, purchase)?
  • What are the current Google Lighthouse scores of the current site?

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. 

Sitemap

KIJO's site map example

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.

Existing Content Review

KIJO's content review

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:

  • Does the current copy accurately reflect the brand’s purpose?
  • Does it communicate with the user that the brand has a unique value proposition?
  • Does it sound too similar to competitors?
  • Is it misleading to the user in any way?
  • Is there a brand story, and does the existing copy tell it?

KIJO would then establish which bits of copy are reusable, which need rewriting or what copy needs creating.

SEO

KIJO's SEO review

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:

  • Current keyword rankings and stats for all current pages
  • Current site structure (or Information Architecture [IA])
  • Current backlinks (which external sites are linking to the current site)
  • Competing SEO domains (which other sites are using the current target keywords)
  • Directly competing domains and what they’re ranking for
  • A content audit of the current target keywords assessing whether they’re strategically and optimally placed

From here, we use our experience and SEO understanding to make suggestions and identify opportunities for improvement:

  • Are the best keywords being used?
  • Is the site structure optimal?
  • Are there more backlinking opportunities?
  • What’s the best way to compete with other shared SEO ranking domains?

More Backlinks = Higher Google Ranking.

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.  

Content

KIJO's Content plan doc

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.

Design

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…

Mood Board

KIJO's moodboard example for client Skyscape IT

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. 

Design System

KIJO's design system example

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:

  • Colours – namely Global Colours which is the main colour palette for your site, including primary, secondary, tints and status colours
  • Typography – these are the global header styles, global body copy styles, and typography combinations that are used across a website
  • Grid & Spacing – this is a 12 column design grid for a desktop site (6 for tablet and mobile), and global spacers which are set amounts of spacing used to separate each of the elements on a site. 
  • User Journey (UI) Elements – these are your global buttons (primary, secondary and icon buttons), global controls (checkboxes, radio buttons and toggles), fields and inputs (text fields, dropdown menus etc.)

Here’s an example of what a Design System looks like on Figma. This is the one we used for our client Skyscape IT.

Homepage Design

KIJO's Skyscape IT homepage creation

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.

User Testing

KIJO's ProMD Health testing page example

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:

  • Navigation Tests – for example, this will assess how easily they find getting from one point to another, like a homepage to a product page
  • 5 Second Tests – this measures first impressions and user recall, assessing if the design is effectively and quickly communicating it’s intended message
  • other design tests
  • A/B Tests – also known as Split Testing, this test shows one version of a site to Group A and another to Group B. We then assess which is performing better for users. 

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. 

Full Fidelity Designs

KIJO's site designs in software Figma

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.

Development Preparation

KIJO's development preparation in Google Drive

Now, we prepare a full handover to our development specialists. In order for this to be efficient and clean, we ensure to:

  • Update the design system, if applicable
  • Mark assets for export & export locally
  • Host a development handover meeting
  • Create development milestones
  • Create acceptance criteria

Development

HTML code on a laptop screen in a window on a black desk. A small cacti in a glass vase sits to the laptop's right.

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. 

Global Styles

KIJO's global styles example

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.

Fully Integrated Design System

KIJO's design system example

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.

Best Practice Development Techniques

A screen of html code

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. 

Design to Development Conversion

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.

Thorough Testing

KIJO's example of thorough site testing

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.

Go Live

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.

KIJO Academy

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…

KIJO Care & KIJO Optimise

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

Ultimate Guide to Web Design

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.

What Makes WordPress Slow Down And How To Prevent It

What Makes WordPress Slow Down And How To Prevent It

Sorry, your browser does not support inline SVG.