Web Design
Project Overview
Creating a landing page for VPN services with the target action of buying a VPN plan that has a clean and trendy design.
My Contributions
Full UX process from research to final high fidelity designs.

The Design Process

After establishing my task flow and conducting research, I started wirefaming the outline of the website, based on the content that best meets the business and user goals. Shown below is the low-fidelity wireframe and then the high-fidelity version of the design.

Design System

Design Systems are crucial to the design process as they help achieve visual consistency, thus creating a better user experience for the end user. Before starting the high fidelity design, IĀ first established a colour palette, as well as systems for shadows, typography, and different components of the website. This results\ed in a clean and polished end design that is easy for the user to navigate.

Typography System

Desktop Heading Scale

Across Web we utilise all six headings and follow the 4px rule for our spacing convention. Within our web styles we also notably showcase the link, bold, and default text styles.

Body Text

Across web we again follow the 4px rule for our text styles. We have four text sizes including large, medium, small, and overline text.

Button Text

We have three button text sizes across web and mobile. Each of these sizes shifts across devices from a font size and line height perspective

Colour Palette

We split our color palette between primary, surface, text, and secondary colors. We then identify tints and shades of those colours to use throughout a design for a consistent look and feel.

Action Shadows

We use action shadows to apply elevation to our product. We have four shadow ranges across our primary and secondary action colours.

PrivadoVPN landing page