Разобраться в трёх брендах и собрать макеты в их дизайн-коде
Мы даём три реальных клиента агентства: их публичные ресурсы, разобранный дизайн-код и фирменные шрифты. Дальше ты сам(а) вникаешь в специфику каждого и доводишь задачу до конкретных макетов. Это ровно то, с чем аккаунт-менеджер HDR Group работает каждый день: войти в новый проект, быстро считать бренд-код клиента и проследить, чтобы результат ему соответствовал.
3 компанииРеальные клиенты агентства
6 макетов3 обложки новостей и 3 слайда сторис — по одному на компанию
Только визуалТексты публикаций писать не нужно
Как устроен выбор тем: в каждой компании представлено 2 темы для обложки новости и 2 темы для сторис. Делать все четыре не нужно — по одной теме на формат: 1 обложка + 1 слайд сторис на компанию, итого 6 макетов на три компании.
Срок: рекомендуемое время выполнения — 2 рабочих дня с момента получения ссылки на это задание.
Этап 01 / 03 — задача
Что нужно сделать
Одинаково для каждой из трёх компаний
Макетов всего6
Новости — 2 темы на выборОбложка 1920×1080 по одной теме из двух
Сторис — 2 темы на выборОдин слайд 1080×1920 по одной теме из двух, без обложки, без видео и аудио
Тексты публикацийПисать не нужно — только визуальная реализация
Дизайн-кодПалитра, шрифты и тон подачи — в мини-брендбуке компании
Этап 02 / 03 — маршрут
Порядок работы
По каждой компании — один и тот же маршрут
01Знакомство
Пройди по ссылкам в начале подстраницы компании: сайт, карточка на Яндекс.Картах, соцсети. Это единственный источник фактуры — все темы построены только на том, что там реально есть.
02Дизайн-код
Разбери мини-брендбук: палитра с HEX, шрифты, tone of voice, фотостиль. Фирменные шрифты компании скачиваются по кнопке в этом же блоке.
03Макеты
Выбери по одной теме из двух для обложки новости и для сторис, собери 2 макета. Общие требования — в начале блока с темами, точечные рекомендации — в карточке каждой темы.
04Проверка
Сверь готовое с дизайн-кодом компании: цвета, шрифты, тон подачи. Макет должен выглядеть так, будто его сделали внутри бренда.
Этап 03 / 03 — выбор
Три компании
Три бренда — три разных дизайн-кода. Разберись в каждом так, чтобы макет выглядел как продолжение бренда, а не как работа со стороны.
Финал — сдача работы
Приём работы
Когда все 6 макетов готовы — пришли ссылку на них здесь
Проверь, что доступ по ссылке открыт на просмотр — иначе работу не получится оценить. Проверка занимает до двух рабочих дней.
Шрифты передаются исключительно для выполнения настоящего тестового задания и работы в интересах HDR Group и компании-заказчика. Любое иное использование за пределами этих задач правообладателем не разрешено и может повлечь ответственность, предусмотренную законодательством об интеллектуальной собственности.
Цвета бренда
Фоновый бежевыйRGB 234,227,214HEX #EAE3D6
Текстовый графитRGB 42,42,38HEX #2A2A26
Акцентный терракотовыйRGB 193,96,46HEX #C1602E
Фоновый светлыйRGB 255,255,255HEX #FFFFFF
Второстепенный зелёныйRGB 124,140,107HEX #7C8C6B
Логотип
Шрифтовой знак с разрядкой букв — «С Ы Р О В А Р Н Я», под ним мелкий подзаголовок «Ресторан · Сырная лавка».
Tone of voice
Спокойный и фактологичный, без превосходных степеней — сайт сообщает конкретику (открытие, меню, программа лояльности), а не кричит эпитетами.
Фотостиль
Тёплый естественный свет, интерьеры крупным планом (дерево, плетёные светильники, терракотовые панно, зелень), фудсъёмка на светлой посуде без резких теней.
05Новости — 2 темы
Для каждой темы — обложка новости 1920×1080. Текст публикации не нужен, только визуал.
Общее для обеих обложек
Заголовок формулируется так, чтобы предраскрывать тему ещё до текста новости. Типографика — фирменные шрифты компании: заголовок в Bebas Neue, подписи и цифры в Tilda Sans. Цветовые роли — тёплый бежевый/белый как база, терракотовый (#C1602E) — единственный акцент на ключевой детали, текст — тёмный графит (#2A2A26).
Тема 1 — Как рождается сыр, который подают в Сыроварне
На сайте прямо заявлено собственное сыроварение — буррата, моцарелла, скаморца. Это не «у нас вкусно», а конкретный производственный факт, который редко раскрывают визуально.
Рекомендации к выполнению1920×1080
Опорные факты для инфографики — конкретные виды сыра собственного производства: буррата, моцарелла, скаморца (подписанные элементы, а не список).
Тема 2 — Как устроена программа лояльности Сыроварни
На сайте подробно расписан механизм баллов: списание до 20% чека, сгорание за 365 дней без покупок, несгораемые уровни 5/7/10%, QR-код в приложении. Это готовая инфографика — тема почти никогда не раскрывается так предметно.
Рекомендации к выполнению1920×1080
Опорные цифры: до 20% чека баллами, 365 дней действия баллов, несгораемые уровни 5/7/10%, QR-код — выбери 2-3, не все сразу.
Можно опереться на визуальный язык самой карты лояльности с сайта (QR, шаги, иконка подарка) как референс формы подачи.
06Сторис — 2 темы
Для каждой темы — один слайд 1080×1920, без обложки, без видео/аудио: инфографичный слайд-презентация с тезисной подачей.
Общее для обоих слайдов
Один экран без обложки и без видео/аудио. Тезисная подача — 2-3 факта или цифры, слайд должен читаться за 2-3 секунды. Шрифты — Bebas Neue в заголовке и Tilda Sans в тезисах; терракотовый — акцент на одной ключевой цифре или слове, остальное по палитре выше.
Тема 1 — Из чего готовят сыр в Сыроварне
Та же линия, что и в новости, но в компактном тезисном виде под вертикальный формат.
Рекомендации к выполнению1080×1920
Тезисы — конкретные виды сыра собственного производства (буррата, моцарелла, скаморца); внизу или сбоку — минимальный визуальный якорь (иконка сыра/вилки/тарелки).
Тема 2 — Как копить и тратить баллы в Сыроварне
Компактная выжимка механики лояльности — идеально ложится в формат одного тезисного слайда.
Рекомендации к выполнению1080×1920
Крупно — 1-2 цифры (например, «до 20% чека» и «365 дней»), остальное — короткие подписи; можно оформить как простой путь из 2-3 шагов по аналогии со схемой на сайте.
07Приём работы
Когда макеты готовы можешь высылать на проверку, но мы рекомендуем закончить все макеты и направить одним файлом
Проверь, что доступ по ссылке открыт на просмотр — иначе работу не получится оценить. Проверка занимает до двух рабочих дней.
Шрифты передаются исключительно для выполнения настоящего тестового задания и работы в интересах HDR Group и компании-заказчика. Любое иное использование за пределами этих задач правообладателем не разрешено и может повлечь ответственность, предусмотренную законодательством об интеллектуальной собственности.
Декоративный иридесцентный акцентГолубой → лавандовый → розовыйСвет, не заливка
Логотип
«DRIVE BLACK» — крупный разрежённый шрифтовой знак, часть букв дана контуром поверх фото модели.
Tone of voice
Сдержанный и технологичный: короткие рубленые формулировки («Новый уровень драйва», «Место ваших достижений»), никаких эмоциональных восклицаний.
Фотостиль
Приглушённая ч/б-склонная гамма для интерьеров (контровой свет, тёмный тон), портреты моделей на светлом фоне с иридесцентным световым пятном позади.
05Новости — 2 темы
Для каждой темы — обложка новости 1920×1080. Текст публикации не нужен, только визуал.
Общее для обеих обложек
Заголовок называет конкретный формат или услугу, а не общее «приходите к нам». Типографика — фирменные шрифты компании: заголовок в Benzin, подписи и перечисления в ALS Hauss. Чёрный — база тёмных секций, светлый текст, иридесцентное световое пятно — точечный декоративный акцент.
Тема 1 — Тест-драйв клуба Drive Black до покупки абонемента
На сайте есть отдельная форма записи именно на тест-драйв клуба с персональным менеджером — не общая «запись на просмотр», а именованный формат.
Рекомендации к выполнению1920×1080
Опорный факт — тест-драйв бесплатный, проходит с персональным менеджером и ни к чему не обязывает (детали есть в форме записи на сайте).
Тема 2 — Не только тренажи: программа восстановления в Drive Black
Сайт подробно описывает спа-часть клуба — сауны, хаммам, 10+ программ массажа, фитобочка. Это менее очевидный ракурс, чем «тренажёрный зал», и он тоже полностью подтверждён ресурсом.
Рекомендации к выполнению1920×1080
Опорные факты — сауна и хаммам, 10+ программ массажа, фитобочка; лучше подать как перечень услуг с иконками, а не сплошным текстом.
Фон здесь может быть светлее, чем в теме про тест-драйв, — это тоже часть дизайн-кода бренда.
06Сторис — 2 темы
Для каждой темы — один слайд 1080×1920, без обложки, без видео/аудио: инфографичный слайд-презентация с тезисной подачей.
Общее для обоих слайдов
Один экран без обложки и без видео/аудио. Тёмная база с иридесцентным световым пятном как единственным цветным акцентом. Заголовок в Benzin, тезисы в ALS Hauss — 2-3 тезиса, никакой сплошной прозы.
Тема 1 — Как попасть на тест-драйв клуба
Компактная версия темы 1 из новостей — что нужно знать, чтобы записаться.
Рекомендации к выполнению1080×1920
Тезисы — бесплатно, с персональным менеджером, по записи; визуальный акцент — внизу слайда.
Тема 2 — Что входит в спа-зону Drive Black
Тезисная выжимка спа-программы клуба под вертикальный формат.
Рекомендации к выполнению1080×1920
Список из 3-4 позиций спа-блока (сауна, хаммам, массаж, фитобочка) с простыми иконками; 3 позиции вместо 4 — тоже нормально, если так композиция чище.
07Приём работы
Когда макеты готовы можешь высылать на проверку, но мы рекомендуем закончить все макеты и направить одним файлом
Проверь, что доступ по ссылке открыт на просмотр — иначе работу не получится оценить. Проверка занимает до двух рабочих дней.
Шрифты передаются исключительно для выполнения настоящего тестового задания и работы в интересах HDR Group и компании-заказчика. Любое иное использование за пределами этих задач правообладателем не разрешено и может повлечь ответственность, предусмотренную законодательством об интеллектуальной собственности.
Цвета бренда
Акцентный красныйRGB 230,51,41HEX #E63329
Фон тёмных секцийRGB 20,20,20HEX #141414
Фоновый основнойRGB 255,255,255HEX #FFFFFF
Фоновый карточекRGB 241,241,240HEX #F1F1F0
Текстовый графитRGB 26,26,26HEX #1A1A1A
Логотип
«ВЕКТОР» жирным шрифтом, чёрный, с красным росчерком/подчёркиванием сверху.
Tone of voice
Энергичный, прямой, ориентированный на выгоду здесь-и-сейчас: императивы («Забирай», «Успей вернуть»), таймеры и конкретные цифры вместо общих слов.
Фотостиль
Реальные фото автомобилей и мотоциклов с фирменной чёрно-красной ливреей и логотипом бренда, ночная городская подсветка, кадры инструкторов и учеников.
05Новости — 2 темы
Для каждой темы — обложка новости 1920×1080. Текст публикации не нужен, только визуал.
Общее для обеих обложек
Белый/светло-серый фон как база, красный — точечный акцент на одной детали, чёрный — текст и контраст. Типографика — фирменные шрифты компании: Raleway в жирных начертаниях для заголовка, Raleway или Arial для подписей. Крупная буква или цифра-иллюстрация (как категории A/B/C на сайте) уместна в обеих темах. Тон — спокойный и информативный, без «вау-эффекта».
Тема 1 — На чём учат водить в автошколе Вектор
Автопарк не старше 2024 года (Chery Tiggo, Tesla, Tenet T, есть и премиум-обучение на Mercedes/Hummer), одна цена на АКПП и МКПП — это конкретная фактура про автопарк, а не общие слова про «современные машины».
Рекомендации к выполнению1920×1080
Опорные факты — автопарк не старше 2024 года, конкретные модели (Chery Tiggo, Tesla, Tenet T), одна цена АКПП/МКПП.
Тема 2 — Что изменится с 1 октября: как успеть выгоднее оформить обучение
На сайте есть прямое предупреждение о повышении цен на обучение во всех автошколах с 1 октября 2026 года, а рядом — реальные способы сэкономить уже сейчас: кэшбэк до 5 000 ₽, рассрочка на 2-6 месяцев, налоговый вычет 13%, скидки студентам/мамам/на день рождения.
Рекомендации к выполнению1920×1080
Заголовок называет срок — 1 октября; опорные цифры — до 5 000 ₽ кэшбэка, рассрочка 2-6 месяцев, 13% налоговый вычет — возьми 2-3, не все сразу.
Здесь уместна более срочная чёрно-красная подача, по аналогии с предупреждающим баннером на сайте.
06Сторис — 2 темы
Для каждой темы — один слайд 1080×1920, без обложки, без видео/аудио: инфографичный слайд-презентация с тезисной подачей.
Общее для обоих слайдов
Один экран без обложки и без видео/аудио. Белая/светлая база, красный — на одном акцентном элементе; заголовок и тезисы — в Raleway (или Arial для служебных подписей). Крупная буква-категория как декоративный приём — по желанию.
Тема 1 — Автопарк Вектора коротко
Тезисная версия темы про автопарк под вертикальный формат.
Рекомендации к выполнению1080×1920
2-3 факта об автопарке (год не старше 2024, конкретные модели, единая цена АКПП/МКПП), без гиперболизации Tesla.
Тема 2 — До 1 октября: как выгоднее оформить обучение
Компактная версия темы про смену цен и текущие способы сэкономить.
Рекомендации к выполнению1080×1920
Дата «1 октября» — главный визуальный якорь, под ней 2 цифры-выгоды (кэшбэк, рассрочка или вычет); уместна чёрно-красная контрастная подача.
07Приём работы
Когда макеты готовы можешь высылать на проверку, но мы рекомендуем закончить все макеты и направить одним файлом
Проверь, что доступ по ссылке открыт на просмотр — иначе работу не получится оценить. Проверка занимает до двух рабочих дней.