Расскажу об одном задании, которое раньше давал на мастер-классе «Большая переверстка». Оно маленькое, но важное. Необходимо переверстать интернетный банер, сохранив формат, картинку и стиль. Текст можно редактировать, но так, чтобы ничего не потерялось:
В чем проблема:
- Слишком много шрифтов и размеров, у каждой строчки свое оформление. Особенно рябят контурные надписи с «тенью».
- Монетке не хватает места, она зажата между текстом и границами формата. Недавно я написал статью «Картинка без модуля», здесь как раз такая ситуация.
- И самое главное — у макета неудачная конструкция. Текст образует три унылых этажа, которые тянутся через весь банер. Еще эти этажи очень странно выровнены. Сейчас модульная схема такая:
Прежде чем приступать к переверстке, нужно определиться с базовой конструкцией. У меня есть два варианта, колоночный и этажный.
Вытянутые макеты удобнее делить поперек, поэтому в нашем случае колоночный вариант предпочтительней. С ним точно не получится слишком длинных строчек. Хорошо, если колонки будут разной ширины, ритм станет интереснее:
Кстати, в дизайне интерьера это работает так же: длинные комнаты делят на зоны поперек, тогда они не выглядят слишком длинными. Весь мелкий текст я оформил одинаково. Внешние поля и отступы между блоками стали просторнее:
Сделать этажный вариант будет сложнее, потому что горизонтальный формат для него плохо подходит. Этажей должно быть не очень много. На первоначальном макете видно, что три — это уже перебор. С двумя может получиться:
На самом деле и тут я выделил небольшую колонку для монетки. Конструкция не совсем этажная, но это плюс:
Спорный вопрос, нужен здесь сайт или нет. С одной стороны, банер и так на него ведет. С другой, может быть, заказчик хочет, чтобы люди увидели и запомнили адрес сайта. В любом случае, для нашей истории это не очень важно.
Было и стало:
См. также: Колоночность и этажность
Присылайте макеты на переверстку
Отправьте письмо с макетом, комментарием или вопросом к нему на эл. адрес conversive@mail.ru. В теме письма укажите «Переверстка». Будьте конкретны. По возможности прикрепите исходники.Правила рубрики и все выпуски
тянутся
Хотя казалось бы веб-баннеры это что-то тупое и недостойное. Но и их хотелось бы делать хорошо, если прилетают такие задачи.
Edited at 2019-10-14 18:30 (UTC)