Blog:

Editors note: Interested in web apps? Join us at the Future of Web Apps Miami on February 24th to learn more about HTML5 and hear from companies such as Twitter, Facebook, Mint, Reddit and more. Buy your tickets now and get $50 off.

In this weeks 10 minute episode of Doctype Nick shows you how to create gradients without images in CSS3, and Jim takes an in depth look at local databases in HTML5.

This is the last episode we of Doctype we will be syndicating on Think Vitamin. We hope you have enjoyed them and found them valuable.

I spend a lot of time working on large-scale site designs, redesigns, and app designs, so it’s kind of fun when the pressure is on to develop a single lead generation page.

For the purposes of this post, let’s define a lead generation as a single page that is:

• Usually discoverable when a user clicks on an ad
• A page that precedes a much larger site, or a gateway that refers the user into a larger site
• Dedicated to rapidly getting users’ email/personal information for follow-up messaging and/or a trial account
• Almost always makes an offer (discount, trial period, etc.)
• Not always connected in an obvious way to the larger app’s site (a user might struggle to find it again)

In some ways, a lead generation page, is a micro version of the app’s home page or sales flow.

Companies make substantial investments in Google AdWords (and others) to drive traffic to lead gen pages, so these single page designs have hefty expectations to deliver compelling user experience, design creativity, and form functionality

Lead gen page design is not only short, sweet, and mostly self-contained. It’s also a perplexing balancing act between designing for conversion “the dough” and employing some conventions (e.g. not hyperlinking logos back to the app’s main home page, stock photography, microcopy, offers, etc.) that feel more trickster-like “the spam.”

I’ve divided this post into two parts, 3 tips to follow when designing a lead generation page, and a 3-part redesign of an actual lead generation page that’s currently out in the wild.