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

Уявіть: дизайнер передає макет із 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% ваги файлу. Для середнього сайту це знижує витрати на хостинг до 3000 грн/міс.
5. Додавайте атрибути role="img" та aria-label для доступності (WCAG 2.1 AA), використовуйте BEM-нотацію для CSS-класів, оптимізуйте path precision до 4 знаків.

Чому SVG-спрайт прискорює завантаження в 10 разів?

Використання спрайту скорочує кількість HTTP-запитів з десятків до одного — різниця в 10–50 разів. Спрайт кешується браузером: після першого завантаження іконки миттєво відображаються на всіх сторінках. SVG-спрайт кращий за окремі файли в 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>

Підключаємо: <svg><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 (фавікон SVG — сучасний стандарт)
• apple-touch-icon.png — 180×180, для iOS Safari
• icon-192.png + icon-512.png — для PWA manifest (PWA іконки)

Приклад 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-зображень
• Документація з інтеграції
• Підтримка при верстці

Особливу увагу приділяємо доступності іконок (атрибути aria-label, role="img") та веб-продуктивності (оптимізація SVG, спрайти). PWA іконки та Retina іконки також входять у набір. Фавікон SVG — сучасний стандарт. Векторні іконки для вебу — наша спеціалізація.

Терміни та вартість

Підготовка повного набору асетів (оптимізація наявних іконок, SVG-спрайт, фавікон-набір, OG-шаблон) займає 2–4 дні залежно від обсягу. Вартість робіт — від 5000 грн. Оцінимо ваш проєкт безкоштовно — зв'яжіться з нами. Отримайте консультацію: наші сертифіковані інженери з 5+ років досвіду підберуть оптимальне рішення для ваших завдань. Гарантуємо якість та сумісність з усіма сучасними браузерами.

Маємо 5+ років досвіду та 100+ успішних проектів у веб-розробці. Надаємо гарантію: безкоштовне доопрацювання, якщо асети не пройдуть перевірку. Вихідні специфікації формату SVG визначаються SVG 2 від W3C.

Чому дизайн без токенів ламає код, і як ми це виправляємо?

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

Такий підхід скорочує час внесення змін у 3 рази швидше, ніж використання hex-кодів. Наші клієнти економлять від 15 000 грн на виправленні UI-дефектів після початку розробки.

Як Figma стає інженерним інструментом?

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

Покроковий процес перетворення

1. Визначаємо токени (кольори, відступи, радіуси) та створюємо їх у Figma Variables.
2. Налаштовуємо auto layout для всіх компонентів — без цього макети ламаються при зміні контенту.
3. Створюємо variants для кожного стану (hover, active, disabled, focus).
4. Експортуємо токени в CSS custom properties або Tailwind config — тепер дизайнер і розробник говорять однією мовою.
5. Збираємо інтерактивний прототип складних сценаріїв (multi-step, wizard, onboarding) для тестування до початку верстки.

Auto layout — обов'язкова умова. Компоненти без авто-лейауту ламаються при зміні тексту. Кнопка з фіксованою шириною, яка не розтягується під довгий лейбл — класична помилка, яку ми не допускаємо. З variants в одному component set розробник бачить всі стани одразу. Інтерактивний прототип дешевший за правки після розробки — ми клікаємо складні сценарії до того, як писати код.

Що дають дизайн-системи і коли вони надмірні?

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

Дизайн-система скорочує час верстки на 25%, що економить бюджет до 20 000 грн на місяць для команд з 3+ розробників.

Як ми забезпечуємо адаптивність без сюрпризів

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

Що входить в роботу (deliverables)

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

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

Як ми гарантуємо якість UI

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

Як оцінити терміни та вартість дизайну?

Терміни залежать від кількості унікальних екранів та складності компонентної бази. Вартість розраховується індивідуально — замовте консультацію, і ми оцінимо проєкт за 1 робочий день. Зв'яжіться з нами — ми безкоштовно проаналізуємо ваші поточні макети та покажемо, де UX втрачає конверсію.