@jjg talks about importance of initial 5 seconds of the advertisement pre-rolls in the Youtube video. Users will press “skip video” button if its not interesting to them. Same principle applies to landing pages of startups, users will press close button “x”, if it doesn’t explain about the product/service in first few seconds.

Storytelling is about communicating ideas.

Tell story in the Landing page within few seconds

Use Simple UI

I did a small research on Landing Page design pattern by picking few startup landing pages from betalist, noticed below common pattern -

1. Header text (header [h1/h2] tag) — Inspiration quote about the product. It must be short and clear sentence within 2 to 5 words .
2. Short description (paragraph [p] tag) — about the product/service, what it provides or how does it work.
3. Action button [button or form submit button] — it can be simple email signup button
4. contextual background cover (background Image / demo video) — must match with header text and description. More details explained shortly.
5. Logo with text

Link to screenshots of startup landing pages

I have developed simple landing page using basic HTML and CSS. No Javascript and client side framework. Github link

Page background cover — storytelling

Image is more than thousand words

Its great idea to have background cover image for the landing page. It should be specific to the context of header text and description.

Example: vidspoke.com landing page

vidspoke.com background image matches exactly with text description. Its clear from first glance this site is related to video production.

Video is more than 10 thousand words !!

1 step next to background image cover is to auto play background video of real use case or show demo of “how the app works”

Example 1: hutt — auto plays the video about the real use case.

Example 2: momunt app landing page shows how the app works instead of background video.

Finally, keep it simple and stupid.