Иван!

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

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

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

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

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

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

Было
Стало

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

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

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

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

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

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

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

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

  • Упростить раскладки этажей и выделить в каждом главный самый узнаваемый скриншот. Лучше всего, если на главных скриншотах будут иллюстрации. Их легче запомнить и отличить друг от друга, чем ворох текста.

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

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

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

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

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

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

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

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

Типографика в вебеНоситель: сайтДоработка вёрстки
Отправить
Поделиться
Запинить

Рекомендуем другие советы