Игорь Штанг (nobelfaik) wrote,
Игорь Штанг
nobelfaik

Categories:

Переверстка №14. Кейсы консалтинговой компании

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

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





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

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

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

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

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


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

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

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




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




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




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




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




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




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




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




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




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




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




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




Было и стало:




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

Присылайте макеты на переверстку. Описание и правила рубрики
Tags: верстка, знаю как, инфографика, листовка, переверстка, процесс
Subscribe

Posts from This Journal “переверстка” Tag

  • Слишком много списков

    Иногда редакторы и дизайнеры слишком увлекаются и превращают текст в череду списков. С одной стороны, это вроде хорошо: разложили всё по полочкам. А…

  • Фрагмент вебинара — 72: не мельчи

    Переделываю рекламный банер и решаю проблемы простым увеличением размера текста. Следующая «Большая переверстка» пройдет с 11 по 30…

  • Фрагмент вебинара — 71: верстка по ячейкам

    Переделываю рекламный банер и показываю, как свести верстку к одному простому принципу. Следующая «Большая переверстка» пройдет с 11 по…

  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 11 comments

Posts from This Journal “переверстка” Tag

  • Слишком много списков

    Иногда редакторы и дизайнеры слишком увлекаются и превращают текст в череду списков. С одной стороны, это вроде хорошо: разложили всё по полочкам. А…

  • Фрагмент вебинара — 72: не мельчи

    Переделываю рекламный банер и решаю проблемы простым увеличением размера текста. Следующая «Большая переверстка» пройдет с 11 по 30…

  • Фрагмент вебинара — 71: верстка по ячейкам

    Переделываю рекламный банер и показываю, как свести верстку к одному простому принципу. Следующая «Большая переверстка» пройдет с 11 по…