Konrad.com
A redesign where the structure was fixed, so the craft went everywhere else.
- Role
- Designer, co-leading direction and design with Konrad's Design Director
- Client
- Konrad (in-house)
- Year
- 2026
- Scope
- Visual direction, design system, motion, interaction, icon set, design QA
At a glance
- 0changes to the IA. All effort went into UI, motion and detail
- 1motion language, from page transitions down to button hovers
- 4variable collections in a deliberately shallow system
- ~5minutes per prototype iteration with Claude, not days
The brief
Redesign konrad.com, but keep the IA and page structure essentially as they are. No new sitemap, no restructure. That left UI, motion and detail as the only open territory, so that’s where all the effort went.
Where we picked it up
Research, a site audit and some early explorations already existed, along with a rough direction and a list of things already ruled out. We took it from there. We benchmarked against Linear, Koto, Vucko and Pentagram and landed on a dark, quiet, restrained monochrome.
The reasoning was simple: an agency site should stay neutral so the work does the talking. Client imagery and brands bring the colour.
Key decisions
A deliberately simple system
I built four variable collections: primitives, colours, spacing and responsive. Semantic tokens for text, fills, icons and borders all pull from one set of primitives, so changing a primitive once updates the whole site.
I kept it shallow on purpose, with few components, few variants, and variables doing the heavy lifting. An in-house site has no team maintaining it full-time, so the system had to look after itself.
One spatial language
Everything moves vertically. Pages transition upwards, case study cards stack and overlap on the homepage, and the footer slides out from underneath.
The same move is then miniaturised. CTA labels swipe up on hover, eyebrows transition vertically, text rises in, and images reveal with the same upward wipe. One idea at every scale is what makes the site feel coherent and not merely animated.
Making the work grid move
Hover a case study card and the thumbnail blurs as a video surfaces inside it. Scroll on and it plays. Elsewhere, looping motion replaces statics. Konrad’s work is moving product, so the grid should move too.
Prototype the feel, not the picture
A static frame of an animation is a guess, and an icon only proves itself as part of a set. So I built a loop with Claude:
- Motion: idea, then prompt, then an HTML prototype, then a screen recording, then a decision in Figma.
- Icons: idea, then prompt, then scripted SVG geometry, then a preview sheet, then a decision in Figma.
Each cycle took minutes. That let me iterate on concepts instead of rebuilding them, and most prototypes died in an afternoon. That was the point: cheap to make, cheap to kill, and only the concept survives.
It earned its keep on the capability heroes. Each of the four (AI, Strategy, Design, Technology) needed its own cursor interaction, but they had to feel like one family. The answer was a shared base, where the cursor acts as a light source inside the geometry, plus one signature move per hero. Technology sends a pulse along circuit-like traces, and AI ripples outward through a network. The same loop produced the sub-capability icon set as clean, Figma-ready SVGs.
Claude compressed the time to seeing. Every decision stayed mine.
Keeping design in the build
Annotated specs covered the structure, and prototypes covered the feel. Developers could open a file and read the actual easing and timing values instead of interpreting a note. After that came Slack back-and-forths on edge cases and live feedback as things hit staging. Interaction quality only survives the build if design stays in the loop while it’s built.
What I took from it
- Constraints concentrate craft. When the structure is fixed, the detail is the design.
- Prototype the feel, not the picture. Motion decisions need motion evidence.
- AI moved faster, not decided. It compressed the time to seeing. The judgement stayed mine.
Video assets by Gabby [surname]