Because we love bulleted lists, here is one about how to create the best design for a client, along with some funny gifs:
- Planning
- Prototyping
- Visual Design
- Development
- 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
