Задание: Дизайнер фирменного стиля. Дизайн developer blog: сайт, логотип и визитка (Дистанционная работа)
Нужен дизайн личного developer blog / engineering journal Progrocket + логотип + визитка.
Сайт технически будет реализован на Astro, но сейчас нужен именно качественный дизайн в Figma, пригодный для дальнейшей верстки в HTML/CSS. Ориентир по стилю приложу отдельно: использовать как moodboard / visual reference, не копировать pixel-perfect.
Стиль:
- premium dark engineering journal;
- почти чёрный / графитовый фон, не синий;
- тонкая grain/noise/textile texture на всей поверхности;
- крупная аккуратная типографика;
- минимум визуального шума;
- сдержанный оранжевый акцент;
- ощущение дорогого инженерного журнала, а не SaaS-лендинга;
- без дешёвых рамок, тяжёлых border-boxes и “админского” вида.
Нужно сделать дизайн сайта в Figma:
- desktop 1440/1536px;
- mobile 375/390px;
- tablet 768px — желательно, можно обсудить отдельно.
Страницы сайта:
1. Главная
- header / навигация;
- hero-блок с названием Progrocket;
- короткое описание блога;
- CTA-кнопки;
- блок последних статей;
- блок серий / проектов;
- footer.
Главная должна быть сильной входной страницей бренда, а не просто списком постов.
2. Список статей / блог
- список статей;
- дата;
- название;
- summary;
- теги/серия;
- пагинация или место под неё.
Желательно editorial list, не тяжёлые карточки.
3. Страница серии статей
Основная серия — TalkLedger.
TalkLedger — исследовательский проект о системах, где управленческие решения становятся объектами: фиксируются во времени, связаны с контекстом, конфликтами и последующими решениями.
На странице серии нужно:
- заголовок;
- краткое описание;
- рекомендуемый порядок чтения;
- список статей от первой к последней;
- номера 01, 02, 03;
- даты.
Также будет серия/раздел Servocket.
Servocket — pet-проект сервиса мониторинга и каталога игровых серверов.
Дизайн страницы серии должен быть универсальным, чтобы можно было добавлять новые серии.
4. Страница отдельной статьи
Одна из самых важных страниц. Нужен дизайн длинной технической статьи:
- заголовок;
- дата;
- время чтения;
- серия;
- breadcrumbs;
- h2/h3/h4;
- обычный текст;
- списки;
- ссылки;
- blockquote;
- inline code;
- code block;
- таблицы;
- изображения;
- callout-блоки;
- навигация предыдущая/следующая статья;
- блок “статья входит в серию”.
Главное: статью должно быть удобно долго читать.
5. Поиск
- поле поиска;
- список результатов;
- пустое состояние;
- состояние “ничего не найдено”.
6. Обо мне / контакты
- краткое описание;
- email;
- ссылки на GitHub / Telegram / сайт;
- блок “чем занимаюсь”.
7. 404
Простая страница в общем стиле.
Компоненты в Figma:
- Header;
- Footer;
- Hero;
- Button primary / secondary;
- Navigation item;
- Post list item;
- Series list item;
- Reading order item;
- Article header;
- Article content styles;
- Code block;
- Inline code;
- Blockquote;
- Callout;
- Tag;
- Breadcrumbs;
- Search input;
- Pagination;
- Previous / Next navigation.
Для интерактивных элементов нужны состояния:
default / hover / active / focus.
Нужен отдельный style guide / design tokens:
- цвета в HEX/RGBA;
- типографика: font-family, size, weight, line-height;
- spacing;
- max-width страницы;
- ширина текстовой колонки статьи;
- radius/shadow/glow;
- описание grain/noise/texture;
- описание оранжевого декоративного акцента;
- описание light/glow эффекта, если используется.
Важно: декоративные эффекты должны быть реализуемы в HTML/CSS/SVG, а не только нарисованы картинкой.
Логотип:
Нужно разработать логотип / wordmark Progrocket. Ориентир приложу.
Нужны:
- вариант для сайта;
- горизонтальный вариант;
- compact/icon вариант, если возможно;
- светлая версия для тёмного фона;
- монохромная версия;
- favicon/app icon вариант.
Форматы: SVG, PNG, Figma.
Визитка:
Нужен дизайн визитки в общем стиле бренда. Без готового примера.
Данные:
- Progrocket;
- Попов Дмитрий;
- Developer / Team Lead;
- me@progrocket.dev;
- progrocket.dev.
Нужно:
- лицевая сторона;
- оборотная сторона;
- версия для печати;
- размеры, вылеты, безопасные поля.
Форматы: Figma, PDF для печати, PNG preview.
Что нужно получить:
1. Figma-файл.
2. Desktop/mobile версии страниц.
3. Style guide / design tokens.
4. Компоненты и состояния.
5. Логотип в SVG/PNG/Figma.
6. Визитка в Figma/PDF/PNG.
7. Краткие implementation notes: как реализовать фон, texture, orange accent, glow/light wash, какие шрифты и размеры использовать.
Важно:
Не принимается работа одной картинкой/PNG. Все элементы должны быть редактируемыми: текст — текстом, блоки — слоями, декоративные элементы — отдельными объектами.
В отклике прошу указать:
- стоимость;
- сроки;
- что входит в стоимость;
- сколько вариантов концепции;
- сколько итераций правок;
- есть ли опыт дизайна блогов / личных сайтов / developer portfolio;
- ссылки на похожие работы.
