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 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
  • Create a solid navigational structure, how pages are linked
  • Determine speciality pages that will need extra attention


  • 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

More Articles for You

The Movie Extra

F.C. Rabbath demonstrates his versatility by taking on the comedy genre with The Movie Extra. Already acquainted with the works …

Scarlet’s Witch

In 2003, I took the life-changing step of turning my hobby into a career. It was exciting and completely nerve-wracking!

— Featured —

Princes of the Yen

Queue Politely return to our screens with for the first time since 97% percent Owned with the highly anticipated Princes …

City of Men

AMP is an open source initiative back by WordPress and Google specifically for speeding up the mobile experience.

— Featured —

How the New iOS 10 Design Style Translates to the Web

With the introduction of iOS 10, Apple has begun a significant shift away from its previous design language.

— Featured —