More and more often we are designing straight to the web. Websites are dynamic and print-outs on paper are not the best way to experience how and why the design works. We also work with many businesses and start-ups who cannot afford a long drawn out feedback process.

The Responsive Design Process

The first step in our design process is planning with the client. We need to determine the ‘whats’, ‘hows’ and ‘whys’ for your site. The material you provide at this early stage helps us with all aspects of the design and build. The more you include the better.

ideasOur process can be broken down into:

  • Identify Aims
  • Mood Board
  • Sitemap and Sketches
  • Key Functionality

[hr]

1) Identify Aims

  • Establish your websites three main objectives e.g to sell my goods, grow brand awareness.
  • What pages do you want on the site? e.g Shop, Our History, Blog, Contact
  • What is your target demographic? e.g 20 – 30 City dwelling males
  • What social media/tools do you use to promote your business?
  • Who are your main competitors? Provide links to their websites if you can.

[hr]

sitemap_icon_man2) Mood Board

  • Branding material e.g logos
  • A Mood board

Mood boards are a compilation of inspirational elements used to flesh out ideas at the beginning of a project. A mood board is useful for establishing the aesthetic feel of a website. Things that can be explored in the mood board include image style, colour palettes, typography, patterns, and the overall look and feel of the site.

KrispyKreme-Moodboard
Good example of a creative mood board for KrispyKreme doughnuts.

 

When making the board consider

  • Brand Positioning How are you different from your competition and how do you want that difference to be reflected in your design?
  • Colour Schemes for the website
  • Companies that share your sensibilities & companies that don’t – websites you do (and don’t) like
  • General Look & Feel of the website
  • ‘Tone’ of the website e.g Simple, Expressive, Warm & Personal, Infectious enthusiasm, Accessible, Positive => Solution not the problem

If you don’t fancy getting glue all over the place then online sites like  Pinterest are great for getting imagery together without all the ‘paper work.’
[hr]

3) Sitemap and Sketches

The sitemap connects the dots and the sketches add the visuals. Here’s an example of a basic sitemap:

KrispyKremeSitemap2

The sketches can be as detailed as you like. Links to websites you like can also help. In many cases it’s the home/landing page that our clients want to specify as it can be the most important page of the website.

[hr]
functionality_251_217

4) Functionality

Here you need to highlight any specific functionality that is required for your website and any plugins that you would like us to use.

Don’t worry if you’re not sure on the latter. It just helps us to know if you have done any investigations yourself on that matter.
[hr]

Asana Check List

This process is set out in our Asana ‘Prep’ section for every project. Asana is the online project management system that we use to keep on top of things.

When you upload your material to Asana please make sure that you’ve  …

  • Identified your objectives/aims (as details above)
  • Created a mood board (also detailed above)
  • Created a site map and/or sketches (incl. links to other websites if applicable)
  • Outlined key functionality (& any plugins you would like to integrate)