The New Web Design Process: Quick Walkthrough
A freelancer's design process from planning to finished site.
Let's embrace user personas, continual testing and making the client feel a part of the process!
- Creating: Prototyping, Designing, Testing, Prototyping, Designing, …
- More Testing
Brand exploration, customer profiling, getting to know users
- Gathering brand stuff: logo, stationery, presentations, …
- Meeting or videochat with the client, getting to know them
- Visit to their office, immersing in their world
- Who are their users, their customers? Looking at client's social media / site stats / physical store to find out.
- Creating personas. We create for THEM.
- 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.
- What does the client want to achieve with new design?
- How can we measure that?
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 — setting goals and tracking them
- Technologies we're going to use (can be determined later)
2. Prototyping, Designing, Testing
- 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 (Art direction)
- Aesthetic preferences (brand, typography, colours, ...) = mood board, style board
- Getting the right photography
Testing the assumptions
All those wireframes need to be putting under scrutiny. Are we doing the best for users? Are we hitting those goals we set?
- Creating working prototypes
- Giving them to co-workers, friends & family, test groups
- Revisiting wireframes, prototypes, designs
- Testing again
High-fidelity design, at last
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 designs.
- Homepage design, revisions, finalised design
- Interactions / UX preview (= movement)
- Inside pages design — speciality pages, generic pages
All these steps require selection of the right design tools, whether it's Photoshop, Sketch, Webflow, Figma, UX Pin, Principle, Framer or what. Really depends on the project, the way we need to test, the way we want to paint pixels.
- Initial HTML version (HTML5, CSS3)
- 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