Voosh Themes

How To Design A Clean and Minimal Business Website

In this tutorial I’m going to show you how to build a clean and minimal business website design in Photoshop. In particular, I’m going to focus on the front page of the Kanzoo WordPress theme and show you step-by-step how to design this page.

The structure of this page is very simple – there’s a header that contains the name of the company (Kanzoo) along with a subtitle and a contact email address. Under that is a large featured project image that adds some visual appeal to the template design – a blue 3D strip is also used here to add a nice extra effect.

Below this section is an area where some of the main services/benefits of the company are provided along with some client testimonials. This is followed by a simple footer that contains some basic copyright information.

Below is a screenshot of the template we’ll be creating:

1. Create A New Document

Create a new document with a size of 1100×1100. Then add some vertical guides at 70px and 1030px – that gives us a width of 960px which should easily fit on most screens.

2. Add The Background

The next thing to do is set the color of the background to grey – select your background layer and then choose Edit > Fill – set the color to #EEE.

3. The Logo

In the header of this template we need to inlcude the logo, the subtitle, and a contact email address. For the logo, set the font to Myriad Pro, the font size to 150px, the letter spacing to -40px and type “Kanzoo” (or whatever you prefer). In the screenshot below I’ve used the color #222 for “Kan” and #0A86F2 for the “zoo”.

Then add a drop shadow to make the logo stand out a little more – use the following settings (the color of the shadow is #AAA):

The logo should then look something like the following screenshot:

4. The Subtitle / Contact Details

Towards the right hand side of the header we want to add the subtitle and contact email address. Set the font to Myriad Pro, the font size to 36px, the color to #AAA, the letter spacing to -40px, and type something like “Quality Web Solutions”:

Just above that we want to place a contact email address – change the font size to 24px and type “Email: info@kanzoo.com”:

5. The Navigation Area

The navigation area is made up of two lines at the top and bottom of the section along with the links to different pages between these lines. Using the line tool, set the color to #CCC (grey) and draw a line from the left border to the right. Then create a copy of this line and change its color to #FFF (white). Place it directly under the grey line:

Create a copy of both of these lines and place them about 65px underneath the original lines.

Next we need to add the actual links between the lines – set the font to Arial, the font size to 24px, the color to #666, and type the names of the pages (separated by a “~”):

6. The Featured Section

The featured section contains a large featured project image that should hopefully attract visitors’ attention – I’ve used a screenshot from the Yoshi WordPress theme, but you can use what you like here – the key thing is to use an image that is 960×400px in size:

We then need to add a border to this image with the following settings (the color of the border is #CCC):

Then add a drop shadow (the color of the shadow is #CCC):

These subtle effects help the image to stand out that little bit more:

To add another visual effect we’re going to create a blue 3D strip and “attach” it to the featured image – using the Rectangle Tool, set the color to #2191F3 and draw a box that’s about 140×30px in size.

Then rotate the box 45 degrees:

We now need to tidy up the top and bottom of the box by removing the necessary parts. Add a border towards the top of the box and another one towards the right hand side (as seen in the screenshot below). Then highlight the blue parts of the box that are outside of these borders using the “Rectangular Marquee Tool” and delete them.

This is how your box should look after you’ve deleted the areas at the top and side:

Now place this box to the right of the featured area.

To create a nice 3D effect, select the Pencil Tool, set the color to #0D538F (a darker blue), the size to 1px, and draw a triangle next to the top of the box:

Do the same at the bottom of the rectangle:

We finally need to add some text in the box – set the font to Myriad Pro, the size to 14px, and type “Featured Projects”. Then rotate this text 45 degrees so that the text becomes angled:

7. The Services/Benefits Area

In this section we want to describe the main benefits of the company in a clear, concise, and simple way. Select the “Custom Shape Tool” and choose the shape that looks like a tilde (~) – draw a shape that is about 30×10px in size and place it under the featured section area:

To make the shape stand out a little more we need to add a drop shadow with the following settings (the color of the shadow is #AAA):

Now add a title next to the shape – set the font to Arial, the font size to 20px, the color to #555, and type something like “Why Choose Us?”:

Next, add some dummy text underneath the title – keep the font as Arial and simply change the font size to 12px. Ensure that the line spacing is 20px and then type some text:

Copy this benefit three times and place the benefits next to each other in the following way, changing the titles as you go:

To finish this section we need to add a vertical line on the right hand side – this will act as a divider between the benefits section and the client testimonials. To do this, select the line tool, set the color to #CCC, and draw a line about 235px in height. Copy this line and change the color to #FFF – then place this line directly to the right of the first (grey) line that you created:

8. Client Testimonials

For the client testimonials section, we initially need to add a title – set the font to Arial, the size to 20px, the color to #555, and type “Client Testimonials”:

To add the first testimonial, set the color to #777, change the font style to italic, and type some dummy text in double quotes:

Underneath that we want to add some details about the testimonial author – change the font style back to normal and set the font weight to bold. Type a name and then follow that with the name of the organisation with which they are affiliated (change the color of this to #0A86F2):

Create a copy of this testimonial and place it directly under the first one – change the author details if you want to:

9. The Footer

The footer is very straightfoward to create – create a copy of the line used in step five for the navigation area and place it at the top of the footer area:

Underneath that we want to add some copyright information – set the font to Arial, the font size to 12px, the color to #777, and type something like the following:

Your template should then look like the screenshot below:

All Finished!

I hope you found this tutorial helpful – check out the Kanzoo Features Page for more details about the theme where this design is used – there’s also a live demo you can view if you want to take a closer look.