https://pereverstal.by/tags/reestr-dezsredstv/ E2 (v3254; Aegea) 20 https://pereverstal.by/all/reestr-dezredstv/ https://pereverstal.by/all/reestr-dezredstv/ <p>Привет! Сегодня я покажу вам демонстрацию того, как решается задача по верстке макета.</p> <h2>Итак сама задача:</h2> <p>Сверстать рекламный модуль в специализированный журнал. Размер формата 135x102,<br /> печать в две краски. Из графики использовать только логотип (объемный крест).</p> <p>Получаю рекламный текст. Тут сразу нужно отметить, что первая проблема<br /> с которой я столкнулся — это то, что копирайтер заранее не соотнес размеры модуля<br /> и объем написанного им текста, т. е. я получил огромное количество слов, которое весьма<br /> сложно впихнуть в нужный формат и при этом сохранить читабельность.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/69959_600.jpg" width="600" height="453" alt="" /> </div> <p>Работаю с текстом. Упрощаю фразы, выкидываю лишнее, сохраняя смысл.<br /> К примеру из фразы: «Наши контакты: Сайт: <a href="http://dezr.ru,">http://dezr.ru,</a> Электронная почта:info@dezr.ru,<br /> Телефон: 8 (499) 264-04-76» удаляю «Наши контакты», «Сайт», «http://» и т. п.</p> <h2>Далее приступаю к верстке.</h2> <p>Тематика сообщения — скучна до ужаса, наверное даже для специалистов.<br /> Поэтому главная задача, которую необходимо решить — это разбить текст<br /> на максимальное кол-во различных по смысловой нагрузке кусочков, которые<br /> композиционно будут расположены, так, что будут восприниматься в нужном<br /> по смыслу порядке и с максимальной легкостью для читателя.</p> <p>Наверное, любой говно-дизайнер сделал бы что-то типа такого (см. картинку, перечеркнутую<br /> красной линией). Выключка по центру, длинные строки, нерациональное использование<br /> формата, прописные буквы в заголовке и т. д.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/70376_600.jpg" width="600" height="453" alt="" /> </div> <p>Но мы пойдем другим путем.</p> <p>Мой первый вариант построен на 4-х колоночной сетке, акцент сделан на логотипе.<br /> Вроде ничего, но как-то скучновато.</p> <div class="e2-text-picture"> <div class="fotorama" data-width="600" data-ratio="1.3245033112583"> <img src="https://pereverstal.by/pictures/70505_600.jpg" width="600" height="453" alt="" /> <img src="https://pereverstal.by/pictures/70877_600.jpg" width="600" height="453" alt="" /> </div> </div> <p>Второй вариант выглядит немного необычно, но поставленную выше задачу<br /> выполняет превосходно.</p> <div class="e2-text-picture"> <div class="fotorama" data-width="600" data-ratio="1.3245033112583"> <img src="https://pereverstal.by/pictures/71133_600.jpg" width="600" height="453" alt="" /> <img src="https://pereverstal.by/pictures/71295_600.jpg" width="600" height="453" alt="" /> </div> </div> <p>Тут я использовал сетку из трех колонок. Информация подается слева направо,<br /> т. е. в соответствии с привычным направлением чтения.</p> <p>Порядок подачи инфы такой:<br /> 1) Озвучивание проблемы;<br /> 2) Название продукта и что он дает;<br /> 3) Контактная информация;<br /> 4) Дополнительная информация о продукте.</p> <p>Задача решена, можно пойти попить пивка.</p> <p>До скорых встреч!</p> Sat, 24 Nov 2018 18:15:09 +0300