PSDFan Extra

How to Create an Effective Coming Soon Page

Coming soon pages are generally very simply when compared to regular websites. However, they’re notoriously difficult to get right. The simplicity of the concept can actually overwhelm many designers, as they end up with a boring, lackluster design.

Today, we’ll look at how to design a simple, but effective coming soon page, and some of the theories to bear in mind.

This tutorial is actually inspired by one of our readers, who dropped me an email a couple of days ago:

“Hi I just signed up to get updated on the new site you guys have coming soon http://www.blogs.fanextra.com/ and I really liked the design you guys made for the page right now with the wavy lines and and gradient. Do you guys have a tutorial where you show this technique?”

In case you haven’t seen, we’re launching a new blog as part of our FanExtra Network. Check out Blogs.FanExtra today and sign up to be notified of our launch.

Typical Aspects of a Coming Soon Page

Generally you want to keep your coming soon page as simple as possible. You either want to simply inform people that your site is coming soon, or more often than not allow them to sign up to be notified of your launch. Therefore any other features that depart from these motives are unnecessary. Thus the typical features of a coming soon page are:

• Your logo
• A brief welcome message, or paragraph explaining what your site will be about
• A sign up form
• That should be about it!

Simple Doesn’t Mean Boring!

Coming soon pages may be very simple in terms of content, but are a perfect example of how you should pay attention to the details. By using good lighting, effective drop shadows and other subtle details you can really make a simple page very eye-catching.

Take note of this whilst reading the tutorial below:

Final Image

Here is a preview of the image that we are going to be creating:

Step 1

Create a new document (1000X700px) and fill your background layer with a linear gradient ranging from 11cbef to 0d94cc.

Step 2

Now create a new layer called ‘highlight’.

Drag out a white to transparent radial gradient from the top-center of your canvas. Then reduce this layer’s opacity to 25% and change the layer’s blend mode to ‘overlay’.

Step 3

Apply another highlight layer slightly higher up in your canvas, adding further lighting to your background:

Step 4

Now download the fractal brush set from the resources for this tutorial.

Create a new layer called ‘fractal brushes’. Apply one of the brushes using a white paintbrush, roughly over the top-center of your canvas.

Then reduce this layer’s opacity to 60% and go to layer>layer mask>reveal all. Use a large, soft, black paintbrush to mask off the edges of your fractal brush mark. This should provide a subtle detail for your background.

Step 5

Now paste in a large version of your logo’s icon design. Position this in the top-center of your canvas.

Then change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 35%.

Create a layer mask, and mask off the edges of this logo shape.

Step 6

Now paste your complete logo into the center of your canvas.

Apply an outer glow blending option:

Outer Glow Settings:

Blend Mode: Overlay
Opacity: 75%
Color: ffffff
Spread: 0%
Size: 15px

Step 7

Now apply some centered text underneath your logo area.

Smaller White Text Settings:

Font Face: DejaWeb
Styling: Bold
Size: 18pt
Kerning: -50
Color: ffffff

Medium Blue Text Settings:

Font Face: DejaWeb
Styling: Bold
Size: 22pt
Kerning: -50
Color: abf3ff

Then add a subtle drop shadow blending option to your text layer, in order to add definition.

Drop Shadow Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 19%
Angle: 90
Distance: 1px
Spread: 0%
Size: 1px

Step 8

Now apply two rounded rectangles (10px radius) underneath your welcome text. Make sure that these rounded rectangles are 7acce8 in color.

Then apply a 1px stroke blending option to each rounded rectangle layer:

Stroke Settings:

Size: 1px
Opacity: 25%
Color: 000000

Step 9

Now create a third rounded rectangle to the right of your form. This rounded rectangle will act as your submit button.

Apply a gradient overlay and stroke blending option to this layer.

Gradient Overlay Settings:

Blend Mode: Normal
Opacity: 100%
Gradient Ranging From: 016386 to 0181af
Angle: 90

Stroke Settings:

Size: 1px
Opacity: 30%
Color: 000000

Step 10

Create a new layer called ‘button highlight’.

Option+click on your submit button layer in your layer’s palette. This will select the shape of your button.

With this selection in place, create a small white-transparent radial gradient. Then change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 15%. This should create a subtle lighting effect over your submit button.

Step 11

To finish, just type out some text over your form, and add a basic copyright notice.

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.

Blogs.FanExtra – Launching Soon!

I hope that you enjoyed learning how we created the coming soon page for our upcoming website: BLOGS.FanExtra.

Sign Up Today To Be Notified of Our Launch

Download Source File for this Tutorial

Related Posts

• Design a Clean Corporate Website Layout
• Create an Effective Coming Soon Page
• Design a Unique Grungy Website Layout