ШАГ 2:
Нарисовать 10 базовых кнопок в векторе
Описание шага
[Что делать] Возьми 5 фаворитских скринов кнопок из шага 1, перерисуй их в векторном редакторе + создай 5 вариаций (разные цвета, состояния). Размер 100x40px, экспорт в SVG.
[Как это работает] Базовые кнопки — 40% любого UI-кита, их стандартизация ускорит будущие проекты в разы.
[Ожидаемый результат] 10 готовых кнопок — сердце первого кита.
[Критерий готовности] Шаг выполнен, когда 10 SVG-файлов в папке 'Кит1/Кнопки' с именами 'primary-blue.svg', 'secondary-hover.svg'.
Как выполнить шаг
1) [Подготовка] Открой векторный редактор, создай папку 'Кит1/Кнопки' — 3 минуты.
2) [Действие 1] Импортируй 5 скринов, обведи контуры инструментом Pen — 30 мин на все.
3) [Действие 2] Добавь цвета/градиенты по трендам (синий primary, серый secondary), создай hover-вариации.
4) [Действие 3] Экспортируй каждый в SVG, проверь масштабируемость.
5) [Проверка результата] Открой файлы — все векторные, без растровых артефактов.
6) [Что дальше] Кнопки интегрируем в формы на шаге 3.
Частые ошибки
1. [Растровый импорт]: Копируют пиксели вместо вектора — теряется качество при масштабе. Всегда рисуй Pen Tool.
2. [Один стиль]: Делают все кнопки одинаковыми, игнорируя состояния. Клиенты ждут primary/secondary/hover — варьируй.
3. [Перфекционизм]: Тратят часы на тени, забывая количество. 10 простых > 1 идеальной — скорость важнее.
Полезные инструменты
Векторный графический редактор.
🎯 Цель с этим шагом
Освой создание готовых UI-наборов для ускорения веб-проектов. За 8 недель соберешь 12 полноценных китов с кнопками, формами и элементами — портфолио для фриланса и роста в дизайне.
Подробнее о цели →