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

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

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


Иван!

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

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

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

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

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

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

Было
Стало

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии

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

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

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

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

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

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


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

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

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

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

3 4 1




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

Руст, можно ли сделать такую кнопку без фоновой картинки? 3 Как найти себе замену 1 10 дизайнерских товаров японских студий 2 В бюро есть таймтрекинг для сотрудников? 5