Clean and Effective Contact Page Mockup Design

Whenever we design a website, we focus on all the major aspects like the home page, navigation, the footer, and so on. We go through all the details to make sure everything looks perfect. We spend a lot of time planning, designing, and tweaking the site, yet when it comes to the contact page, we fail to provide the proper attention it deserves.

We don’t realize it then, but we end up ruining the impact of whole site with a contact page that contains some details and generated forms that don’t even match the site design.

It is extremely important to give proper thought to the contact page. There are a few points we always need to keep in mind while designing this page. We need to make sure our contact page is user friendly, straightforward and it should follow the same theme as the rest of the site design.

A contact page should be easy enough to understand and use so your customers can send their queries without any difficulties. Today we are going to design a clean and effective contact page mockup in Photoshop. We will use some interesting tools and options so let’s get started.

Resources

Flat Icons
Minimal Patterns

Final Result

Step 1

Open Photoshop and create a new file (Click on File> New or press Ctrl/CMD + N) with 1360px width and 1100px height. Name the file and press ok.

Step 2

For the background, create a new layer (for this click on Layer> New> Layer or you can click on the ‘New Layer’ option from the Layer panel) and fill the background with color #333333.

We will add a subtle pattern to the background, so click on Layer style (Layer> Layer style or select the layer style option from the layer panel) to add some pattern to the background.
Keep the pattern settings same as shown in the image below.

Step 3

Now let’s start with our top menu. First create a new layer, then click on ‘Rectangle Tool’ and create a horizontal thin rectangle at the very top. Fill it with color #f85f30.

Step 4

Create a new layer and select the ‘Line Tool’. Set the weight to 13px and create a small horizontal strip. Fill the strip with color #db491c.

Step 5

Create another line under the above strip using the ‘Line Tool’. Adjust weight to 2px and create the line with the same color.

Step 6

Create a new layer (for this click on Layer> New> Layer or you can click on the ‘New Layer’ option from the Layer panel) and then click on ‘Pen Tool’ to create a triangle shape. Place it on the left side where we are going to place the logo and fill it with color #db491c.

Step 7

Now add the logo, right above the triangle shape. Click on ‘Type Tool’ and add the logo text using color #424141 and color #fbe9c1.

Step 8

Select the ‘Type Tool’ and now add the navigation (menu links) text on the right side with color #fbe9c2.

Step 9

As we are designing a ‘Contact’ Page, ‘contact’ will be selected in the navigation menu. Soto create the selected effect, click on ‘Rectangle Tool’ to create a small rectangle. Fill this rectangle with color #f7703e and add text (Using the ‘Type Tool’) with color #fcf4e1.

Step 10

Now our navigation menu is done so let’s start with the content area. Select the ‘Type Tool’ and add a big title on the side with color #fbe9c1.

Step 11

Create a horizontal divider using the ‘Line Tool’ with 2px weight and color #db491c. Now place the divider under the title (added in the above step).

Step 12

Repeat the same process and create another divider with the same color using the line tool. Just make it vertical this time.

Step 13

Select the ‘Type Tool’ and add the ‘phone number’ with color #beb090. Then place the ‘Phone icon’ next to it with color #fbe9c1.

Step 14

Repeat the same process and this time add the ‘Email’ details using the ‘Type Tool’ and place the mail icon. Now select the ‘Line Tool’ with 2px weight and create a small divider between the texts, with color #db491c

Step 15

Now let’s start with our contact form, first add the title using ‘Type Tool’ with color #beb090.

Select the ‘Rectangle Tool’ and create a small rectangle for the ‘Name’ field. Fill the shape with color #252525 and click on ‘Layer style’ (for this select Layer> Layer style or click on the layer style option from the layer panel) to add some stroke.

Adjust the ‘Stroke’ settings according to the image below.

Step 16

Simply repeat the same process and create two more form fields using the ‘Rectangle Tool’ with the same color #252525. Now duplicate the ‘Layer style’ from the previous field and add it to the new shapes (Right-click to Duplicate the ‘layer style’ of the above field shape and paste it on the new shape layer).

Step 17

Select the ‘Type Tool’ and add the field texts (Your Name, Your Email, Add your Message…) using color #a3977c.

Step 18

For the submit button, select the ‘Rectangle Tool’ and create a rectangle with color #f85f30. Now click on ‘Layer style’ (Select Layer> Layer style or click on the layer style option from the layer panel) to add stroke with the same settings as before.

Add text to the button using ‘Type tool’ with color #fbe9c1.

Step 19

Our Contact form is done, so let’s start with our map area. First click on ‘Custom shapes Tool’ and add a basic arrow with color #beb090. Now click on ‘Type Tool’ and add the title text next to the arrow with color #fbe9c1.

Step 20

Now simply place the map under the title, with some stroke. Keep the settings same as the following image.

Step 21

For the footer, select the ‘Rectangle Tool’ again and create a small horizontal strip with color #252525 at the bottom.

Step 22

Create a new layer and select the ‘Line Tool’. Set the weight to 12px and create a small horizontal strip. Fill the strip with color #1e1e1e. Create a new layer (for this click on Layer> New> Layer or you can click on the ‘New Layer’ option from the Layer panel) and then click on ‘Pen Tool’ to create a triangle shape with color #1e1e1e.

Step 23

Now open the social icons mentioned in the resources section and paste them to our file. Align them in the lower left corner. Group these icons together, select the icon layers and click on Layer> Group Layers or Press Ctrl/CMD + G.

Click the ‘Create New Fill or Adjustment Layer option’ or Layer> New Adjustment Layer> black & White. Adjust the settings and click on Layer> Create Clipping Mask, so these settings can only effect the icons.

Step 24

Now simply add the copyright details using the ‘Type tool’ with color #535353 in the lower right corner.

And we are all done; our clean and effective Contact page prototype is ready. Hope you guys enjoyed the tutorial.