kijo.co.uk Open in urlscan Pro
162.159.134.42  Public Scan

Form analysis
1 forms found in the DOM

POST /blog/web-design-guide/#gf_3

<form method="post" enctype="multipart/form-data" target="gform_ajax_frame_3" id="gform_3" action="/blog/web-design-guide/#gf_3" data-formid="3" novalidate="">
  <div class="gform-body gform_body">
    <div id="gform_fields_3" class="gform_fields top_label form_sublabel_below description_below validation_below">
      <div id="field_3_6"
        class="gfield gfield--type-email gfield--input-type-email gfield--width-full input-margin gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible"
        data-js-reload="field_3_6"><label class="gfield_label gform-field-label" for="input_3_6">Email<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label>
        <div class="ginput_container ginput_container_email">
          <input name="input_6" id="input_3_6" type="email" value="" class="large" placeholder="Your Email" aria-required="true" aria-invalid="false">
        </div>
      </div>
      <fieldset id="field_3_29" class="gfield gfield--type-consent gfield--type-choice gfield--input-type-consent gfield--width-full field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible"
        data-js-reload="field_3_29">
        <legend class="gfield_label gform-field-label screen-reader-text gfield_label_before_complex"></legend>
        <div class="ginput_container ginput_container_consent"><input name="input_29.1" id="input_3_29_1" type="checkbox" value="1" aria-invalid="false"> <label class="gform-field-label gform-field-label--type-inline gfield_consent_label"
            for="input_3_29_1">By submitting you agree to our <a style="color:#aaa;" href="/privacy-policy/">Privacy Policy</a></label><input type="hidden" name="input_29.2"
            value="By submitting you agree to our <a style=&quot;color:#aaa;&quot; href=&quot;/privacy-policy/&quot;>Privacy Policy</a>" class="gform_hidden"><input type="hidden" name="input_29.3" value="3" class="gform_hidden"></div>
      </fieldset>
      <div id="field_3_30" class="gfield gfield--type-honeypot gform_validation_container field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_3_30"><label
          class="gfield_label gform-field-label" for="input_3_30">Name</label>
        <div class="ginput_container"><input name="input_30" id="input_3_30" type="text" value="" autocomplete="new-password"></div>
        <div class="gfield_description" id="gfield_description_3_30">This field is for validation purposes and should be left unchanged.</div>
      </div>
    </div>
  </div>
  <div class="gform_footer top_label"> <button class="button gform_button" id="gform_submit_button_3"><span class="text-button">Submit</span><span class="text-icon"></span></button> <input type="hidden" name="gform_ajax"
      value="form_id=3&amp;title=1&amp;description=1&amp;tabindex=0&amp;theme=gravity-theme">
    <input type="hidden" class="gform_hidden" name="is_submit_3" value="1">
    <input type="hidden" class="gform_hidden" name="gform_submit" value="3">
    <input type="hidden" class="gform_hidden" name="gform_unique_id" value="">
    <input type="hidden" class="gform_hidden" name="state_3"
      value="WyJ7XCIyOS4xXCI6XCIxYjNhMTMyYzRhOTQ4YzEzMWNkMzZmM2UyZjhlMzY0ZlwiLFwiMjkuMlwiOlwiMGVjODg5ZDcwMDc3ZjdjNmFiMzcxZTI3NDg1OTMxNGNcIixcIjI5LjNcIjpcImZhZjFlMGZjMjYwYjVmNGM1OTRjMTY5YjFhMGQxNWEyXCJ9IiwiOTJiOWFlOTFlYWMxMjUwNzEyMGMwMWQ5NThhNTY0NTMiXQ==">
    <input type="hidden" class="gform_hidden" name="gform_target_page_number_3" id="gform_target_page_number_3" value="0">
    <input type="hidden" class="gform_hidden" name="gform_source_page_number_3" id="gform_source_page_number_3" value="1">
    <input type="hidden" name="gform_field_values" value="">
  </div>
</form>

Text Content

 * Work
 * Expertise
   Expertise
   
   BUILD
   
    * Web Design
    * eCommerce
    * Web Development
   
   MAINTAIN
   
    * KIJO Care
    * KIJO Cloud
   
   GROW
   
    * KIJO Optimise

 * About
 * Blog
    * Join Us
    * Contact
   
   Talk to KIJO

Talk to KIJO


 * Work
   
   

 * Expertise
   
   BUILD
   
    * Web Design
    * eCommerce
    * Web Development
   
   MAINTAIN
   
    * KIJO Care
    * KIJO Cloud
   
   GROW
   
    * KIJO Optimise

 * About
   
   

 * Blog
   
   

 * Join Us
 * Contact

Talk to KIJO


KIJO’S ULTIMATE GUIDE TO WEB DESIGN & CREATION

 * Websites
 * 15 min read
 * January 15, 2024



/ TABLE OF CONTENTS

Table Of Contents
 1. Strategy
    * Discovery
    * 
    * Project Goals
    * 
    * Sitemap
    * 
    * Existing Content Review
 2. SEO
    * More Backlinks = Higher Google Ranking.
 3. Content
 4. Design
    * Mood Board
    * 
    * Design System
    * 
    * Homepage Design
    * 
    * User Testing
    * 
    * Full Fidelity Designs
    * 
    * Development Preparation
 5. Development
    * Global Styles
    * 
    * Fully Integrated Design System
    * 
    * Best Practice Development Techniques
    * 
    * Design to Development Conversion
    * 
    * Thorough Testing
 6. Go Live
 7. KIJO Academy
 8. KIJO Care & KIJO Optimise
 9. Ultimate Guide to Web Design

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.

Table Of Contents
 1. Strategy
    * Discovery
    * 
    * Project Goals
    * 
    * Sitemap
    * 
    * Existing Content Review
 2. SEO
    * More Backlinks = Higher Google Ranking.
 3. Content
 4. Design
    * Mood Board
    * 
    * Design System
    * 
    * Homepage Design
    * 
    * User Testing
    * 
    * Full Fidelity Designs
    * 
    * Development Preparation
 5. Development
    * Global Styles
    * 
    * Fully Integrated Design System
    * 
    * Best Practice Development Techniques
    * 
    * Design to Development Conversion
    * 
    * Thorough Testing
 6. Go Live
 7. KIJO Academy
 8. KIJO Care & KIJO Optimise
 9. Ultimate Guide to Web Design


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

 * Blog
 * /
 * Websites
 * /
 * KIJO’s Ultimate Guide to Web Design & Creation

Share

Facebook Twitter LinkedIn


HOW TO FOLLOW UP A SALES LEAD LIKE A PRO

 * Websites
 * 6 min read
 * June 28, 2024

Sorry, your browser does not support inline SVG.

Ready to talk about your project?



Talk to KIJO

/ WHAT WE DO

 * Web Design
 * Web Development
 * eCommerce
 * KIJO Care
 * KIJO Cloud
 * KIJO Optimise

/ SIGN UP TO OUR NEWSLETTER


SUBSCRIBE TO NEWSLETTER



Email(Required)

By submitting you agree to our Privacy Policy
Name

This field is for validation purposes and should be left unchanged.
Submit

/ FIND US

Grosvenor House
11 St Pauls Square
Birmingham
B3 1RB

/ CONTACT US

0121 663 0523

Hello@KIJO.Agency

/ FOLLOW US

 * Ig
 * In
 * Be
 * Dr

COPYRIGHT © 2024 KIJO

Privacy Policy