Voosh Themes

How To Design A Professional Business Website

In this tutorial I’d like to show you how to create a Photoshop design that’s ideal for business websites – in particular, we’ll be focusing on building the front page of the Yoshi WordPress theme.

On a site like this there are a few important details to communicate to visitors – for example, the name of the business, the types of services that are provided, and some testimonials to demonstrate that others have been happy with the service they’ve received in the past.

In this particular design we’ll do this by putting the business name clearly at the top of the page along with the site’s navigation. We’ll also include a “Featured Section” area that highlights the main services that the business/individual offers – an image will be used here to add some visual appeal.

It can also help to show visitors that the company/individual behind the site is active – we’ll look to communicate this through having a “latest posts” section.

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 x 2000. 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 A Background

After creating a new document, the first thing you need to do is add a grey-white gradient background. You can do this through the following settings:

It should end up looking something like the following:

3. Add The Header

In the header we need to add the logo/business name and the navigation area. For the logo, set the font to Eurostile, the font size to 74px, and the color to #333333. Type some text and position it against your left border:

To give this text some more impact, you need to add a drop shadow – use the following settings:

After applying the effect your logo should look like the following screenshot:

For the navigation area, change the font to Arial, the size to 12px, and the color to #555555. Then type the different pages of the site:

4. Add The Featured Section

To create the featured section, we firstly need to create the background for it. Select the Rectangle Tool and draw a rectangle from the left border to the right that is around 275px in height:

We then need to add a gradient overlay – you can obviously make this whatever color you prefer, but I’ve used the following settings to create a brown background:

Your rectangle should then look like the following screenshot:

Next we need to add a line at the top and bottom of this rectangle – select the Line Tool, set the color to #555555, the line weight to 2px, and draw a line at the top of the rectangle. Make a copy of this line and then place it at the bottom of the rectangle:

Now that we’ve got the background sorted, we need to add some text and images. Set the font to “Hiragino Kaku Gothic Pro”, the size to 36px, the letter spacing to -40px, the color to #FFF, and type “Doing Business That Matters”.

Then add a drop shadow with the following settings:

The text should now look a bit better:

Now change the font size to 18px and type “Services Tailored To Meet Your Needs”. Place it directly under the previous title you added. Also copy the layer style for the previous title and apply it to the text you’ve added here – this will give the text a drop shadow:

Now we need to add some dummy text – set the font to Myriad Pro, the text size to 12px, and the color to #EEE. Type some text:

I wouldn’t normally use this many fonts in a design as it’s generally not recommended, but I think the overall look is OK. To the right of the text we want to add an area for an image fader – select the Rectangle Tool, set the foreground color to #FFF, and draw a box that’s around 420×185px in size.

To give this a bit more impact, add an outer glow with the following settings:

Now choose an image to go in the box – preferably something business-like – I’ve used a business meeting photo from morgueFile:

5. Add The Services Section

To create the “Services” section we initially need to add a title – set the font to Arial, the size to 26px, and the color to #555555. Type “Services”:

We now need to a service title link – keep the font as Arial, set the size to 12px, and the color to #896E54 – type the name of a service. Underneath this we want two lines of text – set the color to #555555 and type some dummy text:

Create two copies of this and place them underneath one another:

6. Add The Blog Section

For the latest blog posts section we need to create an area for an image and some text to go next to it. Initially though, we need to create the title – take a copy of the services title that you created in the last step and change the text to “From the blog…” – position this to the right of the services section:

Use the Rectangle Tool to create a new square (where your images will go) and ensure that it’s size is around 30×30px – place it underneath the title:

Now we need to create the link text – set the font to Arial, the color to #896E54, and write a blog post title. Underneath that we need to add some meta information about the post – set the color to #555555 and keep the rest of the settings the same – type some text and position it under the link text:

Copy all of the elements used for this post and create three new versions:

7. Add The Testimonials

As with the other sections, the first thing we need to do for the testimonials is to add the title – create a copy of one of the other titles, change the text, and then position it towards the right hand side of the template:

Ensure that the font is set to Arial, the color to #555555, and the style to italic – type some dummy text. Then add a name below the testimonial – set the color to #888888 and type a name and company:

Follow the same process again for the second testimonial:

8. Add The Footer

The footer is very straightforward – select the line tool, set the weight to 1px, the color to #555555, and draw a line from the left border to the right.

We then need to add some text underneath this line – set the font to Arial, the size to 10px, the color to #888888, and type something like “Copyright © 2010 / Yoshi / All Rights Reserved”.

And that should be everything done. Hopefully you’ve ended up with something like the following screenshot:

Conclusion

I hope you found this tutorial useful – the majority of effects used are very simple and subtle, but I think the final design looks quite nice. Check out the Yoshi Feature Page for more details about the template where this design is used.