Bespoke portfolio web design for Wearthly Studio, spotlighting their Eco-centric projects.
Web Design
Web Development
Live WordPress Site
Wearthly Studio: The Eco-centric urban design studio
Wearthly Studio, an ecosystem-centric design studio specializing in minimalist, eco friendly and geometric aesthetics for cities, approached me with an urgent need for a professional website. Victoria, the founder, required a sleek online presence to support her bid for important contracts. The project demanded both speed and precision, as the website had to reflect the studio’s unique philosophy while being completed within three weeks.
Collaborating with Victoria was fun. She already had a strong idea of what she wanted the website to look like and this made iteration and feedback really rapid and smooth between us. The result is a beautiful, mobile responsive site that is full of personality, showcases the studio's projects and invites visitors to make enquiries.
Timeline
3 weeks
Client
Wearthly Studio
Date
May, 2024
Industry
Urban Design
Visit Live Site
Crafting a Digital Identity Under Pressure
Understanding the studio's unique value and audience
To better understand how to design for Wearthly, I needed to understand its offerings and who its target users are. Victoria was very passionate and descriptive in explaining to me the unique space they occupy in the Design and Construction industry. Wearthly studio is an Ecosystem-centric Design Studio that helps cities plan and design Ecofriendly buildings and spaces, so they work with the government and large organizations on creative building projects. Designing content-first helps the website to stay structured. I collaborated with victoria to organize the content and navigation in a way that it feels intuitive and easy to use.
Catching the mood
To help me understand the mood she was going for victoria shared a moodboard. his helped understand the vibe she was going for: Minimal, Pastel, Type-focused, Swiss grid inspired layouts.
Aesthetic Check
After analyzing the moodboard, I gathered a selection of fonts and colors that matched the feelings I got from the moodboard. I streamlined the number of options to facilitate quick decision making. Here are the options that were presnted:
Sans Serif
Inter
Archivo
Manrope
Serif
Fraunces
Cormorant Garamond
Cormorant Upright
Playfair Display
Display
Spline Sans
Tenor Sans
Anybody
Great Warrior
Angle & Fairy
Melodrama
Clash Display
Bricolage Grotesque
Typefaces
Select Screens
A simple homepage
The goal of the homepage was to make sure visitors could instantly understand what the studio was about. The copy used, the whitespace and the colors helped to communicate that effectively.
Current Home Screen
Showcasing projects with style
We wanted the website to be built around the projects, so clicking the enter button from the homepage takes you directly to the projects gallery. In the Projects page the names of each project are clearly visible, a deft hover interaction shows you brief details about each project and clicking takes you to that specific project. The animations were made using custom CSS and GSAP to ensure smooth micro-interactions.
Projects Page
Inviting visitors to say Hi!!
The main footer (found on the about us page) was designed as a contact form to invite users to leave a message. It was crafted such that filling it would be satisfying and it would take less than 30 seconds.
Footer
Early concepts for the homepage
These are early iterations of the Studio homepage. We went through several iterations before we settled on the current one. I created the illustrations. Here are some of my favorites:
Early homepage concept 1
Early homepage concept 2
Reflections
Keep it grounded..
This project was a real test of my ability to think on my feet and stay grounded when things got hectic. I had to juggle both the creative and technical sides of things, making sure the website looked amazing while also being easy to use. I'm proud of what we achieved with Wearthly Studio's website – it shows how much a well-designed, well-planned project can really make a difference.
Next Steps
Well we've been monitoring user traffic using Google Analytics, and it's been great so far. We might work on a redesign in the future to keep it looking modern. Would love to work with Victoria again.
