JULY 2025
TECHNOLOGY:
NEXT.JS / REACT / SANITY
SECTOR:
CULTURE & ARTS
Web Design
DEsign System
Interaction design
Live website
Client Problem
NoContext is a cultural foundation working across art, theater, technology, and workshops. It needed a website that communicated its mission, explained the purpose of its work, and encouraged visitors to support its activities through donations. The foundation also wanted a distinctive digital experience that preserved its unconventional visual identity.
My Contribution
I worked with other designers and two developers to translate the graphic designer's visual identity into a digital brand system. I defined how typography, colors, and interface treatments worked together, helped shape the distinctive navigation, and designed reusable UI elements, including glass-like effects. I was also responsible for the website responsiveness.
SURFACES
CONTENT
ACCENT
Color system
I organized the supplied dark and violet palette into reusable color roles for surfaces, text, accents, and interaction states. Shared color styles boosted revisions during the design phase, letting us update components and visual assets more easily while maintaining consistency across the website.
Typography
I worked with Defectica and Space Mono, using the supplied identity to define their roles and hierarchy across the website. The client chose the fonts, so the main challenge was adjusting the whole system to them.
EXPRESSIVE IDENTITY / DISPLAY
BODY / NAVIGATION / LABELS / CONTROLS
Distinctive details, reusable components.
I translated the supplied visual direction into reusable buttons, navigation controls, and glass UI elements. Component variants and shared variables for color, spacing, and typography helped maintain consistency while adapting these elements to different layouts.
Familiar interaction, distinctive expression
The foundation wanted a distinctive navigation menu without making the website difficult to explore. Building on the collaboratively developed desktop direction, I explored four mobile concepts, varying the controls’ position and appearance while keeping the same destinations accessible.
We kept the navigation model familiar, with recognisable labels and a flat mobile menu. I refined the language control and interaction details so the interface could retain its distinctive character without making basic actions unfamiliar.
01 / Arrow toggle
A central button integrates menu access into the page header.
02 / Floating control
A floating button separates menu access from the header.
03 / Text trigger
An explicit MENU label identifies the navigation action.
04 / Hamburger icon
A familiar icon places menu access in the header.
TOUCH TARGET
A compact icon sits within a larger tappable button.
MENU CONTROL
One central control opens and closes the menu. It was designed to also fit seamlessly into the site's aesthetics
SPACING
Space between links keeps each destination visually distinct. Ample spacing between elements prevents accidental interactions.
LANGUAGE SWITCHING
Polish and English options are available within the menu. Most visitors are Polish, and I wanted to keep the experience uninterrupted.
Turning interface rules into an implementation reference.
We brought responsive layouts, component states, and prototypes together in a shared Figma reference for developer handoff. This showed how the interface should look and behave across screen sizes, giving the development team a clear reference for implementation.
My WORK · PRODUCT & WEB