Create a scalable and maintainable website with a strong identity
Overview
Founded in 2005, TT Architecture is an architecture firm that delivers thoughtful projects rooted in the territories of Réunion and Mayotte. Until now, the agency communicated about its latest deliveries and news primarily through its Instagram account and had no website.
My mission: create the agency's website from A to Z (from design to web development).
Opportunities
Tell the agency's story. Break away from expected and therefore boring conventions. Avoid creating a linear inventory of projects.
Process
Following the kick-off meeting, I facilitated a workshop to define the website's visual identity (character, agency tone).
Based on the visual identity workshop, I proposed two axes (philosophy) that incorporate architectural codes: the Free plan and the Structured, grid-based.
I also shared a visual curation to validate in order to understand the agency's universe and artistic sensibility. The idea was to select images that would fit TT's universe and also identify those that wouldn't fit at all, and explain why.
It helps establish:
- the positioning with the choice of visuals reflecting rhythm/movement, randomness (surprise, astonishment)
- a materialization of the journey, highlighting visuals, textures/materials
- selecting a color palette that makes sense and recalls the local materials used, the territorial anchoring.
The founders chose to go with a mixed solution: promote exploration, surprise, and visitor wandering, while still allowing the possibility to quickly search for projects.
The site would therefore have two types of search: one exploratory (wandering) and the other targeted (filters to search for projects). The various animations make the journey lively and full of surprises.
The further you progress through the journey, the more you move from abstract to concrete.
Design
With this material and the challenges in mind, I first designed the site's architecture and different proposals for the exploratory journey.
The homepage is a blank canvas upon arrival, and as you move through this space, images and words appear ephemerally. These are clickable and redirect to a specific page on the site: either the search page with a filtered category, a project page, or the "About" page. On mobile, this sequence appears automatically, with similar display time per asset. This animation was custom-coded in Javascript and underwent numerous iterations/technical explorations on Webflow to achieve an optimal result.
Finally, the other pages of the site were custom-designed.
Development
Finally, I developed the website on Webflow (Client First method) and launched the site (domain name connection):
Features:
- A homepage for exploratory search and a targeted search page (filters)
- Low code: JavaScript for the exploratory homepage animation
The agency had no specific deadline, so I frequently shared the process steps and invited the agency to provide feedback within set timeframes to successfully complete the project seamlessly.
