Как верстать фотографии на лендинге

Антон Досыбиев

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


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

Но даже если мы подпишем картинки, нас ждёт вторая проблема — скука смертная.

Как верстать фотографии веселей

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

Посмотрите на дом и скажите, интересно ли рассматривать окна.


А теперь посмотрите на другой дом. Интересней?


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

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


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


Нам ещё предстоит настроить мобильную версию, но на компьютере раздел с лекциями теперь смотрится круче.

Вот ещё пара примеров. В магазине студии Лебедева плакат «Суша» занимает место доминирующей иллюстрации. Фотография «Кулонуса-1» намного мельче — на неё мы смотрим во вторую очередь. В последнюю очередь бросаем взгляд на кофейные капсулы. Управление вниманием в действии.

«Магазинус» Лебедева

Голландский магазин кроссовок «Сникердистрикт» отказался от одинаковых квадратных фотографий и разбавил их крупными снимками. Так продавцы привлекают наше внимание к моделям, которые они хотят продать побыстрее.

Интерфейс «Сникердистрикта»

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


Что запомнить
1. Одинаковые ряды с фотографиями — это плохо. Одинаковые ряды с подписанными фотографиями — лучше, но скучно. Ряды с подписанными фотографиями разного размера — красота.

2. Нельзя один раз сверстать лендинг и не улучшать его месяцами. Докручивайте продукт постоянно.

См. также:
Избавьтесь от слайдера
Убрать жир
Как формулировать заголовки на лендингах

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

Рассылка статей по почте. Раз в неделю, без спама.

Популярное
Ваш комментарий
адрес не будет опубликован

ХТМЛ не работает

Ctrl + Enter