An illustration of a house made up of multiple graphic elements in front of a forest.

Whitepaper

A guide to building your website

By Ben Walker on 26 March 2024

1. Introduction

You would be forgiven for thinking that building a house and designing a website are two entirely different things, but there are a number of parallels.

Revising the blueprint before laying the foundations for a house isn’t so different from finalising the sitemap and choosing a content management system. Deciding on the layout of a home could be compared to wireframing or user experience (UX) design. Moreover, deciding on the style of a room is similar to choosing which brand colours, images or custom graphics to incorporate into the website design. Each process requires a similar level of planning and development to achieve a fully functional and aesthetically pleasing final outcome – with the flexibility to build an extension at a later date.

When it comes to the design and build of your website, a creative agency will consider a wide range of elements to ensure it engages your target audience and provides a seamless user experience. Whether you’re an established organisation or a start-up, first impressions count, and your website is no exception. Although there are many templates out there that allow you to build a website, they come with numerous limitations. A template website cannot differentiate you from your competitors or be tailored to seamlessly reflect your brand in the same way as a bespoke solution. A custom-built website is created with longevity in mind, designed to build brand awareness and support the growth of your business.

Within this white paper, we provide an in depth insight into the key stages involved in the design and build of a website. This will help you to refine the process and to avoid any pitfalls that may cost your business money or credibility in the future.

Person drawing and pointing at a white board.

2. Planning

Similar to the construction of a house, comprehensive planning is essential to ensure you lay a strong foundation and future-proof your website. In this section, we cover the main components of the planning stage, including research, setting strategic goals, creating a sitemap and choosing the all-important domain name.


Research

Working collaboratively with a design agency, the research stage will often begin by defining the demographic of your target audience. You will also explore your audiences’ characteristics and behaviours and begin to determine the key messages you would like to communicate.

Looking at well-designed and fully responsive websites can provide you with an invaluable insight into what features and functions work well. Moreover, analysing your competitors’ websites can help you to understand what you can do to differentiate yourself effectively.

When it comes to looking at design styles, remember that trends come and go. Try to focus on creating a website that will stand the test of time in terms of its features, functionality and aesthetics.

Take inspiration from brands like Patagonia
During the research stage, it is useful to look at leaders in your field and analyse how their website is contributing to the growth of their business.

For example, if you are a fashion retailer, Patagonia is a great point of reference. In addition to being clear and easy to navigate, the website features bold and emotive call to actions and high-quality, beautiful imagery, reinforcing the brand’s message and values. These are just a few standout features of the Patagonia website, which has built a loyal client base and achieved global success.

A laptop open to the Patagonia homepage.
Patagonia | Ecommerce website

If you are unsure where to start with your research, there are a number of free social media platforms which provide limitless creative inspiration:

  • Behance: Primarily used by designers, this platform showcases a broad range of creative content, which is displayed in the form of projects. Once you have set-up a profile, you can follow accounts of your choice, curating your feed with relevant imagery.
  • Pinterest: This platform allows you to create your own custom boards and ‘pin’ any images that catch your eye while scrolling different websites. Boards can be public or private and are ideal for organising your ideas into easily digestible categories.
  • Dribbble: Established as a community for professional creatives to share their work, develop their skills and reach potential employers, this social network showcases design talent in abundance. This is a great place to start if you need creative inspiration for your website.
An iMac computer open to the Pinterest website.
Pinterest | Social media platform

Strategic Goals

Establishing and setting strategic goals for your new website can help to hone your focus. First and foremost, your goals should consider your target audience, but they could also cover some of the following key areas:

  • Help to drive sales
  • Build brand awareness
  • Provide a platform for advertising
  • Encourage and facilitate interaction
  • Increase customer loyalty
  • Provide a central hub to share information

Once you have established your website’s objectives, it can be helpful to sort them by their level of priority.


Sitemaps

A sitemap outlines all of the content and pages on your website, and how this information is interlinked. This structural plan is used to determine all of the pages you would like to feature on your website, from the homepage and main navigation items, to all of the sub-pages that sit below. It is important to finalise your sitemap before moving on to the design stage. This will ensure the design takes into consideration the extent of content, helping to plan the layout of key elements like the main navigation.

In addition to informing the design of your website, sitemaps are also key to building on your search engine optimisation (SEO) – an area we’ll cover in more detail in our next whitepaper.

Top tip

GlooMaps is a free tool that can be used to quickly and easily create your own visual sitemap. Once created, it can also be saved and shared with other people using a URL.

Domain

Put simply, a domain name is the address that visitors use to find your website (i.e. google.com). This is different from a URL, which includes https and paths to internal pages (i.e. https://www.firefly-uk.com/whitepaper).

Although choosing a domain name may sound like a straightforward task, it is important to take the time to find an optimal solution and ensure you get it right the first time around. This will make your website easier to find and reduce any confusion for visitors. The following tips should help you to achieve the most appropriate URL:

  • Make sure your domain name is as similar as possible to the name of your organisation.
  • Choose a name that will be memorable for your target audience.
  • Try to keep it short, the longer your domain name the longer your email address is likely to be.
  • Avoid hyphens, as well as other symbols and numbers.
  • Use a common domain extension, such as .com, .co.uk, .net and .org (1).

Domains can be purchased at a range of prices depending on whether they are in high demand or already owned by someone else.

3. Choosing a content management system

Before you start to build your website, you need to decide which content management system (CMS) you are going to use. A CMS is a platform that enables you to quickly and easily produce, edit and publish content on your website. Not only is it good practice to regularly update your website and share content on social media channels, but doing so can help you rank higher in search engine results pages (SERPs), in turn increasing traffic to your website.

WordPress, Drupal, Umbraco, Shopify and Magento are just some of the CMS options available to choose from, each designed to suit different needs, budgets and website builds. Establishing the one that’s right for your business can feel a little overwhelming, especially if this is all new to you, so it can be helpful to reflect on your requirements. These could include:

  • Creating new pages
  • Adding content for SEO
  • Editing existing pages
  • Adding new users
  • Filtering or searching for content
  • Editing roles and permissions
  • Creating events pages
  • Allowing third party plugins (for example, linking directly with your social media platforms or facilitating event sign ups)
  • The ability to purchase products or services (we will cover this in more detail in section 4 – Ecommerce)

These individual requirements may help you to decide upon the most appropriate CMS for your website. For example, if you’re creating an ecommerce website on a limited budget, Shopify may be the best solution. In contrast, if you can afford a CMS in a higher price bracket and feel you would benefit from a more extensive range of features, Magento could be a great option.


Research

Conducting your own in-depth research is essential to finding the CMS most suited to your website and requirements. Below are a couple of suggestions to get you started:

  • Find a website you particularly like the look of and use tools such as ‘What CMS’ to quickly and easily decipher which system they are using.
  • Ask other brands for their first-hand experience using different systems.
  • Take advantage of free trials or demos offered by CMS providers to give you a greater insight.

Support

The vast majority of CMS’ require regular critical security updates in order to reduce the risk of cyber-attacks and viruses. This ensures your website can run safely, securely and efficiently at all times.

You should consider the level of support you will need in order to effectively maintain and use your CMS, and the resources you currently have at your disposal. You may find it helpful to invest in additional training and development to ensure you are utilising your CMS to its full potential. This may require additional staff or ongoing support from a digital design agency.


What are your options?

Most widely used CMS options (2).

Two of the most popular CMS options out there, and the two we tend to champion at Firefly, are WordPress and Drupal. Each of these come with their own unique features which, depending on your requirements, could add value to your website.

A desktop device open to the WordPress website.
WordPress | User interface

Benefits of both WordPress and Drupal:

  • Open source platform.
  • Extremely versatile, allowing you to download a wide range of plugins and widgets to create a truly bespoke website.
  • User friendly.
  • Can be tailored specifically to your brand.
  • Support extensive amounts of data.
  • Extensive community which can provide support.

A key difference between these systems is that Drupal is often more complex to use than WordPress and requires a deeper technical knowledge of coding. Drupal also comes at a higher price tag than most CMS options.

4. Ecommerce

As an industry, ecommerce is one of the fastest growing platforms in the world (3). With increasing competition to match, it is essential for every online retailer to have a reliable, quick and simple payment processing system to encourage visitors to purchase their products or services.

84%

Research shows that 84% of people won’t complete a purchase if the website they are using appears unsecure (4).

There are a number of systems available to choose from, depending on the size of your business, your budget and your strategic goals. To maximise your return on investment (ROI), your ecommerce platform should provide an intuitive user interface, tailored to your target audience. From cost and customer support, to key features and functions, there are numerous factors to consider before making a decision.


Types of ecommerce platforms

Three of the most widely used ecommerce platforms are PayPal, Shopify and Magento, all of which come with their own unique advantages and disadvantages:

 

PayPal (£)

Pros

  • Trusted ecommerce platform
  • Can be set up for free and is the cheapest option for selling online
  • Easy to set up
  • Offers a shopping cart and checkout system
  • Offers payment safety and security features

Cons

  • Charges a flat rate transaction fee
  • Can freeze accounts without warning
  • Commonly targeted for scams

Shopify (££)

Pros

  • Integrated ecommerce solution
  • Easy to set up and use
  • Great customer support and a large community
  • Many options for checkout and payment
  • Doesn’t require an in depth knowledge of coding
  • Straightforward to tailor
  • Offers a broad variety of apps and themes

Cons

  • Many themes come at a cost
  • Has transaction fees

Magento (£££)

Pros

  • Provides downloadable open-source software
  • Doesn’t have transaction fees
  • One of the most customisable ecommerce platforms available
  • High level of flexibility in terms of the design and functionality of your website
  • Offers a diverse range of extensions and themes
  • Has an extensive community
  • Doesn’t require an in depth knowledge of coding

Cons

  • Not simple to use
  • Requires dedicated website hosting
  • Takes a considerable amount of time to set up and isn’t easy to do so
  • Sits in a considerably higher price bracket compared to other platforms

So, which option should you go for?

Ultimately, if you’re looking to set up an ecommerce platform quickly, easily and at the lowest possible cost, PayPal, a name most people will be familiar with, will likely be your best bet. A similarly popular option, Shopify is easy to use if you are new to ecommerce and can be implemented quickly. Last but not least, although it will cost more than the majority of other options, if you have the budget and technical resources available and want to create a truly bespoke ecommerce solution, Magento could be the one for you.

5. User experience design

Key to enhancing your online presence and establishing customer loyalty, user experience design (UX) relates to the structural details that may affect a visitor’s journey on your website. Carefully considering your website’s UX will help to ensure it is intuitive to use, highly functional and fully responsive across all devices.

93%

Research shows that 93% of people have left a website in the past because it didn’t load quickly enough (5).

UX designers are problem solvers. From including clear call to action buttons and incorporating key information within the top half of the page, to utilising white space and harnessing visual information, they adopt a range of techniques to refine the overall user experience of your website.

 

Source: UX Collective. 2019. (6)

Research

Central to successful UX design is research, getting into the minds of the user groups likely to visit your website and defining their characteristics and objectives. Creating profiles for these groups will help you to map out different user journeys and scenarios, identifying obstacles they might face and establishing ways these could be mitigated.


Information architecture

With technology advancing constantly, we all expect to be able to access information online with ease. Information architecture (IA) creates a clear structure for the content on your website, helping to ensure visitors find what they are looking for quickly and effortlessly. This is then translated into a sitemap, which has a direct impact on the SEO of your website.


Navigation

Information architecture informs your website’s navigation, which can help to encourage visitors to take the actions you want them to take in as few steps as possible. This could include buying one of your products or services or simply getting in touch. Your page titles should be clear and concise and align with the word’s visitors are most likely to search for when navigating your website.


Wireframes and prototypes

Created in preparation for the design stage, wireframes provide an insight into the structural details of your website. They outline the relationship between all of the key information on each page and create a hierarchy for how it will be displayed.

Prototypes, on the other hand, are interactive mock-ups which allow you to experience the interface of your website, navigate the pages and test the functionality. This also allows the designers working on your website to explain the designs to you. Seeing the website during the prototype stage gives you the chance to make any necessary adjustments before moving on to the design stage.

A selection of low-fidelity wireframes
Wireframes | Low fidelity designs

6. User interface (UI) design

Now it’s time for us to dive into the interior design stage, technically known as user interface (UI) or website design. UI design ultimately represents how your website looks and functions. If done well, it helps to guide visitors around your website and encourages them to take certain actions, contributing to an optimal user experience.

In this section we cover the key components of a beautifully designed website, from captivating visual design, to engaging content. It is extremely useful to have a core understanding of these principles before commissioning a website.

Newhall website desktop and mobile mockup, caption "An elegant and charming home away from home".
Newhall Estate | Website design

Visual design

When executed professionally, design not only enhances the aesthetic quality of your website but strengthens your brand identity and helps to build trust. If it is tailored specifically to your brand, which we’d strongly recommend, it can also help to make your website instantly recognisable within the crowded digital landscape.

Layout
Consistency is key when it comes to the layout of your website. It should facilitate an intuitive user experience, creating a journey across your website that feels easy and natural. This can be achieved in part through the use of clear navigation elements, such as a main navigation, search box and contact form.

Colour palette
As well as helping to emphasise specific areas of your website, a carefully curated colour palette can reflect your brand identity. It may seem obvious, but if you already have brand guidelines it is important for your colours to remain in line with these. If you are starting from scratch, you should consider which colours will complement your brand and help to establish your brand identity. Utilising different colours and tones can also evoke a variety of feelings and emotions, helping to reinforce information.

An example of this is the use of the colour red by numerous fast food restaurants, on everything from their logos to packaging, to prompt feelings of hunger (7).

The front of a McDonald's restaurant.
McDonald’s | Brand colours

Typography

The typography you choose to implement across your website can have a huge impact on both the aesthetic and usability of your interface. Legibility is paramount and can be achieved by incorporating typographic hierarchy – utilising different sizes, fonts and layouts to help guide visitors through the content on your website. This can also help to emphasise key information.

However, it is important to choose fonts that are in line with your brand identity and complement one another. You should avoid combining fonts that are aesthetically overwhelming or distracting for visitors.

Top tip

Google Fonts is a great resource that allows you to access an extensive range of free licensed fonts.

Buttons
Incorporating clear and consistent call to actions in the form of buttons can encourage visitors to take the actions you want them to take, whether that’s getting in touch, or viewing subscription or pricing plans before making a purchase. Moreover, they can help to guide visitors around your website and encourage engagement.

Remember to ensure that your buttons are large and clear enough for users to view across all devices; desktop, tablet and mobile.

A side-by-side of two button graphic showing incorrect and correct design approach.
Good vs bad | Mobile website buttons

Top tip

Always prioritise quality over quantity and really utilise blank space. This can help to accentuate key content and enhance the clarity of your copy and visuals. It can also contribute to a refined and professional aesthetic.

Content

As we touched on briefly within the CMS section, it is essential to update your website regularly with relevant and compelling content in order to drive engagement. This can help to improve your search engine optimisation (SEO) – a topic we will discuss in depth in a future white paper.

Copy
Communicating your brand’s message and values in a clear, professional and engaging way on your website is critical. Polished copy will not only make it easier for readers to digest the information you are trying to communicate, but will help to establish a distinctive and authentic tone of voice that truly resonates with your target audience.

On a practical note, delivering copy with mistakes can damage the credibility of your brand and reduce the accessibility of your content. A copywriter can give you peace of mind by writing copy with flawless grammar, spelling and formatting. Working with a design agency that can hone the all-important copy in conjunction with the website design can be hugely beneficial when it comes to consistency.

Imagery
A picture really can speak a thousand words. Whether you choose to incorporate photography, illustration, infographics or iconography, bespoke visuals are pivotal to a successful website. All of these options can help to communicate even the most complex information in an easily digestible way. A designer can ensure that these visuals align with your brand and consider sizing and placement to enhance their impact.

Close-up of a brochure with percentage figures of what people are refusing to purchase.

Video
Video has taken the digital landscape by storm. As well as communicating information quickly and succinctly, the persuasive nature of video can make it a great tool to build brand trust and loyalty. A design agency will always start the process of executing a video with a creative idea, which will evolve through storyboarding and scriptwriting. It will then be brought to life with elements such as text, graphics, images and sound.

Someone watching Firefly's animation for the Cancer Innovation Challenge (CIC).

82%

By 2022, it is estimated that online videos will represent over 82% of all consumer internet traffic (8).

7. Conclusion

As you have discovered, much like the construction of a house, building a website is a collaborative process. It requires skill and precision, from the initial architectural sketches or strategic planning stage, right through to choosing the furniture and painting the walls, or the user interface design.

We hope this white paper has provided you with the fundamental building blocks you need to begin the collaborative process of commissioning a bespoke website. Being equipped with this knowledge will help you to navigate each stage with ease to create a professional website that adds value to your business.

However, it isn’t time to move in just yet! Our next white paper will continue exactly where we left off. We will discuss ways you can ensure your website reaches its full potential post-launch, covering topics including website hosting and maintenance, Google Analytics, search engine optimisation (SEO), copywriting, blogging, social media and email marketing.

In the meantime, if you think your business could benefit from any of the website design services, we have discussed, please don’t hesitate to contact us for a chat. We would love to hear all about your creative project and help you to kickstart this exciting journey.

Thank you for reading!

8. References

(1) Statista. 2020. Most popular top-level domains worldwide as of June 2020. [Viewed 3.7.2020]. Available at: https://www.statista.com/statistics/265677/number-of-internet-top-level-domains-worldwide/

(2) Isitwp. 2020. Top 10 Popular CMS by Market Share (to Start a Website). [Viewed 5.6.2020]. Available at: https://www.isitwp.com/popular-cms-market-share/#:~:text=WordPress%20is%20by%20far%20the,That’s%20huge!

(3) Entrepreneur India. 2019. E-Commerce – An Industry Bustling with Opportunities. [Viewed 3.6.2020]. Available at: https://www.entrepreneur.com/article/334669#:~:text=The%20E%2Dcommerce%20industry%20is,competing%20on%20the%20digital%20space.

(4) Hubspot. The Ultimate List of Marketing Statistics for 2020. [Viewed 28.4.2020]. Available at: https://www.hubspot.com/marketing-statistics

(5) Hubspot. 2019. Essential Web Design Stats for 2020 [New Research]. [Viewed 29.4.2020]. Available at: https://blog.hubspot.com/marketing/web-design-stats-for-2020

(6) UX Collective. 2019. Why UX and UI should remain separate. [Viewed 5.6.2020]. Available at: https://uxdesign.cc/why-ux-and-ui-should-remain-separate-7d6e3addb46f

(7) The Daily Meal. 2019. The Reason Most Fast Food Restaurants are Red. [Viewed on 5.6.2020]. Available at: https://www.thedailymeal.com/eat/why-are-restaurants-red#:~:text=Have%20you%20ever%20noticed%20that,%2C%20Dairy%20Queen%2C%20Carl’s%20Jr.

(8) Biteable. 55 Video Marketing Statistics for 2020. [Viewed on 29.4.2020]. Available at: https://biteable.com/blog/tips/video-marketing-statistics/

Let's work together +

If you would like to find out more about Firefly and how our ideas, experience and creativity could make a real difference to your business, please complete the form or call us on:

+44 (0) 131 510 8260

Required field *

How will we use your data?

Almost there

It would be great to learn a little more about what you want to achieve and get an idea of the budget for your project.

Required field *

How will we use your data?

“I have worked with Firefly on a number of video projects and have been nothing but impressed with the professionalism, expertise and the quality of resulting videos. We plan to use Firefly much more in the future!”

Chris Ridley
Content, Communications and Website Manager
Proactis

View project