Creating a landing page is one of the best and easiest way to promote your product or service on multiple platforms to get more customers. If you only have an idea for a potential product or service, you can use a landing page to measure interest even before building and acting on it. Defining the Key Pain Points Since landing pages are usually built for specific business purposes like getting more users, subscribers or more product purchases, their effectiveness hugely relies on design decisions. Most important elements of a successful landing page: Have only one and clear conversion goal (e.g. getting a new user)

Make sure every element of your page supports this conversion goal.

There is one CTA (call-to-action) button always visible, so the user can decide any time to use it.

Provide social validation in the form of testimonials or customer stories.

Break up long content with subheading, bullets and formatting to make it easier to read. The Challenge During the last couple of weeks, I set myself a challenge to design a landing page, with the following points in mind: It has to follow the points mentioned in the previous section (points in the most important elements of a successful landing page part).

It has to use common landing page design elements such as the 3-feature-section and testimonials.

It has to be in line with the latest design trends on Dribbble (e.g. bold typography, use of subtle shadows, gradients, rounded corners on cards)

Only use elements, which are easy-to-create during the development part and it’s possible to code within a couple of hours. For the topic of the landing page, I come up with a fictional company called ShowTrackr. ShowTrackr is specialized for automatic TV show tracking and uses machine learning for giving recommendations truly customized for users’ tastes.

Execution: Design During the design execution, I started with the Hero section first, since this is the part, which the users will see first after the page loaded. The layout I chose for the hero section is a two column layout, because this way the user can immediately connect mentally the main message with the visuals. I placed the text group on the left side of the layout because the F-shaped reading pattern the users will start with the main message first.

Hero section of the landing page

Using the big gradient rectangles has double purposes. One of them is that it draws attention to the visuals (in our case the iOS app within the iPhone X mockup). The other one is that it makes the overall look & feel of the hero section visually more appealing and more modern. The purpose of the third, blue gradient rectangle in the bottom left corner is to subtly show the possibility of scrolling and balance the left and right side of the design.

3-features section (benefits section) of the page

About the placement of the CTA buttons, I used them to provide a frame for the structure of the landing page. The most important CTA part is in the hero section, so the user can immediately act on it. Placing logos of partners below it can also reinforce the decision of the user. In case the user is not convinced right away and need more information before using the CTA button, there is a permanent ‘Get started’ CTA button visible in the fixed positioned navigation bar. This way a CTA option is always visible during scrolling and discovering the content of the landing page.

Testimonials section of the landing page

After the user became familiar with the brand and its services as well as the testimonials, there is one final CTA section at the end of the page. Using a center aligned approach here ensures that there are no distractions that can get in the way of using the last call-to-action option.

Footer section of the landing page with the final CTA