Learn the basics of DIY Website Design for Small Business

There are good reasons to consider creating your business website yourself, but the options in front of you can be bewildering, even for those with technical experience.

Read this guide and you’ll get a better understanding of the task ahead of you and the possible choices you can make.

Why do so many businesses DIY their own websites? 

Many business owners choose to build the business website in house for three good reasons;

1. They can save a lot of money on the build costs.
2. They can retain creative control.
3. They can make good use of in house talents.

Web design is not always as easy as it seems

There are some hurdles to overcome when you choose to start a DIY website design project though, and while they are not insurmountable, you should be aware of them at the start.

1. A website is the most important marketing asset, and good marketing requires marketing skills which the chosen employee may not have, even if their technical skills are good.
2. There is a tendancy for in-house websites to be built with content just about the company, not for and about the client. This means that while you may be very happy with how the website portrays the company, it does not speak to the heart of the most important person in the business world – your customer.
3. Web design takes much longer than most people expect. We build websites all the time, and we spend between 40 and 70 hours for most builds. Budget for at least 40 hours if you are doing it from a template or theme, and more if you are building from scratch.

So, with that out of the way, lets dive in to building a great website that will enter the hearts and minds of your prospective customers.

Strategy and Goals

You should always start any web design project with your strategy and you should set goals for the project if you want it to excel. It’s also worth writing a creative brief, even if it’s for you to follow it will keep you and everyone else on track.

• What do you want to achieve with this project? 
• What is your budget (even if you do it all yourself, you should consider your own time and assign a cost to it)?
• Who are your customers?
• What problem are you fixing that they have?
• Why do they have that problem?
• What logical and emotional elements are likely to be present in the hearts & minds of your customers?
• What reasons do they have to act?
• What us your value proposition?
• Your mission statement?

If you start with the answers to these questions it will be easier to create a website that resonates with cutomers.

 

Website CMS platforms, themes and templates.

There are many CMS platforms you can choose, but for simplicity we are covering just WordPress here which is a great CMS and the chosen weapon for most DIY website design warriors, so that leaves us to chose our theme and here we have three basic choices.

1. Free theme. The WordPress repository has masses, but if you’re in business to make money then leave them there. There are some good ones, but they are likely to take much more work.
2. Premium theme. You can buy a theme from Themeforest, Woo themes, Studio Press and many more. This is generally the quickest and easiest.
3. Vanilla theme. This used to mean a bare bones theme that required a lot of coding, but these days there are a few builders that are drag and drop, and which will give you a unique, ground up website.

 

High Level Design

What ever platform and theme you choose it’s worth doing a basic wireframe sketch before you start. A wireframe is a basic sketch done of your website. You can use wireframe software  if you like, but I find Visio good. I’ve also used Inkscape, and Google Slides. Basically anything that can quickly create shapes and multiple pages.

This will allow you to fiddle and get the design right before you go doing the real building, and it’s much easier to move things around in a wireframe. I found that websites built using a wireframe tended to look better than those that didn’t, for at least the first two years of my design career.

If you choose a premade theme you can design around that, just create your basic pages in your wireframe tool

Look and feel design.

If you’ve bought a premade theme, you can probably skip this, and even if you are using a page builder you can skip if you want a fairly plain website, but if you want stand out design it’s worth getting a designer to create you a look and feel design in Photoshop. Send them your wireframe and you can work with the designer to get a great look and feel. I would just concentrate on the home page design and then flow the look and feel out from there myself, but you can choose to have them do a design for inner pages too.

You may want to consider page designs for;

1. Homepage
2. Landing Page
3. Contact Page
4. Blog
5. Services, products, team members ( you can use the same design for each)

 Now you have all the preparation done, you have you plan, your strategy and your design.

 

Now we can finally build a website

I’m not going to cover the details of installing WordPress themes or plugins, as I want this article to pass on the harder to find, high level strategies and tactics. You can learn all about the details by doing Google searches – the WordPress community is huge and there’s a ton of information out there.

Once you have all your code installed it’s time to start designing.

I normally work first on the theme to get it aligned with the look and feel document and then move on the pages. I also operate in an iterative way in that I don’t try to get perfect straight away with anything, just get the basics right, so set colours and layout, then I create all the pages from the wireframe and then create the menu navigation.

This gets the structure all there and I find it easier this way, but I’m sure there’s 101 different workflows.

Once the pages are built I start on the home page and do the same iterative process. Get all the stuff from the wireframs in the home page without concetrating on style or perfection. Once it’s all in there I start going through and working on elements one at a time.

I then do the same for all the inner pages and keep doing so until the website is finished.

 

Wrapping up

Don’t forget to use your strategy and creative brief for inspiration and to keep you on track.

And last but by no means least – you must have fun.

That’s essential, because you are part of a creative process and if you’re not loving it then it’s not going to come out well. Let the website take shape without you forcing it into something it doesn’t “want” to be.

Be sure to check out our ebook below which goes into more detail about DIY website design.

 {{cta(‘e0da01c9-556f-4e46-9d38-55f7b50eef1a’)}}