Here are some things I consider when building landing pages for my apps and products.

All you need is some Photoshop skills and basic HTML & CSS knowledge in order to copy/paste find/replace your way to a kickass landing page.

First let’s dissect the essentials of a landing page. Here’s one of mine.

Example Landing Page Annotated

1. Use a beautiful screenshot

One that shows the main mechanic of the app. What does the user see most of the time while using your app? Show off how great that looks! To show off your app, you have options:

—Use a stock photo

Pros:

  • You can usually find *exactly* what you’re looking for
  • Allows for the most page customization

Cons:

  • Cost can range between $10-$50 for the right photo, sometimes up to $100
  • May be difficult for a photoshop novice to convincingly place the screenshot into the phone

—Use this .png of an iPhone to create your own image in photoshop

Pros:

  • Takes a much shorter amount of time, just drag & resize your app screenshot
  • Still allows for a large amount of page customization

Cons:

  • Looks a little boring next to a person holding your app in their hand

—Use placeit by breezi (recommended!)

Pros:

Cons:

  • Large image size
  • Limited environments, only a several per phone type

2. Clear Description of Product

What is this thing? Why should I care? In this example, we are looking at the official app for an event. You may have heard the phrase, “You only have 8 seconds to get someone’s attention.” I believe it’s even less. Maximize your one shot for the user’s attention by directing what they look at first. Use big typography to capture attention. I used Helvetica Bold with -2 letter spacing and a slight drop shadow for an elegant letterpress effect. Protip— Here’s the CSS:

.calloutText {
 text-shadow:1px 0px 1px #fff;
 color:#333;
 max-width:580px;
 line-height:72px;
 letter-spacing:-2px;
 font-weight:bold;
 font-size:80px;
 font-family: Helvetica, sans-serif;
}

Need to convince people your app is worthwhile? Write a snippet about the main benefit it gives the user. Don't ramble about features, just state plainly why using your app good for them.

3. Highly Visible Call to Action

So the visitor understands the product is beautiful and worth their time, but now what? We want them to download it! Purchase it! Sign up! We want them to do something. Don’t make them work to figure it out. Use a large, contrasting, clickable element to capture the user’s eye next.

I used the following CSS code for my orange buttons (with a nested image inside):

.downloadButton {
 width: 230px;
 margin-right:34px;
 margin-top:10px;
 height:79px;
 background:#FF7D2D;
 background-position: center top;
 background-size:100% 100%;
 background-repeat: no-repeat;
 display:inline-block;
 position:relative;
 border-radius:10px;
}

Now that we know what we want to put in our landing page, let’s get into some design specifics.

Use a framework.

Nobody likes writing robust cross-browser responsive layouts from scratch. Bootstrap is always a good starting point. There’s also Skeleton. With these frameworks, you can copy the base example.html pages that fit the style you want and replace the content to get 80% of the way done.

Make it sexy.

Seriously. Begin with the screenshot(s) you use for the page, and pick your color elements from there. In my example I have pulled dark grey, beige, and orange from the screenshot. Make your buttons and text these colors— your page will have a unified and slick look.

Use subtlepatterns.com instead of flat colors to make your page interesting to look at. Copy the pattern out of the .png and paste it into your own new file, then you can freely add color or lighten/darken the pattern file.

Use 1px box-shadow on buttons and div elements and a 1px text-shadow on your copy to make it pop. Yeah, I went there.

Short & Sweet

Hit them right in the face with why downloading your app is a great idea, and present them with a big shiny download button! That’s all you need to do. Practice makes perfect, so volunteer to whip up some basic landing pages for your friends! You’ll be surprised how fast you improve!

Check out land-book for some amazing landing page inspiration.

Thanks for reading! Good luck selling your product!

Follow me on dribbble and twitter!

Anything I left out? Email me at william@coolkidsdesign.com

Advertisements