Сергей Васин, портфолио

ЗАДАЧА

Сделать простой и интересный сайт дизайн-директора.


РЕШЕНИЕ

Большинство современных дизайн-портфолио безлики: анимация, модные приёмы типографики, списки кейсов, контактная информация. С авторами нет никакой связи, зачастую отсутствуют даже статичные фотографии. Хотелось обойти большинство и сделать иначе.

Я сразу определил, что крупный зафиксированный на экране портрет должен быть центральным элементом наряду с историей и примерами работ. Посколькую я делал полноценный рассказ о себе, а не просто показывал скриншоты проектов, текст занимал много места. Пользователю могло стать скучновато, поэтому я решил добавить в портрет динамики.

Исходная идея была в том, чтобы по замершему лицу и телу двигалось пятно света. Активных движений тела и головы не предполагалось — это бы отвлекало от чтения. А лёгкая световая манипуляция казалась оптимальным подходом. Хотелось сделать аналоговый эффект, который будет заснят на камеру и привязан к нативному скроллу, потому что интернет пестрит тяжёлыми WebGL- и JS-анимациями, от которых многие, включая меня, устали. Плюс — я делал сайт персональным и человечным, поэтому графика, созданная реальным физическим светом, стала хорошей поддержкой концепции.

В процессе поиска подходящего движения в кадре я обнаружил, что лёгкий поворот головы в сторону посетителя даёт неожиданный, немного пугающий, но очень интересный эффект взгляда живого человека. Стало понятно — это отличное продолжение идеи, ведь что может давать большее ощущение общения с человеком, чем зрительный контакт?

Выбранная шрифтовая гарнитура Steinbeck также подчёркивает аналоговую графику и «живую» подачу. Вот что пишет о свойствах шрифта автор Роман Горницкий: «In Steinbeck many of the occuring inconsistencies were kept (and many were made intentionally): without fanatically collecting curious deviations, but rather with a healthy disregard for digital precision tools. The resulting typeface produces irregular and uneven, but (most important) lively typesetting».

Механика работы блока «Избранные проекты» обеспечивает бесшовный переход от просмотра основной страницы и превью проектов ко всплывающему окну с полноценным описанием  работ. Компоновка графики в окне меняется в каждом проекте и эксплуатирует нарочито неаккуратный подход: местами слишком плотную, местами асимметричную вёрстку — и является финальным аккордом в этом «ламповом» и живом стиле.

Сайт: https://serge-vasin.com/