@nkirochkin
55°37°

[ О проекте ]

Собрал личный фирменный стиль в dev-стиле с акцентным жёлтым и построил на нём сайт-портфолио на Framer: два формата подачи кейсов, персонализированное CV, нестандартная 404.

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

Дата
Октябрь 2026
Роль
Product designerDeveloper
Теги
DevelopmentFramerStrategyVisual IdentityPersonal Brand

[ Поиск стиля ]

Дольше всего разбирался не с визуалом, а с тем, как я хочу выглядеть. Перепробовал несколько направлений и в итоге остановился на dev-стиле — чистый, строгий дизайн с акцентом на анимации и деталях, без лишнего декора. В качестве акцентного цвета выбрал Kodak Yellow.

На этой основе сделал:

  • Презентацию
  • Контент для соцсетей
  • Стикеры и визитки
  • Коммерческое предложение
Презентация в фирменном стиле
Стикеры и визитки
Контент для соцсетей

[ Позиционирование ]

Параллельно разобрался с позиционированием — чем конкретно я занимаюсь и для кого. Аудитория получилась широкая: клиенты, HR, агентства, другие дизайнеры — и у каждой группы свои сценарии просмотра, и важно закрыть интересы всех, не теряя качество подачи.

[ личный сайт ]

За сайт брался давно и постоянно откладывал. В этот раз начал не с интерфейса, а с целей: как одним сайтом закрыть интересы всех, кого определил на этапе позиционирования, не теряя качество подачи ни для одной группы.

Главная — короткая выжимка: кто я, последние работы за год, направления, стек.

[ портфолио ]

Для кейсов сделал два формата отображения: сетка карточек — минималистичный вариант для клиентов, быстрое визуальное впечатление; строчный список с тегами — для HR и продуктовых команд, которым важно за секунды понять содержание кейса, не открывая его.

Проекты в строчном виде

[ Страница проекта ]

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

[ cv ]

Отдельно сделал страницу-аналог CV: hard/soft skills, релевантные работы, контакты. Планирую персонализировать hero-блок под конкретную компанию при адресной отправке — чтобы резюме не выглядело шаблонным.

[ Контакты и 404 ]

Контакты — отдельная страница. 404 не сделал заглушкой: там предлагается посмотреть последний кейс.

Страница 404

[ Как собирал ]

Верстал сам на Framer. Основной акцент — на анимациях и микровзаимодействиях: они есть в карточках проектов, в переходах между страницами, даже в фильтрах кейсов. Кастомные решения для анимаций и взаимодействий собирал через Claude. Часть графики сделал через нейросети. Отдельно собрал стильный прелоадер, адаптивы и переключение RU / EN.

[ Что в итоге ]

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

Portfolio engagement

x62%

Доля посетителей, которые после главной переходят смотреть хотя бы один кейс. Раньше цифра нигде не считалась — портфолио жило на Behance без аналитики. Теперь это первая точка воронки.

Contact conversion

~0.6%7.4%

Доля посетителей, которые дошли до контакта или отправили запрос. На Behance портфолио почти не конвертировало — сайт стал самостоятельным каналом, а не витриной.

Qualified leads

2 / м.6 / м.

Заявки в месяц, которые соответствуют целевому уровню проектов — по стеку и сложности задач, без разовых просьб в духе «быстро поправить баннер».