From briefing to deployment, the process behind refined websites.

Step 1 - Briefing

Briefing is the first and most crucial step in creating the designs that accurately represent your business; a meeting will be held to discuss your requirements and needs. I will then create a document that concisely details all the agreed requirements for you to read and give me the confirmation to move on to the next step.

A birds eye view of a clean desk, with a person sitting using their laptop.

Step 2 - Colour Schemes

The briefing and subsequent brand requirements will influence the colour schemes created; however, I will make multiple variants and select the one I think best represents your brand. All the variations will be documented and sent to you for review so you can change the scheme.

A screenshot of the colour schemes I used for this website.

Step 3 - Typography

The typography will be selected to represent your brand most accurately, influenced by the briefing and requirements. Whether Serif fonts like Garamond that represent high-end products or Sans-Serif fonts like Jost that represent modernity, I will try to pick the most suitable fonts while allowing you to select from variations.

Screenshot of the heading fonts used for this site.

Step 4 - Wireframes

After the colour scheme and typography have been finalised, the wireframes will be drawn. These will depict the layout for the whole site while using low-fidelity representations of elements. This allows the basic layout to be designed quickly and subsequently reviewed and changed efficiently.

A tablet with wireframing displayed on the screen.

Step 5 - High Fidelity Mockups

After the layout from the wireframes has been agreed upon, the high-fidelity mockups will be created. These designs will precisely depict how the site will look for all screen sizes and the site's content. You can request two revisions to the designs, covering the entire site. This ensures efficiency by minimising the need for constant back-and-forth on minor changes that could have been addressed in a single comprehensive revision.

A screenshot of a high fidelity mockup used for this website.

Step 6 - WordPress

After the high-fidelity mockups have been finalised, WordPress and Elementor will be utilised to transfer the designs onto the internet, the animations, SEO optimisations, spam protection and page caching will be implemented so that your site ranks on search engines, doesn't attract spammers and is super fast. All of these things will keep your bounce rate low and engagement rate high.

A screenshot of this page being built in elementor.

My Web Development Tools

I use various resources at every stage of the development process. These tools either make the process more efficient, inspire my designs, or create a medium to work in.