I design .

I'm Ketan ‐ A Melbourne web designer, developer and illustrator with 20 years industry experience.

My project process for designing websites and apps

7 October 2018Project Web Design Wireframing

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.

Pinterest moodboard

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.

currencyapp sketches

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:

  1. 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.
  2. 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

Flowerpots Online

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:

  1. Testing website appearance to ensure the design and layout works as expected on all the latest desktop and mobile device browsers.
  2. Testing website functionality to ensure all features and functions work correctly. For ecommerce websites, this includes testing the checkout and payment gateway integrations.
  3. 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

Comment: via Twitter