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

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

• 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

• 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

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

• 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