Role
- UI/UX Designer
- Frontend Developer
Project Duration
- 4 months
Tech Stack
- WordPress
- Elementor
- Figma
- Custom Code (Parallax, Cursor Hover)
What if a website didn’t need to explain itself?
What if you could scroll through a portfolio, say nothing, and still understand everything?
That’s what this project asked of me: a visual experience for a junior architect where the work said it all — no captions, no copy-heavy case studies. The intended audience? Architecture firms and senior designers used to flipping through portfolios quickly, instinctively. I had to respect that — and design for it.
But I also had to keep my client in mind. They needed a site they could update themselves on WordPress, built with Elementor, with just a touch of coding magic (mostly for image parallax effects). Balancing the client’s creative vision with technical practicality became the heart of this UX journey.
The Build: Grid-Based, Client-First, Parallax-Ready
I started with the bones — a clean grid system that mirrors architectural logic. Every section breathes. Whitespace wasn’t a luxury here — it was part of the identity.
Subtle parallax effects brought a sense of depth, implemented via lightweight code that wouldn’t break Elementor’s live editing. Instead of flashy animations, I focused on gentle transitions and image priority.
The About page is short, straightforward, and welcoming.
The Project Gallery is text-free by design. No overlays. No clutter. Just curated images, each optimized for clarity and distinction. A hover-reactive custom cursor quietly helps users know where they are, enhancing interaction without disturbing the aesthetic.
Challenges & Creative Solutions
Challenge 1: Minimal Text, Maximum Clarity
No project titles. No blurbs. Just images. That meant:
- Each image had to be visually distinct and meaningful, even in a grid.
- I removed all visual clutter and added a custom hover cursor to signal interactivity without adding text.
Contrast and structure became my tools for intuitive navigation.
Challenge 2: A Disjointed Timeline
Due to shifting priorities and changing times, both our schedules were disjointed and our meetings inconsistent regarding the development of the website. So I:
- Took initiative and structured the site in advance, with placeholders where needed.
- Communicated using Messenger for lightweight updates and asynchronous feedback, and adapted to their rhythm without letting progress stall.
They appreciated the flexibility — and felt guided without being rushed.
Outcome: A Clean Portfolio that Champions Minimalism
In the end, we delivered a portfolio that matched the rhythm of its field: clean, focused, and confidently understated. The client was proud. The employers it targeted? Likely felt right at home.
And for me, it was a masterclass in how less really can be more — if you design with intention.
Hindsight & What I’d Do Differently
This project taught me a lot about silent communication — not just in visuals, but in collaboration.
If I could go back:
- I’d explore accessibility enhancements even for image-based layouts, like:
- Hidden aria-labels or alt-text for screen readers.
- An optional toggle for showing image titles (for users who prefer orientation help).
- Keyboard navigation and better focus states for cursor users.
I’d also prep tutorial mini-guides for my client, so updating content would feel even easier. Because handing off a site is just as important as designing it.
Ready for Success?
Don’t miss the chance to get a website that truly represents you! Choose a template that suits you or schedule a meeting for a custom design that fits your budget!