Website for a private community
kolosok.ru
Responsive landing page for the private Kolosok community
The challenge
The community needed not only to explain its features but to create a feeling: “these are my people”. A single page had to cover values, audience, platform, events, and subscription, guiding the user from the first emotional impression to a deliberate join


Page scenario
I built the landing page not as a feature catalogue but as a decision path: first an emotional entry and the values, then situations and social proof, then the platform’s capabilities, events, the joining path, and the price
Each following block changes the format: large typography, cards, testimonials, interface elements, and interactives alternate so that the long page keeps its pace and attention
Visual system and hand-drawn graphics
I used the hand-drawn graphics from Kolosok’s design system, which I also developed, as a second typographic layer of the interface
Handwritten words and arrows do not duplicate the text: they surface key meanings, guide the eye, and add a lively tone to the strict modular grid


Interactive
Instead of two identical value cards I designed an interactive scene where the user interacts with two elements. On land you can plant a seed and grow ears of wheat; on water you can send out ripples that spread from a touch
Earth became a metaphor for support and growth, water for the connections between people. The community’s key idea is not explained by text but experienced in the interface
Platform
Instead of a feature list I showed the product through the app interface. Tabs switch between individual scenarios (finding people, direct messages, content, and events), and a smartphone screen lets you see the platform before joining
That way functionality reads as an experience, not as a set of promises
Subscription calculator
Choosing a plan is the moment a user makes a decision. I designed a calculator where every choice of the offered options synchronously changes the term, the price, and the CTA, so the user immediately understands what they pay for and how much
Preparing for development
The Figma file is not a set of static screens. I turned repeating elements into components and states, set up Auto Layout for responsiveness, and defined how blocks behave at different screen sizes
In comments I described the animations and interactions: the scroll intro, the navigation appearance, tab switching, card expansion, the calculator, and the FAQ. The developer received not only visuals but precise rules for the interface behaviour
