Переверстка №17. Оборотная сторона упаковки анальгина Renewal
На конкурсе мы переверстывали лицевую сторону анальгина Renewal, сегодня я переверстаю оборотную. Вот она:
Проблемы:
1. Длинная строка и, как следствие, слишком рваный правый край.
2. Плохая группировка: блоки слеплены в один комок.
3. Плохие оступы: текст зажат сверху и снизу, хотя воздуха на макете достаточно.
Длинная строка лечится делением на колонки. Это очень простой и очень эффективный прием. Вообще горизонтальный формат лучше делить на блоки по вертикали, то есть на колонки, а не на этажи. Мне повезло, и материал сам сгруппировался по смыслу - в первом столбце основное, во втором дополнительное:
Чуть-чуть подправлю текст. Наверняка у фармацевтов есть огромный список требований к тексту, но я этого списка не видел. Буду руководствоваться здравым смыслом.
Перепишу подзаголовок:
20 таблеток для приема внутрь
Метамизол натрия 500 мг
↓
Метамизол натрия
20 таблеток по 500 мг для приема внутрь
Избавлюсь от повтора:
Хранить в защищенном от света месте при температуре не выше 25 °С.
Хранить в недоступном для детей месте.
↓
Хранить в защищенном от света месте при температуре не выше 25 °С.
Беречь от детей.
Сгруппирую название препарата с действующим веществом. Соберу верхние строчки второй колонки в один абзац. Это ход против читаемости и наглядности, но так аккуратней. Справа от заголовка есть запас воздуха для длинного названия, внизу второй колонки - для длинного текста. Можно остановиться на этом макете, но тогда рассказ получится слишком коротким :-)
Чтобы сохранить деление на строки, вторую колонку нужно сузить. Теперь рваный край подсобрался:
Еще один подход. Мелкий текст снова в кучу, зато контраст белого здесь сильнее, чем на предыдущих вариантах. Это значит, что пробельные элементы - поля и отступы между блоками - лучше контрастируют между собой:
На первых двух макетах такой контраст тоже есть (пробельные элементы разной величины), но на последнем он заметней:
Объясню почему. Если закрасить «большой воздух», станет видно, что на первых двух макетах он разделен на две части, а на последнем, наоборот, сконцентрирован в одном месте. Поэтому верстка в целом выглядит более контрастной и собранной:
Было и стало:
Осталось только подобрать хороший шрифт.
Апдейт
journal-mox написал правильный комментарий: «Свободное место появилось за счет уменьшения размера шрифта. В плане дизайна - нечестно, а для описания таблеток так вообще вредно».
Я специально уменьшил кегль в самом начале, чтобы у меня была возможность для маневра. Если размер шрифта не менять, то подойдет второй вариант компоновки. Немного поджал полоску сверху:
В сравнении:
Присылайте макеты на переверстку. Описание и правила рубрики
Проблемы:
1. Длинная строка и, как следствие, слишком рваный правый край.
2. Плохая группировка: блоки слеплены в один комок.
3. Плохие оступы: текст зажат сверху и снизу, хотя воздуха на макете достаточно.
Длинная строка лечится делением на колонки. Это очень простой и очень эффективный прием. Вообще горизонтальный формат лучше делить на блоки по вертикали, то есть на колонки, а не на этажи. Мне повезло, и материал сам сгруппировался по смыслу - в первом столбце основное, во втором дополнительное:
Чуть-чуть подправлю текст. Наверняка у фармацевтов есть огромный список требований к тексту, но я этого списка не видел. Буду руководствоваться здравым смыслом.
Перепишу подзаголовок:
20 таблеток для приема внутрь
Метамизол натрия 500 мг
↓
Метамизол натрия
20 таблеток по 500 мг для приема внутрь
Избавлюсь от повтора:
Хранить в защищенном от света месте при температуре не выше 25 °С.
Хранить в недоступном для детей месте.
↓
Хранить в защищенном от света месте при температуре не выше 25 °С.
Беречь от детей.
Сгруппирую название препарата с действующим веществом. Соберу верхние строчки второй колонки в один абзац. Это ход против читаемости и наглядности, но так аккуратней. Справа от заголовка есть запас воздуха для длинного названия, внизу второй колонки - для длинного текста. Можно остановиться на этом макете, но тогда рассказ получится слишком коротким :-)
Чтобы сохранить деление на строки, вторую колонку нужно сузить. Теперь рваный край подсобрался:
Еще один подход. Мелкий текст снова в кучу, зато контраст белого здесь сильнее, чем на предыдущих вариантах. Это значит, что пробельные элементы - поля и отступы между блоками - лучше контрастируют между собой:
На первых двух макетах такой контраст тоже есть (пробельные элементы разной величины), но на последнем он заметней:
Объясню почему. Если закрасить «большой воздух», станет видно, что на первых двух макетах он разделен на две части, а на последнем, наоборот, сконцентрирован в одном месте. Поэтому верстка в целом выглядит более контрастной и собранной:
Было и стало:
Осталось только подобрать хороший шрифт.
Апдейт
journal-mox написал правильный комментарий: «Свободное место появилось за счет уменьшения размера шрифта. В плане дизайна - нечестно, а для описания таблеток так вообще вредно».
Я специально уменьшил кегль в самом начале, чтобы у меня была возможность для маневра. Если размер шрифта не менять, то подойдет второй вариант компоновки. Немного поджал полоску сверху:
В сравнении:
Присылайте макеты на переверстку. Описание и правила рубрики