Здравствуйте! Сегодня у нас восьмой урок курса по SMM-дизайну. Будем делать дизайн для социальных сетей и оформлять его по гайдлайну.
Но прежде чем мы перейдём к самому дизайну, необходимо объяснить, что такое гайдлайн и брендбук. Гайдлайн — это руководство, в котором описываются правила использования фирменного стиля. Т. е. это инструкция по применению. В ней есть шрифты, логотип, правила их использования. Вы просто берёте и используете это как инструкцию, например по сборке шкафа. Допустим, у вас устроился на работу маркетолог и ему нужно знать, как оформлять посты в соцсетях. Для этого он просто открывает гайдлайн и начинает спокойно по нему работать. Там уже есть вся основа, по которой можно быстро сделать оформление для разных соцсетей.
Брендбук — это «библия» организации. Т. е. всеобъемлющая книга, в которой описано много таких вещей, как, например, миссия, философия, ценность бренда, его символы и атрибуты, основной его посыл, а также каналы и способы продвижения. Если в гайдлайне содержится лишь инструкция, чтобы сделать дизайн, то в брендбуке — много-много всего. Это как книга, которую берёшь и начинаешь читать про то, что заложено в бренде, который используется в компании.
Здесь выборочно представлено несколько ссылок, для того чтобы посмотреть, как работают довольно большие, крупные издания. Как, например, благотворительный фонд «Антон тут рядом» или очень известная обучающая платформа Skillbox. Здесь вы можете пройтись по ссылкам, посмотреть, как организации оформляют свои соцсети, проследить за ходом их действий в дизайне.
В целом рекомендуем вам посмотреть, как дизайнеры оформляют свои соцсети. У них есть определённый брендбук, это можно сразу же заметить — они выделяются цветом и шрифтами. Это основное, что бросается в глаза и запоминается. Благодаря чему потом происходит узнаваемость бренда.
Давайте теперь непосредственно перейдём к нашему гайдлайну.
Здесь у нас, слева, расположен логотип. Его базовый элемент — вилка в круге. Рядом надпись — «Кушать подано». На аватарках можно использовать просто вилку в кружочке, без надписи. В остальных случаях — лучше с ней, чтобы складывалась целостная картина.
Здесь у нас варианты воспроизведения логотипа. Он представлен как однородный, без фона, так и на фоне. Жёлтый логотип с белой вилкой. Если мы его используем на жёлтом фоне, то делаем полностью белым. И вилку — жёлтым цветом — в цвет фона. Дальше у нас есть монохромный логотип. И есть — на тёмном фоне. Четыре основных вида. Если, например, используем логотип на фоне красного цвета, то вилка тогда будет в цвет фона. Т. е. она как бы прозрачная, но идёт либо белая, либо жёлтая на белом фоне. Если же мы делаем на тёмном, то и вилка такая же. Всё зависит от фона.
Далее у нас идут основные цвета: жёлтый, тёмный (почти чёрный), тёмно-красный и оранжевый. Самые главные — жёлтый и чёрный. Дополнительные мы можем использовать как полноценные фоновые, например в плашках с картинками еды (допустим, на обложке).
Здесь у нас фирменный шрифт. Это Raleway — бесплатный лицензионный шрифт, доступный на Google Fonts. Мы используем два начертания. Слева сверху вы можете увидеть начертание Bold (это жирный шрифт) и Medium (чуть-чуть жирнее обычного шрифта). Первый из них используется в заголовках и в самом логотипе. Вторым же мы прописываем обычный текст — всё, что идёт после заголовка. Справа вы можете это видеть. И необходимые нам элементы подсвечиваем тоже начертанием Bold.
Также есть правила подбора фотоизображений. Вы можете видеть столбик в три картинки с изображением продукта или готового блюда. Объекты располагаются на однородном фоне. Также вид должен быть сформирован либо сверху, либо чуть под наклоном. И у нас ещё есть паттерны, их тоже можно использовать. Паттерны — это кадры, равномерно заполненные какими-либо продуктами. Если вы будете делать посты, то сможете в качестве паттерна поставить какие-либо продукты, которые заполнят весь фон. Они больше идут как фоновые изображения. В основном же мы пользуемся нашими продуктами и блюдами.
Теперь переходим непосредственно в Figma, сейчас мы будем делать дизайн для соцсети «ВКонтакте». Давайте зайдём в папку, где лежат наши материалы. Сразу же перекинем в Figma наш логотип. И начнём делать аватар для группы. Нажмём клавишу F. Просто нажимаем один раз, чтобы появился фрейм. Зажимаем замочек и пишем: «500». Фрейм становится квадратным. Теперь разгруппируем логотип: Shift+Ctrl+G. А эти элементы, наоборот, сгруппируем (Ctrl+G) и закинем в наш фрейм прямо посередине. Надпись можно удалить.
Давайте переименуем, чтобы знать, что это за слой. Это логотип. Важно, чтобы у нас был достаточно большой отступ от краёв, потому что при загрузке в группу «ВКонтакте» есть вероятность, что он будет немножко обрезаться. Поэтому нам нужно, чтобы элемент находился посередине. И чтобы у него был отступ примерно по 100 по каждому краю. Будет тогда отлично выглядеть.
Следующее, что нам необходимо сделать, — обложку для «ВКонтакте». Нажимаем F, произвольно растягиваем. Обложка идёт размером 1590*530 пкс. Когда будем загружать в нашу группу в ВК эту обложку, там сразу же будет прописываться её минимальный размер. И он как раз такой, какой мы сейчас указываем. Также на обложке нам необходимо отобразить наш логотип и какое-то блюдо, чтобы люди сразу же понимали, куда они зашли и что за группа для них сейчас открылась. Здесь мы сразу же подобрали несколько готовых блюд, с которыми будем работать.
Загружаем сюда логотип, переносим его в наш фрейм. Далее — берём какое-нибудь фото блюда. Нажимаем клавишу K, чтобы равномерно его уменьшить, и тоже переносим сюда. Логотип сделаем немножко поменьше и как-то расположим наши элементы.
Белым цветом выглядит не очень суперски. Поэтому давайте попробуем перекрасить. Нажимаем на фрейм: здесь отображается белый цвет. И попробуем перекрасить в тёмный.
Мы забыли вывести все наши цвета. Давайте сейчас их отдельно сохраним и будем с ними работать. Мы берём этот слайд, нажимаем клавишу R, рисуем любой прямоугольник. Сейчас мы будем сохранять все наши фирменные цвета в полотно, чтобы сразу начать работать с ними. Перекрашиваем квадратик. Нажимаем на четыре маленьких кружочка в меню справа, рядом с надписью Fill. Теперь нажимаем «плюс». И у нас сразу этот жёлтый цвет сохраняется. Давайте так его и подпишем «Жёлтый». Всё, мы его сохранили.
Теперь нажмём сюда и возьмём наш чёрный цвет. Заметьте: у нас не прямо чёрный, а немножко уведённый в светлый, чтобы он был мягче и насыщеннее. Также нажимаем на четыре точки, на «плюс», — и нам предлагают сохранить цвет. Сохраняем, подписав «Чёрный».
Нажмём сюда, и ещё раз поменяем цвет. Нажимаем четыре точки, «плюс» и подписываем: «Красный».
И последний цвет у нас — оранжевый. Таким образом мы сохранили цвета.
Теперь переходим к нашему фрейму. Нажимаем на четыре точки, и нам сразу предлагают выбрать какой-либо фирменный цвет. Нажимаем на чёрный. Получилось вот так.
Давайте блюдо чуть-чуть подвинем. Здесь у нас не сменился цвет. Давайте выберем его тоже чёрным. Теперь перекрасим логотип в белый цвет. Можно так оставить.
Можно поиграться: добавить какие-нибудь элементы из наших дополнительных цветов. Например, сделать какой-нибудь уголок, перекрасить его в какой-нибудь цвет. По-всякому можно обыгрывать. Но пока что сделаем просто и лаконично. Вроде бы приятно смотрится.
Перейдём к следующему элементу. Это карточки наших товаров. Для них предлагаем использовать размер Instagram-поста. Переходим в папку с материалами и берём фото блюд. Начнём с первого. Как можно это обыграть? Предлагаем сделать это на белом фоне, но сделать подложку под каждое наше блюдо. Сейчас придумаем как. Отступ сделаем 65 с обеих сторон.
Чтобы увеличивать или уменьшать размер нашего объекта, мы можем пользоваться кнопкой Ctrl и стрелочками «Вправо» и «Влево». Это если нам нужно вот здесь сдвинуть. Либо «Вверх» и «Вниз» — если нужно, соответственно, подровнять сверху или снизу.
Давайте подровняем, чтобы у нас всё было одинаково. Немножко округлим наши углы, пропишем, например, значение 40. Посмотрим: в принципе нормально.
Давайте переместим сюда наше блюдо. Примерно так, даже чуть пониже. Перекрасим нашу подложку в тёмный цвет.
Теперь добавим текст. Допустим, мы сейчас делаем блюда по разной тематике. Приблизим, чтобы видеть наш текст, и напишем «Японская…» И на следующей строке — «…кухня».
Теперь нам необходимо выбрать шрифт. Вот он, Raleway. Поставим Bold. Теперь отодвинем немного изображение назад и попробуем увеличить шрифт. Подровняем, подвинем стрелочками. Слева 65, так же сделаем и сверху. И нужно ещё немного увеличить шрифт так, чтобы текст было хорошо видно. Давайте остановимся на 102. Наше блюдо переместим чуть-чуть пониже. И таким образом мы сделали первую карточку товара.
Теперь нажмём Ctrl+D. Копируем наш фрейм, чтобы сразу же в нём работать. Удалим эту картинку и добавим второе блюдо, перетянем файл с его изображением сюда. В фрейме выберем наш прямоугольник и перекрасим в какой-нибудь другой цвет. Можно в такой оттенок красного, более-менее подходит. И здесь напишем «Русская кухня». Вторая карточка товара готова. Главное — делать их по единому смысловому контексту. Если начали первую в таком стиле, то все остальные выполняем в таком же. Лучше не устраивать карнавал, а делать всё единообразно.
Откроем наш лист. Удалим изображение и добавим третье блюдо. Вот так мы его расположим. Перекрасим здесь в жёлтый, чтобы все цвета карточки были из основных цветов. Можно немного уменьшить наше блюдо. Так и оставим. А здесь напишем «Итальянская кухня».
Таким образом мы сделали три карточки товара. Все они идут в едином стиле. У них различаются лишь цвета подложек, но они довольно хорошо гармонируют между собой и не режут глаз, что для нас очень важно.
Для наглядности мы создали группу «ВКонтакте» и добавили этот дизайн сюда. Здесь мы можем сразу же посмотреть, как выглядят логотип и шапка. Спускаемся ниже — добавили три товара разных кухонь. По ним мы можем перейти и посмотреть — по этим ссылкам добавляются описания, различные фотографии и т. д.
Здесь мы можем отдельно создать меню, но мы не делали для него специальный дизайн, потому что он нам не требовался. В меню, как правило, указывают различные акции, подарки, время работы, условия доставки и прочее. Различные блоки, по которым можно кликнуть и перейти на какие-либо внешние или внутренние ссылки, чтобы уже более подробно ознакомиться. Такая простенькая менюшка. Мы просто для примера это накидали, взяв такой же дизайн. Поменяли цвет и большими буквами прописали, чтобы было хорошо видно. Примерно так выглядит наш дизайн.
