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

Categories:

Переверстка №29. Банер «Перевод татуировок»

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



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

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

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

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




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

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




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




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




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




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

Было и стало:




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

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

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

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

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

  • 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
>которые тянуться через весь банер

тянутся
Спасибо, поправил

nikita_kachaev

October 14 2019, 18:30:16 UTC 1 month ago Edited:  October 14 2019, 18:30:54 UTC

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