Чек-лист для дизайнера: что проверить в макете перед сдачей

Чек-лист для дизайнера: что проверить в макете перед сдачей

  • 1 277

Дизайнеры часто делают одни и те же ошибки в макетах — мелкие, но непростительные. Обычно это происходит из-за невнимательности или потому, что они не уделяют должного внимания мелочам. Хотя в этом вопросе важно быть педантом.

Мы составили чек-лист с основными правилами, которые помогут таких ошибок избежать. Вы можете сверяться с ним перед тем, как отдать макет в работу.

Ничего нового мы не придумывали: просто отобрали среди общепринятых стандартов те, что нужны именно в email-рассылках. Они не гарантируют вам идеальный шаблон, но помогут сократить время на ревью и улучшить экзекьюшн.

Чек-лист для емейл дизайнера

1. Единица измерения — всегда пиксели (px)

Пиксель — базовая единица измерения в веб-дизайне, ей же пользуются наши верстальщики. Если пользоваться разными единицами, то наши 14 пунктов у верстальщиков отобразятся, как 14,22 пикселя. Согласитесь, работать с кратными числами куда удобнее.

2. Соблюдайте модульную сетку

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

Пример модульной сетки из книги Юрия Гордон «О языке композиции»
Пример модульной сетки из книги Юрия Гордон «О языке композиции»

Она нужна для того, чтобы ускорить и упростить создание макета, будь то email-рассылка или посадочная страница. С ней вам не придётся думать, какой отступ сделать и как гармонично расположить объекты.

Сетка задаст единый стандарт расположения объектов и исключит возможность нечётных отступов. К тому же на основе сетки намного проще делать адаптивный дизайн.

Посмотрите, как смотрятся письма, сделанные по модульной сетке и без неё. Разница очевидна:

Без модульной сетки
Макет, сделанный без сетки
Макет по сетке
Макет по сетке

Вот сервисы, которые упростят работу с сеткой:

GridMaker и Guide Guide — плагины для Photoshop;

GridCalculator и ModularGrid — онлайн-генераторы, в которых можно скачать сетку и сразу открыть её в фотошопе.

Читайте также

Что будет, если сделать дизайнера менеджером

3. Кегль не менее 10 пикселей

Обычно минимальный размер кегля в теле письма — 13 пикселей. Если текст будет мельче, его будет сложно читать, особенно, людям с плохим зрением или тем, у кого плохо откалиброван монитор. В прехедере или в футере минимальный размер текста обычно 10 пикселей.

Размер основного текста - 14 пикселей.
Размер основного текста — 14 пикселей

Размер-шрифта-10-px
Размер основного текста – 10 пикселей

4. Всегда проверяйте интерлиньяж

Не полагайтесь на стандартные значения интерлиньяжа. Рекомендуемый интерлиньяж в типографике обычно 1,4-1,5 от значения кегля. Это некий стандарт, при котором текст воспринимается максимально комфортно.

Но есть случаи, когда это правило не работает. Например, если у вас необычная или специфическая гарнитура, очень сжатая по высоте. Тогда интерлиньяж можно уменьшить до значения 1,2. Вообще, чем длиннее строка, тем больше должна быть её высота, и наоборот.

Лучше вообще не полагаться ни на какие автоматические значения. Большинство из них были придуманы, когда стандартны только зарождались, и они плохо вписываются в современные понятия красоты. Я использую следующие значения кегль/интерлиньяж: 13/18, 14/20, 15/22 и т.д.

5. Прописные буквы нужно разряжать, строчные разряжать нельзя

Это золотое правило, которое работает во всех без исключения случаях. Разрядка нужна, чтобы текст был визуально равномерным — с одинаковым количеством белого пространства внутри букв и между буквами.

Разрядка у прописных букв должна быть меньше интерлиньяжа в блоке. Пробел между строками прописных букв не должен быть меньше высоты буквы.

Разрядка у прописных букв

6. Размеры шрифтов должны быть целыми числами

Не используйте десятичные значения вроде 14.57 пикселей. Иначе верстальщику придется вручную подбирать размер и угадывать, хотели ли вы сделать шрифт 14 пикселей или всё же 15.

7. Значения отступов кратны 5 либо 10

Не используйте ничем не обоснованные величины отступов, подобранные «на глаз». Например, 21 или 17 пикселей. Замените их на округлённые значения или кратные 5 (или даже 10).

Это облегчит задачу и вам, и верстальщикам, когда потребуется высчитывать координаты и комбинировать блоки при вёрстке.

8. Четкая иерархия текстовых стилей

При создание макета отдельное внимание стоит уделять типографике. Количество текстовых стилей должно быть равно количеству функций, которые они выполняют. Нужно понимать, какую функцию закроет конкретный блок и делить их на H0, H1, H2 и H3.

Заголовок должен быть контрастным основному тексту. Если наборный текст — 14 пикселей, а заголовок — 16 пикселей и жирный, то это не достаточный контраст.

Читайте также

Тренды в веб-дизайне в 2018 году от Hubspot (перевод)

9. Текст и фон должны быть контрастны друг другу

Если текст и фон будут контрастны, пользователю будет легче читать текст. Слишком маленький контраст сделает текст недоступным для людей с плохим зрением или ненастроенными мониторами. При этом, если у вас на 100% чёрный текст на белом фоне, это будет раздражать глаза. Лучше сделать его темно-серым, например, #333333.

Тёмно-серый текст
Контрастный текст
Не контрастный текст
Не контрастный текст

10. Внутреннее меньше внешнего

Расстояния внутри одного компонента должно быть меньше, чем расстояние между компонентами. То есть межбуквенное расстояние меньше, чем пробелы между словами, пробелы между словами меньше, чем интерлиньяж и т.д..

Подробнее об этом можно почитать у Артёма Горбунова.

Плохо
Хорошо


11. Динамический контент — стандартным шрифтом

Всегда. Потому что иначе данные не смогут подгружаться автоматически.

Нестандартный шрифт используется только в том случае, если блок будет верстаться картинкой. Как правило, это баннеры, реже — крупные заголовки или меню в хедере. Если использовать нестандартный шрифт и верстать блок текстом, верстальщику придётся заменить шрифт на стандартный. В итоге текст поедет, так ещё и отступы станут некорректными.

12. Данные в таблицах выравниваются по левому флангу

Разнородные данные (1 штука, 200 рублей, 50%) в таблицах всегда выравниваются по левому флангу. Если данные однородные (только цифры), а описание («штука», «рубль») вынесено в верх таблицы, их надо выравнивать по правому флангу.

корзина

Текст в таблицах всегда выравнивается по левому флангу.

13. Выключка в емейлах по левому флангу или по центру

Никогда не делайте выключку по ширине в вебе. Этот метод хорошо смотрится только в книжной или журнальной вёрстке за счёт того, что грамотный верстальщик может настроить переносы интервалов между словами и расстояния между буквами. В вебе же пока невозможно правильно расставлять переносы и следить за длиной пробелов.

Из бизнес-линча Артемия Лебедева
Из бизнес-линча Артемия Лебедева

Материал о том, как правильно делать выключку.

14. Retina-адаптация макета

В конечном файле необходимо все векторные иллюстрации, а также основные элементы увеличить вдвое, чтобы была возможность адаптировать макет под Retina-дисплеи. Это нужно для того, чтобы у пользователей смартфонов с повышенной плотностью пикселей (например, iPhone) не было размытых изображений.

15. Избавляйтесь от хлама в макете

Удаляйте из макета все ненужные слои. Это поможет оптимизировать размер файла. А чем меньше он весит, тем проще его передавать на вёрстку и хранить в дальнейшем.

Также необходимо логически разложить все слои по папочкам и назвать их понятными именами. Это облегчит работу верстальщикам, когда они будут экспортировать картинки из Photoshop.

Почтовый голубь

Соцсети и email отлично работают вместе. Главное — знать, как соединить оба канала и заставить их работать гармонично.

Брошенные корзины: как вернуть покупателей

Почему покупатели бросают корзины, какие есть способы возврата клиентов, примеры писем для брошенных корзин, техническая реализация.

Чек-лист для проверки вашей email рассылки

Что нужно сделать и проверить, прежде чем отправить рассылку.