Design an Appealing, Effective “Coming Soon” Page

Whether you’re working on a new site or redesigning an old one, a stylish “Coming Soon” page is a great way to keep your loyal followers informed. Without such a page, visitors might interpret your site as broken, down, unfinished, or even permanently gone. Make it known that you’re not neglecting your website, in fact, you’re actually investing even more time and energy into it. Designing a temporary page with information about your future plans (including a countdown that keeps you on schedule) is a perfect way to distinguish between a dormant, inactive website and a very active one with lots of plans in the works.

Of course, if you want your “Coming Soon” page to leave a great impression on your visitors, then your design has to be thoughtful and appealing. So, today we are going to create an appealing, effective “Coming Soon” page. In this tutorial we will use a variety of interesting patterns and blending options to get the desired result.

Let’s have a look at our final design before we start. (Download the finished, layered design file.)

Final-result2

Step 1

Open Photoshop and create a new file with a 750px width and a 575px height.

Step 1

Step 2

Create a new layer and fill it with color #a61c1c using the paint bucket tool.

Step 2

Step 3

Add a pattern to the background layer by clicking on “Layer Styles” > “Pattern overlay.”

Step 3

Step 4

Create a new layer and select a rectangular area using the rectangular marquee tool. Fill it with color #eed29b.

Step 4

Step 5

Select a hard round brush and adjust the settings within brush panel using the settings below. Then, use the brush on the above rectangle to create a pattern on the sides.

Step 5

Step 6

Now, click on “Layer styles” to add a pattern and drop shadow using the following settings.

Step 6a

Step 6b

Step 7

Select the type tool to add the desired title text. Then, click on “Layer styles” to add a drop shadow with the following values.

Step 7

Step 8

Repeat the same process and add some additional text.

Step-82

Step 9

Now, let’s start with the countdown. Select the ellipse tool and create a small circle using color #d03737.

Step-92

Step 10

Click on the “Layer styles” and add a stroke and an inner shadow to the above circle. Use the settings below.

Step 10a

Step 10b

Step 11

Select the hard round brush with a 9px size and set the foreground color to #bf9f63. Now, click on the ellipse tool and change the tool mode to “path.” Then create a small circle, right-click on it, and select “Stroke Path.”

Step-113

Step 12

Now, click on “Layer styles” and add a drop shadow to the circle using the following values.

Step 12

Step 13

Select the type tool and add the countdown text using colors #ffffff and #f7cf83. Then, click on “Layer styles” and add a drop shadow to the text.

Step-132

Step 14

Repeat the same process and complete the other three counters. Alter the next as needed.

Step-143

Step 15

Now, let’s move on to the subscribe section of our “Coming Soon” page design. First, select the type tool and add some text using the same methods that we used for the title.

Step-153

Step 16

Now, select the rounded rectangle tool and create a rectangle using color #f2e6ce.

Step-163

Step 17

Add a stroke and drop shadow to the new rectangle using the following settings.

Step 17a

Step 17b

Step 18

For the email field, select the rectangle tool to create a rectangle using color #36302e. Then, add a stroke using the following settings.

Step 18

Step 19

For the button, select the rounded rectangle tool and create a small rectangle using color #d03737. Now, click on “Layer styles” to add bevel & emboss and a gradient. Use the settings below.

Step 19a

Step 19b

Step 20

Select the type tool to add your desired text to our form field and submit button.

Step-20

Our “Coming Soon” page design is ready. I hope all of you enjoyed the tutorial. Let us know what you think!

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.

  • http://wpthemesdaily.com Robert

    Great design :) Although it’s not modern and colorful, this landing page capture my attention immediately. I suggest adding some arrows pointing at the optin form to make it more obvious for readers. Great work!

    • http://websoulz.com Anum

      Surely, some nice arrows will be a good addition, glad you like the design. Thanks

  • http://www.psd-dude.com/ Jhonny

    That’s a pretty cool design for a coming soon page, I might use it! thanks

  • http://LaunchSoon.com Toni

    For inspiration check out our gallery of coming soon pages:

    http://LaunchSoon.com/gallery.php

  • Djeem Ale

    Good to see this tutorial was created using Photoshop running on a PROFESSIONAL operating system. Good work, Anum, and thanks for the refreshing change.

  • Olivia Brown

    Will the countdown work? The post contains all design details, I loved the post.

  • http://orangelab.in/ PHP development

    super design and understandable design.

    well done guys..