In May 2019 the team at Hopeful Inc. approached me to reimagine and redesign a landing page for their new business venture. As the application had not yet launched, Hopeful needed a landing page to capture the attention of prospective users, to reflect the branding and design aesthetic that will eventually be seen in their app, and to have a bold call to action that greets the user upon visiting the page.
Adobe XD, HTML, CSS, WordPress (and basic PHP), Responsive Design, Bootstrap
Planning and Design
Originally, the Hopeful team was using a basic and unresponsive landing page that was built with an online website builder offering little functionality. The goal for me was to retain their blue and yellow colour scheme while offering a design that was fresh, modern, and scalable. This meant using new fonts, creating breathing room for the content, and designing the site in such a way that would allow for easy development in WordPress.
The thinking behind the new design was driven by the desire to evoke a feeling of hopefulness, which meant using imagery and colours that reflect this vision. For this reason the main hero image of a sunrise was an obvious choice. The colour choices of blue and yellow are meant to be reminiscent of the sky and sun. The design was originally created in Adobe XD before a custom theme was developed in WordPress.
Typeface and Colour
The typeface used for the project is ‘Raleway’ with sizes ranging from 48px for the main heading/tagline to 16px for the smaller body text. The appeal of Raleway is that it looks fantastic both as heading text and for the body. This unique feature of the typeface allowed for the use of just one font for the entire page. Only a few basic colours were used on the page while utilizing simple gradients in some sections. The colour scheme is bright and fresh and, rather appropriately, feels hopeful.
Imagery and Iconography
In order to lay out the details behind how Hopeful Inc. works, basic icons and images are used to create an easy to follow explanation for the reader.
Calls to Action
Simple forms are used both in the hero image and at the bottom of the page to ensure that users are able to easily sign up for updates or contact the Hopeful team for more information. The form at the bottom of the page is intentionally minimalist in design and nicely compliments the overall feel of the page.
Part of the requirement for the project was to give the team the ability to change and update content on the website. This required the page to be developed in WordPress. To achieve this, a custom WordPress theme was developed. Having a custom theme, rather than something pre-existing, allowed for the page to look identical to the original XD mock-ups. Once a basic theme was created I took advantage of WordPress plug-ins such as ‘Custom Post-Types’ (called in using PHP), ‘Formidable Forms’ (for both contact forms), and ‘Google Fonts’ (to easily access the ‘Raleway’ typeface used throughout).
The final product allows the client to log in to the WordPress admin panel and make changes to the logo, company tagline, contact form details, imagery, icons, and body text.