How to design a landing page – skygate workshops

In March we’ve organized workshops for designers in our Wroclaw office. From over 60 applications we’ve chosen 14 participants from quite different areas of expertise - graphic designers, but also copywriters, architects and illustrators. Those amazing young people came from different cities in Poland such as Warsaw, Katowice and Poznan to spend their weekend at self improvement.

The idea

Why did we choose this very topic? In skygate we’re more and more often asked to design and develop landing pages for specific products or marketing campaigns e.g. check out this project on Behance . Despite appearances, landing page design is a challenging area of web design. The maximum of content and call to action must fit into a clear and concise form. What matters here is conversion.

For our internships and workshops we’ve also designed a dedicated landing page intern.skygate.io Firstly, to facilitate signup process, secondly to show how it works and why it is useful to separate information aimed at one specific target group in the form of a landing page.

ux workshops

Features of good landing page

During the design phase we always devote much time to user experience part. UX focuses on users' needs, attitudes and behavior patterns, building intuitive interface and its usability. Preparing wireframes and prototypes first is crucial to eliminate mistakes and avoid major changes when the web design part comes in.

ux-web-design-wireframes

10 advices when designing a landing page:

  1. Must be extremely good-looking to grab attention.
  2. Headline should explain clearly what the page is about.
  3. Prepare a crystal clear paragraph copy, the user won’t have time to read complicated information.
  4. Include value proposition, benefit statements and an irresistible offer. Main user’s benefits may be distinguished by e.g. bullet-points.
  5. Think about best possible call to action (CTA) - instruction provoking an immediate response (‘call now', ‘sign up’, ‘download’ etc.).
  6. Make sure the user is guided smoothly through the page and whole process.
  7. Short explainer video is a nice-to-have, because it converts well on landing pages.
  8. Prepare form with limited fields. Every additional field that the user needs to fill out lowers the chance of successful signup.
  9. Set an exact end date of the offer, so the user needs to hurry up.
  10. The page must be well developed and well optimized - especially on mobile.

Once you’ve build a landing page you can (and should) test different variations and options to improve the conversion (A/B tests).

landing-page-wireframe

Examples of well-designed landing pages

Designed and developed by skygate:
intern.skygate.io
Blutera
Hotels Combined

The pages we like and show as an example of good landing page design:
Run4Tiger
Valioco
NTMY The Show
Gifrocket
Hand.Gallery
Behance Year in Review

The course of workshops in skygate

  1. Business side: First we’ve discussed landing pages from the business perspective - in what circumstances do we use them and why is it worth to do it.
  2. Trip to Capitol Musical Theatre that is almost vis-à-vis skygate office for inspiration.
  3. Debriefing: We’re working on a real case and our client TEDx Wroclaw came for debriefing. Michał told about the idea of project, its goals, promises, RTB and finally the aim of the dedicated landing page.
  4. Components: We’ve discussed components of a landing page and information hierarchy.
  5. Examples: We’ve analyzed good examples of landing pages and case studies.
  6. Tools: We’ve shared tools helpful in building websites such as UXPin and Adobe XD.
  7. Prototyping: Each group prepared flowchart and home/menu sections order.
  8. Designing: Photoshop steps in.
  9. Feedback: After a day’s work each group presented their landing page and got feedback.
  10. Afterparty!

debriefing-tedx-wroclaw-design-workshops-skygate debriefing-tedx-wroclaw-design-workshops landing-page-design-workshops-skygate-office landing-page-design-ux-workshops-green-office landing-page-workshops-for-designers ux-design-workshops design-ux-workshops-green-office ux workshops landing page design how-to-design-landing-page-workshop landing-page-design-prototyping-mockups design-ux-workshops-skygate-poland ux-web-design-teamwork landing-page-designing workshops-designers site-structure-wireframes-workshops workshops-for-designers-poland workshops-landing-page-design how-to-design-landing-page lunchtime-lunch-in-office lunchtime-soups-zupa-wroclaw food-salad-cheese capitol-musical-theatre-wroclaw-inside capitol-musical-theatre-wroclaw skygate-beer-afterparty afterpaty-dj-set-green-office