?

Log in

No account? Create an account

nobelfaik


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

light gray is the new white, dark gray is the new black


Previous Entry Поделиться Пометить Next Entry
Переверстка №29. Банер «Перевод татуировок»
nobelfaik
Расскажу об одном задании, которое раньше давал на мастер-классе «Большая переверстка». Оно маленькое, но важное. Необходимо переверстать интернетный банер, сохранив формат, картинку и стиль. Текст можно редактировать, но так, чтобы ничего не потерялось:



В чем проблема:

  1. Слишком много шрифтов и размеров, у каждой строчки свое оформление. Особенно рябят контурные надписи с «тенью».

  2. Монетке не хватает места, она зажата между текстом и границами формата. Недавно я написал статью «Картинка без модуля», здесь как раз такая ситуация.

  3. И самое главное — у макета неудачная конструкция. Текст образует три унылых этажа, которые тянутся через весь банер. Еще эти этажи очень странно выровнены. Сейчас модульная схема такая:




Прежде чем приступать к переверстке, нужно определиться с базовой конструкцией. У меня есть два варианта, колоночный и этажный.

Вытянутые макеты удобнее делить поперек, поэтому в нашем случае колоночный вариант предпочтительней. С ним точно не получится слишком длинных строчек. Хорошо, если колонки будут разной ширины, ритм станет интереснее:




Кстати, в дизайне интерьера это работает так же: длинные комнаты делят на зоны поперек, тогда они не выглядят слишком длинными. Весь мелкий текст я оформил одинаково. Внешние поля и отступы между блоками стали просторнее:




Сделать этажный вариант будет сложнее, потому что горизонтальный формат для него плохо подходит. Этажей должно быть не очень много. На первоначальном макете видно, что три — это уже перебор. С двумя может получиться:




На самом деле и тут я выделил небольшую колонку для монетки. Конструкция не совсем этажная, но это плюс:




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

Было и стало:




См. также: Колоночность и этажность

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

Отправьте письмо с макетом, комментарием или вопросом к нему на эл. адрес conversive@mail.ru. В теме письма укажите «Переверстка». Будьте конкретны. По возможности прикрепите исходники.

Правила рубрики и все выпуски

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



  • 1
>которые тянуться через весь банер

тянутся

  • 1