ЦЕНТР ПРОФЕССИОНАЛЬНОГО ОБУЧЕНИЯ «НЕТОЛОГИЯ»

Куратор курса: Александр КеряSMM Leader @ SPN Ogilvy Ukraine

Визуальный контент

Содержание

1. Дизайн страниц2. Дизайн контента3. Дизайн приложений

88% пользователей социальных сетей первым делом обращают внимание на визуальную часть контента.

70% нововведений в Facebook50% нововведений в Вконтакте

имеют отношение к визуальной части

Facebook Design

Обложка (Cover)

Обложка (Cover)

Правила размещения

Обложки доступны всем;

Обложки, вводящие пользователей в заблуждение или нарушающие чьи-либо авторские права, недопустимы;

Запрещается поощрять загрузку пользователями Вашей обложки в их личные Хроники;

Обложки не могут содержать изображения, более 20% которых занимает текст.

Рекомендации

Лучшее качество: sRGB, JPG, 851x315 px, 96 dpi, >100 kb;

Больше дизайна – меньше текста;

Используйте эмоциональную сторону в вашей обложке;

Соедините дизайн обложки с вашей аватаркой и вкладками

Аватарка (Profile Image)

180x180 pxРазмер загрузки

160x160 pxРазмер на обложке

50x50 pxРазмер в ленте

Настройка миниатюры

Настройка уменьшенного варианта аватарки

Дизайн вкладок

Размер вкладки 111х74 px

Организация вкладок

Ключевые события

Добавляем ключевое событие

1.

2.

Добавляем ключевое событие

1.

Добавляем ключевое событие

843 px

403 px

Редактирование фото

Размер фото в лент и на стене

На стенке:403х403 px

В ленте:Соотношение оригинального размера

Закрепление поста

Закрепляйте самое важное

Закрепленные посты в 70% случаев работают на новую аудиторию

Держите ваш Timeline в чистоте

1. Выделяйте самые важные посты

2. Скрывайте старые вопросы3. Добавляйте важные события4. Расскажите историю вашего

бренда5. Сделайте ваш контент

уникальным

Приложения (Вкладки)

Ширина: 810 px

Еще раз о размерах

Еще раз о размерах

Еще раз о размерах

Еще раз о размерах

Title tagMeta description

Еще раз о размерах

136 x 136

Основные элементы

Основные элементы

Главное меню

Главное меню

607 px

Основной фотоальбом

Создание альбома

Посты на стене

Соединение дизайна

Соединение дизайна

Соединение дизайна

Одноклассники

Одноклассники. Лента

Одноклассники. Новости

Остальные социальные сети

Cheat Sheet по другим социальным сетях будет выслан вместе с презентацией

Пример оформления «Билайна»

Оператор мобильной связи «Билайн» представлен в различных социальных сетях. Для всех страниц в студии Лебедева был разработан стиль оформления.

Пример оформления «Билайна»

Изучаем возможности каждой из социальных сетей и придумываем, как его достичь. Пусть это будет фирменный паттерн.Рисуем набор иконок.

Пример оформления «Билайна»

Начинаем с Фейсбука — представительства, где больше всего свободы для действий. Думаем над разводящей стартовой страницей. Помимо навигации, придумываем для нее большой кликабельный «лайк». Пробуем разные варианты.

Пример оформления «Билайна»

В духе Глейзера:

Пример оформления «Билайна»

Вариант с кнопкой:

Пример оформления «Билайна»

Для подработки паттерна подключаем иллюстратора, после чего рождается идея оставить только один элемент — бабл — и сделать его крупным. Выглядит интересно, берем в работу.

Пример оформления «Билайна»

Отказываемся от дублирования кнопки «лайк» на Фейсбуке и вместо нее ставим счетчик со стрелкой, а фоновые баблы становятся ячейками для пунктов меню.

Пример оформления «Билайна»

Элементы дизайна в баблах

Пример оформления «Билайна»

Адаптируем оформление на остальные соцсети.

Пример оформления «Билайна»

Адаптируем оформление на остальные соцсети.

Пример оформления «Билайна»

Адаптируем оформление на остальные соцсети.

Пример оформления «Билайна»

Адаптируем оформление на остальные соцсети.

Пример оформления «Билайна»

Отрисовываем оставшиеся иконки для «Фейсбука» и «Вконтакте», проверяем верстку всех страниц и пишем руководство по использованию фирменного стиля.Переходим к брендированию контента

Райффайзенбанк

✔

~

~

Сбербанк

✔

~

✘

Альфа-Банк

✔

✔

~

Работа с контентом

Визуальный контент

Визуальный контент

Визуальный контент

Визуальный контент

Визуальный контент

Типы визуального контента

Типы визуального контента

Типы визуального контента

Типы визуального контента

Типы визуального контента

Типы визуального контента

Типы визуального контента

Типы визуального контента

Путь к успеху

Выделяйтесь!

1.

2.

3.

a. b. c. d.

Видимые

Нечитабельные

Как?

Фирменный стиль Брендирование Иллюстрирование

Фирменный стиль

Гайдлайны

Фирменный стиль

Сайт

Фирменный стиль

Соц сети

Фирменный стиль

Контент

Брендирование

Изучаем стиль бренда

Брендирование

Находим элементы для выделения

Брендирование

Создаем брендированный контент

Иллюстрирование

Если у бренда есть свой персонаж…

Иллюстрирование

Вариации персонажа

Иллюстрирование

Создание уникального контента

Рекомендации

Приложения

Ferrero Rocher

Ferrero Rocher

Ferrero Rocher

Ferrero Rocher

Ferrero Rocher

Ferrero Rocher

P&G

Создание уникального макета приложения

P&G

P&G

P&G

Цикл дизайна

Инфографика

P&G

Вопросы?

Подписывайтесь в Facebookhttps://www.facebook.com/a.kerya

Вопросы присылайте на почтуa.kerya@gmail.com

СПАСИБО!