Рады приветствовать вас на курсе по SMM-дизайну. Сегодня у нас девятый урок, и мы с вами будем учиться создавать гайдлайн — инструкцию по применению для дизайна. Мы создадим с вами гайдлайн для кофейни и потом сделаем по нему дизайн для соцсети «ВКонтакте». У нас есть техническое задание от клиента. В нем даны референсы и логотип кофейни.
Что значит сделать гайдлайн? Нам необходимо подобрать фирменные цвета и шрифтовую пару для оформления постов и сторис, а также описать правила подбора изображений, чтобы они подходили для ТЗ.
Переходим непосредственно к нашему техническому заданию, по которому мы будем делать гайдлайн, а потом и дизайн.
В нем написано: «Нужно сделать оформление аккаунта во «ВКонтакте» для кофейни». Это аватар и сторис актуальное (меню, часы работы, акции). Название кофейни «Время кофе». Есть пожелание от клиента: «Мы открылись недавно и хочется, чтобы наш аккаунт был уютным».
Также нам даны логотип и фотографии. Логотип в теплых оттенках: бежевый, оранжевый, красный. Есть пример мокапа — стаканчик кофе с изображенным на нем с логотипом.
Далее нам даны примеры разных изображений кофе. Что первое сразу же бросается в глаза? Это такие приятные кремовые кофейные цвета. Наше оформление мы будем делать примерно в таких же оттенках. Также нам даны разные референсы — это примеры работ, которые понравились заказчику. Давайте посмотрим.
Обязательно уточняйте у заказчика, что именно им понравилось в оформлении: цвета, шрифты, графика. Первый пример — Etlon Coffee. Тут креативный дизайн — прикольный шрифт, разноцветный паттерн.
Второй референс — «Шоколадница», более классический дизайн. Минималистичный логотип в круге, акцент на фото блюд.
И посмотрим последний референс — Donut Bar Coffee. Тут тоже используются фото еды для передачи атмосферы, коричневый и оранжевый цвета, крупные надписи.
Последние два референса похожи, однотипное оформление в кофейных цветах.
Давайте перейдем в Figma. Сначала мы будем делать гайдлайн. Создаем фрейм. Для этого нажимаем клавишу F и в панели справа выбираем формат Slide 16:9, размер 1920*1080 пкс.
Переименуем фрейм в «Гайдлайн страница 1». Поместим на холст фото с чашкой, уменьшим и подгоним его под размер фрейма. Напишем заголовок «Время кофе».
Мы заранее посмотрели и подобрали акцидентный шрифт для заголовков. Называется Unbounded. Его можно скачать на Google fonts.
Дублируем текстовый слой и пишем подзаголовок «Гайдлайн». Уменьшаем размер текста и меняем начертание на Regular.
Мы забыли в самом начале выставить направляющие, по которым будем выравнивать контент внутри фреймов. Размещаем квадрат размером 120*120 пкс в верхнем левом углу, наводим мышкой на линейку сверху и тянем вниз красную горизонтальную направляющую.
То же самое проделываем для остальных направляющих. Квадрат можно удалить. Выравниваем контент по направляющим.
Теперь зададим темный фон слайду. Выбираем «Пипетку», наводим на кофейное зерно на логотипе. Цвет применился, но давайте сделаем его еще темнее.
И перекрасим заголовок в белый цвет, а подзаголовок — в оранжевый, как у логотипа. Опустим надписи пониже. Первая страница готова.
Дублируем слайд — переносим фрейм вниз, зажимая Alt. Убираем фото и заголовок. У нас потерялась направляющая — выставим ее снова. Перекрашиваем фон в белый цвет. Поднимаем надпись наверх. Меняем текст на «Фирменный шрифт».
На этой странице нужно описать шрифты, которые мы будем использовать. Можно скопировать заголовок из первого фрейма. Перекрасим и напишем название шрифта Unbounded. Уменьшим размер.
Мы заранее подготовили текст, чтобы не терять время, и сейчас его вставим.
Здесь написано: «Основной шрифт. Начертание Bold для заголовков. Начертание Regular для подзаголовков». Выровняем название шрифта. Продублируем текстовый слой и укажем начертания, которые мы будем использовать, — Bold и Regular.
Выделяем текстовые слои и копируем их. Второй шрифт, который мы подобрали, называется Inter. Этот шрифт можно тоже найти на Google fonts. Выделяем текстовые слои и меняем шрифт.
Вставим текст: «Дополнительный шрифт. Начертание Regular для наборного текста». Убираем начертание Bold и меняем начертание у шрифта на Regular.
Переходим к следующей странице. Мы будем подбирать фирменные цвета. Дублируем слайд. Меняем текст в заголовке на «Фирменные цвета».
Убираем лишние надписи. Опять же, чтобы не терять время, мы вставим заготовленный текст: «Основные цвета кофейного оттенка. Это цвета одного оттенка, которые будут иметь схожие эмоциональные коннотации. Жесткой привязки к одному цвету не требуется, главное — использовать мягкие цвета».
Теперь мы нарисуем круг и продублируем его — создадим шесть кругов. Нажимаем Tidy up, чтобы круги распределились друг от друга на одинаковом расстоянии. Круги немного вышли за направляющие, поэтому уменьшим расстояние между ними до 20 пкс. Слишком плотно вышло, 30 пкс будет оптимально.
Выравниваем два последних круга по верхнему краю.
Теперь давайте подберем цвета. Первый цвет сделаем темно-коричневый, как на первой странице.
Второй цвет возьмем у кофейного зерна в логотипе.
Третий цвет — красный, как кружка на лого.
Четвертый — оранжевый, как круг у логотипа.
И давайте подберем еще два оттенка для разных подложек. Делаем круг оранжевым и уводим его в бежевый. А последний цвет сначала делаем коричневым и уводим его в светло-серый.
Теперь нам остается описать правила подбора изображений. Дублируем слайд. Меняем заголовок на «Правила подбора изображений».
Вставляем заготовленный текст, уменьшаем текстовый фрейм. Поправляем переносы.
Круги больше не нужны, удаляем их. Прочитаем текст: «Нужно использовать фотографии и картинки с мягкими оттенками. Строгих правил к подбору изображений нет, главное, чтобы они сочетались между собой». Т. е. изображения, которые мы будем подбирать, должны гармонировать с нашей цветовой гаммой. Например, ядреный фиолетовый или кислотный зеленый нам точно не подойдут. Нужно стараться использовать спокойные пастельные теплые оттенки.
Мы заранее подготовили фото, давайте перенесем их сюда и расставим на фрейме.
Выделяем фото и применяем настройку Tidy up. Опустим фото вниз и выровняем по направляющей. Проверим отступы, чтобы они везде были одинаковые.
Уменьшим текстовый фрейм и поправим переносы. Картинки можно немного опустить. Все, наш гайдлайн готов.
Давайте перейдем к оформлению сторис. Мы заранее подготовили меню. Давайте посмотрим поближе, что тут у нас есть. Крупный заголовок и подразделы: «Черный кофе», «Кофе с молоком», «Раф-кофе» и «Не кофе». Более мелким шрифтом написаны позиции с ценами. Они разделены линиями, чтобы было удобнее читать.
Давайте попробуем сделать сторис с часами работы. Дублируем слайд. Меняем заголовок на «Часы работы в праздничные дни». Этот контент разгруппируем и удалим ненужное.
Поднимем этот контент повыше и тоже его разгруппируем. Давайте попробуем применить к надписи «Капучино» те же свойства, что и у подзаголовка «Кофе с молоком». Для этого мы выделяем подзаголовок, кликаем правой кнопкой мыши и выбираем в меню copy/paste as, далее copy properties. Встаем на слово «Капучино», снова вызываем меню и выбираем copy/paste as, далее paste properties. Свойства применились. Верхнюю надпись убираем. Разгруппируем это блок.
Вместо надписи «Капучино» пишем дату: «31.12». У цены меняем начертание на Regular и пишем там часы работы: «с 10:00 до 19:00». Удалим ненужные надписи. Продублируем первую строку. Выделим эти две строки и линию и продублируем еще раз, теперь у нас 4 строки, разделенные линиями.
Поменяем в них текст: «1 января выходной», «2 января с 12:00 до 19:00», «4-8 января с 10:00 до 22:00».
Выделим все, сгруппируем и нажмем Auto layout, чтобы между объектами отступы автоматически стали одинаковыми. Увеличим отступы до 30.
Давайте добавим картинку с чашкой. Возьмем ее из гайдлайна и перенесем, зажав при этом Alt. Увеличим картинку, выровняем по центру.
Отправим на задний план, чтобы надписи были поверх нее. Выделяем фрейм и перекрашиваем фон с помощью «Пипетки».
Увеличим макет, чтобы все проверить. Затесалась лишняя белая линия, удалим ее. Макет готов, давайте переименуем его в «Сторис часы работы».
Теперь сделаем сторис с акцией. Загрузим другую картинку. Перекрашиваем фон с помощью «Пипетки». Этот блок разгруппируем, удаляем все, кроме одного текстового фрейма.
В заголовке пишем: «СКИДКА 50% с 8 до 11 утра». Делаем надпись заглавными буквами. Выключка по центру. Опустим надпись пониже. Переносим маленькую надпись наверх, меняем начертание на Regular. Делаем чуть больше шрифт. Напишем текст «для ранних пташек».
Дублируем надпись, переносим вниз и меняем текст на «на все напитки».
Добавим прямоугольник. Перекрашиваем его в белый цвет и отправляем на зданий план. Делаем его больше и выравниваем надпись по центру. Давайте сделаем его еще больше по ширине. Проверяем отступы, чтобы было по центру.
Группируем текст и плашку. Выделяем вместе с маленьким надписями, группируем и нажимаем Auto layout. Уменьшаем отступы до 50. Опускаем контент пониже и выравниваем по центру относительно фрейма.
Картинку с чашкой можно поднять повыше. Все, макет готов. Переименовываем его в «Сторис акция».
Давайте теперь сделаем прямоугольные обложки для сторис, которые будут закреплены в актуальном. Их размер 1200*800 пкс. Подготовим фреймы и переименуем их: «меню», «часы», «акции». Зададим каждому фрейму соответствующий цвет с помощью «Пипетки».
Мы заранее подготовили иконки, вставим их в рабочую область. Одна иконка лишняя, уберем ее. Сделаем иконки одинакового размера 520*520 пкс. У первой иконки деформировались пропорции, поправим ее по высоте.
Берем «Пипетку» и теперь просто перекрашиваем иконку по нашим цветам в гайдбуке: в коричневый и оранжевый.
Чашку можно покрасить в красный, как в логотипе. Выравниваем иконку по центру фрейма. Берем следующую иконку. Ее можно оставить такого же цвета, только черную обводку поменять на темно-коричневую, как у первой иконки.
И перейдем к последней иконке. Выровняем ее по центру фрейма.
Обводку сделаем темно-коричневую, процент — белым. А в середине зальем таким же цветом, как кофе на картинке.
Оформление для сторис готово.
Наш урок подошел к концу. Вашим домашним заданием будет повторить все, что было на уроке, — повторить полностью гайдлайн и сделать по нему дизайн. Фотографии и иконки вы можете подобрать самостоятельно либо воспользоваться теми, что приложены к уроку. На этом мы с вами прощаемся и желаем продуктивной работы.
