Proton VPN
learning project (clone).
In this project, I tried to create an exact Proton VPN website clone, matching every detail. It was a very good learning experience for me and I picked up a lot of new skills that I’ll break down in this case study.
Type
UI Design
Scope
1 week
Project Year
2025
Why Proton VPN?
I chose Proton VPN because the design was really good. Everything was done well, the color contrast, the typography, and the way the features were shown in boxes. It just felt right to learn from and remake.
What Did I Do?
-
Homepage with dropdown overlays, hovers, and FAQ toggles
-
Sign Up page
-
Pricing page with toggles, buttons, and hovers
What Did I Learn?
- I noticed how few font sizes and spacing changes were used, and it still looked so clean
- I realized consistent spacing makes a huge difference
- The limited color choices actually made the design look stronger
- The spacing between headings, images, and sub-headings was done so neatly
- I learned how to build toggles, hover states, click states, idle states, and switch states
- I got a better sense of alignment and white space and how much it matters
- Overall, it opened my eyes to a lot of small details I never paid attention to before
Interactive Prototype Link -
Proton VPN UI/UX Clone - Click here
Home
