← Back to work
UI/UX DesignWebsite RecreationFigma

The Other Design Co. — Website Recreation

A pixel-accurate recreation of The Other Design Co.'s website, built as a self-initiated practice project to study minimal layout, white space, and typographic hierarchy.

The Other Design Co. homepage hero section
Type
UI/UX Design — Recreation
Tools
Figma
Timeline
Personal / Practice project
Status
Completed
The backstory

A site brave enough to do less.

Most agency websites try to impress with complexity — dark modes, heavy animations, gradients layered on gradients. The Other Design Co. does the opposite. White background, clean type, one blue accent, and so much breathing room it almost feels brave.

That confidence is what made me want to recreate it. I wanted to understand how a site this minimal still manages to feel premium — and the only way to really understand it was to build it myself, element by element.

The difference between minimal and empty — this site is minimal, never empty.

The recreation

Every section, rebuilt element by element.

The Other Design Co. full page recreation, auto-scrolling

The full page, auto-scrolling — hero → press logos → work samples → what we do → about → testimonials → FAQ → footer.

What I built

A full page recreation, section by section.

NavbarHeroPress logo stripWork samplesWhat we doAboutTestimonialsFAQFooter
The palette worth studying

One accent colour, used with total discipline.

The blue (in the #4A90E2 range) appears only on buttons, tags, and active states — never decorative. Every time you see blue, something is clickable or important. The restraint makes each use of it feel intentional.

White background
Blue accent #4A90E2
Typeface
Inter / system fonts
Icons & illustrations
None — type does the work
Design decisions worth studying

Why this site works despite doing so little.

One accent colour, used with discipline

The blue appears only on buttons, tags, and active states. Never decorative. Every time you see blue, something is clickable or important.

White space as a design element

Most designers treat white space as what's left over. This site treats it as a deliberate choice — sections have generous padding, and content never fights for attention because nothing is crowded.

Type hierarchy does all the heavy lifting

No icons, no illustrations, no background textures. Just font size, weight, and line height doing everything. The headline alone is confident enough to carry the whole above-the-fold section.

Every section has exactly one job

Hero explains who they are. Services explain what they do. About explains why they're different. Testimonials prove it. FAQ removes objections. Nothing does two jobs at once.

How it compares to Parallax

Doing both back to back taught me that great design isn't about a specific aesthetic — it's about making deliberate choices and committing to them fully.

Background
White  ·  Parallax: Near black
Accent
Single blue  ·  Parallax: Single gold
Feel
Light, approachable  ·  Parallax: Dark, premium
Complexity
Minimal  ·  Parallax: Moderate
Animations
None  ·  Parallax: Multiple
Approach
Type-led  ·  Parallax: Visual-led
What I learned
FigmaInter / system fontsBlue accent palette
View live prototype ↗ Compare with Parallax → Ask a question
← Zomato Unwrapped Parallax →