PSDFan Extra

How to Create an Effective Coming Soon Page

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:

Resources Used In This Tutorial

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


Get more of our great design content direct to your inbox
Join our newsletter and receive our best weekly content by email. Also get access to hundreds of free design resources via your Designer Toolkit area.

About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment

8 Comments:

  1. Daniel says:

    FIRST!!!!!!!!! :) .

    Awesome tutorial. Well explained. Is it possible to get a PSD TO HTML conversion part of it soon? That would be so great. Thanks!

    • Tom says:

      That’s a possibility, although perhaps after Blogs.FanExtra has actually launched, just to help drum up some more attention for it. We do have another PSD to HTML tutorial lined up soon though :) .

  2. dr.emi says:

    I like gradient and background logo effect! Nice and elegant!

  3. söve says:

    Nice tutorial.Thank you very much.

  4. Lee Fuller says:

    great tutorial, the design is bold yet simple, which is how it should be.. well done and thanks..

  5. Harry Ford says:

    Nice article I created one recently as well for a new design site I am launching can check it out here – http://duuel.com

    I wanted to go for something a little different.

  6. sandip says:

    nice man Can you please help me out with the css $ html code of this, thanks……

Leave a Comment:

Related Posts

Subscribe to PSDFAN and Get Your Free Designer Toolkit

Have every post delivered to your inbox and get access to hundreds of useful design freebies.

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY