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!

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

1. Planning

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

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

You need a solid menu

Sitemap

  • 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 (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

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

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

Like what you read? Give Darinka Kostelnik a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.