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.
