x
 
Алексей Мигальников
20 мая 2015
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Здравствуйте, Михаил!

Мы — студия имейл-маркетинга «Аут оф клауд». Подготовили для клиента дизайн рассылки, макет во вложении. Что можно улучшить в типографике и вёрстке?


Алексей!

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

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

О базовых элементах вёрстки

Огромная неинформативная шапка отодвигает более ценное содержание вниз

Заголовок страницы выглядит так же, как заголовки у картинок. Из-за этого нарушается иерархия вёрстки

Теория близости не соблюдена: иллюстрация относится к тексту выше, а не справа. Это можно вылечить, увеличив расстояние от вводного текста до картинки или придав прямоугольную форму модулю с картинкой.

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

Серый цвет ухудшает читаемость текста. Лучше использовать его со смыслом. Например, если надо показать что-то некликабельное или пока недоступное. Иначе вы рискуете создать такое ощущение там, где оно не нужно. В вашем случае иконки соцсетей в подвале не выглядят кликабельными

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

Игорь Штанг о выключке по левому краю

Надо склеивать неразрывными пробелами цифры с единицами измерения.

Кнопку стоит сделать темнее, чтобы текст в ней стал читаемым.

Увеличьте отступ от кнопки до края плашки раза в два-три, чтобы визуально компенсировать «вес» содержания.

О формате и выборе полей

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Евгений Калмыков
20 мая 2015

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

Иван Пришвин
24 мая 2015

Меня смущают заголовки в 3 и 4 строки. И везде точка и восклицательный знак, которым нужно пользоваться осторожно. Ещё стрелки у шагов создают ощущение последовательности, но почему-то на первой картинке у нас выбрано слово ”attempt”, а на второй «снег» (snow). Получается что стрелки только путают – нет никакой последовательности, мы просто перечисляем функционал. В конце забыли слово: «… и начинайте учиться прямо». Непонятно, что произойдёт, когда я нажму на кнопку?


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

2 3 3 3




Недавно всплыло

Поделитесь соображениями, как работать, путешествуя 8 Как написать хорошее резюме? 7 Визуализация проявляет 4 Это какие‑то другие пиксели? Как они соотносятся? 2