Voosh Themes

How To Design A Clean Small Business Website

In this tutorial I’m going to run through how to build the homepage for the Saburo WordPress theme – this is a template primarily aimed at small businesses who want to advertise their services online (check out the Saburo features page and the live demo).

The design style that we’re aiming for with this template is clean and minimal – we therefore only want to include essential details and make subtle use of colors and fonts. On a small business site it’s very important to highlight exactly what the business does and the types of services it provides, so we need to make this clear.

We also want to point people in the direction of some of our best work/case studies – so having a “Featured Projects” section can be useful for showing that we’ve worked on other projects in the past and that people have been happy with the work. Below is a screenshot of the template that we’ll be creating.

Step 1: Create a New Document

Create a new document with a size of 1100×2000. Then add some vertical guides at 70px and 1030px – that gives us a width of 960px which should easily fit on most screens. Set the background color to #FFFFFF (white).

Step 2: Create The Background

We now want to add a dark bar at the top of the template along with a grey-white gradient. Using the Rectangle Tool, set the foreground color to #222222 and draw a box around 10px in height across the top of the document.

We now want to place a gradient just below that box – add a new layer – then use the Rectangle Tool draw a new box about 150px in height and create a Gradient Overlay effect with the following settings:

You should end up with something like the following (it might be difficult to see in the image below, but there’s a slight gradient just below the dark line):

Step 3: Add The Header

In the header we want to add the name of the small business – select the Myriad Pro font, set the size to 90px, and type the name of the company. Position it next to your left border.

To make this stand out a bit we want to add a Gradient Overlay effect and a Drop Shadow:

You should end up with something like the following:

Step 4: Create The Navigation

To create the navigation bar we need to use the Rounded Rectangle Tool and set the Radius to something like “6″. Change the foreground color to #222222 and draw a box around 50px in height from the left border to the right.

Next we need to add a Drop Shadow effect with the following settings:

Finally, we need to add the links – set the font to Arial, the color to #EEEEEE, the font size to 12px, and write your links with a “/” separating each of them.

Step 5: Create The Featured Content Section

There are two main sections to the featured content section – the area on the left that contains the textual content and the image on the right. For the content on the left, we need to add a main title that highlights what the company does – set the font to Myriad Pro, the size to 32px, and the color to #444444. Type “Professional Web Design & Development Services”.

To make the text look a little more professional we want to push the characters closer together – set the letter spacing to -40px.

We then need to add a tagline – set the font size to 30px, the color to #888888, and type “Exceptional Services At Great Prices”. As with the main title, set the letter spacing to -40px.

Now add some dummy text – this will be an area where more details about the company can be provided. Set the font size to 14px, the color to #444444, and type some text.

We now need to add the button – using the Rounded Rectangle tool, set the radius to something like “12″ and draw a button that is approximately 120×30px in size.

Add a Gradient Overlay with the following settings:

Also add a Drop Shadow with these settings:

Now add some text – use the Myriad Pro font, set the color to #FFFFFF, the font size to 14px, and type in uppercase “LEARN MORE”.

For the area on the right, add an image that is around 380×230px in size. Position this image against your right border.

Add a Stroke and Drop Shadow with the following settings:

Your design should look something like this:

The final step here is to create a line – using the Line Tool, set the weight to 4px, the color to #444444, and draw a line from the left border to the right.

Then add a Drop Shadow with the following settings:

Here’s how the line should look after adding these effects:

Step 6: The Featured Projects Section

In the featured projects section we want to highlight some related work using both an image and a small amout of text where a brief overview can be provided.

Firstly, we need to add a title for this section – set the font to Myriad Pro, the font size to 28px, the color to #444444, and the letter spacing to -40px. Type “Featured Projects”.

We then need three images that are all around 295×150px in size – I’ve used a range of screenshots from some of my premium web templates, but you can use whatever you choose here. Add around 35px of spacing between each of the images.

To improve the appearance of these images we want to add a drop shadow to each of them using the following settings:

Also add a Stroke:

You should then get something that looks like the following:

Underneath the images, we need a title and some text – for the title, set the font to Arial, the size to 16px, and the color to #E86E14. Type a title:

Underneath that we want some more text – using the Arial font, set the size to 12px, the color to #555555, and type some dummy text. We then need to add a link underneath the text – change the color back to #E86E14 and type “Read More >>”:

Follow the same process for the other two images:

Step 7: Create The Footer

The footer is really simple to do – take a copy of the Rounded Rectangle that you created in Step 3 to create the navigation background – place this at the bottom of the template:

Next we need to add the footer text – set the font to Arial, the size to 10px, the color to #EEEEEE, and type something like “Copyright © 2010 / Design Studio / All Rights Reserved”:

That’s everything done! Your final design should hopefully look something like the following image:

Conclusion

I hope you found this tutorial useful – the effects used are subtle and simple, but I think it creates a nice overall look. Remember that you can check out the live demo if you want to take a closer look at the template – you can also visit the Saburo details page to get more details about the theme.