MODERN LANDING PAGE TEMPLATE

A modern landing page is, in my view, an essential component in the online promotion of a product or service. Below is an example page I’ve designed and developed using modern HTML, CSS framework (Bulma) and some of my favourite JavaScript libraries (Rellax, AOS, smooth-scroll). Of course every experience needs to be tailored more specifically than this! However, based on my experience this could be used as a great starting point for any modern promotional web page. Let’s take a quick look at some of my process and methods used for creating this page.

WIREFRAMING & UI/UX DESIGN

For a fully-fledged, modern web project, low/ high fidelity wireframes are very important in order to fully understand our users needs and expectations, and importantly, how these will influence the final design. We need to examine flows, personas, mobile optimisation and more before we commit to this final phase in order to be accurate and successful in our overall design approach.

 

Here you can see some examples of the Figma wireframes I created which detail different areas of the landing page.

DEVELOPMENT

I think one of my most important skills is being able to pair my design skills with the ability to write modern code. I’m currently exploring and learning more about JavaScript, specifically ES6 features and React, which is a modern JavaScript framework created by Facebook and is well-suited to cross platform web applications. However, for front end pages such as this in which we want to tell a story or promote a product or service, we mainly rely on modern HTML, CSS and SEO techniques. We also need to be aware of the fundamentals of online advertising and social media, considering the content of social campaign posts and how they might refer to through to the page.

The top section of this page is critical because it needs to be high impact and have the ability to capture the interest of the user from the very first moment. I decided to use large, strong headings, impactful images and implement a parallax framework here which would enhance and contribute to this.

Fresh design and animation were two other features I wanted to be present on this landing page. To achieve that, I designed these vector graphics in Adobe Illustrator and implemented a JavaScript animation framework on the page. I think unique, modern designs and the presence of motion can help to boost the appeal and overall flow of a landing page.

It is also important to consider the use of rich content. As you can see above, videos and images are good examples of this.

 

Videos are a great, effective form of rich content. You can use a self-hosted HTML5 video like this with a custom thumbnail, or an embedded YouTube video. A video will offer a break from reading, or an alternative option for users that don’t want to read through all of the text content.

 

You may also notice that with the image below the video we’ve shifted the layout on desktop devices to give the page more of a magazine feel. If the design and layout remains static it may feel stale, as a result the user may lose interest.

 

Keep users engaged.

It is also critical for these solutions to be scalable and responsive across mobile devices. It is not unusual for websites to have over 60% of visitors browsing on mobile devices so I generally approach my designs with a mobile-first approach.

As you can see above, during development I have made sure that the page scales well on mobile devices by using a CSS framework with a grid system. This always requires great attention to detail and specific adjustments for different screen sizes but the end result should be a fantastic experience across all devices.

When considering the quality of text content within the page, an effective way to enhance reputation is to be factual. Statistics and infographics are very valuable when used correctly. Above is just one example of how you might showcase partners that share your goals.

Now that we’ve reached the end of the page it may be useful to shift the layout again in order to keep the user interested and diversify the over design of the landing page.

 

I have also decided to add a slider photo gallery, in order to further enhance the layers of rich content inside the page. This will contribute greatly to the user experience and overall freshness of the page.

For more detail, you can see a full copy of the landing page below. Be sure to read through the sections too as I decided to fill the page with meaningful content explaining each piece! This is something I will be able to use as a template for the design/development of my future web projects and I hope it will also give you an insight not just into my approach, but also the fundamentals of landing page creation and the various considerations to make when creating your own campaign pages.