Create an Effective Coming Soon Page

Final Image

As always, this is the final image that we’ll be creating:

The Design Theory

I’ve always been a firm believer that it’s often the details that result in a truly great design. Surprisingly, this often applies more to very simple designs, with less content, as these designs are the most likely to appear boring or empty if you don’t pay attention to the details.

In this article I will talk you through how to construct a very usable, applicable coming soon web page. I will also be discussing why I’m doing certain things, and what we’re trying to achieve with each step. This way you’ll not only be able to create a similar design, but you’ll understand the importance of the details, and just how effective they can be.

Step 1

Create a new document (1000X650px).

Fill your canvas with 0b6e8f.

Step 2

Create a new layer called ‘top gradient’. Use your marquee tool to select the top 150px of your canvas. Then drag down a linear gradient ranging from 014c65 to transparent. This dark gradient will help create a sense of depth and variation in your background, and will also help draw your visitor’s eye downwards.

Step 3

Create a new layer called ‘background highlights’. We’re going to create a simple lighting effect to add more detail and depth to our page background.

Start by applies 3 radial gradients (white to transparent) over various areas of your canvas.

Then to make the effect more subtle change your layer’s blend mode to ‘overlay’ and reduce it’s opacity to 30%.

Step 4

Now that we’ve created a cool background design, it’s time to add some content!

Download this awesome Box Icon.

Paste it into the top-center of your canvas:

Step 5

As this icon will be a focal point of our design, we want to make it stand out. However, always be wary of maintaining a degree of subtlety. You don’t want to make anything too bold or obvious or it will ruin the overall cohesiveness of your design.

I apply a drop shadow and outer glow blending option to my box layer:

Drop Shadow:

- Blend Mode: Multiply
- Black
- Opacity: 15%
- Angle: 90 degrees
- Distance: 5px
- Spread: 0%
- Size: 10px

Outer Glow:

- Blend Mode: Overlay
- White
- Opacity: 30%
- Noise: 0%
- Spread: 0%
Size: 32px

Step 6

Now add some centered text underneath your box icon. You can view my text settings below:

Logo Text:

- Font Face: Mido
- Size: 48pt
- Color: White, and also: 4dcbeb
- Kerning: -50

Tagline Text:

- Font Face: Mido
- Size: 18pt
- Color: 1a9aba
- Kerning: -50
- Other Settings: Faux Italics (there was no italics option for this font face, so I had to apply it in my character window).

Now let’s look at what’s going on with this typography. First of all, the font face ‘Mido’ is elegant and professional. This fits well with the theme of the site, and our clean background design. We’re giving visual precedence to our logo text over our slogan, by making our logo text considerably larger, and by making our tagline text color closer to our background color (giving it a faded effect). The white and blue wording in the logo text help distinguish between the two words, and also add variety/detail. The faux italics effect on our tagline helps the visitor instantly recognize this text as a tagline, as many taglines do use italics.

Step 7

Now apply a subtle drop shadow blending option your text.

This will make it stand out more against your background, giving it more impact:

Drop Shadow

- Black
- Opacity: 15%
- Angle: 90 degrees
- Distance: 1px
- Spread: 0%
- Size: 1px

Step 8

Now create a new layer called ‘email form’.

Within this layer create a rounded rectangle underneath and to the left of your logo. Ensure that it has a 5px radius, and is white. Then reduce this layer’s opacity to 25%.

This gives a nice fade effect, and makes your email form fit with your subtle background design.

Step 9

Now create a new layer called ’sign up button’ and create a 5px radius rounded rectangle to the right of your email form.

Apply the blending options shown below:

Inner Shadow:

- Blend mode: Multiply
- Black
- Opacity: 7%
- Angle: 90 degrees
- Distance: 3px
- Choke: 0%
- Size: 0px

Outer Glow:

- Blend mode: Overlay
- Opacity: 10%
- Color: White
- Spread: 0%
- Size: 15px

Gradient Overlay:

- Blend mode: Normal
- Opacity: 100%
- Gradient: Ranging from 055570 to 01384a

These settings will make your button really ‘pop’ yet still fit in with the rest of your subtle design. The subtle glow and inner shadow add depth to your button, making it appear to be slightly in front of the email form and background. This makes us want to push it naturally, much as we would do with a real-life button.

Step 10

Now we want to add even more ‘pop’ factor to our button.

Create a new layer called ‘button highlight’.

In your layers palette option+click on your button layer, to select it. Then with your selection in place return to your ‘button highlight’ layer and drag down a radial gradient (white to transparent) from the top center of your button.

Then change your ‘button highlight’ layers blend mode to ‘overlay’ and reduce it’s opacity to 25%.

This creates an extra lighting effect on your button, making it stand out even more:

Step 11

Finally, apply some text over your form/button (use the font Mido again).

Your layout is now complete!

Visual Hierarchy

If you look at the diagram below, you’ll see how I’ve structured the visual hierarchy to draw your eye down the page:

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome:

Download Source File for this Tutorial