29 заметок с тегом

верстка

Отзывы на карточках (прокляты)

Есть такой шаблон: слайдер с карточками, на карточках отзывы. На рыбных макетах выглядит примерно так (это скрин из студенческой работы):

Даже в рыбе это выглядит плохо. Сейчас объясню, почему.

❌ Плохо виден человек. Портрет зажат текстом и занимает в лучшем случае 20% ширины текстовой колонки. А сама текстовая колонка еще занимает 40-60% ширины экрана. То есть лицо всегда будет маленьким и невыразительным.

❌ Нужно подгонять объем текста. Узкая колонка очень чувствительна к объему текста. Написал лишнее предложение — и у тебя уже две дополнительные строчки, а они растянивают карточку в высоту. Под соседними карточками получается дырка.

❌ Непонятно, сколько их. За кликом в карусели может быть еще одна карточка или еще 100 карточек. Это непонятно издалека, а разбираться в этом не интересно. Люди просто просмотрят то, что есть до стрелки, и пойдут читать дальше.

❌ Карточки слепые. Везде одинаковый мелкий текст, читать неинтересно.

✅ Как надо:

Вместо карточек — основной широкий абзац текста, не разделенный на карточки. Тогда отзыв может быть коротким, длинным, средним — все варианты будут смотреться хорошо.

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

Фотографию крупнее. Можно все еще держать ее на полях, а можно и в основное поле.

На другом поле можно вынести цитату из отзыва, чтобы он не выглядел слепым.

В сам отзыв можно подмешать фотографии от самого пользователя, тогда не будет уныло. Вместо фотографии можно записать видео.

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

Хорошие примеры — на странице курса Ильи Синельникова:

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

И еще примеры из моего курса про инфостиль:

Большой отзыв с красивым сертификатом в конце
Очень большой отзыв с фотографией в конце
5 дн   верстка   дизайн   композиция

Текст возле картинки

Три мысли для студентов Школы редакторов (и других школ).

Первая: не ставьте основной текст возле картинки справа или слева. Не засовывайте картинку в подмышку к тексту. У вас получится и нечиатемый текст (слишком узкая колонка), и нечитаемвая картинка (слишком мелкие детали).

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

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

Еще читайте: о многоколоночности

7 мес   верстка
2021   верстка   Школа редакторов

Неслучайные коллажи

Собирая коллаж из предметов, следите за общей формой пятна, балансом светлого и темного, куда смотрят объекты. Например, тут всё развалилось, смотрит в разные стороны, между объектами случайные дырки:

А тут те же объекты собраны: черные пятна сбалансированы, объекты смотрят логично, крупное в центре, мелкое по бокам:

2020   верстка

Не прячь за клик

Допустим, у вас страница с рассказом о большой сложной услуге. Есть несколько вариантов этой услуги, о каждом хочется рассказать. Тут есть соблазн сделать такие переключалочки, типа перещелкиваешь — и на месте старого материала появляется новый.

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

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

За клик можно прятать только что-то дополнительное, менее важное. Например:

Рассказ про Прагу. Хотим показать, что в Праге красивые люки, столбы, таблички на улицах. Можно сделать три фоторамы: одну для люков, другую для столбов, третью для табличек. Если ты увидел один люк, тебе примерно понятна красота остальных.

На странице несколько продуктов, каждый нужно показать с разных сторон. Каждому по фотораме.

Промостраница курса о работе с клиентом. Показаны три самых боевых письма, для особо заинтересованных за кликом есть еще несколько.

Размещая что-то за клик, вы должны с полной ответственностью говорить себе: «Если читатель не прокликает, моя страница ни в чем не проиграет».

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

2020   верстка   интерфейс

Сэндвичная верстка

Допустим, вы собираете страницу, которая состоит из текста и иллюстраций. У вас есть абзац текста, к нему иллюстрация, потом еще немного текста и к нему еще иллюстрация. Получается такой сэндвич: текст — иллюстрация — текст — иллюстрация.

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

Если так случилось, есть два варианта решения:

короткий промежуточный текст смешайте с основным, а иллюстрации поставьте рядом. По смыслу докрутите так, чтобы иллюстрации прочитались отдельно от текста;

короткий промежуточный текст расширьте так, чтобы он по объему был не менее иллюстрации.

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

2020   верстка   иллюстрация

В две колонки (или в три)

По умолчанию любая информация на веб-странице, в приложении или на листе бумаги должна идти в одну колонку, а не в две и не в три.

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

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

Вот пример из работы студентки в Школе редакторов — просто две карты рядом. На картах — пункты самовывоза. Но в жизни не бывает ситуации, когда нам нужно сопоставлять две карты пунктов самовывоза.

Но можно придумтаь, например, сравнение популярности кальянных в Петербурге и Москве. Сравнить популярность — это и есть «сопоставить». Тогда две карты рядом очень уместны:

Еще примеры, когда можно использовать две или три колонки (картинки добавлю при случае)

Два человека выступают с противоположными мнениями по какому-то вопросу. Вообще любая противоположность может быть показана в две колонки

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

Вы собираете иконостас: много голов или лиц рядом

Еще по теме: текст возле картинки

2020   верстка
2020   верстка

Битва текстов

Вот у студента в работе стоит два столбца с текстом под общим заголовком:

Такое положение подразумевает, что они спорят:

Если спора нет, то ставить их друг напротив друга нельзя, нужно ставить один под другим:

2020   верстка
Ранее Ctrl + ↓