🎓 Логотип за 10 минут без Figma Коллеги, нужен логотип для нового проекта. Figma не открыл. Canva не использовал.
CSS + SVG + 10 минут = готовый брендинг.
📍Подход Вместо графических редакторов:
- SVG код напрямую
- CSS для стилизации
- Google Fonts для типографики
- Простые геометрические формы
- Ограниченная палитра (2-3 цвета)
Программистский подход к дизайну.
📍SVG логотип
<svg width="200" height="60">
<circle cx="30" cy="30" r="20" fill="#3B82F6"/>
<rect x="15" y="15" width="30" height="30"/>
<text x="70" y="35">ProjectName</text>
</svg>
Масштабируется, редактируется в коде.
📍Цветовая схема Простая палитра:
- Основной: #3B82F6 (синий)
- Акцент: #1F2937 (тёмно-серый)
- Фон: #FFFFFF (белый)
Работает в dark/light режимах.
📍Адаптивные версии Один SVG, разные размеры:
- Favicon: 16x16px
- Мобильная версия: горизонтальная
- Полная версия: с текстом
- Монохромная: для печати
CSS media queries для переключения.
📍Автоматизация
// Генерация всех размеров
const sizes = [16, 32, 48, 128, 512];
sizes.forEach(size => {
generatePNG(svgCode, size, `logo-${size}.png`);
});
От SVG к PNG всех нужных размеров.
📍Брендбук за минуты HTML страница с примерами:
- Логотип на разных фонах
- Цветовая палитра с hex-кодами
- Типографика (шрифты и размеры)
- Неправильные варианты использования
Вместо PDF — живая документация.
📍Применение Использовал подход для:
- MaxPost: текст + иконка сообщения
- SellerPulse: график + название
- StudyQA: буква S в круге
- AiMagicHub: магическая палочка
Все логотипы в SVG, все редактируются в коде.
📍Ограничения Подходит не всем:
- Простая геометрия only
- Нужно понимать SVG
- Нет сложных эффектов
- Минималистичный стиль
Для стартапов — идеально.
Как создал дизайн-систему без дизайнера. CSS + SVG гайд в бесплатном гиде.
#моикейсы_поповвии Работаем дальше.
