Website Design Process
Личный сайт Олега Зыбайлова: независимая практика, где студия — платформа, а Олег — лицо. Первый читатель — швейцарский тендер на разработку и поддержку сайта.
Концепция 1 — Стартовый протокол
Мир «Стартовый протокол»: один участник, заявленный в пяти категориях. Гигантская дисциплина едет справа налево, портрет перекрывает буквы, работы — строки со ссылкой, а не плитки.
Open СобраноКонцепция 2 — Модульная сетка
Собрана по твоим вводным: квадрат логотипа во всю страницу, асимметричная швейцарская сетка, две колонки текста сверху, перебивка квадратами, работы — список с превью по наведению.
Открыть СобраноКонцепция 4 — Role morph
Из хендоффа Claude Design, пересобрана в нашей статике: морф портрета по четырём ролям, встречные бегущие строки, тёплый оранжевый акцент вместо фирменного красного.
Открыть В работеКонцепция 5 — Портрет-переключатель
Геометрия снята из Figma «Hero 1440»: слово 120px Archivo Regular бежит справа налево белым и красным, портрет по центру перекрывает буквы, четыре колонки по углам. Портрет переключает роль — слово, строка и факт меняются одним движением. Пока только первый экран.
Открыть FoundationsUI Kit
Visual source of truth — tokens, type scale, components, states, motion. Edit shared/tokens.css or shared/components.css and every page picks it up.
OpenResources
Project stages
-
01WireframeIn progress
-
02DesignPending
-
03Front-endPending
-
04Back-endPending
-
05TestingPending