← Back to work
UI/UX DesignWebsiteFigma + Framer

Parallax — Presentation Design Studio

A full four-page studio website designed for a fictional presentation-design agency, built as a UI/UX portfolio piece.

Parallax homepage shown on a laptop against a starfield
Type
UI/UX Design — Website
Tools
Figma + Framer
Timeline
Personal project
Status
Concept / Portfolio piece
The backstory

It started as someone else's brief.

Started as a real client project for a relative who runs a presentation-design business. The client dropped out halfway through. Rather than leaving it unfinished, I completed the entire site as a portfolio piece — turning someone else's brief into proof of what I can do as a beginner UI/UX designer.

If you're pitching presentation design, your own site is the pitch. It either closes or it doesn't.

The homepage

Hero, services, process, pricing, FAQ — the whole pitch in one scroll.

Parallax homepage full scroll

The homepage, auto-scrolling — hero → services → process → why Parallax → selected work → pricing → FAQ → CTA.

Work, About & Contact

Every page designed to behave like the product it's selling.

Parallax work page full scroll

Work — project index plus three full case studies on one scrollable page.

Parallax about page full scroll

About — studio story, team photo, values.

Parallax contact page full scroll

Contact — centered form with full project detail fields.

Design system

Built from scratch — colour, type, and a component library.

Near-black #0A0A12
Gold accent #E8A847
Headlines
Space Grotesk
Body
Inter
Component library
Buttons, badges, cards, dividers, nav
Design decisions worth mentioning

Why one gold accent?

Confidence doesn't need colour. One accent used consistently creates more impact than five colours used carelessly.

Why blurred work previews?

Curiosity converts better than full reveals. Blurring the slide images in the Selected Work carousel makes visitors want to click through to see more.

Why the orbit animation?

Parallax — the apparent shift in position when you change perspective — deserved to be made visual. Three spinning rings around a gold orb in the Why Parallax section makes the brand name literal.

Why Space Grotesk?

It's geometric and confident without feeling cold. Pairs well with Inter, which handles body copy cleanly at any size.

Key sections & interactions
Services cards
Hover lift + gold top line
Process steps
Hover blur effect on inactive steps
Why Parallax
Card hover with glow
Selected Work
Carousel with blur reveal + rotating gold border
Pricing
Monthly / annual toggle
FAQ
Accordion expand / collapse
Orbit
Three rings spinning at different speeds
Blob CTA
Morphing gold shape animation
What I learned
FigmaFramerSpace GroteskInterTabler IconsChatGPT (slide image generation)
View live prototype ↗ Ask a question
← The Other Design Co. Back to all work →