How to Design a Clean Business Website with Photoshop

How to Design a Clean Business Website with Photoshop

The focus of this template is on a design agency that offers a range of web-based services. The primary aim of the page we’re designing, therefore, is to promote what the business does and what services they provide.

This is the first part of a tutorial on building a clean business website. This first part will focus on creating the design in Photoshop, and in the second part, will focus on converting the PSD outcome to a working XHTML template.

"Clean Business Website" Series

Final Result

Here’s a screenshot of the design we’ll be creating.

Final Result

Overview

In this tutorial, I’m going to assume that you have a basic understanding of Photoshop and know how to do basic tasks such as adding text, drawing shapes, and resizing/rotating objects.

My goal in this walkthrough is to show that you don’t always need lots of fancy effects in a design to make a nice-looking template. With a couple of fonts and some subtle effects, it’s still possible to create a professional-looking design that will impress your visitors.

The design we’re going to build has a header that contains the name of the company and the navigation area. Below that is an area that highlights what the business does along with some additional details.

Following this, there is a section that describes the specific services in more detail. The section underneath this has some client testimonials and a featured project overview.

We also want to try and build credibility and trust through the use of some client testimonials and an example of a "featured project."

Finally, we have a simple footer at the bottom that contains some fairly standard copyright text.

Create the Document

1 Create a new document with a size of 1100x1100px. Then add some vertical guides at 70px and 1030px — this gives us a width of 960px, which should easily fit on most screens.

Create the Document

Make the Header

2 To create the header, we first need to add the background. Select the Rectangle Tool (U), set your Foreground color to a very dark gray color (#333333), and then draw a box from the left of the document to the right that is around 130px in height.

Make the Header

Add the Site Name/Logo

3 To add the company name, set the font to Myriad Pro. Set the font size to 60px, the color to a light gray (#EEEEEE), and the letter spacing to -40px. You can set all of these options in the Character Panel (Window > Character). With the Horizontal Type Tool (T), type the name and position it against the left guide.

Add the Site Name/Logo

Make the Navigation

4 To add the navigation area, set the font to Arial. The font size to 16px and the color is #EEE. Type some page names (e.g. Home, About, etc.)  separated by two hypens (–):

Make the Navigation

Create the Featured Content Section

5 To create the featured content section, we need to start by adding the headline of the featured content. Set the font to Myriad Pro, the font weight to bold, the font size 60px, the letter spacing to -40px, and the color to #333333. Type the title in with the Horizontal Type Tool (T).

Create Featured Content Section

6 To make the headline stand out a little more, we’ll change the color of the ampersand (&) to a nice blue (#00BFF3).

Create Featured Content Section

7 Underneath that, we need to add the subtitle. Set the font to Myriad Pro, the font weight to Regular, the size to 50px, and the color to #BBB. Type a subtitle and position it just underneath the title.

Create Featured Content Section

8 We now want to add a short overview of what the company does. Pick up the Horizontal Type Tool, set the font size to 30px, the color to #CCCCCC, and type a series of periods (.) from the left guide to the right.

Create Featured Content Section

9 Create a copy (choose the text layer in the Layers Panel and then press Ctrl/Cmd + J) of this dotted horizontal line, and then place it about 40px underneath the first line.

Create Featured Content Section

10 We now need to add the text between these lines. Set the font to Myriad Pro, the font-size to 34px, the color to #555555, the line spacing to 42px, the letter spacing to -40px, and then type a few lines of text. You can use a lorem ipsum generator just to get some dummy text content in quickly.

Create Featured Content Section

11 You may also want to pick out some key words and make their font weight bold to give them more emphasis; I’ve selected the words "first class" and "big impact."

Create Featured Content Section

Add the Services Details

12 We now want to add some more specific details about our services. Select the Rectangle Tool from the Tools Panel, set your Foreground color to #00AEEF, and draw a rectangle shape that is around 280x350px in size, positioned against your left guide.

Add the Services Details

13 To make this box stand out a little more, we’ll add a drop shadow layer style (double-click on the layer’s thumbnail in the Layers Panel to access the Layer Styles dialog window); set the color of the dropshadow where the color is set to a gray color (#AAAAAA).

Add the Services Details

Your box should now have a little more emphasis.

Add the Services Details

14 We now need to add a title for our service. Select the Horizontal Type Tool and set the font to Myriad Pro, the font weight to Regular, the font size to 40px, and the text color to white (#FFFFFF). Draw a text box from the left border of the box to the right and set the alignment to Center text. Then, type in a title.

Add the Services Details

15 Now set the font size to 18px and type a series of periods that will become a dotted line.

Add the Services Details

16 Following this, set the font size to 15px and draw a text box from the left side of the box, to the right of it. Enter some text describing the services.

Add the Services Details

17 Finally, we need to add a button at the bottom of this box. Select the Rectangle Tool, set the color to a blue color (#0076A3), and draw a box that is around 230x40px in size.

Add the Services Details

18 Add an Inner Glow effect to the button where the color is set to a darker shade of blue — I’ve used #235162.

Add the Services Details

Add the Services Details

19 Now add a label to the button. Set your font size to 18px and type in uppercase, "GET MORE DETAILS>>".

Add the Services Details

That’s the first box created.

20 Create two copies of this box by duplicating the first box and everything contained within it. Use the Move Tool (V) to space them out evenly. Also, change the details in each of the boxes.

Add the Services Details

21 To finish this section of the layout, take a copy of the large dotted line that we created in a previous step and add it at the bottom of the section.

Add the Services Details

Add the Client Testimonials

22 For the client testimonials section, we initially need to create a title. Set the font to Myriad Pro, the size to 24px, the color to a dark gray (#555555), and then type "Client Testimonials" with the Horizontal Type Tool (T).

Add the Client Testimonials

23 Now for the first testimonial author photo, choose the Rectangle Tool, set the the color to a lighter gray color (#CCCCCC), and draw a box that’s around 84x84px.

Add the Client Testimonials

24 Now add a photo of yours that has slightly smaller dimensions. Add the photo in a layer above the Background layer.

Add the Client Testimonials

25 Next, we need to add some text next to the photo. Set the font to Arial, the font size to 14px, the color to the dark gray we used for the title of the client testimonials section (#555555), and then type some dummy text (again, you can use lorem ipsum for this).

Add the Client Testimonials

26 Now, set the font weight to Bold and type the author’s name. On the next line, type the author’s affiliation (i.e. the name of their organisation/company) and set the color to bright blue (#00AEEF).

Add the Client Testimonials

27 Take all of the elements used to create the first testimonial and create two copies. Place them underneath each other with consistent spacing and change the content and images.

Add the Client Testimonials

28 We now need to add a vertical divider to the right of the testimonial section. Create a copy of the dotted line we created earlier and delete around half of the periods. Rotate the line about 90o degrees (Edit > Transform > Rotate 90o CCW) and place it to the right of client testimonials section.

Add the Client Testimonials

Create the Featured Project Section

29 To create our featured project area, first we need to add a title. Set the font to Myriad Pro, the size to 24px, the color to a dark gray (#555555), and then type "Featured Project".

Create the Featured Project Section

30 Now add a title for the featured project. Set the font size to 20px, the color to a gray color (#888888), and type a title.

Create the Featured Project Section

Below this title, we need a screenshot of the project that is around 430x200px.

Create the Featured Project Section

31 Then add some text that provides a brief overview of the project. Set the font to Arial, the font size to 14px, the text color to a dark gray (#555555), and type a few lines of content.

Create the Featured Project Section

32 Also include some text at the bottom that says something like "Click Here For More Details." Change the color of this text to a light blue (#00AEEF).

33 Finally, add another copy of the dotted horizontal line at the bottom of this section.

Create the Featured Project Section

Make the Footer

34 The footer is very straightforward to complete. Set the font to Arial, the font size to 16px, the color to #888888, and type some footer content.

Create the Featured Project Section

All Finished

That’s everything done!

Final Result

Wrapping Up

In this tutorial, I was hoping to illustrate that you don’t always need lots of fancy effects to create a nice design. Sometimes a couple of fonts and colors coupled with some subtle effects can do the job nicely. 

Let me know if you have any questions or if anything was unclear and I’ll my best to answer them in the comments. In the next part of this tutorial, I’ll show you how to create an XHTML template from this design.

"Clean Business Website" Series

Download Source Files

Related Content

About the Author

Chris Creed is the founder of Voosh Themes, which provides a wide range of Premium and Free WordPress themes. He’s been designing and developing websites for over 10 years and is interested in most things related to design. You can follow him on Twitter at @cpcreed.

  • Jose W Villanueva

    total waste of time! come up with clearer instructions or a video tutorial!