Design & UX
Article
By Anum Khan

Design an Appealing, Effective “Coming Soon” Page

By Anum Khan
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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.)

--ADVERTISEMENT--

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!

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?