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

Influence of design on usability of applications || Best mobile design practices

Should you create an app with a good experience or a better design? An app’s look and feel on the …

— Featured —

GraphQL vs REST : Which is your best option?

Nowadays, one of the most frequently used approaches to creating an API is the REST philosophy. Over time, nearly everybody …

— Featured —

Is Neumorphism 2020’s hottest UI design trend?

Everybody’s talking about Neumorphism, a hot new design trend that’s appeared out of nowhere over the past couple of months …

— Featured —

8 ways to turn your business into an authentic brand in Kenya

Branding is one of the most important aspects of any business, large or small, retail or B2B and implementing measures …

— Featured —

Top revolutionary design trends 2020 in Kenya

With the start of a new decade, design trends in 2020 have reached an important milestone and are transforming the …

— Featured —

10 Things I’ve Learnt About Money as a Freelancer

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