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

Categories:

Переверстка №17. Оборотная сторона упаковки анальгина Renewal

На конкурсе мы переверстывали лицевую сторону анальгина Renewal, сегодня я переверстаю оборотную. Вот она:




Проблемы:
1. Длинная строка и, как следствие, слишком рваный правый край.
2. Плохая группировка: блоки слеплены в один комок.
3. Плохие оступы: текст зажат сверху и снизу, хотя воздуха на макете достаточно.

Длинная строка лечится делением на колонки. Это очень простой и очень эффективный прием. Вообще горизонтальный формат лучше делить на блоки по вертикали, то есть на колонки, а не на этажи. Мне повезло, и материал сам сгруппировался по смыслу — в первом столбце основное, во втором дополнительное:




Чуть-чуть подправлю текст. Наверняка у фармацевтов есть огромный список требований к тексту, но я этого списка не видел. Буду руководствоваться здравым смыслом.

Перепишу подзаголовок:
20 таблеток для приема внутрь
Метамизол натрия 500 мг


Метамизол натрия
20 таблеток по 500 мг для приема внутрь


Избавлюсь от повтора:
Хранить в защищенном от света месте при температуре не выше 25 °С.
Хранить в недоступном для детей месте.


Хранить в защищенном от света месте при температуре не выше 25 °С.
Беречь от детей.


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




Чтобы сохранить деление на строки, вторую колонку нужно сузить. Теперь рваный край подсобрался:




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




На первых двух макетах такой контраст тоже есть (пробельные элементы разной величины), но на последнем он заметней:




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




Было и стало:




Осталось только подобрать хороший шрифт.

Апдейт

journal_mox написал правильный комментарий: «Свободное место появилось за счет уменьшения размера шрифта. В плане дизайна — нечестно, а для описания таблеток так вообще вредно».

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




В сравнении:




Присылайте макеты на переверстку. Описание и правила рубрики
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.
  • 10 comments