The process

First meeting

The first meeting, whether over zoom or in person is about discussing your website goals and what you would like to achieve out of your site. At this stage I will ask you if you already have a style guide or brand book you would like to work off, or if this needs to be established together. If you have a very specific look or design in mind, I would ask for some examples of websites with the desired look you would like to achieve, or if you’d like me to provide a design. For low budget projects (under 5k,) we would usually use an existing Genesis child theme and modify it as needed, for higher budget projects you will receive a Figma mock up that will include a fully custom design for the home page, an inner page template and mobile devices. When clients engage a wordpress developer, they want a professional website with all the bells and whistles- email marketing integration, analytics, social share, social feeds

Staging domain.

I setup a staging domain, which is a temporary domain to develop your site on. This ensures that all changes are not being made on a live domain, so elements, links and contact forms can be tested out to make sure they are working properly. You can check this domain at any time to see how the site is progressing, and provide feedback. I used to develop sites on my machine using localhost and MAMP, but the obvious disadvantage was-clients couldn’t see the work in progress, and so I now work exclusively on staging domains and this ensures a much more collaborative process.

Design and Typography.

In order to create uniformity amongst the site elements, establish brand colours and brand identity I will build you a basic style guide that will help define your Heading and Paragraph elements. An example of this for a client project I worked on:

As you can see, the heading and paragraph elements are defined, and the typography is set to default, which means every time the client wishes to modify or update a page herself, each element will retain its built typography and colour, except for modifications I have made in CSS. How this looks in the stylesheet.css file:

Brand Colours

If you have already got a style guide, I will add your brand colours to your style guide sheet in WordPress, so you can refer back to this anytime you wish to, if creating new elements or pages. I add these into the style guide with the Hex colour codes like so:

To make things easier for you going forward, and to save you from having to input your hex colour codes into the Gutenberg editor each time you add a new heading or paragraph element, I set up your brand colours as a custom colour Palette in Gutenberg. This is how the action hook is declared in your functions.php file:

And this is the outcome, a custom colour palette in your Gutenberg editor instead of the standard blue colours that ship with Gutenbergs default colour palette:

Define colour groups and buttons

Another important part of your style guide setup, is defining which colour combinations go together for various elements of your site. For example, when the background colour changes, your text colour changes also. I also set your button styles, and define the default colour for your site pages. This styling gives your site a professional, uniformed look:

Page mockup

After the style guide has been setup, you will receive a basic page mockup for each page. This will display the basic structure for each page, with dummy content and images added. A basic example:

Site plan and content

After a basic page mockup has been created, I will provide you with a document which will outline the content to go on each page. For example:

Home page

• Hero Title
• Hero content
• main page items/services
• product/Service descriptions
• Sub headings/content
• backlinks/clickable site links
• Site header
• Site footer

At this stage I ask you to drop all media files and documents required into my G Drive, so I can start the build process for your site.

Custom Widgets and functions added.

Each site is different, and will require custom hooks and CSS to achieve the desired outcome for your project- from both a design and site function perspective. For Megan Jordan, I added in a before footer widget area, theme support for SVG files, and displayed featured images at the top of blog posts. You can see the child theme I have used is Genesis sample theme, and the action hooks and functions have been added into functions.php:

Site Review

Once all the above steps have been done, and I have drafted up each page of your site, you can check the site for review. Any feedback, changes or final changes are made at this stage. There shouldn’t be too many changes, if we have clearly defined our styles, typography and page mock ups correctly.

Deployment

Once you have given the green light to your staging site, I will then deploy your website to your live domain. I’ll need access to your C Panel, as well as an FTP login and password.

Strategy

Once your site is live, we will cross promote your site on social media, and pop the bubbly! At this stage I would usually provide you with a marketing strategy that includes keyword research, content marketing and planning, content curation, PPC and Facebook ads, and email marketing. Once your site is live, you will not be left flying blind, you will have a structure to follow to build traffic and followers over time with the correct implementation and scheduling.