Основы веб-дизайна, или как стать дизайнером в емейл-маркетинге
Редкие счастливчики тратят студенческие годы на обучение специальности, которая станет первой ступенью на пути к работе мечты. Я не из их числа. И в этой статье отвечу на животрепещущие вопросы — с чего начать, если у тебя нет специального образования? Что составляет основу веб-дизайна в емейл-маркетинге? Как приобрести необходимые навыки?
Мыслите иначе
Знание программного обеспечения, например, 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. Там мы выкладываем примеры наших работ и удачные письма западных коллег.
* Продукт компании Meta, которая в России признана экстремистской и запрещена
