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

верстка

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

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

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

2 мес   верстка

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

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

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

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

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

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

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

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

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

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

2 мес   верстка   интерфейс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2 мес   верстка
2 мес   верстка

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

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

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

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

6 мес   верстка

Клипы горой

Проверил сегодня с десяток промостраниц в Школе редакторов, и почти у всех был примерно такой узел:

Здесь автор предлагает посмотреть видео в маленьком окне и еще в двух других маленьких. Так сделано типа чтобы эффективнее занять экран по ширине: не ставить же видео на всю ширину?

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

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

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

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

Еще с огромной осторожностью нужно относиться к многоколонникам с фотографиями — есть проблема сомасштабности.

10 мес   верстка   фотография

Автономность первого абзаца

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

Вот пример. «Арзамас» присылает рассылку о новом курсе. После логотипа идет обращение «Друзья», дальше связный текст, заголовок и большая иллюстрация. А после большой иллюстрации текст продолжается: «мы сделали его»:

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

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

Ранее Ctrl + ↓