01 / 09 · WebsiteВебсайт
Common WellСпільна криниця
A bilingual site that walks a visitor from the water crisis in southern Ukraine to a concrete way to help — in one scroll.Двомовний сайт, який за один скрол проводить відвідувача від водної кризи на півдні України до конкретного способу допомогти.
01 — Context01 — Контекст
Common Well is a community organisation (a concept) that helps villages in the Mykolaiv, Kherson and Dnipropetrovsk regions restore wells and boreholes, test their water openly and look after their own sources.Спільна криниця — громадська організація (концепт), яка допомагає селам Миколаївської, Херсонської та Дніпропетровської областей відновлювати криниці й свердловини, відкрито перевіряти воду та самостійно доглядати за джерелами.
The site speaks to two audiences at once: donors and partners who decide whether to support the work, and village councils who want to join.Сайт звертається одразу до двох аудиторій: донорів і партнерів, які вирішують, чи підтримати роботу, та сільських рад, які хочуть долучитися.
Common Well is a fictional organisation created for this portfolio; figures on the site are illustrative.Спільна криниця — вигадана організація, створена для портфоліо; цифри на сайті ілюстративні.
02 — Task02 — Завдання
Explain a technical topic — water quality and infrastructure — without jargon, show where and how the organisation works, and turn interest into a request to join.Пояснити технічну тему — якість води та інфраструктуру — без жаргону, показати, де і як працює організація, і перетворити інтерес на заявку долучитися.
03 — My role03 — Моя роль
I designed the site in Figma section by section and then built it by hand as a fast static site with a language switch, a video hero and animated counters.Я спроєктувала сайт у Figma секція за секцією, а потім зверстала його вручну як швидкий статичний сайт із перемикачем мов, відео в першому екрані та анімованими лічильниками.
04 — Design decisions04 — Дизайнерські рішення
StructureСтруктура
The page follows the questions a visitor asks: what is the problem → what has changed → where do you work → what exactly do you do → how can I join.Сторінка йде за питаннями відвідувача: у чому проблема → що змінилося → де ви працюєте → що саме робите → як долучитися.
TypographyТипографіка
Unbounded, a wide display face with full Cyrillic, gives headlines weight; a quiet sans keeps long paragraphs light.Unbounded — широкий акцидентний шрифт із повною кирилицею — дає заголовкам вагу; спокійний гротеск робить довгі абзаци легкими.
ColourКольори
Deep navy and a clear water blue on white: trust, clean water and enough contrast for accessibility.Глибокий темно-синій і чистий синій на білому: довіра, чиста вода й достатній контраст для доступності.
Presenting informationПодача інформації
A “water passport” card presents test results like a real document; a map shows the three regions; a timeline gives the context.«Паспорт криниці» показує результати тестів як справжній документ; мапа показує три області; таймлайн дає контекст.
05 — Result in detail05 — Результат у деталях
Full screensПовні екрани
Desktop · 1440 pxДесктоп · 1440 px
Mobile versionМобільна версія
390 px390 px
Key scenariosКлючові сценарії
- Understand the problem in 10 seconds — headline, short lead and numbers on the first two screens.Зрозуміти проблему за 10 секунд — заголовок, короткий лід і цифри на перших двох екранах.
- Check where the money goes — a donor finds regions and districts on the map.Перевірити, куди йдуть кошти — донор знаходить області й райони на мапі.
- Trust the water — a resident reads the water passport with test results.Довіряти воді — мешканець читає паспорт криниці з результатами тестів.
- Join — a village, partner or volunteer picks a role and writes an email.Долучитися — село, партнер чи волонтер обирає роль і пише лист.
- Switch language — every text exists in Ukrainian and English.Змінити мову — кожен текст є українською та англійською.
06 — Summary06 — Підсумок
A finished, fast and bilingual site that tells a technical story in human words and leads to one clear action.Готовий, швидкий двомовний сайт, який розповідає технічну історію людською мовою і веде до однієї зрозумілої дії.
- Live site with a UA / EN switchРобочий сайт із перемикачем UA / EN
- Responsive layouts for desktop and phoneАдаптивні версії для десктопа й телефона
- Figma file with every sectionFigma-файл з усіма секціями
- Lightweight static code, easy to hostЛегкий статичний код, простий у розміщенні
Synthetica 2026Synthetica 2026
Website and deck for an AI & design conference — 10 screens, motion and developmentСайт і презентація конференції про ШІ та дизайн — 10 екранів, анімація й розробка