Portfolio website · Bento
STUDIO_STRUCT
A monochrome portfolio website using structural layouts, modular grids, and architectural-inspired visual hierarchy.
Monochrome paletteBold typographyStructural layout
Timeline
3 Weeks
Figma
Available
Format
Responsive web
Case Study
A structured studio presence
A monochrome portfolio concept using modular grids, careful spacing, and architectural hierarchy.
Focus
Bento IA
Modular content blocks keep scanning simple.
Tone
Minimal
Clean surfaces keep the work feeling premium.
Problem statement
Design studios often present work inconsistently
That makes it harder to communicate structure, process, and credibility clearly.
- Show services fast.
- Keep the hierarchy calm and direct.
Research insights
What users preferred
Users preferred modular layouts for scanning projects quickly.
- Minimal interfaces kept attention on featured work.
- Short labels were easier to scan than decorative copy.
Wireframes
Layout studies
Sketched a vertical stack with modular blocks and cleaner card spacing.
Frame
Editorial stack
Strong hero, compact service rail, clear project blocks.
Frame
Bento matrix
A modular layout for quick scanning and flexible growth.
High-fidelity
Final visual direction
Dark canvas with neutral accents, large captions, and accessible focus states.
Palette
Monochrome
Neutral surfaces keep the layout timeless.
Type
Bold sans
Typography carries most of the visual weight.
Prototype
Clickable flow
Prototype covered browsing, expanded project states, and quick contact entry.
Flow
Browse
Start from the hero and move into featured work.
Flow
Open
Expand projects into concise case study pages.
Iterations & rationale
What changed
The strongest iteration reduced decorative clutter and tightened hierarchy.
- Removed extra decoration.
- Kept motion subtle and quick.
- Added smaller, calmer card transitions.
Reflections
A calmer, more credible studio site
The result feels composed, readable, and ready to scale into a larger portfolio system.