How We Build Websites

The Process We Follow

We follow steps similar to any freelancer or web design firm that uses WordPress to build a custom website. Here it is in a nutshell.

Design and Planning

Sitemap

We outline every page in a spreadsheet. By doing so, we know how many pages we’re working with and how they all fit together. Our client signs off on the sitemap before we go to the next step.

Visual System

The client provides their brand guidelines, and we review them for image treatments, visual elements, colour usage, and typography. It’s here that we  get a sense of how the website should look and feel. Or: In some cases there’s no brand guideline available. Then we need to develop a visual system before moving to the next step.

Template Selection

When we design and build sites, we use a toolkit called Elementor to create attractive sites on top of the WordPress CMS.

We use Elementor template kits to customize the look and feel of the site according to the visual system that we established earlier. At this stage, we look for a kit that we can “bootstrap” so we don’t have to build from scratch. That’s how we keep things affordable.

Wireframing

You’ll notice that we’re still planning. At this stage, we use a tool from Adobe called Adobe XD to wireframe the entire site. The wireframe organizes each page’s content into building blocks. There is no design here and no content, just placeholders to show how everything is organized. Our client signs off on the wireframes before we go to the next step.

Content Map / Outline

Next, we develop a content map or content outline. The content outline matches the wireframe and lays out what website copy (text) we’ll need. A good content outline identifies the text required for every element (e.g. button text) and the number of words necessary for each block.

Building Content and Building the Site

In our process, we split up the work into two sections: writing the content and designing the site. We can do so confidently because of the time we’ve spent planning. The content developer knows exactly how much to write and where the text will appear. The designer knows exactly where to place the text and how much of it to expect.

Designing the Blocks and Elements

First, we set up all of our tools online in our client’s hosting environment. Once all the tools are installed, we design every block and element outlined in the wireframe on one live webpage. We test the blocks and elements on different screen sizes and evaluate each for functionality. This page gives us a sense of how each element will look and behave. Our client signs off on this one page of blocks and elements before we go to the next step.

Designing the Rest of the Site

Once our content map is finished and signed off by the client, and the building blocks and elements are approved, we can build the rest of the site. At this stage, all of the text is the proper length, we have sourced out images and visual elements, and all our building blocks are refined and approved.

We build out the entire site according to the sitemap and wireframes. In some cases, we will hire a third-party UX (user experience) designer to audit the site and make recommendations.

Proofing and Testing

One of our editors will proof the entire site, and another member of our team will test it for usability, consistency, and functioning links. Everything should read well and be working at this stage. At the very end of this stage, the client reviews and signs off on the site, or we make final revisions.

Publishing

We back up the site then move it from the staging site to a production site (the client’s actual URL). We test links again and do another usability review. We tie in Google Analytics and install a set of stable plugins for SEO and security.

Speed Optimization

At this stage, we optimize the site for speed. We do the basics that get our clients to 90% of where they need to be.

What is not included?

Email: Email and the website are two different things but are connected by web hosting. We can make recommendations on hosting that will optimize a website’s performance but will not be able to configure or make concessions for email. An IT expert helps with this part.

SEO: It is best practice to hire an SEO firm or expert to work alongside our team as we build the site. Unfortunately, in most cases, this nearly doubles the website’s cost. We set up our clients for SEO at a later stage, but we don’t do any SEO work. We clarify this with our clients before we start.

What Shows Up on a Typical Proposal?

Below is an itemized list of what we do as part of a typical website (re)design.