nobelfaik


Блог Игоря Штанга

Доктор, мой макет не дышит!


Previous Entry Поделиться Next Entry
Переверстка №14. Кейсы консалтинговой компании
nobelfaik
Никита пишет: У меня есть один многострадальный, переделанный несколько раз с нуля макет, который никак не дает покоя. Каждый раз кажется, что уперся в потолок собственных возможностей. И в то же время не покидает ощущение, что можно было сделать лучше. Это внутренний разворот листовки консалтинговой компании с обезличенными примерами успешных кейсов. Основная задача — продемонстрировать достигнутый клиентами результат после проведенных преобразований.

Основная сложность для меня — упорядочить и наглядно показать разношерстные результаты. Например, где-то выручка выросла на 7%, где-то на 5 процентных пунктов, а где-то — в 3,5 раза. Унифицировать единицы нельзя — обсуждал с заказчиком этот момент. Другая проблема — составные показатели. Например, в кейсе про повышение операционной эффективности сети кинотеатров прирост EBITDA складывается из трех отдельных факторов и вклад каждого из них надо показать.





Для начала две плохих новости. Первая: обезличенные кейсы выглядят неправдоподобно и не вызывают доверия, их не хочется читать. Истории о «какой-то сети кинотеатров» или о «каком-то производителе игристых вин» никогда не будут такими интересными, как истории о «Киномаксе» и «Абрау-Дюрсо». Вторая: из обезличенного материала получается обезличенный дизайн. Внешний вид разворота не дает подсказок о его содержании, это просто какие-то тексты и какие-то цифры. Хорошим дополнением могли бы стать логотип компании, фотографии товара, портрет человека рядом с его цитатой и другие приятные мелочи. Чем сильнее дизайн связан с жизнью, тем лучше. Несмотря на это, я не буду трогать материал и постараюсь выжать максимум из того, что есть.

Проблемы верстки:

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

  2. Монотонный ритм: у этажей одинаковая высота и похожий способ заверстки.

  3. Длинная строка и дыры справа от текста. Широкая колонка не подходит для перечня Results, заголовки в нее тоже не вписываются.


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

Сначала я буду резать и переставлять блоки, не обращая внимания на детали. Вместо блока с цифрами поставлю серый прямоугольник с фрагментом диаграммы.

Увеличиваю заголовок и особенно «иллюстрацию». Появилась явная доминанта:




Группирую блоки по массе: крупный заголовок и диаграмму в одну сторону, мелкие тексты в другую. Макет стал еще немного контрастнее:




Два нижних этажа (со списком и цитатой) очень похожи друг на друга. Можно заверстать список в два столбца:




Или превратить этажи в колонки и набрать цитату крупнее. Заодно увеличиваю подзаголовки:




Ставлю настоящий текст. Переношу серо-синий цвет с заголовка на обвес — верхний и нижний колонтитулы. Осветляю верхний колонтитул: две жирные строчки по соседству почти всегда смотрятся плохо.




На предыдущем макете отступы между этажами равны, поэтому конструкция выглядит немного размазанной. Особенно это видно по заголовку: он болтается между колонтитулом и «картинкой». От размазанности спасает группировка. Делаю из четырех блоков два: верхний колонтитул объединяю с заголовком, а диаграмму — с колонками мелкого текста. Сейчас двигаю на глаз, потом подложу сеточку и выровняю по ней:




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




Другой кейс по этой же схеме. Добавляю график, всё остальное по-честному. «Разношерстные результаты» теперь не проблема:




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




С курсивом поживее:




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




Финальный вариант:




Было и стало:




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

Присылайте макеты на переверстку. Описание и правила рубрики

Записи из этого журнала по тегу «переверстка»


  • 1
(Анонимно)
Стало хуже.

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

(Анонимно)
На было нравится больше. И наоборот хочется прочитать.

Привет! не очень понятно решение с курсивом - зачем его ставить просто так?

Мне нравится, когда цитаты так оформлены. А допустимо такую кавычку ставить?
Условно "русские" лапки в другую сторону вроде смотрят.

Так это английский текст и лапка английская.

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

Игорь, спасибо! Конечно стало интереснее смотреть. У заголовков поля сверху [до края страницы] и снизу почти одинаковые получились (ведь взгляд обычно игнорирует серые колонтитулы), это ок? Логика не страдает, от того, что заголовок оторван от своего текстового блока, м? Для меня последний вопрос очень важен, такое решение требует смелости. А вот бублик "италиком" выглядит непривычно(

> У заголовков поля сверху [до края страницы] и снизу почти одинаковые получились (ведь взгляд обычно игнорирует серые колонтитулы), это ок?
Нет, всё-таки эти элементы воспринимаются как группа. И эта группа ближе к верху.

> Логика не страдает, от того, что заголовок оторван от своего текстового блока, м? Для меня последний вопрос очень важен, такое решение требует смелости.
Заголовок относится ко всей странице, никакого противоречия нет. Под заголовком резервное место для еще одной строки, которая может случиться. Это обычный спуск, смелости для него не нужно)

Edited at 2016-11-06 12:43 (UTC)

Перебор с улучшениями.

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

Стало плохо:
- Курсив в диаграммах. Тут дело даже не в непривычности,
- Разные цвета цифр в показателях. Кмк, особого смысла не несет.

(Анонимно)
Стало сильно лучше но до курсива, с улучшениями точно перебор

  • 1
?

Log in