Everything but desktop design was ours
- 10 pagesmobile design and full build
- 5 collectionsin the CMS
- Partner deliveryfor guts.agency
A finished desktop design, and everything it does not cover
guts.agency came with the desktop design done and the rest of the road ahead: how the site behaves on a phone, how the motion actually works in a browser, what the editors will maintain afterwards, and every page in between.
A design that stops at desktop is not half a project. It is a project where the half that is left is the half that has to survive contact with real content, real screens and a real CMS.
Delivered for guts.agency
We did
- Mobile design, every page
- The full Webflow build, ten pages
- Motion, built with GSAP
- CMS, five collections
Came ready
- Desktop design
What we did, in order
Took the desktop design to the phone
Ten pages redrawn for a screen the original never addressed, at content lengths that do not cooperate: fund names, portfolio companies, article titles.
The same page at 390px Built every page in Webflow
Not a template with the design poured in. The page structure follows the design, and the CMS underneath it is five collections the editors work in.
Built the motion in GSAP rather than in the Designer
The ring arcs behind the home page, each one tweened to its own scale, and the word by word reveal on headings through SplitText. Scroll work with more than two keyframes stops being maintainable in the Designer, and whoever inherits this site has to maintain it after everyone has left.
Fixed what only shows up in the browser
The podcast grid tabs were scoped wrong, so switching one tab moved every grid on the page. That class of bug does not appear in a design file. It appears the first time somebody clicks.
Three forks, and the reason for each
Let the finished desktop design reflow down to the phone, or draw all ten pages again for it
Drew all ten, as mobile designs in their own right
The design that arrived never addressed the phone, and the content it has to hold does not cooperate at that width: fund names, portfolio companies, article titles. Reflowing a desktop layout down leaves every place those strings break to whoever opens the site first. Redrawing them was part of the half of this project that had to survive real content, real screens and a real CMS.
Pour the design into a template, or build the page structure to follow it
Structure follows the design, with five collections under it
A template delivers ten pages faster, and it makes the design negotiable to fit the template. The design was the one part of this project that arrived finished, so that trade ran the wrong way. The structure follows the design instead, and what repeats lives in five collections rather than in copies of a layout. Those collections are what the client’s editors maintain once the site is theirs.
Native Webflow interactions, or GSAP
GSAP for the scroll work, native for the rest
Native handles hover and click perfectly well. A scroll timeline with more than two keyframes becomes something nobody can safely edit in the Designer, and this site changes hands after we finish.
Screens
Captured from staging, the site has not launchedPortfolio, four columns with two larger cards News and Insights Podcast, the tabs rebuilt Value creation Contact
What was built
- 10pages, mobile design and buildThe desktop design covered the layouts. Everything a phone needs was drawn here.
- 5CMS collectionsWhat the editors maintain once the site is theirs.
- GSAPcustom scroll motionWritten rather than clicked together, so it survives an editor opening the page in the Designer.
- Partnerdelivered for guts.agencyAnother agency’s client, their design system on desktop, our name on none of it publicly.
What it is built out of
- FigmaWhere the mobile screens were drawn, against the desktop files that arrived from the partner.
- WebflowHanded over as a site the client’s team can run.
- Webflow CMSFive collections, so the pages the client edits most are content rather than layout.
- GSAPScroll work the Designer cannot express, and nobody could maintain if it could.
- ClickUpOne board with the partner agency, so review notes did not live in a chat thread.
- ClaudeQuick edits straight in the code, for the changes that are faster typed than clicked.
