PrivadoVPN
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.
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.
The Design Process
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.
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.
Typography System
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.
