Основы веб-дизайна, или как стать дизайнером в емейл-маркетинге
Редкие счастливчики тратят студенческие годы на обучение специальности, которая станет первой ступенью на пути к работе мечты. Я не из их числа. И в этой статье отвечу на животрепещущие вопросы — с чего начать, если у тебя нет специального образования? Что составляет основу веб-дизайна в емейл-маркетинге? Как приобрести необходимые навыки?
Мыслите иначе
Знание программного обеспечения, например, Photoshop, — важный элемент для достижения успеха, но это не перекроет отсутствие творческого мышления. Дизайнер — это человек с особым взглядом на мир. Развивайте вкус и замечайте то, чего не видят другие. Но не изобретайте велосипед, всё необходимое для старта уже существует. И речь идёт не о плагиате, а о глубоком погружении в эту среду. Ныряйте! Надёжным инструментом для вдохновения станут широко известные ресурсы:
- Pinterest — вдохновляющие примеры и возможность создавать муд-борды.
- Behance — стремитесь, чтобы ваши работы были достойны этого сайта.
- Awwwards — соревнование инновационных решений в веб-дизайне.
- Cssdesignawards — веб-проекты, каждый из которых потенциально претендует на звание «Сайта года».
- Siteinspire — ещё одна международная витрина лучших работ в области веб- и интерактивного дизайна.
Используйте расширение для браузера Muzli или Dribble. Они показывают иллюстрации, типографику и сайты, которые заслуживают внимания. Каждый раз перед работой уделите 15 минут их изучению.
Уделяйте внимание внешнему. Ведите красивый инстаграм, путешествуйте, стильно одевайтесь, слушайте музыку, которая вызывает эмоции, окружайте себя красивыми предметами интерьера. Изящные детали пространства, где мы живём и работаем, формируют вкус.
Освойте техническую базу веб-дизайна в емейл-маркетинге и практикуйтесь как можно больше
Научитесь пользоваться Photoshop и Illustrator. Но совсем не обязательно сразу забираться в дебри и до упора осваивать все функции без исключения. Достаточно изучить базовые инструменты, которые позволят начать делать хороший дизайн уже сейчас. На просторах интернета много бесплатных уроков и онлайн-курсов:
- https://photoshop-master.ru — ресурс для того, чтобы поднатореть в главных фишках.
- https://vk.com/designtutorials — группа, в которой собраны полезности.
- https://www.designcontest.ru — реальные задачи, которые сделают обучение эффективнее.
Зарегистрируйтесь на сайте для фрилансеров и выполняйте небольшие задания. Возможно, ваш веб-дизайн в емейл-маркетинге придётся по душе заказчику и вы даже получите вознаграждение за работу. Это хорошая мотивация. Кроме того, есть возможность анализировать работы победителей и учиться у них.
Исследуйте UX/UI
Помимо непосредственно веб-дизайна в емейл-маркетинге и контента есть очень важный элемент — пользователь. Когда вы начали читать эту статью, у вас уже имелся свой пользовательский опыт. Эмоции и реакции стоят во главе угла хорошего дизайна. Знания психологии поведения помогут создавать удобные интерфейсы, которые дадут результаты по конверсиям.
Рассмотрим некоторые принципы UX-дизайна на примере письма:
Ясность — это как правильное освещение витрины магазина: всё кажется гармоничнее. Пользователю не хочется думать о том, о чём не нужно. Лишние раздумья крадут интерес и время. Объекты, логически взаимосвязанные, необходимо группировать, чтобы пользователь воспринимал их как целое и не активировал дополнительные ресурсы мозга для решения таких задач.
В нашем примере очевидно, что призыв установить приложение этого интернет-магазина связан с кнопками, которые приводят к скачиванию. Представим, что надпись находится на том же расстоянии, что и кнопки соцсетей. В такой ситуации становится непонятно — то ли вёрстка поехала, то ли текст не тот.
- Для решения задачи человеку комфортно воспринимать не больше девяти объектов. В данном случае пунктов верхнего меню всего 4, контентных блоков — 6. Если объектов становится больше, то человек стремится упростить решение задачи. В контексте емейл-маркетинга он, скорее всего, не пролистает письмо до конца.
- Контраст цвета — сильный инструмент привлечения внимания и выделения CTA. Мы сразу понимаем, куда смотреть и что делать.
- Более разреженный текст легче воспринимать. Когда межстрочное расстояние чуть шире автоматического, становится проще фокусироваться и не читать одну и ту же строку два раза.
Более глубоко изучить вопрос UХ помогут эти ресурсы:
- Советы по созданию правильного UX.
- Блог, в котором можно найти качественные переводы зарубежных статей о UX.
Следите за трендами
Новый 2017 год нам приготовил немало нового, но я хотела бы заострить внимание на двух трендах.
Первый — это анимация. Статичная картинка начинает приедаться, и пользователь тянется к чему-то более эмоциональному. Анимация привлекает внимание и улучшает опыт взаимодействия пользователя с продуктом.
Второй — это шрифт. Очень сильный графический элемент. Как основной элемент дизайна он хорошо смотрится на всех устройствах и если расположен грамотно, то напрямую доносит до пользователя основную мысль. Текстовые сайты могут и конкурируют с фотографией и даже видео. Вот примеры нескольких писем, типографика в которых является стилеобразующим элементом.
Не игнорируйте тексты
В продолжение темы шрифта и текста замечу, что вставлять Lorem Ipsum давно не круто. Более того, опытные дизайнеры посмеиваются над новичками, которые пользуются «рыбой». Развивайте коммуникативные навыки и культуру речи, от текстов зависит многое, дизайнер должен чувствовать, о чём умолчать, а где сделать акцент.
Сравним примеры:
- Использование Lorem Ipsum. Использование латиницы на русских сайтах априори некорректно. Это лишает возможности оценить, как на самом деле будет выглядеть текст, набранный кириллицей.
- Использование «рыбы», не имеющей отношения к теме проекта. Если текст не относится к теме, его неинтересно читать. Он не даёт целостного представления о работе, т. к. переключает всё внимание на дизайн и оформление. Это существенный минус, так как заказчик, как правило, хочет видеть полную картину.
- «Рыба», которая поддерживает дизайн макета. Ваша «рыба», пусть и не в первоначальном виде, может стать частью итогового проекта. Это не только плюсик к карме, но и один из показателей вашего профессионализма.
В заключение несколько полезных ресурсов.
Подбор цветов:
Шрифты:
Конструктор модульных сеток:
Сервисы по иконкам:
Читать:
- Майкл Джанда «Сожги своё портфолио»
- Артемий Лебедев «Ководство»
- Брайан и Джеффри Айзенберг «Добавьте в корзину»
- Дэвид Эйри «Логотип и фирменный стиль»
- Джон Вюббен «Контент — это валюта»
- Дэн Кеннеди «Продающее письмо»
И ещё порция вдохновения ждёт вас в нашем Pinterest. Там мы выкладываем примеры наших работ и удачные письма западных коллег.
