This is my typical process for designing and building a new website. It briefly describes each step of the project, what’s required and what it entails.
1. Project Brief
The client and I discuss the project requirements, budget, solutions, who the target users and market will be, the navigation structure and the design of the website or application.
An essential part of this stage is understanding the budget available. Having a clear budget from the offset allows me to plan how to best allocate my time to the project life-cycle, and make recommendations to ensure the project is completed successfully and within the budget.
Content for the website or application should be provided before any design work begins. This could be initial drafts or final content.
All this information goes into a project proposal complete with costings and contractual information.
2. Research
I look at the competitors, similar industries and design related sources to create a shared mood board using Pinterest or similar.
The mood board provides visual consistencies such as colours, fonts, components and design styles.
3. Wireframing/Storyboarding
I begin creating simple visuals for the main pages of the website (desktop and mobile) or application. These may be initial pencil sketches or greyscale wireframe illustrations created in a design program.
4. UI Design
I take the approved wireframes and begin creating the full-colour visuals in Sketch, Affinity Designer or InVision Studio. Depending on the project this may include many pages and I usually only produce one or two design styles. Two rounds of revisions are included.
5. Pre-Development
Before any development begins, a few essential tasks must be completed:
- Set up the initial CMS/Shopify instance – involves installing the application on a development server (if self-hosting), creating the necessary admin accounts and preparing content structures/schemas for data import.
- Data/content – The data is often migrated before web templates are integrated into the cms. This stage can take a few weeks depending on the amount of data to migrate – for ecommerce, this usually includes all product data and images. For new websites, this step is where the final content should be provided.
6. Web Templates
Once the designs are approved, I begin building the responsive web templates using HTML5, CSS and JavaScript. These are browser tested.
7. CMS/Shopify Integration
The completed web templates are integrated into the content management system or Shopify for ecommerce projects. Browser testing is carried out continuously during the integration.
This work is pushed to the development server and goes through continuous rounds of testing and feedback.
8. Final Testing
The final round of testing before website launch involves three stages:
- Testing website appearance to ensure the design and layout works as expected on all the latest desktop and mobile device browsers.
- Testing website functionality to ensure all features and functions work correctly. For ecommerce websites, this includes testing the checkout and payment gateway integrations.
- Final bug fixing.
9. Pre-Launch
This stage is for the tasks which can only be actioned once the final development is complete including those required by your other service partners such as SEO and marketing agencies (e.g. adding redirection rules, updating Google search console).
10. Website Launch
Once the development stage is signed-off, the launch process begins which involves:
- Setting up the production server (if necessary)
- Deploying the website and database
- Updating the domain’s DNS records to point to the new server