netology design by_kerya

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

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

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

Содержание

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

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

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

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

Facebook Design

Обложка (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

P&G

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

Цикл дизайна

Инфографика

P&G

Вопросы?

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

Вопросы присылайте на почту[email protected]

СПАСИБО!

https://www.facebook.com/a.kerya

netology design by_kerya

Documents