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

Нельзя просто так взять и сделать модульную страницу из текстовой


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

В настоящем школьном задании подробно описано, чем занимается компания и с какими проблемами она столкнулась. А совет — без спойлеров.

В пер­вом зада­нии под руко­вод­ством Мак­сима Илья­хова нужно собрать стра­ницу сайта некой ком­па­нии, кото­рая столк­ну­лась с неспра­вед­ливо нега­тив­ным осве­ще­нием сво­его про­дукта в СМИ. Задача: раз­вен­чать мифы и успо­ко­ить потен­ци­аль­ных клиентов.

В настоящем школьном задании подробно описано, чем занимается компания и с какими проблемами она столкнулась. А совет — без спойлеров.

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

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

При выпол­не­нии вто­рого зада­ния боль­шин­ство сту­ден­тов берут свои ста­тьи и под­кру­чи­вают вёрстку, наво­дят мара­фет в шриф­тах, добав­ляют один‑два фак­то­ида. А потом пока­зы­вают резуль­тат мне и полу­чают суро­вый ответ:

Это тек­сто­вая линей­ная стра­ница, а не модуль­ная. Это не по заданию.

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

Модуль­ная стра­ница
Тек­сто­вая стра­ница

Сту­денты гово­рят «Окей» и быст­ренько раз­би­рают свою ста­тью на раз­но­об­раз­ные этажи: вклю­чают чере­до­ва­ние ритма, раз­би­вают текст на колонки, обильно уве­ши­вают стра­ницу фак­то­и­дами, выно­сами и дру­гими эле­мен­тами, кото­рые смо­гут помочь быстро раз­но­об­ра­зить ритм. А потом пока­зы­вают резуль­тат Илья­хову и полу­чают ещё более суро­вый ответ:

Это адски пере­гру­жен­ный текст. Это невоз­можно читать.

✸✸✸

Эта исто­рия хорошо иллю­стри­рует глав­ную мысль совета: нельзя про­сто так взять и сде­лать модуль­ную стра­ницу из тек­сто­вой. Нельзя про­сто раз­ре­зать связ­ную ста­тью на по‑раз­ному оформ­лен­ные кусочки. Чтобы лучше выра­зить мысль, доведу ситу­а­цию до абсурда: пред­ставьте, что «Капи­тан­скую дочку» Пуш­кина раз­ре­зали на модули и заче­ре­до­вали. Разве её ста­нет удоб­нее читать? Ско­рее, нао­бо­рот. Текст, пред­на­зна­чен­ный для после­до­ва­тель­ного чте­ния, дол­жен оста­ваться линейным.

Чтобы пре­вра­тить линей­ную стра­ницу в модуль­ную, её текст при­дётся пере­ра­бо­тать. Бывает, что доста­точно изме­нить несколько строк и заго­лов­ков, а ино­гда при­хо­дится пере­пи­сать весь текст и изме­нить фор­мат подачи.

Раз­бе­рём несколько примеров.

На про­мо­стра­нице ком­па­нии «Шоп­фанс» моло­дая мама рас­ска­зы­вает, как она поку­пала и зака­зы­вала доставку дет­ской одежды из Аме­рики. Рас­сказ геро­ини — связ­ная исто­рия, но на про­мо­стра­нице он акку­ратно раз­де­лён на неза­ви­си­мые блоки, посвя­щён­ные раз­ным аспек­там: рас­сказу о себе, об устрой­стве про­цесса покупки, о полу­че­нии посылки, о плю­сах и мину­сах доставки. Неза­ви­си­мые блоки хорошо встра­и­ва­ются в чере­ду­ю­щи­еся по ритму этажи:

На про­мо­стра­нице Кор­по­ра­тив­ной школы глав­буха рас­сказ об устрой­стве школы подан в виде поша­го­вой инструк­ции. Каж­дый шаг пред­став­лен в виде неза­ви­си­мого блока:

А на про­мо­стра­нице Окс­форд‑теста линей­ные куски тек­ста — рас­сказ о пользе теста и ответы на частые вопросы — нао­бо­рот не поре­заны на части, а встро­ены между дру­гими эта­жами стра­ницы. Когда чита­тель до них доби­ра­ется, чере­до­ва­ние ритма и укра­ша­тель­ства не мешает ему спо­койно читать длин­ный текст:

Обра­тите вни­ма­ние, как в послед­нем при­мере не свя­зан­ные друг с дру­гом блоки тек­ста типа отзы­вов спо­койно встают в две колонки.

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

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

Комментарии

Всеволод Кудрявцев
21 февраля 2019

Примеры, на мой взгляд, не подкрепляют мысль совета. Текст для модульной страницы надо писать так, чтобы потом не искать начало блока, и каждый блок работал самостоятельно — это мысль совета. В первом примере линейный текст и блоки скорее зависят друг от друга. Может, добавить пример с неправильной трансформацией текстовой в модульную страницу? Возможно, ученикам школы совет станет понятнее. 


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

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

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

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

1 Как форма текста влияет на порядок чтения? 2 1 Как уведомить клиента о повышении цены?




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

Сайты для слабовидящих 2 2 Руст, можно ли сделать такую кнопку без фоновой картинки? 3 При клике на кнопку нужно плавно прокрутить страницу к форме 2