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

Сделал сайт для подписки на свою рассылку: letter.sourvillo.ru

Что скажете о вёрстке и содержании?


Иван!

Я прокомментирую вёрстку. У меня несколько мыслей.

Мысль первая, про скриншоты. Здорово, что вы показываете продукт лицом. Но, к сожалению, показываете не очень удачно. Я не смог понять из скриншотов, как выглядит рассылка. Например, вот это одно письмо или фрагмент?



Чтобы решить проблему, я бы показал где-нибудь на странице одно письмо целиком.

  • Полезный приём

    Показывать длинные вертикальные скриншоты сложно. Если просто вывалить вертикальный скриншот на страницу, то он займёт пять экранов. Пользователь обскроллится, пока докрутит до конца. Для рассказа о сайте компании «Актион-МЦФЭР» мы придумали трюк: прокручивать скриншот быстрее, чем страницу. Скриншот занимает экрана полтора, но влезает в него гораздо больше. Кстати, этот приём помогает, если хочется ровно поставить рядом два скриншота разной высоты. На всякий случай: приём не панацея, не злоупотребляйте.

Из самих скриншотов хочется убрать лишнее:

Было

Стало

Кстати, скриншотам не помешает стать ретиновыми.

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

Кто все эти люди? Мне пришлось прокрутить страницу наверх к заголовку, чтобы вспомнить, о чём речь

Текстовые врезки лучше отжимать в углы этажей. Кладка скриншотов будет плотнее и проще на вид. А возможно, ещё лучше будет написать весь текст сразу после заголовка.

Короткий и простой этаж про интересные ссылки воспринимается лучше остальных:

Вёрстка страниц с иллюстрациями

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

Чтобы решить эту проблему, я бы попробовал:

  • Разбавить этажи. Добавьте между этажами прослойки, которые будут существенно отличаться от них по ритму, тяжести и сложности. Подойдут отзывы или интересные факты. Кстати, этот же принцип использован в портфолио бюро: тяжёлые этажи с картинками проектов чередуются с лёгкими перебивками с советами.
  • Упростить раскладки этажей и выделить в каждом главный самый узнаваемый скриншот. Лучше всего, если на главных скриншотах будут иллюстрации. Их легче запомнить и отличить друг от друга, чем ворох текста.

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


Мысль пятая, про заголовки и текст. Для выразительности и чередования хочется сильнее отличить заголовок страницы от подзаголовков. Простейший ход — ввести второй шрифт:

Заодно я поменял местами скриншот и текст, чтобы последний связался с заголовком. И слегка примоднил почтосборник с шапкой скриншота

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

Чередование ритма

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


Приглашаю уважаемых советчиков предложить свои идеи по улучшению.

P. S. Не могу пройти мимо двух вещей, связанных с редактурой. В заголовке вы пишете «Иван», а в первом же предложении после него — «Ваня». Непоследовательно. Наверху первого скриншота висит серая строчка «Тут надо написать что-то». Это шутка или недоделка? Выглядит как последнее.

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

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

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

Комментарии

Дмитрий Московский
4 октября 2017

Меня смутило, что текст не в мире читателя. Грубо говоря: «Привет, я Ваня, я вот такой классный, много читаю, подписывайтесь». А мне, как читателю хочется ясно понять зачем подписываться и что я узнаю из этой рассылки, нет чёткой ЦА. А еще смутил слишком огромный шрифт основного текста.

Егор Левченко
4 октября 2017

Было бы хорошо на место ссылок на картинках, например, на мюберт, сделать прозрачный див сверху, в котором разместить ссылку на рекомендуемый контент. Тогда пользователь, оказавшийся на сайте сможет прочитать начало поста автора, посмотреть что он рекомендует, проверить совпадение интересов. И тогда, либо интересы совпадут и больше вариантов, что человек подпишется, либо это не ваша ЦА, и человек поймёт это раньше.

Иван Гришаев
2 ноября 2017

Может, убрать чёрный фон? На первый взгляд, выглядит как некролог: «С прискорбием сообщаем, что на тридцатом году жизни…»


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

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

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

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

1 1 На основе ролика о распознавании инсульта создан плакат. Вторая часть 1




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

6 6 3 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1