Who It’s For
Every company is unique and for every company, there’s a unique website solution. The range varies. Organizations could build a site right out of the box using Squarespace or Wix or can hire a web design firm to create a custom website.
We usually create websites for smaller organizations. Beks Marketing serves start-ups or existing businesses that need to modernize [or update/freshen] their web presence to better reflect their brand. These clients typically want a website that they can update and manage themselves, and that offers flexibility within a modest budget.
The Framework We Use
We’ve been using WordPress as the framework for every site we build for the last ten years. We are huge fans because WordPress is affordable, easy to use, and has 80% of website CMS market share. For our clients, this means if they ever need help with a customization, new functionality, or an update, they can always find someone who knows WordPress. There is a monster community behind WordPress.
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
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.
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.
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.
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.
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.
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.
|Planning||Kick off meeting|
Web questionnaire (client fills this out)
|Design||Install WordPress on client’s hosting|
Purchase license and install Elementor page builder
Design typography and interaction elements page
Design content blocks
|Content||Set up content map based on wireframe|
Write copy as per content map
Edit and proof web copy
Edit images as provided by the client
|Build||Build out all web pages according to site map and wireframe|
Set up forms
|Launch||Install Google Analytics and other relevant plug-ins for security and speed|
Move site to production
Submit sitemap to Google Search Console
|Training||Provide video tutorial(s) on how to update content|