So you just purchased a new hosting account and you some great ideas for your next project. Instead of just having the host default page up for your domain name why not create a coming soon page that is simple and effective.
There are many reasons to create these coming soon pages. The first reason is to make your product or service look more professional instead of having the “This is a website” page that your hosting company provides you. Secondly, it can help promote your site before it is even launched. Be sure to include your twitter account or an email subscription so people can follow the progress of the site. It allows them to get more excited about something they haven’t even seen yet.
Example Screenshot
Designing the page
When you start the design keep in the back of your head that this does not need to be a complex page on the contrary actually. This page needs to be simple yet effective. It must also convey a message of what the site will offer to get people interested. Don’t spend too much time on this page as you need that time to complete your other ideas. Let’s go ahead an open up photoshop and get started.
1. Open up a photoshop document 900px by 700px with a transparent background and the settings below.
2. Now lets fill in the background by going up to Edit > Fill.. chooser color from the drop down and put in the hex code #333333 and hit OK.
3. Now select the rectangular marquee tool and in the drop down box at the top choose Fixed size. Enter 900px for the width and 300px for the height.
4. Before you click anywhere go up to Layer > New > Layer… and name it Top. Now you can click anywhere in the document and make sure you drag the selection to the top.
5. Make sure you are selected on the newly created layer not the dark layer and go up to Edit > Fill… choose color from the drop down and enter #ececec for the hex code.
6. Now we have our top section put together all we have to do is bring in the logo. Open up your logo and drag it into your document. This is an important one because you want the brand to really stand out so make sure your logo is prevalent.
7. Next we need to add in the COMING SOON portion so they know that the site is not just a broken site. You don’t have to necessarily use COMING SOON, just something that lets the customer know that it’s not available yet. First create another new layer by going to Layer > New > Layer… name it Shadow. Grab your rectangular marquee tool and set a fixed size to be 400px wide and 30px high. Click and make the selection directly underneath the logo.
8. Grab your gradient tool and in the Gradient Picker (which is in the top left) choose your second option which should be foreground to transparent. Also set your foreground color to black by pressing D on your keyboard. Click approx. 5px above the selection that you have and while dragging down hold the shift key and let go when you get to about the middle of your selection. Once that is done drop your opacity for this layer in your layers palette to 10%.
9. Next we will use a layer mask to fade the corners out diagonally. Go up to Layer > Layer Mask > Reveal All. This allows us to see the complete layer and then fade it out by using the color black. You should still have your gradient tool selected and Foreground to Transparent selected and black as your foreground color if not make sure you do. Next drag the gradients below each of the corners in an upward diagonal direction like the screen shot below.
10. Once that is finished go ahead and add the coming soon text in.
Coding the page with CSS3
I just recently did a post on The basics of HTML5 but today we are going to stick with XHTML and use the XHTML Strict DOCTYPE.
The Basics
11. This is the bare bones of what an HTML page must consist of in order to display properly. Add the code below to a blank HTML file and save it as index.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Alive Again Apparel</title> </head> <body> </body> </html>
12. Next create a CSS file and name it style.css. Now lets link our CSS file to our index.html file so we don’t forget. Add the piece of code below directly above the closing head tag. Oh and to save you some trouble make sure the index file and the CSS file are in the same directory.
<link href="style.css" rel="stylesheet" type="text/css" />
The HTML Structure
13. Now let’s choose exactly how the page is going to be laid out. We will be using a 100% width layout in this tutorial so we will need two divs for the top section. One to fill the color 100% across and the other to center the content. In the example below I took out all of the other tags except the body tags and what’s between them, but that was only to make it easier to see. You still need the other tags in order for the page to work.
<body>
<div id="top">
<div id="topcon">
<img src="logo.png" id="logo" />
<div><!-- This div will be centered and contain the logo -->
</div><!-- 100% color all the way across -->
<p>Alive Again Apparel is a Christian T-Shirt business that is getting ready to launch. We will be delivering spirit filled T-Shirt designs for a unique way to spread the gospel.
<p>If you would like more information please feel free to email us at <a href="#">test@test.com</a> or follow us on <a href="#" target="_blank" id="twitter">Twitter</a> to get news about the upcoming launch.</p>
</body>
14. Now we have our content and you guys should now have an html page that looks pretty boring with no styling at. Enter CSS3! Open up your CSS file and start with the code below. I know how dare I say use this. I recommend that you use some type of CSS reset instead of using this * method, but I used this for the sake of simplicity.
/*** Resets all elements ***/
* {
margin: 0px;
padding: 0px;
}
/*** Gives the body the dark gray background we used in PS ***/
body { background: #333; }
/*** Styles the links ***/
a { color: #999; }
/*** Sets paragraph styles ***/
p {
color: #ececec;
font-family: verdana, arial;
font-size: 12px;
line-height: 18px;
margin: 0px auto 20px auto;
text-shadow: 1px 1px 1px #111; /*** New CSS3 Property that adds the shadow ***/
width: 450px; /*** Allows paragraphs to be centered ***/
}
I used the Text-Shadow property right here which is brand new in CSS3. It gives our text a nice shadow behind it in most modern browsers.
15. Now that we’ve styled some of our HTML elements lets move on to the layout.
/*** Top section 100% color ***/
#top {
background: #ececec;
border-bottom: 1px solid #fff;
margin-bottom: 30px;
width: 100%;
}
/*** Topcon centers the page at 900px ***/
#topcon {
margin: 0px auto; /*** Centers the page ***/
width: 900px; /*** A width is required in order for it to center ***/
}
16. Notice in the HTML above I added ID’s to the twitter text and the logo. We will use these specific ID’s to style them
/*** Styling the Logo ***/
#logo {
width:445px;
height: 125px;
display: block;
margin: 0px auto; /*** Centers the logo in the 900px box ***/
padding: 100px 0px;
}
/*** Styles the twitter link ***/
a#twitter { color: #4ce6fd; }
The Final Product and Plug 
If you hadn’t guessed already Alive Again Apparel is a Christian T-Shirt Business I am starting and I wanted to walk you through my process of creating a coming soon page that can be seen here.
Please keep a look out for the launch of our Christian T-Shirt Business and be sure to follow us on twitter to keep up to date with the progress @AliveAgainApprl
Pingback: Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials | Marketing for Companies