Why you should design the website first

Lee Jackson | May 5, 2017

Let’s talk about why starting building the website before you’ve even designed it is the total wrong way around of doing things.

Okay, so what do I mean? Well, we often have people approaching us saying, “We really don’t like our website”. To explore further we ask them what are the pain points, and what has the process been to get where they are at. All too often they’ll explain that the web designer essentially took a brief from them, disappeared for a month, then returned showing them a ready built WordPress website.

Then come the issues:

  • Not as briefed
  • Not on brand
  • Not well designed
  • Buggy
  • Looks generic
  • Hard or impossible for the client to edit
  • Other reasons to weep

Disclaimer: This is not everyones experience of course, and some developer/designers really excel at a code first approach. If you find them, pay them lots of money and love on them as much as you can! ?

Core Limitations Of A Build First Approach

Why is it a bad idea to start building the website before there’s even a design?

  1. You are limited by the technology. The person building your website is limited by what the CMS, theme, and plugins can achieve. Their decision process will be restricted by what they can quickly achieve on that infrastructure.
  2. You’re also limited by the skill of the web designer. In many of the cases we have experienced, the “web designer” is either a talented developer or a “theme implementor”, meaning they do not necessarily have the “design eye”. If they are the latter, they likely do not have the technical ability to create the functionality your business needs, therefore relying on off-the-shelf plugins.
  3. Then finally, if you want to change anything it’s really difficult. To change something in a graphic design application is a case of spending a few minutes making minor adjustments. If you give that instruction to a designer that’s a very simple process and they can amend and send you the latest version for you to review. If you want someone to do that in code, they’re going to have to write some CSS to do that. It takes much longer to make amends in code than in Sketch/Photoshop/AI/InDesign.

The Elephant In The Room

Obviously there are some great page builders out there like Beaver Builder, which you can still do a few tweaks on which makes things a little quicker than code. Surely that negates the need to do anything in a design application?

Nope! Regardless of the page builder used, everyone in your team will be reviewing the site on different browsers, screen resolutions and accessibility settings. If you’re sending out a design, a picture of what it’s going to look like from a designer, you’re all seeing the same layout and you’re all signing off the exactly same thing.

This then gives the developer the blueprint to create the final signed off design either in code, or with a page builder, and then do all the relevant cross browser testing.

So What Is A Good Approach?

The basic design to build process should be:

  • Discovery
  • Wireframe
  • Design
  • Code

Discovery: you talk about what you want to achieve, create the specifications, explore brand assets, establish goals, explore who the end users are, plan the structure, the site map, establish what technology will be utilised to achieve the specifications, et cetera.

Wireframing: done with the design team, you are laying out in simple block and illustration form how the site will be laid out, with user experience and journeys considered. Some folks use PowerPoint to replicate clicks to go to other areas of the wireframe, or tools such as Mockingbird.

Design: Then you want to take that into the design process with your designer/design agency.

Once you’ve done all this, you’re all signing off exactly the same look and feel. You all know what you’re expecting, you all know how it’s going to work and how it is going to look, and what technology you use.

The benefits of having a discovery and design-first approach are:

  • you to see what you’re going to get
  • select the correct technology
  • find the relevant developers to match the requirements
  • avoid nasty surprises

Don’t start with an assumed technology first.

Don’t start without a designer at the beginning.

Do go through the process of discovery, wireframe, design and then build.

Posted in

Lee Jackson

Lee lead’s two digital businesses providing powerful WordPress solutions for personal brands, design agencies and event companies.

Lee’s core business is creating WordPress themes from designs supplied by designers and agencies around the world allowing them to do what they enjoy most, whilst he and his team get to geek out on WordPress!

He is the host of The Agency Trailblazer Podcast, which focuses on agency life and growing a successful business. He compliments this with a paid community focused on helping stressed out design/web agency owners fall in love with their businesses again. No 10x BS, just practical advice and support to help people undo bad decisions and create an agency they can love that supports the lifestyle they need.

  1. Jeff Guest on 5th May 2017 at 12:45 pm

    Nice Post, Lee. I fully agree that the explore – wireframe – design – build approach is the correct way to approach a web site build. I suspect that the designers you cite that ‘disappear for 2 months…’ are using templates (as in spend $49 on code canyon, spend 2 days adding the content and then waiting 28 days to look like they have done something significant!)
    Explore and wire framing are so important – the sales funnel must be the most important thing in this process, design is making the practical pretty (OK maybe more than just that) but functionality has to be priority. Visitor conversion must lead all of the processes. I’m a designer first and a coder second, and I do support the use of plugins, why reinvent the wheel every time – unless the occasion demands something unique most clients appreciate the time and money saving an off the shelf solutions offers – if it’s the right tool for the job.
    Wordpress is a great tool – I often intend to build sites on other platforms etc, but I nearly always end up on WP for the many advantages the tried and tested and very client friendly system offers., so I guess I’m just trying to innovate for innovations sake!

    • Lee Jackson on 5th May 2017 at 12:50 pm

      Hi! Thanks for the comment. Yes I always end up using WordPress as the solution, but how I implement it tends to be different depending upon the requirements. I will neither confirm nor deny your assumptions! 😉

  2. Sallie Goetsch on 23rd November 2017 at 4:12 pm

    I suspect the clients are partly to blame in these situations, because they developed their briefs on their own rather than in collaboration with an agency that can help them define their goals, functional requirements, and content strategy before going on to consider what design, and what underlying code, would best support their business needs. It’s a rare business owner who knows enough about web technology to create a brief that will result in anything useful.

    If clients end up with an underqualified “designers”, it may be that they don’t know where to look for people with the experience and skills they need, or don’t know how to evaluate them. But it may also be that they were trying to get the job done on the cheap and opted for a low-budget freelancer instead of a top-drawer agency.

Leave a Comment