HOW TO: Create a Landing Page Design Concept in 10 Minutes

The fastest guide to landing page design ever.
The fastest guide to landing page design ever. Hold on to your cursor, this will be Sonic the Hedgehog fast! (Image source: Top Gear - BBC)

It’s 4 days until the busiest week of the corporate calendar and your company is in the throws of a last-minute marketing campaign to attract new customers. Tension is high and management is prickly and nervous.

The campaign goal is to gain 500 new customers by offering a 20% iPhone discount coupon during the upcoming week.

And the meeting starts in 10 minutes…

Your first responsibility is to spend 30 seconds panicking, 20 seconds doubting your ability and 10 seconds sprinting back to your desk to find a napkin and a pen.

After wasting that first precious minute, you now have 9 minutes left, which makes my job 10% more difficult. Nonetheless, I’m here to save your rear-end. So put down your coffee, take your paper & a pen and sit down in a quiet room as we pull off something remarkable.

The 10-Minute Landing Page Design Process

Quickly follow these 7 steps, using your gut instinct to make any critical decisions. Remember, any copy you dream up for the campaign can be revisited after consultation with the team/boss/client. At this point your goal is to construct a landing page template that tells a coherent story and is designed (in structural terms) to lead your customers to the watering hole.

1. State the primary offer in terms of the benefit to your customer

For example: “Get 20% of a new iPhone when you buy before October 16th”

2. Write a secondary line of copy to describe how they get it

“Register to receive a coupon you can print out and take to the Apple Store or use online. ”

3. Define the “hero shot” to be used

Choose from and describe: a photo, illustration, diagram, graphic, chart or series of steps that will represent the primary image for the page.

4. Write 5 simple bullet points that describe the offer

List the important characteristics covering a mix of benefits and features. Enhance the time sensitive urgency if relevant (it is in this case).

  • Access the internet anywhere with the fastest iPhone ever (benefit)
  • Built-in video camera (feature)
  • Voice control (feature)
  • Never get lost in a new city with the GPS and Compass (benefit)
  • Now 20% cheaper, for one week only (urgency)

5. Write a Call to Action (CTA) that maintains the momentum of your headline

Keep it punchy and accurate: “Register for your iPhone discount coupon”

6. Do a napkin wireframe sketch

Quickly sketch out your concept in a simple wireframe on anything you have to write on. Include a footnote that says:

** This concept was produced in under 10 minutes and will become infinitely more awesome when our designers get their hands on it.

7. Prepare your elevator pitch

Write a 30-second description of everything you just accomplished in steps 1-6. It will impress the pants off anyone you discuss the campaign with. Oh, and do it in 30 seconds.

The Campaign Meeting

Think, if you will, of the scene at the end of Staying Alive, where the girl asks John Travolta what he’s going to do next (having delivered the performance of his life only moments ago).

His answer? “I’m going to strut…”

Melodrama? Perhaps…
But 10 minutes ago all you had was a silly coupon idea.

By following the Unbounce 7-Step Landing Page Design Program, you will be able to create a framework for any landing page concept that will stand up to scrutiny. Using a structural blueprint promotes consistency and can add substance to the briefs you hand over to your designers.

Future Uses of the 7-Step Program

This is but one example of how to fly by the seat of your pants in splendid fashion. There are many other scenarios that will present themselves throughout your work day that you can utilize to plan your next landing page, including:

  • While commuting: Make use of that time on the bus or train. Caveat: don’t design and drive.
  • In the bathroom: Gents, we know you take a magazine with you – try smuggling a paper and pen inside your issue of Fast Company next time. Ladies, I’m not sure if you consider working on the toilet a viable option, but it’s worth a try.
  • In the bar: It shouldn’t be a complete surprise that a little alcohol can rub your creative glands the right way. If you’re going to try this, just remember the cardinal rule: Write Drunk… Edit Sober.

Here’s to being awesome.


Oli Gardner

About Oli Gardner
Co-Founder of Unbounce. Oli has seen more landing pages than anyone on the planet. He is an opinionated writer and international speaker on Conversion Centered Design.You should follow Oli on Twitter
» More blog posts by


  1. Keith

    I hope you are going to compile these and put it all in a book. Seriously. They are that good. Happy Thanksgiving.

  2. Oli Gardner

    Thanks Keith, and to you.

  3. David Hand

    This will prove very usefull

  4. The Noob Guide to Online Marketing (With Giant INFOGRAPHIC) | SEO Basics

    […] NOOB TIP: If you aren’t using standalone landing pages yet and don’t really know how to make a landing page that converts well you might want to read HOW TO: Create a landing page design concept in 10 minutes. […]

  5. The Noob Guide to Online Marketing (With Giant INFOGRAPHIC) « 与其耿耿于怀,不如超然面对

    […] NOOB TIP: If you aren’t using standalone landing pages yet and don’t really know how to make a landing page that converts well you might want to read HOW TO: Create a landing page design concept in 10 minutes. […]

  6. Kshitish Purohit

    Hi Oli,

    I absolutely love the way your articles span a really human and back-to-reality side of things rather than tutorialising everything like a lot of other sites do!

    Here’s to being awesome!


  7. Adult Bunk Beds

    Do your research well and remember your visitors when creating your landing page and tailor it to fit their needs. By specifying your choices and concentrating on your visitor, you will stay on target.

  8. Make A Video

    You know how when you look for something you see it everywhere? Well that’s what been happening on this topic.

  9. 20 hilfreiche Artikel zum Thema Landing Page Optimierung — Marketing-Kitchen

    […] HOW TO: Create a Landing Page Design Concept in 10 Minutes […]

  10. Sameer Kamat


    You’ve got a fantastic way for new folks to get hooked on to your website. Brilliant, ever-green content!

    My favorite: The NOOB Guide to Online Marketing (I still haven’t digested all of it yet)

    Great work!

  11. 互联网营销权威入门指南(七) | 笔记会友

    […] Categories云计算技术架构行业方案前端开发JavaScript优化前端优化前端架构浏览器技术大数据技术架构行业方案搜索与推荐引擎推荐引擎搜索引擎数据库MySQLNoSQL用户体验设计电子商务互联网营销搜索引擎优化网站分析网站运营Project XHTML5 LabsAboutDonation互联网营销权威入门指南(七)  互联网营销  添加评论  标签:Online Maketing, 互联网营销六 012012   在第五个月中,将着眼于让沉闷的链接建设工作变得更加有序和顺畅。这个月的大头是引入A/B测试,将使用它来让你的邮件营销更加有效,并将在几乎每一个特定的营销推广方面都使用到着陆页。最后,将熟悉如何通过编写有关他人的内容来获得口碑,并增加行业内的曝光度。第五个月:建立商务网络、建立外部链接并开始进行测试[邮件营销]40. 对你的邮件进行A/B测试一些邮件服务提供商允许你对发送的邮件进行A/B分组测试。这是一个能弄明白你的客户对什么类型的触发形式,和什么样的品牌定位会有所响应的好方法。A/B测试常常被用来尝试不同的邮件主题,尽管通常来说简洁的文案效果更好(还有在规避垃圾邮件规则方面也很不错)。完成一天的测试后,你就能发现哪一种运行得更好。在邮件营销中有很多方面可以进行测试,比如:邮件主题一周中的发送日一天中的发送时间发件人的名字Mail Chimp 写的这篇关于邮件A/B测试的文章不错,值得读一下41. 链接建设讲到链接建设让人感觉太~棒~了。等等,事实并非如此。这也许是任何一个从事SEO的同行都要做的最乏味的活了。可怜的是,这活又是至关重要的。简而言之,你希望人们都能链接到你的网站,最好连关键词都与你谈论的话题相当匹配。内容营销(比如拥有一个不错的博客)如此重要的一个主要理由就是,人们将很有可能会基于文章讨论的主题来链接到你的内容,而不只是你的品牌名称。让你在品牌名称的搜索结果中排名第一很重要,通常也很容易实现。但是,要在你之前选定一些其他关键字或词组中也排名靠前的话,你就需要人们在链接到你的内容的时候,使用这些词组作为锚文本。例如,下面的第一行内容为网站排名“加分”的词组是“着陆页范例”,相比第二行内容则更突出品牌名称。Check out these awesome landing page examples from Unbounce. Check out these awesome landing page examples from Unbounce.因此,链接建设的基本途径中有两个重要的环节:编写优秀的/启发性的/有用的/有趣的内容,让人们愿意链接过来找到谁链接你,并优化这些链接下面是如何发现和优化链接的方法:步骤1:发现外部链接 你可以将自己的品牌名称、网站URL,以及与你的商务相关的主题在Google Alerts上进行设置。这能让你发现网络上正在发生的、提及这些的对话和内容。在第一时间加入这些对话非常地重要,发挥你的专长,并增加这个内容的读者们访问你的网站机会。你还能与博客或内容的作者进行互动,建立相互关系,并从中获利。你能通过网管工具来发现外部链接,但还有个更可靠的方法就是Yahoo Site Explorer。添加你的网站,然后点击explore ,再点击hit -> InLinks。这是找出谁链接到你的网站的最好办法,这样才能让我们进入第二步开始优化这些链接。步骤2:优化外部链接 安排每月对所有链接到你的网站进行一次审查。你可以将把它们拖到上一步提到的Google Alerts中来完成。然后,与链接来源的作者取得联系(通常情况是某人写的一篇博客中提到了你),并礼貌地请求对方帮个忙:换一个词组作为锚文本(anchor text,即超链接),使用那些能帮助你在某个关键词的自然排名结果中取得优势的词组。这是方式比起那些老掉牙的请求链接交换的垃圾邮件来得更好、也更正规。[提升转化率]42. 对你的着陆页进行A/B测试着陆页Tips:A/B测试 vs 多变量测试 多变量测试是一种相对比较复杂的测试方法,我们在这里不会涉及。它只有当你的数据采样量足够大时(页面流量足够大)才会相当有用。从小而简单的A/B测试开始。使用你之前在打分卡环节中完成的行动列表(To-do list),来确定对哪些部分进行测试。如果你曾在设计方向或页面布局(比如按钮颜色、文案、Logo大小、视频选取、文字的数量)上有过激烈的争论,那么你不是唯一的一个。我们也经常遇到,并且最终总是老板说了算。A/B测试能让你摆脱对这类决定的臆想,并且是任何一个转化率优化策略的基础。它能让你将不同的页面同时在同一个试验中展示出来,看看哪一个效果(转化率)最好。有很多工具能让这一过程变得容易操作:Google Website Optimizer(GWO):它要求你有一定的技术基础,在你的页面代码中添加脚本,但它是免费的Visual Website Optimizer (VWO):它是可视化版本的GWO,并且包含了一些高级功能,比如热力图和点击图Optimizely:它与VWO相似,能让你在可视环境下进行测试和调整Unbounce(事先声明:原作者是共同创始人):专业致力于创造和测试新的着陆页,比市面上其他的解决方案更专注于调试页面(相比创建页面而言)你现在明白了要开始进行一个测试,但是什么才是你真正需要测试的?之前的第34章节中,我们已经使用打分卡来帮助你找出着陆页上的哪些内容需要进行改变。当你构思和设计测试用的替换页面时,请回头参照当时的内容。菜鸟Tip:如果你到现在还没有使用独立的着陆页,也不知道如何制作一个转化效果良好的着陆页,你可以读读这篇教程:10分钟内掌握创建着陆页的设计要诀。[提升转化率]43.尝试5秒钟测试法另一个对你的着陆页进行详细检查的好方法是5秒钟测试法。它的原理在于,大部分的访问者仅用这么短的时间来决定是留在这个页面,还是离开。换句话说,你必须使用相当于一般电梯运行的速度,将你的销售理念传递给人们,并期待人们能接受。为了运行这个测试,先要找到相关的测试对象,并让他们坐在电脑前(最理想的情况是从你的目标市场中找一个对你的品牌还不熟悉的人)。让你的页面在屏幕上显示5至10秒钟,然后拿下去。询问用户页面上说了些什么。如果他们没有提及你的价值点,或者不理解这个页面是做什么的,那么这个页面就需要进一步精简。超赞的工具 能让你基于其网站的用户在线运行这些测试。菜鸟Tip:去除冗余、突出内容、重复测试 为了优化你的页面,你需要精简内容。试着尽可能地去除大段的文字,只剩下与你的目标直接相关的。增加一些留白,使内容显得更清晰,并缓解视觉上的负担。使用明确而简练的标题(这是此类测试中最重要的事情)。然后再测试一次,看看和之前相比“看懂”这个页面的人增加了多少。[内容营销]44. 写些关于他人的内容来建立友谊这是个简单又有效的点子。通过编写介绍他人的内容——并给对方一个不错的(优化过的)外部链接——对方将能注意到你,并逐渐提升好感。下面有四个方法能让别人注意到你写了关于他们的内容:如果你链接到对方的博文,他们通常会收到博客平台(比如wordpress)的通知如果他们使用了Google Alert,并设置了他们的域名或品牌名称,他们会看到你的文章当你通过社会化媒体分享这篇博文时,加入他们的名字(比如在微博上@他们),这样能引起他们的注意直接写邮件告诉他们你写了关于他们的内容这是一个与其他企业建立关系,或者与重要的线上的意见领袖培养默契的极佳方式。写到他人附带好处 如果你很幸运,你创作的关于另一家企业的内容积极向上又有趣,他们将会在他们自身的网络中分享这些内容——从而能拓展你的影响面,并带来新的潜在客户。记住,在博客文章的结尾处保留一个行动激发区域(call to action),以便最大化这些流量的效果。—————————————————————我是分割线————————————————————第五个月的Roadmap:   得意的那些事儿 发表于 16:01 +1  Loading … | 3 次浏览 评论 取消回复 名字 […]

  12. HOW TO: Create a Landing Page Design Concept in 10 Minutes | Unbounce » Web Design

    […] HOW TO: Create a Landing Page Design Concept in 10 Minutes | Unbounce […]

  13. Amanda Craig

    I love you. A lot.

  14. Online Coupons: A Must-Have Marketing Tool for Small Business

    […] UnBounce: Create a Landing Page Design Concept in 10 Minutes  […]

  15. Week 25: Month 5: Network, Build Inbound Links and Start Testing by Oli Gardner #noobmarketing | Dawning Day: Right Another Day

    […] NOOB TIP: If you aren’t using standalone landing pages yet and don’t really know how to make a landing page that converts well you might want to read HOW TO: Create a landing page design concept in 10 minutes. […]