AGK — Andreas Gregor Kawa
Research-led thinking. A precisely designed digital experience.
AGK is a research-led website for Andreas Gregor Kawa, an architect, urban planner and independent researcher exploring orientation, post-industrial transformation and decision-making under uncertainty.
The digital experience translates complex research frameworks into a structured, accessible interface with a distinctive visual identity and adaptive Dark/Light design modes.
02 Project overview
The project creates a coherent digital environment for presenting academic research, methodological frameworks and professional expertise.
The design prioritises readability, information hierarchy and intuitive exploration, allowing visitors to navigate complex material without unnecessary visual distractions.
My role
- Digital strategy
- Information architecture
- UX/UI design
- Visual identity
- Responsive frontend development
- Content structuring
- Technical implementation
03 Technology & implementation
The AGK website combines custom HTML, CSS and JavaScript with GSAP, ScrollTrigger, Lenis and WebGL to deliver an interactive multimedia experience. GSAP controls scroll-driven animations and transitions, Lenis provides smooth scrolling, while a custom WebGL scene introduces real-time graphics and spatial depth. Responsive CSS layouts, fluid typography and a coordinated Dark/Light design system ensure visual consistency across devices. Motion, contrast and spatial composition are used deliberately to guide visual attention and support the presentation of complex research content.
01Frontend
- Hand-built HTML, CSS and JavaScript
- GSAP with ScrollTrigger for scroll-driven animation
- Lenis for smooth scrolling
- Custom WebGL scene for the brownfield visual world
02Styling
- A single custom stylesheet using CSS custom properties for theming
- Fluid, clamp()-based responsive typography
- CSS Grid editorial layouts
- Light theme via :root, dark theme via a data-theme attribute override
03Functionality
- Primary navigation across Orientation Theory, Adaptive Brownfield Systems, Research and Essays
- Accessible theme toggle (aria-label and aria-pressed) switching the page's data-theme attribute
- Scroll-driven scene and section transitions
04Deployment
- Served from the 21webdesign.co.uk domain
- Static asset delivery (HTML, CSS, JS, imagery)
A dedicated contact page is in place, structured for future contact details; it is not yet a submitting form.
04 UX/UI & design system
Two visual modes. One coherent design language.
The visual identity combines restrained editorial typography, architectural precision and natural, muted colour relationships.
Two carefully coordinated colour schemes allow the interface to transition between a light, minimal presentation and a darker, more immersive reading environment while preserving hierarchy and visual consistency.
- Research-oriented content structure
- Clear information architecture
- Structured navigation
- Distinct visual hierarchy
- Long-form reading support
- Responsive layouts
- Theme adaptability
- Accessible interactions
Light mode
Dark mode
Editorial type, verified from the live stylesheet.
- Source Serif 4 for headings and pull quotes
- Inter for body copy and interface text
- Fluid, clamp()-based responsive type scale
- Deliberate serif / sans-serif editorial contrast
05 Information architecture & UX
The platform organises research, methodology, essays and professional information into clear navigation paths, supporting both introductory exploration and deeper engagement.
Navigation groups the method into stages — theory, framework, practical method and supporting essays — so visitors can enter at an introductory level or go directly to the applied method.
06 Accessibility, responsive design & SEO
Semantic structure, responsive breakpoints and long-form typography support reading across devices, alongside an accessible theme toggle and SEO-oriented page structure.
WCAG conformance, Lighthouse scores and measured performance have not been independently audited — these reflect implementation practices, not certified results.
07 Outcome
AGK demonstrates how thoughtful information architecture, distinctive visual design and focused web development can transform complex research material into a coherent and engaging digital experience.
Digital Strategy · Information Architecture · UX/UI Design · Responsive Frontend Development