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

Categories:

Переверстка №9. Инфографика для YouMagic

Ренат пишет: Пациент: инфографика для youmagic.pro. Изометрические картинки еще более-менее удались, а вот с текстами беда, особенно учитывая то, что в одном из пунктов не список, а абзац обычного текста.




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




Если взглянуть по-другому и всё-таки нарисовать прямоугольники, получится, что они накладываются друг на друга. Это также противоречит принципу модульности:




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




Теперь всё предельно модульно, но при этом достаточно скучно:




Еще один вариант расположения. Порядок тот же, только картинка слева:







Или одна большая иллюстрация вместо четырех маленьких:







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




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




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




Еще мне не нравится рамка, надо упростить. Всё одним цветом:




Серый, в отличие от фиолетового, не отвлекает от основного содержания:




Еще лучше вообще без рамки:




Было и стало:




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

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

  • Переверстка №31. Подписка на Cover Commander

    Nail пишет: Посмотрел ваше видео про стирание линеек, полез на ваш сайт и заинтересовался рубрикой «Переверстка». Специального…

  • Мастер-класс по стиранию линеек

    Переверстываю пять макетов в режиме реального времени. 0:01:18 — Вступление 0:03:40 — Таблица «Допустимое рабочее…

  • Переверстка страницы FAQ

    Дизайнер Дженсон Камби рассказал о переделке сайта The New Yorker Festival и в частности о том, как поменялась страница FAQ. Было и стало:…

  • 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.
  • 3 comments