nobelfaik


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

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


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




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




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




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




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




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







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







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




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




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




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




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




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




Было и стало:




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

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


  • 1
Я бы на этом варианте остановился http://ic.pics.livejournal.com/nobelfaik/13371134/402616/402616_original.png Дальше идет усложнение, информация труднее считывается, непонятно, зачем это нужно.

И стрелочки лишние — они создают ложное ощущение, что это схема переходов, которая связывает все 4 пункта по какой-то загадочной логике.

Мне понравился второй вариант, где изображения слева: http://ic.pics.livejournal.com/nobelfaik/13371134/403158/403158_original.png

Сперва бегло пролистал всю статью и посмотрел на макеты, и текст захотелось прочесть, только на этом макете.

Спасибо за рубрику. Удачный выпуск :)

  • 1
?

Log in

No account? Create an account