Подготовка иконок и графических ассетов для сайта

Представьте: дизайнер передаёт макет из Figma, вы открываете его и видите десятки PNG-иконок с захардкоженным синим цветом. На Retina они размыты, в тёмной теме нечитаемы, а при загрузке каждого файла отдельно — 50 HTTP-запросов, которые убивают Core Web Vitals. Мы решаем эту проблему на этапе подготовки ассетов: превращаем разрозненные растры в единую систему SVG-иконок, оптимизированных под любые устройства и темы.

Форматы: что и когда

SVG-спрайт — стандарт для веба. Масштабируется без потерь, поддерживает currentColor для динамической темы, CSS-анимации и весит 0.5–3 KB на иконку. Экономия трафика до 60% по сравнению с PNG, а для простых форм SVG в 10–50 раз легче. PNG оставляем только для сложных градиентов — нужны версии 1x, 2x, 3x для Retina. Icon Font (Font Awesome, Material Icons) устарел: плохая доступность, FOIT при загрузке. Используйте, только если проект уже на нём.

Как подготовить SVG-иконки к интеграции?

Иконка, готовая к разработке, должна:

1. Использовать currentColor вместо захардкоженного цвета:

   <path fill="currentColor" d="M..." />
   

   Тогда color: red на родителе меняет цвет иконки.
2. Иметь фиксированный viewBox, обычно 0 0 24 24 или 0 0 20 20.
3. Не содержать лишних атрибутов — id, class, style, data-* из Figma-экспорта нужно убрать. Инструмент: SVGO или онлайн svgomg.net.
4. Быть оптимизированной — SVGO убирает лишние <g>, объединяет пути, убирает пробелы. Типичная экономия: 30–60% веса файла. Это снижает затраты на хостинг и ускоряет загрузку.

Почему SVG-спрайт ускоряет загрузку в 10 раз?

Использование спрайта сокращает количество HTTP-запросов с десятков до одного — разница в 10–50 раз. Спрайт кэшируется браузером: после первой загрузки иконки мгновенно отображаются на всех страницах. В отличие от иконок на CSS (background-position), SVG-спрайт сохраняет чёткость и поддерживает currentColor. Мы подготавливаем ассеты для 100+ сайтов и знаем, как правильно собрать спрайт.

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="icon-search">
      <path fill="currentColor" d="M10 2a8 8 0 0 0-6.32 12.9l-2.38 2.38 1.41 1.41 2.38-2.38A8 8 0 1 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z"/>
    </g>
  </defs>
  <use href="#icon-search"/>
</svg>

Сравнение форматов

Системы иконок

Готовые библиотеки иконок, которые стоит рассмотреть прежде чем рисовать с нуля:

Если бренд требует уникальных иконок — рисуем на основе выбранной сетки (24×24, stroke 1.5–2px для outline-стиля, единый corner radius).

Что входит в фавикон и App Icons?

Фавикон сегодня — не один ICO-файл. Минимальный набор:

• favicon.ico — 32×32, для старых браузеров
• favicon.svg — векторный, поддерживает prefers-color-scheme
• apple-touch-icon.png — 180×180, для iOS Safari
• icon-192.png + icon-512.png — для PWA manifest

Пример SVG-фавикона с адаптацией под тему:

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="..."/>
</svg>

OG-изображения и социальные ассеты

Для SEO и шаринга в соцсетях нужны:

• OG Image (Open Graph): 1200×630px, PNG или JPEG. Автогенерация через @vercel/og или Puppeteer — для динамических страниц.
• Twitter Card: 1200×628px (аналогично OG)
• LinkedIn Banner: 1128×191px (для корпоративных страниц)

Что входит в работу по подготовке ассетов

Всё под ключ: от аудита до интеграции.

• Аудит исходных макетов и экспорт SVG
• Очистка и оптимизация каждого файла через SVGO
• Сборка единого SVG-спрайта
• Генерация фавикон-набора (ICO, SVG, PNG, PWA)
• Шаблоны OG-изображений
• Документация по интеграции
• Поддержка при вёрстке

Сроки и стоимость

Подготовка полного набора ассетов (оптимизация существующих иконок, SVG-спрайт, фавикон-набор, OG-шаблон) занимает 2–4 дня в зависимости от объёма. Оценим ваш проект бесплатно — свяжитесь с нами. Получите консультацию: наши инженеры подберут оптимальное решение для ваших задач.

Мы работаем с веб-проектами более 5 лет и подготовили ассеты для 100+ сайтов. Исходные спецификации формата SVG определяются SVG 2 от W3C.

Почему дизайн без токенов ломает код, и как мы это чиним

Мы перестраиваем процесс UX/UI так, чтобы дизайн и код не расходились. Наш опыт — 5 лет на рынке, 120+ реализованных проектов в вебе и мобильных приложениях. Работаем по договору с фиксированной гарантией сроков. Часто к нам приходят с макетами, которые разработчики получают за два дня до спринта: 80 фреймов, половина без мобильных состояний, кнопки не компоненты, цвета захардкожены hex-значениями. Вёрстка превращается в угадайку, а поддержка UI через три месяца требует полного рефакторинга. Дизайн, который работает в продакшене, строится на системе токенов и компонентов — и мы это внедряем с первого спринта.

Как Figma превращается в инженерный инструмент

Figma — не просто «место, где рисуют». Это среда, из которой разработчик получает точные значения без звонков дизайнеру. Мы используем Design Tokens — единые переменные для цветов, отступов, радиусов. Они экспортируются напрямую в CSS custom properties или Tailwind config. Например, color/primary/500, spacing/md, radius/button. Без токенов дизайн и код расходятся уже через месяц.

Auto layout — обязательное условие. Компоненты без авто-лейаута ломаются при изменении текста. Кнопка с фиксированной шириной, которая не растягивается под длинный лейбл — классическая ошибка, которую мы не допускаем. С variants в одном component set разработчик видит все состояния (hover, disabled, pressed) сразу, а не переспрашивает перед каждым блоком. Интерактивный прототип дешевле правок после разработки — мы кликаем сложные сценарии (multi-step, wizard, onboarding) до того, как писать код.

Что дают дизайн-системы и когда они избыточны

Design system оправдана, когда над проектом работают 2+ дизайнера или есть несколько связанных продуктов (веб + мобильное приложение + админка). Для сайта-визитки мы ограничиваемся UI kit с базовыми компонентами. Если проект на React, строим систему поверх Radix UI (headless) с Tailwind CSS — как в Shadcn/ui. Компоненты полностью контролируемы, нет lock-in на стороннюю библиотеку. Wikipedia называет такой подход стратегически правильным для масштабирования.

Как мы обеспечиваем адаптивность без сюрпризов

По данным аналитики, планшеты дают 8–12% трафика в зависимости от ниши — игнорировать их нельзя. Но мы не делаем «десктоп + мобильный» с тремя брейкпоинтами. Проектируем под систему значений, совместимую с кодом: если фронтенд на Tailwind CSS, то sm:640, md:768, lg:1024, xl:1280, 2xl:1536. Дизайнер работает с теми же числами в Figma. Fluid typography и spacing через clamp() убирают скачки на нестандартных разрешениях — лендинги и публичные сайты получают плавное поведение без дополнительных усилий.

Что входит в работу (deliverables)

Мы отдаём результат, который можно сразу передать в разработку, без додумывания со стороны программиста.

Дополнительно: обучение команды работе с дизайн-системой (1–2 часа), доступ к Figma на весь период разработки, поддержка при внедрении.

Как мы гарантируем качество UI

Каждый макет проверяется инженером на реализуемость: нет ли конфликтов между auto layout, корректно ли работают состояния на мобильных, доступен ли контраст (WCAG AA). Мы используем Clarity для анализа текущего юзабилити, и на основе данных переделываем формы, которые теряют конверсию. Типичный результат — inline-валидация вместо submit-and-scroll-to-top увеличивает завершение регистрации на 15–20%. Skeleton screens вместо спиннеров снижают субъективное время загрузки.

Ориентиры по срокам и стоимости

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