The document discusses landing pages and provides examples of exercises for designing landing pages for mock products. It notes that landing pages are good for telling short stories, segmented marketing, showcasing products, and getting signups. Landing pages are less suitable for tasks like purchases, theoretical topics, or lots of text. The exercises involve being given a fake product and creating a landing page, then comparing it to a real example.

1. Landing Pages
from Prototype to HTML
Natã Barbosa
Belo Horizonte, MG - March 2015

3. Landing pages are good at
• Telling a short story
• Segmented marketing
• Showcasing a product
• Getting sign ups
• Testing ideas

4. Landing pages are good bad at
• Performing tasks (e.g. buying a product)
• Introducing highly theoretical topics
• Presenting text information
• Giving many options to the user

5. One sentence intro and “Call to action” button
More details about what it is, the user must “get it” here
Testimonials, use cases, “Call to action” again
http://www.mygreatproduct.com

12. Web Design Trends 2015

13. InvisionApp

14. Slack

15. The Imitation Game with Google

16. Let’s do exercises.
1. I give you the product (fake name, real product)
2. You give me the landing page
3. I show you the real landing page
4. We compare and talk about it

17. Exercise #1
• FLY is a device that you wear on your wrist. It can detach off your
arm and take a picture of you.
• Features
– Boomerang mode
– HD
• Content to include: Video, testimonials, team, sign up form.

18. Exercise #2
• Smartlug is a beautiful piece of luggage designed for the 21st
century traveler.
• Features
– It can charge your phone
– Digital Lock
– Location Tracking
– Digital Scale
– Distance Alerts
– Trip Data
• Content to include: Video, media coverage, team, referral program,
pre-order

19. Let’s do exercises.
1. I give you the product (fake name, real product)
2. You give me the landing page
3. I show you the real landing page
4. We compare and talk about it

20. Let’s do exercises.
1. I give you the product (fake name, real product)
2. You give me the landing page
3. I show you the real landing page
4. We compare and talk about it

21. Let’s do exercises.
1. Nixie – http://www.flynixie.com
2. Bluesmart – http://www.bluesmart.com

22. Let’s do exercises.
1. I give you the product (fake name, real product)
2. You give me the landing page
3. I show you the real landing page
4. We compare and talk about it

23. Thank you.
Natã Barbosa
natabarbosa.com
natambarbosa@gmail.com

24. References
• http://www.coxblue.com/the-anatomy-of-a-high-converting-landing-page-infographic/
• http://thenextweb.com/dd/2015/01/02/10-web-design-trends-can-expect-see-2015/12/