The New Web Design Process: Quick Walkthrough

Darinka Kostelnik
Jan 12, 2016 · 3 min read

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!

  1. Planning
  2. Creating: Prototyping, Designing, Testing, Prototyping, Designing, …
  3. Development
  4. More Testing

1. Planning

Image for post
Image for post
Get to know them

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.

Setting goals

  • What does the client want to achieve with new design?
  • How can we measure that?

Current website audit

Image for post
Image for post
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 — setting goals and tracking them
  • Technologies we're going to use (can be determined later)

2. Prototyping, Designing, Testing

Image for post
Image for post
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 (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

Image for post
Image for post
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 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.

3. Programming

Image for post
Image for post
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

4. Testing and Launch

Image for post
Image for post

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store