Laying the Foundations of a New Id
Telha Clarke is a Melbourne-based Structure & Inside Design studio. They work throughout varied undertaking typologies, from residential to business. Every undertaking is exclusive, responding to a number of components, so the end result is rarely a single imaginative and prescient.
We first began the undertaking by working carefully with Nicolas Garcia (Studio Paack), whom we selected to assist us with our shopper’s new model identification. The purpose was easy: refine their identification with a brand new wordmark, introducing extra trendy typography and a brand new colour palette.
We labored hand in hand to translate this new identification as successfully as doable into its utility on the longer term web site, in addition to throughout different supplies, together with communications, right down to the smallest particulars. We even introduced the rebranding and web site launch to life by customized 3D scenographies impressed by our shopper’s personal work.
Structure & Design Path
Clearly, we needed to keep considerably in a traditional, clear black-and-white aesthetic/really feel that works for many structure studios, however we wished to push the structure with a robust movement system, and good transitions between sections.
Our primary goal was to mix the class and minimalism of Telha Clarke’s initiatives with the depth of experience and technical rigor that outline their follow. This stability takes form by structured layouts and editorial sections, enhanced with delicate components that replicate the precision and self-discipline inherent to structure.
This consideration to precision additionally extends to the calls to motion (CTA). A single floating widget serves as the first interactive component all through the navigation, dynamically adapting to the content material to ship context-specific actions. It creates a stability between visible refinement and readability of the message that evolves with the consumer’s journey.
Designing with Function
The structure was designed with a transparent intention: spotlight the initiatives with out letting the interface take over. Telha Clarke’s work depends closely on sturdy imagery and cautious composition, so the web site wanted to behave as a supporting construction slightly than a visible assertion in itself.
Layouts are constructed round massive visuals, beneficiant spacing, and a restrained typographic system. Each component is positioned to bolster the content material hierarchy, permitting pictures to stay the first level of focus whereas textual content and navigation quietly present context.
As talked about within the earlier part, to keep away from overwhelming the positioning with repeated calls to motion, we launched a wise CTA widget system. Every web page encompasses a single, persistent CTA that adapts dynamically to the part at present seen on display. Because the consumer scrolls, the CTA updates its content material and intent, staying contextually related with out multiplying visible anchors throughout the web page. This method retains the interface quiet and intentional, whereas nonetheless guiding customers by the positioning in a significant manner.
We additionally tailored the identical widget for a number of functions: serving as a filter dropdown on the Works web page for cell, or remodeling right into a ‘Subsequent Venture’ button that robotically expands when reaching the underside of a undertaking web page, inviting customers to discover additional.
A Movement System that Displays Craft
The movement system was crafted to really feel refined, but at all times intentional. The animations needed to replicate the precision and calm inherent in Telha Clarke’s architectural work, by no means flashy, at all times thought of. Each interplay, each hover, each scroll impact was calibrated to be clean, elegant, and intentional.
The positioning opens with a loader that reveals the brand new wordmark in two steps, subtly referencing the duality of the 2 founders, Tim Clarke and Stuart Telha. The loader’s deliberate tempo displays the care and craftsmanship behind the studio’s work, creating a direct hyperlink between the digital expertise and their architectural strategy.
Seamless Connections between Sections
We launched delicate scrollytelling sections all through the positioning, significantly on the homepage and About web page. The purpose was to attach sections easily, virtually imperceptibly, making a narrative movement that enhances each storytelling and the general scroll expertise.
This strategy additionally solved a key problem: the right way to showcase Telha Clarke’s work with out overwhelming the consumer, highlighting solely the three or 4 initiatives the studio wished to function. On the homepage, for instance, the “highlighted works” part flows right into a deeper exploration of their imaginative and prescient by a contextual grid of pictures. The grid supplies further glimpses of the studio’s broader work, utilizing delicate parallax and depth to complement the visible expertise. One key picture then expands and scales, main into the “Our Imaginative and prescient” part. Every animation and transition is rigorously designed to attach sections seamlessly, holding the consumer immersed whereas gently guiding them by the story of the studio. The result’s a clean, elegant narrative that balances focus, context, and movement.
On the About web page, the picture within the “Values” part is used to create a seamless transition into the subsequent part. The impact depends on a clip-path mixed with a translateX animation for optimum efficiency. Utilizing GSAP and the highly effective ScrollTrigger plugin, this ends in a clean, high-performance scroll-linked animation.
const animation = gsap.timeline()
const valuesRect = this.$values.getBoundingClientRect()
const imageRect = this.$imaginative and prescient.getBoundingClientRect()
const prime = imageRect.prime - valuesRect.prime
const backside = valuesRect.backside - imageRect.backside
const left = imageRect.left - valuesRect.left
const proper = valuesRect.proper - imageRect.proper
animation
.to(this.$picture, {
clipPath: `inset(${prime}px ${proper}px ${backside}px ${left}px)`
})
.to(this.$innerImage, {
x: imageRect.left + imageRect.width / 2 - retailer.w.w / 2,
scale: 1
}, 0)const animation = gsap.timeline()
const valuesRect = this.$values.getBoundingClientRect()
const imageRect = this.$imaginative and prescient.getBoundingClientRect()
const prime = imageRect.prime - valuesRect.prime
const backside = valuesRect.backside - imageRect.backside
const left = imageRect.left - valuesRect.left
const proper = valuesRect.proper - imageRect.proper
animation
.to(this.$picture, {
clipPath: `inset(${prime}px ${proper}px ${backside}px ${left}px)`
})
.to(this.$innerImage, {
x: imageRect.left + imageRect.width / 2 - retailer.w.w / 2,
scale: 1
}, 0)Leverage the Energy of GSAP’s registerEffect
GSAP’s registerEffect is a strong technique that permits you to create reusable animations throughout your complete web site, whether or not used as standalone animations or inside a timeline.
On this undertaking, for the reason that web site is comparatively easy, we primarily use it for the title reveal animation. It’s mixed with piecesjs, a light-weight framework primarily based on native parts that lets us create a JavaScript class related to a DOM component. This class is robotically instantiated every time the component seems within the DOM.
Creating the Impact
This impact is pretty easy, nevertheless it permits us to reuse the very same animation all through the web site, sustaining constant easing, length, and stagger values. This helps guarantee a cohesive and constant movement system throughout all the expertise.
gsap.registerEffect({
title: 'revealTitle',
extendTimeline: true,
defaults: {
ease: 'expo.out',
length: 1.2,
stagger: 0.1
},
impact: (targets, vars) => {
const tl = gsap.timeline({ defaults: vars })
tl.to(targets, { yPercent: 0 })
return tl
}
})Utilizing the Impact in a Part
We used piecesjs to simply reuse this title animation all through the web site. Nevertheless, because it’s registered as a GSAP impact, we are able to additionally use it anyplace inside particular timelines when wanted.
import { Piece } from 'piecesjs'
import gsap from 'gsap'
class Title extends Piece {
mount() {
this.cut up()
this.initTrigger()
}
unmount() {
this.set off?.kill()
}
cut up() {
...
}
initTrigger() {
this.set off = retailer.scrollTrigger.create({
set off: this,
begin: 'prime 90%',
as soon as: true,
animation: gsap.results.revealTitle(this.splittedTitle.occasion.traces)
})
}
}
customElements.outline('c-title', Title)Then you definitely merely must name the element immediately within the HTML:
Telha Clarke is a Melbourne primarily based structure & inside design studio. This illustrates a reasonably easy use case, however the identical strategy can completely be utilized to extra complicated animations and parts.
Tech Stack
- Frontend: Templating dealt with with Blade (PHP), complemented by Tailwind CSS for styling.
- GSAP: Our go-to for complicated and high-performance animations, mixed with ScrollTrigger for scroll-based results.
- Lenis: For clean scroll, by Darkroom Engineering.
- Taxi: For highly effective JavaScript web page transitions, by Unseen.
- piecesjs: JavaScript framework constructed on native net parts, by Quentin Hocdé.
- Again-end: WordPress as a CMS, enabling versatile and customized content material modifying for the shopper, powered by ACF.
- Figma: Our primary design software for net layouts.
- Jitter: For all our web site movement exploration.
Ultimate Ideas
The important thing to this undertaking was making a cohesive new identification for Telha Clarke, from the model itself to the web site, whereas staying true to the clear, minimal world of structure. The purpose was to provide full area to the studio’s content material, whereas bringing our inventive perspective to resolve challenges by movement and good, approachable UI techniques. This undertaking is the results of a detailed collaboration from the very first branding discussions by to the event of the positioning, guaranteeing a constant narrative all through.
Thanks to Nicolas Garcia (Studio Paack) for his assist on the model identification, and to Emeric Desgranges for crafting a totally customized 3D scene for the web site’s social media communication.
A particular because of Tim and Stuart for trusting us all through the method and giving us the liberty to refresh the studio’s identification whereas staying true to the essence of their work.
