Web-designing for a client, in bullets

Because we love bulleted lists, here is one about how to create the best design for a client, along with …

Because we love bulleted lists, here is one about how to create the best design for a client, along with some funny gifs:

  1. Planning
  2. Prototyping
  3. Visual Design
  4. Development
  5. Testing

1. Planning

Get to know them

Brand exploration, customer profiling

  • Gathering brand stuff: logo, stationery, presentations, …
  • Meeting or videochat with the client, getting to know them
  • Visit to their office, immersing in their world
  • Commissioning a photoshoot in client’s premises, showing them doing their work — having the right photography is of utmost importance! It has to be fresh, energetic, not static against a background, and consistent in style. It should also tell a story about a client.

Current website audit

They probably have a bad website
  • What’s important for the client to keep
  • Checking Google Analytics — what pages have the most search engine visits and the highest bounce rates
  • Market / competitive research — who else is in the business?

Creating technical spec

  • What the website is to achieve
  • Technologies we’re going to use (can be determined later)

2. Prototyping

You need a solid menu
Sitemap
  • Create a solid navigational structure, how pages are linked
  • Determine speciality pages that will need extra attention

Wireframes

  • Prototyping exercises, sketches
  • Establishing Homepage content

Visual language

  • Aesthetic preferences (brand, typography, colours, …) = style board
  • Getting the right photography

3. Visual Design

Now go and paint!

At this point, we have approved wireframes, content for our pages and we established a visual language that’s just right for our client. We have a clear path to create pixel-perfect Photoshop/Sketch designs.

  • Homepage design, revisions, finalised design
  • Interactions / UX preview (= movement)
  • Inside pages design — speciality pages, generic pages

4. Programming

Get a programmer
  • Initial HTML version (HTML5, CSS3)
  • Interactions (Javascript, animation libraries)
  • Optimising (= cross-browser compatibility, responsiveness, speed, preloading)
  • Back-end? CMS?
  • If CMS: custom programming? or using open source (WP, Drupal, …)?
  • Client training, documentation
  • Content input

5. Testing and Launch

Keep reading

More >