Prototype a Stylish Design Agency Overview Page in Photoshop

Gabrielle Gosha

Design agencies typically know what it takes to create eye-catching designs for their clients and often try to make sure that their outward appearance matches their talent. When a design agency moves their company online to attract more clients and become more accessible they know that their website must be designed to perfection.

This is why you are most likely to see creatively designed websites attached to a design studio. Other than showing their skills design agencies also want you to know what it is they do by providing an overview of the agency.

Today’s tutorial will take you through the process of prototyping a stylish overview page for your design agency.

Resources you will need:

WpZoom Icons
Office Image

Step 1

If you haven’t opened up Photoshop this is the first thing you will want to do. Once the program is up and running you will want to create a new file by going to File > New or simply pressing Ctrl + N. Give your canvas the dimensions of 1361px by 1797px. Press OK.

op1

Step 2 Guidelines

We will now add guidelines to our canvas to designate where the elements of our page will go. To add guidelines simply go to View > New Guide…

Here is how you will input the first guide, for the navigation menu:

op2

Continue by adding the rest of the guides:

Header Image: 480px
Overview Text: 993px
Contact Info: 1284px
Map: 1737px

Here is what your final image should look like:

op2-1

Step 3 Navigation Menu

With our guidelines in place we will first begin on our header. Change your foreground to #000000 and use the Rectangular Marquee Tool to select your section and fill it in.

op3

If you have a logo you can now enter it in the top left corner. If you do not have a logo you can simply type in the company as I have done. I used Arial and Candara both in 30pt.

op3-1

Next finish up your navigation menu by adding your navigation links for “overview”, “services”, “portfolio” and “contact”. Create these in 18pt font using Candara and making the words bold.

op3-2

Step 4 Header Image

Open up the office image that will be used for your header. Paste it on to your canvas and scale it down so that it fits your designated header section. Notice how the image overlaps underneath the navigation menu bar. This is important.

op4

Next select a triangle shape with the Polygonal Lasso Tool making sure the tip of the triangle is right under the word “overview”. Go to the navigation layer and press DELETE.

op4-1

Step 5 Header Content

Now is the time to add content to our header image. Start by changing your foreground color to #00afaa and create a hexagon shape with the Polygon Tool in the middle of your header image at about 160px. Change the layer mode to Darken.

op5

Next create a black bar in the center of your hexagon and add the agency name in the center so you have something like this.

op5-1

Finish up your graphic by creating two lines at the top and bottom of the black bar.

op5-2

Step 6 Overview Content Area

Create a new layer for your content area. With the color # f2f0ed fill in this section but leave 50px at the top white.

op6

Change your foreground color to #a6a6a6 and use the Rectangular Marquee Tool to create a square on a new layer. Stroke the selection so the outline is 3px thick. Next rotate the square so that it is a diamond.

op6-1

Duplicate this layer three times and move the diamonds in the same manner as done in the image below.

op6-2

Now duplicate this layer and move the new row of diamonds beneath the original so that the tips touch.

op6-3

Combine these two layers and then fill in the top and bottom diamonds with #a6a6a6 skipping every other one. Fill in the middle diamonds with #cfcfcf.

op6-4

Duplicate this design once more then move them so you have one design in the bottom left of you content area and the other in the top right. Change the layer mode to Screen.

op6-5

Once your designs are in place you can add in your overview text. Note the two colors used are #00afaa and #585a5a. The top line is 33pt, the middle line is 30pt and the bottom is 24pt. The font throughout is Candara.

op6-6

Step 7 Contact Area

Change your foreground color to #00afaa and make a new layer for the contact portion of your layout. Fill in the designated area.

op7

Next using Candara at 33pt and in bold, write the word “contact” towards the top of the box centering it.

op7-1

Create a small black hexagon just under the contact title and with the Rectangular Marquee Tool create two skinny white lines and offset them on either side of the hexagon making sure that they are evenly spaced.

op7-2

With the colors #be202e and #ffffff create two skinny rectangles and place one on each of your newly added white lines like I have done below. Don’t forget to add in your desired text.

op7-3

Now write your main text for each form of contact: “Let’s Talk”, “The Studio”, “Press Kit” and “Social Media”. Next add in the icons envelope, pushpin 1, document, facebook, twitter bird and phone 2 and put them in their respective places.

op7-4

Finish up by filling out the rest of your contact information beneath each corresponding area.

op7-5

Step 8 Map

If you are working with a fake agency then you will need to simply grab a screenshot of a map like I did by going to Google Maps. If you’re agency is real then use a map with the correct address. Open your map image once you have it and go to Image > Adjustments > Invert.

op8

Next create a new layer and fill it in with #5c5c5c then change the layer mode to Color. Merge layers down.

op8-1

Place your map in the designated map area.

op8-2

Add the icon pushpin 2 to the map and change it to #00afaa.

op8-3

Finish up by adding the first letter of the agency’s name on the pinhead in white.

op8-4

Here is what the final image will look like.

overview-page-finish

Download the PSD File https://www.dropbox.com/s/xeoc3tk0cp7skk8/overview.zip

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Adrian SANDU

    The image itself is irrelevant. The article is more about how to compose the page and a few tips and tricks to spice the look a bit. It’s not like someone is going to use this exact design for a real site. And if they do, it’s their own image that gets the impact.

  • KalpeshSingh

    nice article Gabrielle!