Сайт vadxdesign.ru: дизайн и вёрстка на чистом коде

Задача

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

Чистый код и производительность: Ручная вёрстка на HTML/CSS/JS без конструкторов. Достигнут LCP 0.4 секунды, что превышает рекомендации Google Core Web Vitals.

Адаптивность и микроанимации: Плавные переходы, кастомные анимации появления контента и корректное отображение на любых экранах — от мобильных до 4K.

Дизайн-система в Figma: Создан единый UI-kit, который ускорил вёрстку и обеспечил консистентность всех элементов.

Технические показатели

Скорость и контроль
как конкурентное преимущество

Performance

LCP 0.4s

Largest Contentful Paint — ключевой метрики скорости загрузки, в 2 раза быстрее рекомендованного порога

Чистый код Вёрстка без фреймворков — лёгкость и полный контроль

100% Адаптивность на всех устройствах

Процесс

Этапы создания

Step One

Дизайн в Figma

Разработка визуального языка: минимализм, воздух, контраст. Создана адаптивная сетка, типографика на основе Golos Text, проработаны состояния интерактивных элементов.

Step Two

Вёрстка и анимации

Перенос дизайна в код: семантическая вёрстка, CSS Grid и Flexbox, кастомные анимации появления. Реализована микроанимация кнопок и карточек, плавный скролл.

Step Three

Оптимизация и запуск

Минификация CSS/JS, оптимизация изображений, настройка кэширования. Проверка Core Web Vitals и кроссбраузерной совместимости. Результат — мгновенный отклик интерфейса.

Типографика

Golos Text

Современный гротеск и геометричный шрифт. Создаёт контраст между заголовками и основным текстом, подчёркивая технический характер портфолио.

Aa Bb Cc Dd Ee Ff Gg

style.css

.design-system {
  display: flex;
  /* Магия в деталях */
  backdrop-filter: blur(20px);
  transition: all 0.4s ease;
}

Дизайн в коде

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

«Дизайн — это не только то, как предмет выглядит, но и то, как он работает. Чистый код и контроль над каждым элементом — основа доверия к цифровому продукту.»

— Вадим Кунафин

Скорость и контроль как конкурентное преимущество