design a landing page
TRANSCRIPT
![Page 1: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/1.jpg)
DESIGN A LANDING PAGE
![Page 2: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/2.jpg)
CHOOSE THE CONTENTof a landing page
![Page 3: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/3.jpg)
WHAT IS THE GOAL ?a quick overview of the productmake people want to buy the product
![Page 5: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/5.jpg)
LANDING PAGE ARE STANDARDIZEDHeader helps to navigate.Hero has the UVP (Unique Value Proposition).Features are just after the Hero.Footer contains the contacts information.
![Page 6: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/6.jpg)
SECTIONS
![Page 7: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/7.jpg)
SECTIONSYou must find all these section in the form :
headerherofeaturespricesfooter
![Page 8: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/8.jpg)
HEADER
show the logohelp to navigate to the main sections
![Page 9: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/9.jpg)
HEROA hero has 3 parts
![Page 10: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/10.jpg)
HERO / UVP
A UVP (Unique Value Proposition)
![Page 11: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/11.jpg)
HERO / PREVIEW
A preview of the product (screenshot or video) which explains :what is the problem ?how the product solves the problem ?
![Page 12: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/12.jpg)
HERO / CALL TO ACTION
A call to action which open a register form
![Page 13: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/13.jpg)
FEATURESThe product features with :no bullshit, just the essentialquick to read
![Page 14: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/14.jpg)
PRICESDepend on your marketing
![Page 15: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/15.jpg)
FOOTERFooter contains contacts, legals, etc.
![Page 16: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/16.jpg)
CREATE THE WIREFRAMEof a landing page
![Page 17: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/17.jpg)
USEpaper, pens and scissor to build :
![Page 18: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/18.jpg)
LET'S <CODE>a landing page
![Page 20: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/20.jpg)
SOLUTION 2 : TEMPLATEReady‐to‐use themes on :
Themeforest
Wrapbootstrap
![Page 21: Design a landing page](https://reader030.vdocuments.site/reader030/viewer/2022032618/55b57903bb61ebce788b45c6/html5/thumbnails/21.jpg)
© Fabien Vauchelles (2015)
SOLUTION 3 : CODE YOURSELFYou can learn from :
known sites (e.g.: )
templates site : , designer site :
Themeforest WrapbootstrapDribbble