RU EN

Website for a private community

kolosok.ru

Responsive landing page for the private Kolosok community

Scroll intro: the ear of wheat sprouts

Role

Web designer

Timeline

2 weeks

What I did

Information architecture, desktop and mobile layouts, hand-drawn graphics, components, Auto Layout, states, and animation specs

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

Hero screen and navigation
Hero screen and navigation

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

Landing page screencast

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

Hand-drawn graphics
Hand-drawn graphics

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

Interactive elements

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

Switching the platform tabs

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

Pricing

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

Project in Figma
Project in Figma