How to Save Money on Website Development - Jesse Thomas Design
22324
post-template-default,single,single-post,postid-22324,single-format-standard,ajax_fade,page_not_loaded,,select-child-theme-ver-1.0.0,select-theme-ver-2.3,wpb-js-composer js-comp-ver-4.5.3,vc_responsive

How to Save Money on Website Development

One of the biggest mistakes that people make when creating a website is that they begin the development process too early. They hand over a half-baked set of ideas to their website developer at the beginning of the process, then are understandably upset when the result isn’t what they wanted, and then weeks of triage coding ensue.

In this series we’ve already covered 8 steps that you should take before doing any programming whatsoever. Here’s a quick recap of what we’ve covered so far:

  • Step 1 – State your GOAL. The best way to set your website project up for success is to start with the end in mind by considering what you need that website to do. The more specific you are about what you expect to get out of it, the better. And of course, be sure to communicate this to your website developer.
  • Step 2 – Identify your AUDIENCE. Before you start building a site, get very specific about who the user is, the customer you’re trying to reach. This will allow you to gear your message around who your customer is and what they are looking for, which will improve the conversion rate of visitors into customers.
  • Step 3 – State your MESSAGE. Focus on one key message. This requires discipline that few people exercise, which is why you can use it to set yourself apart.
  • Step 4 – List the necessary ELEMENTS. A necessary element is one that will make your website incomplete if it’s not there. Listing these items will give you and your website developer a better sense of what type of website you need.
  • Step 5 – Create a MIND MAP. Brainstorm a list of things that represent your message, especially concrete, visual things.
  • Step 6 – RESEARCH designs with similar goals. Spend some time on the web identifying sites you like and want to emulate, and competitors that you want to differentiate yourself from.
  • Step 7 – Create THUMBNAILS. Thumbnails are small sketches that are the first visual representation of your website. Use them to play around with different design ideas.
  • Step 8 – Create ROUGHS. A rough is a larger, more detailed version of your thumbnail sketch that indicates what content is going where in your final design.

Now I can understand if you think that after the roughs are done, then it’s time to move on to the development stage. We’re almost there, but not quite. There are two more steps that can save you big bucks if you do them before getting a developer involved.

Step 9 – Create COMPS
This is the stage where your design really comes to life. Once you’ve gone through all the other planning steps, you’re ready to create the desired design using design software, like Adobe Illustrator or Photoshop. This will allow you – and your developer – to know exactly what your website should look like before going through the expense of developing the site.

This process typically does require a design professional, or at the very least someone used to working with the design software. Coding is relatively difficult to make changes and adjustments to; it’s easier and faster to make tweaks in design software. You may want to try out different colors, experiment with fonts, and play around with other details in order to perfect your design, and that sort of experimentation is much more economical at the design level than at the development level.

If designing in-house, you may start your design from scratch or start from a template that includes all of your desired elements.

You can start the comps stage even if your website copy isn’t ready yet. If your design requires a lot of content that isn’t available yet, use “lorem ipsum” as placeholder text – click here to get placeholder text you can easily copy and paste into your layout.

Step 10 – Show your design in CONTEXT
Once you’ve got a comp you’re happy with, you’ll want to view it in the desired space. With a website it’s important to look at your comps in the browser to get an idea of what the site will look like when it’s finished.

You can do this by creating an image (jpg or png) of your comp and dragging it into a blank browser window. Make sure it is sized to the correct pixel width and height in order to accurately reflect what it will look like. (You may have to click on the image to zoom in to full size.)

Get a feel for what the comp looks like as you scroll up and down. Put yourself in the mindset of a first-time visitor to the site and think through what their experience will be. Is it easy to find what they’ll most likely want? Is anything important missing? Is it clear what the next steps are?

Use this experience to further refine your design. Again, it is much easier to make key changes to your design before starting development on your site than it is afterwards.

Get the website design template
If you’d like to receive my free website design process template that walks you through all the steps in this process, subscribe here.

Jesse Thomas

Jesse Thomas Design is the studio of Jesse Thomas, web and graphic designer based in Tempe, Arizona. Jesse Thomas has 14+ years of experience in design and marketing, promoting products and services across the country.

1 Comment
  • john

    June 13, 2016 at 11:46 pm

    really a nice post for avoiding cost in web development