вебинар для WEBPROMOEXPERTS
Дизайн-грамотность для бизнеса: как не лажать в оформлении постов
Прежде, чем обратиться к бизнесу, большинство пользователей гуглят его\смотрят его соцсети. Это одна из самых главных точек входа для вашего клиента.
Страница бизнеса — это как женское лицо. Оно такое одно, нужно ухаживать за ним, показывать лучшее, подкрашивать... Но когда ты превращаешься в копию Моники Белуччи — ты уже не уникален.
Страница бизнеса — это как женское лицо. Оно такое одно, нужно ухаживать за ним, показывать лучшее, подкрашивать... Но когда ты превращаешься в копию Моники Белуччи — ты уже не уникален.
Как работает хороший дизайн соцсетей
Точка входа
Посмотрели, проскролили дальше
Повторный нажим
Похожий пост активирует зоны в мозге, отвечающие за запоминание. Таким образом, потребитель вспоминает о вас.
Нет ничего лишнего, я заинтересовался
Когда пост оформлен эстетично и красиво, в нем нет ничего лишнего, то потребитель более заинтересован.
Заказываю!
Потребитель готов придти к вам и сделать свой заказ, потому что пользуясь информацией из соцсетей он действительно в курсе того, что вы как бизнес хотите донести
Ваше лицо бизнеса — какое оно
Проанализируйте свою страницу для бизнеса по следующим параметрам
Заполненность страницы\орфографические ошибки
Если вы допускаете элементарные ошибки в информации о вашем бизнесе — это недопустимо. Проверьте наличие телефона, правильной электронной почты, особенно если они "вшиты" в дизайн обложки.
Наличие брендированного контента
Когда-нибудь вы воровали картинки из других пабликов, оставляли картинки из Pinterest без подписи?
Поверьте, кто-то делает это и с вашей страницей. Защитите ее с помощью контента, который будет оригинальным и касаться только вашего личного материала страницы.
Поверьте, кто-то делает это и с вашей страницей. Защитите ее с помощью контента, который будет оригинальным и касаться только вашего личного материала страницы.
Визуальный шум
На одной картинке к посту у вас больше трех шрифтов? А шрифты все разного цвета? Композиция залеплена?
Если на вашу страницу зайдут люди с расстройством цветовосприятия, смогут ли они что-либо увидеть?
Вы используете несочетаемые между собой визуальные приемы: например ставите много разных градиентов, сбоку вставляете фотографию и используете яркие шрифты?
Если на вашу страницу зайдут люди с расстройством цветовосприятия, смогут ли они что-либо увидеть?
Вы используете несочетаемые между собой визуальные приемы: например ставите много разных градиентов, сбоку вставляете фотографию и используете яркие шрифты?
Качество визуала
Пикселизованные картинки, картинки с вотермарком из стоков, слишком маленькие картинки, неудачно обрезанные —все это сказывается на вовлеченности пользователей.
Единство цвета и оформления
Ваши 5 последних постов можно связать в одно целое с помощью цвета, композиции, или каких-либо графических элементов?
Если нет — как пользователь должен связывать их с вами?
Если нет — как пользователь должен связывать их с вами?
Визуализация расходится с текстом
Вы пишете о футболе, а картинки о "обратитесь к нам пожалуйста", или наоборот.
Симптоматика
Это должно послужить вам примером, и если вы находите что-либо похожее в ваших страницах — вам необходим доктор? консультация дизайнера
В чем сила, брат
Фирменный стиль соцсетей — это обобщенный список рекоммендаций по ведению социальных сетей бизнеса, в котором четко обозначены основный стилистические приемы, которые направлены на узнаваемость бренда среди его конкурентов.
Фирменный стиль используется как методичка при создании макетов.
Медиа-кит — это готовые шаблоны для прессы, медиа, соцсетей, которые используются для редактирования и создания однотипно оформленных постов.
Фирменный стиль используется как методичка при создании макетов.
Медиа-кит — это готовые шаблоны для прессы, медиа, соцсетей, которые используются для редактирования и создания однотипно оформленных постов.
Медиа-кит всех спасет.
ОН помогает держать на плаву весь визуальный образ бренда.
ОН помогает держать на плаву весь визуальный образ бренда.
Маленькая черепаха, на которой держится все — это грамотный текст и качественные фото.
Три слона красивого поста — это целостная композиция, сбалансированный цвет и продуманная типографика.
Три слона красивого поста — это целостная композиция, сбалансированный цвет и продуманная типографика.
Слон 1 — Композиция
Композиция — это то, как мы располагаем элементы макета.
Посмотрите на макет без использования правил композиции и после
Посмотрите на макет без использования правил композиции и после
Закон равновесия
Все элементы должны быть связаны между собой стилистически, по цвету, расположению, но не должны пестрить.
Идеально, когда ваш макет воспринимается целостно и легко даже если какой-либо элемент из макета можно убрать.
Хаос никогда не привлекает деньги, он утомляет.
Хаос никогда не привлекает деньги, он утомляет.
Закон единства
Композиция выстраивается вокруг центра действия
Нужно выделить один главный мэседж визуального сообщения и выстроить иерархию других элементов в макете вокруг него.
Все второстепенные елементы указывают на главный, не перекрывают его цветом, размещением или размером.
Меньше критики в стиле "логотип побольше"
Все второстепенные елементы указывают на главный, не перекрывают его цветом, размещением или размером.
Меньше критики в стиле "логотип побольше"
Как гармонизировать макет
Ритм
Все элементы должны иметь одинаковую меру изменения относительно друг друга
Динамика в макете — когда "воздух" вокруг элементов подчеркивает их значимость, задает им незримое "движение".Это напрямую первый закон композиции.
Баланс в жизни найти невозможно. А вот в макете — нужно обязательно.
Баланс в жизни найти невозможно. А вот в макете — нужно обязательно.
Контраст
Важные элементы должны ярче проявляться на фоне
Бывает контраст движения, контраст цвета и так далее.
Контраст помогает выделить главное.
Контраст помогает выделить главное.
Слон 2 —Цвет
С помощью цвета мы отличаем обьекты и цвет подчеркивает "настроение" бренда, с которым он общается. Один цвет, связанный с вашими соцсетями помогает пользователю узнать вас среди других.
Геринг сформулировал: два или более цвета являются гармоничными, если их смесь дает нейтральный серый цвет.
Это позволяет сбалансировать процессы диссимиляции и ассимиляции белков в наших зрительных рецепторах и не вызывать визуальную усталость.
В частности, каждая пара дополнительных цветов включает в себя все три основных цвета:
красный - зеленый = красный - (желтый и синий)
синий - оранжевый = синий - (желтый и красный)
желтый - фиолетовый = желтый - (красный и синий).
Этим объясняется эффект цветного хаоса наружной рекламы в городах.
Это позволяет сбалансировать процессы диссимиляции и ассимиляции белков в наших зрительных рецепторах и не вызывать визуальную усталость.
В частности, каждая пара дополнительных цветов включает в себя все три основных цвета:
красный - зеленый = красный - (желтый и синий)
синий - оранжевый = синий - (желтый и красный)
желтый - фиолетовый = желтый - (красный и синий).
Этим объясняется эффект цветного хаоса наружной рекламы в городах.
Симультанный контраст
Насыщенность цветов одинаковая, но благодаря соединению двух цветов создается впечатление, что там есть обводка, или присутствует другой цвет.
Так происходит потому, что когда мы воспринимаем рекламу и цвет, рецепторами глаза создаются новые структуры белка и одновременно распадаются белки. Когда баланс между этими процессами нарушается — тогда мы когда закрываем глаза, часто видим "белый шум", или белую окантовку очень ярких обьектов с макета. Так мозг пытается вернуть баланс между процессамы создания и распада белка.
Слон 3 —Типографика
Самый тяжелый слон.
Обычно именно подобрать шрифты бывает тяжелее всего, и главное — это учитывать место и аудиторию, которая должна будет воспринимать информацию из постов.
Обычно именно подобрать шрифты бывает тяжелее всего, и главное — это учитывать место и аудиторию, которая должна будет воспринимать информацию из постов.
Виды шрифтов
Обычно выделяют 4 виды шрифтов
Антиква
Контрастный шрифт с засечками
Брусковый шрифт
Неконтрастный или контрастный шрифт с засечками, близкими по форме к прямоугольнику
Гротеск
(рубленый)
(рубленый)
Шрифт без засечек
Гротескная
антиква
антиква
Контрастный шрифт без засечек
Что погубит любую типографику - орфография
Писать дефис вместо тире
длинное тире — alt+0151;
Ставить дюймы вместо кавычек
Alt+0171 (праві лапки)
і Alt+0187 (ліві лапки)
і Alt+0187 (ліві лапки)
Сжимать и растягивать буквы
Геометрично це меняет контраст букв і портит весь вид шрифта.
Как не надо делать
Меньше - лучше
Максимум три шрифта из одной гарнитуры, или два разных.
Разрядите обстановку
Не слепляйте буквы в кучу, оставьте места, чтобы их можно было прочесть в спешке.
Правильно выровняйте
Плохой пример — выравнивание по ширине и по центру.
Лучше всего работает выравнивание по левой или правой стороне.
Лучше всего работает выравнивание по левой или правой стороне.
Нет декоративным шрифтам!
Они могут быть частью проекта исторической реконструкции, но не частью макета в соцсетях. Кто должен разобрать сообщение таким шрифтом?
Начните с начала,
оглавьте главное
оглавьте главное
Заголовок должен быть заметен, и основной текст отличаться от него. Воплотите правило контраста из композиции в жизнбь.
Судьба Готэма зависит только от вас.
Нет разницы, где использовать эти знания.
Вы всегда можете проверить результат дизайнера, исходя из этих соображений цвета, типографики и композиции.
Также если вы делаете дизайн сами — помните об этих принципах и проверяйте себя.
Нет разницы, где использовать эти знания.
Вы всегда можете проверить результат дизайнера, исходя из этих соображений цвета, типографики и композиции.
Также если вы делаете дизайн сами — помните об этих принципах и проверяйте себя.
Где реализовывать все эти принципы
Спасение бренда от плохого дизайна путем ребрендинга обходится дороже, чем грамотный выбор фрилансеров, SMM-специалистов и проверка их работы исходя из вышеизложенных принципов
1
Photoshop
Когда работаете в Фотошопе — всегда используйте направляющие, рисуйте сетку,
2
Canva
В Канве уже сделаны дизайны, вам стоит только выбрать макет и изменить его, не поменяв при этом первоначальную композицию так сильно. Большой минус — практически отсутствие поддержки кириллических шрифтов. Выберите пару похожих макетов и используйте их в оформлении вашей страницы, чередуя с простыми фотографиями с логотипом вашего бизнеса.
3
Crello
Есть поддержка кириллических шрифтов, принцип работы такой же, как и у Канвы.
Нет разницы, где оформлять соцсети, лишь бы всем было хорошо.
Всем — это пользователям и вашим будущим клиентам.
Думайте о них в первую очередь и это не даст вам совершить ряд ошибок.
Всем — это пользователям и вашим будущим клиентам.
Думайте о них в первую очередь и это не даст вам совершить ряд ошибок.
Во, как надо!
Примеры хорошо оформленных постов.
Пользуйтесь на здоровье.
Сверяйтесь с базовыми принципами, описанными здесь — и помните об этом, когда будете делать свои макеты.
Есть вопросы?
Вы можете проконсультироваться со мной по любой части этого конспекта.
Напишите мне письмо.
Напишите мне письмо.
