Что называют модулем в графическом дизайне. Свободное пространство и модульная сетка. Как применяется сетка

Что называют модулем в графическом дизайне. Свободное пространство и модульная сетка. Как применяется сетка

Модульная сетка - это система организации объектов в пространстве, основанная на рядах и колонках определенного, строго заданного размера. В ячейках можно располагать единицы контента: текстовые блоки, заголовки, врезки и изображения.

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

Обратите внимание на один из эскизов развития Манхэттена 1807 года, который подчиняется строгой сетке улиц, проходящих с запада на восток и с севера на юг

Зачем нужны сетки?

Изначально сетка применялась в газетном деле в целях повышения эффективности. Макетные листы позволяли снизить издержки на содержание штатных типографов, стандартизируя вид страниц и экономя время самих «художников-оформителей». Вскоре на смену макетным листам пришли более гибкие модульные сетки.

Следуя новым веянием, в начале 1960-х художник-оформитель Питер Палаццо обновил дизайн газеты New York Herald Tribune. В 1966-м художественный редактор Джанет Коллинз ввела новую верстку в лондонской Times. Оба этих преобразования показали работникам индустрии, что единый стиль оформления повышает качество взаимодействия читателей с изданием. Газетчики и редакции журналов быстро поняли необходимость сеток и начали применять их в своей практике.

Как и во времена газет, в digital-эпоху правильно примененные сетки помогают удерживать внимание читателя, повышают качество восприятия текста и вообще улучшают опыт его взаимодействия с материалом. Сегодня в дизайне медиа сетка придает информации упорядоченность и согласованность. Она ответственна за структурирование содержимого отдельных статей и издания в целом.

Йозеф Мюллер-Брокманн в своем пособии «Модульные системы в графическом дизайне » пишет о сетках так:

«Структурируя при помощи модульной сетки плоскости и пространство, дизайнер получает возможность организовать тексты, фотографии и графические изображения по принципам объективности и функциональности. <…> Логично организованный дизайн поддерживает достоверность информации и располагает к ней читателя».

Какими бывают сетки?

Существует множество видов и конфигураций сеток: от примитивных «клеточек», как в школьной тетради, до сложносочиненных структур с разными расстояниями между горизонталями и вертикалями.

Мы собрали наиболее распространенные и ставшие уже «классическими» образцы, знакомство с которыми поможет лучше понять модульное проектирование:

Квадратная сетка

Простейшая сетка, которая легла в основу модульной системы, состояла из квадратов и была похожа на обычную разграфленную таблицу. Она начала использоваться уже в конце первой четверти ХХ века. Дизайнеры-типографы из Цюриха и Базеля усовершенствовали ее в послевоенные годы, что совпало со скачком интереса к Гельветике и подобным ей шрифтам, породив школу «швейцарской типографики ».

На примере: Роберт Бюхлер, 1914 г.
Источник: Thinking Form

Cетки Макса Билла

Первым опытом применения сетки в книжном деле была разработанная Максом Биллом система для книги «Die Neue Architektur». В этой книге, вышедшей в 1940 году, Альфред Рот применил деление страницы на девять горизонтальных модулей. Они позволили свободно располагать иллюстрации и размещать на них текст на трех языках. Несколькими годами ранее, опираясь на идеи «новой типографики» Баухауса, Билл использовал шестимодульную сетку в своем знаменитом плакате «Negerkunst », созданном для выставки южноафриканской наскальной живописи в 1931 году.

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

Модульная сетка в веб-дизайне является основополагающим решением, которое не только улучшит юзабилити сайта, но и существенно упростит жизнь разработчикам.

Что такое модульная сетка?

Объясню на привычном для вас примере. Откройте любую бумажную книгу. Видите, текст, проходящий через всю ширину страницы, исключая поля? Так вот, перед вами типичная одноколоночная верстка. А теперь загляните в журнал или газету. В журнале информация традиционно разделена на две колонки, а в газете - на три-четыре, а то и больше.

Вообще веб-дизайн довольно много разных «фишек» наследовал от полиграфического дизайна. Это и принципы работы со шрифтами, и правила композиции, и модули. Сайты-визитки и сайты-презентации вполне могут довольствоваться одноколоночной структурой, домашние страницы - двухколоночной, более сложные информационные проекты должны, соответственно, иметь более сложный и продуманный макет.

Модульная сетка в web-дизайне представляет собой единую схему расположения всех элементов и блоков сайта. Этот каркас проходит через все веб-страницы и помогает создать визуальный порядок на сайте.

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

Что делать, если во время прорисовки внутренних страниц у вас появились блоки или элементы, которые не подходят к вашему каркасу? Не хочу вас огорчать, но это свидетельствует о том, что ваша сетка никуда не годится, и вы недостаточно времени уделили ее проектированию.

Какие бывают сетки?

Давайте рассмотрим виды сеток для веб-дизайна.

1. Блочная сетка - грубая разметка площади на блоки.

2. Колоночная - имеющая колонки в своей структуре.

3. Модульная - состоящая из пересекающихся прямых, которые образуют модули.

4. Иерархическая - сетка с интуитивным размещением блоков, без какой-либо логической структуры.

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

Сетка для веб-дизайна 960 Grid System (http://960.gs) отвечает концепции «статического» макета, а для создания «резинового» можно обратить внимание на сетку фреймворка Bootstrap (http://getbootstrap.com/css/#grid). Модульный каркас 960 GS делит веб-страницу на 12, 16 и 24 колонки.

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

Наиболее популярной и легкой в реализации является двухколоночная модульная сетка, пропорции которой рассчитываются с учетом следующих допущений:

самое распространенное разрешение экрана -1024х768;

ширина макета не должна превышать 770 пикселей, для того чтобы на экране с разрешением 800х600 внизу не появлялась полоса прокрутки;

колонка, выполняющая функции информационного модуля, должна иметь большую ширину, чем колонка, которая определена как навигационный модуль (меню).

Исходя из этого, пропорция выглядит так: 200 пикс. + 550 пикс. или 150 пикс. + 620 пикс.

В большей колонке предполагается разместить меню навигации, в меньшей - каталог, или содержание.

Рассмотрим в качестве примера сетку веб-дизайна известного сайта. На всех сайтах BBC используется универсальная структура с колонками размером 61 х 16 пикселей, что соответствует стандартным фото и видео бренда.

Как можно увидеть на картинке, сетка BBC довольно гибкая и позволяет разместить любую информацию: от серьезной аналитики до развлекательных новостей. Данная модульная сетка является визитной карточкой компании, так как является стандартной для всех ее сайтов. Кстати, эта штука представляет собой компонент гайдлана «Global Experience Language», если кому интересно.

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

1. Процесс начинается с определения мест для блоков высшей иерархии. Представляем себя эдакими Шерлок Холмсами – мастерами дедукции и соблюдаем правило «От общего к частному, от большего к меньшему».

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

3. Таким образом, вначале прорабатываем общую композицию и самые крупные элементы. Затем - уточняем, дорабатываем, детализируем. Для этого нам понадобится нарисовать серию черновых эскизов. Только после детальной проработки идеи сайта с помощью карандаша и бумаги наконец-то садимся за компьютер.

4. Распределяем информацию по блокам, группируем контент. Например, на сайте BBC практически у каждой группы контента есть название, которое отражается в категориях меню навигации. Названия блоков служат визуальными якорями, позволяющими бегло просматривать веб-страницу, а также помогающими понять, к какой категории материалов относится та или иная новость.

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

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

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

Подписывайтесь на обновления нашего блога и делитесь ценной информацией с друзьями. Всем удачных модульных сеток и до новых встреч!

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

Йозеф Мюллер-Брокман

По сути, само использование сетки связано с одним из старейших и самых основных принципов дизайна — выравнивания. Наш мозг хочет всё упрощать и делать более понятным. Вот почему мы стараемся навести порядок в вещах, которые кажутся хаотичными.

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

Рассмотрим два макеты страниц представлена ​​на рисунке ниже:

Хотя оба эти изображения — всего лишь несколько прямоугольников, набор в верхней части кажется принципиально лучше чем в нижней. Мы можем мгновенно распознать модель, принять её и двигаться дальше. Изображение внизу же вызывает визуальный дискомфорт, так как не имеет четкой картины, порядка, или цели и выглядит как случайный набор форм.

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

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

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

Проще говоря, сетка — это разделение макета вертикальными и / или горизонтальных направляющими включая поля, пространство и некоторое количество столбцов для того, чтобы заложить основу для организации контента.

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

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

Стоит отметить, что существует два способа создания сетки шаблона:

Способ №1: Создайте свою собственную сетку

Есть много различных способов создать свою собственную сетку, но в конце концов, вы в праве выбрать тот вариант, который больше подходит.

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

Возможно, в этом вам помогут следующие статьи:

  • How You Make A Grid (книга на английском языке в формате.pdf)

Вот несколько примеров сетей, созданных в Photoshop с помощью направляющих (View> New Guide ):

Плагины для создания сеток в Фотошопе

5. Grid System Generator -генератор таких популярных сеток, как 960.gs, Golden Grid, 1Kb Grid, Simple Grid/ установите нужные параметры и нажмите «GENERATE».

Сетки для резиновых/ адаптивных сайтов

Адаптивный веб-дизайн пользуется огромной популярностью на сегодняшний день. Основным из его принципов считается использование резиновой сетки. Более подробно о них вы можете прочитать , а мне бы хотелось немного дополнить эту подборку и добавить ещё несколько ресурсов.

1. — генератор адаптивной сетки

2. Fluid grid calculator — сервис, который позволяет создать резиновую сетки. Введите параметры и получите готовый код.

О чем молчат типографии -

22 ноября 2015 Воскресенье Модульная сетка: инструмент грамотного дизайна

Что такое модульная сетка?

Это невидимый скелет вашего дизайна - система горизонтальных и вертикальных (а порой еще диагональных и дуговых) направляющих, помогающих сориентировать и согласовать между собой отдельные элементы композиции.

Какая от нее польза?

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

А во-вторых, заметно ускоряет выполнение заказа, ведь, согласитесь, работать по шаблону гораздо легче, чем всякий раз заново изобретать велосипед.

Человек издавна пытался понять природу красоты, "разложить" ее на отдельные составные части, "поверить гармонию алгеброй". Древнейший пример использования модульной сетки - средневековый канон, которым пользовались переписчики книг при разметке книжных страниц.

Разворот латинского манускрипта. 1555

Основы же современного модульного проектирования были заложены конструктивистами 1920-х годов.

Обложка журнала. Дизайн Эль Лисицкого. 1922

Постер. Дизайн Герберта Байера. 1926

Однако не сразу их абстрактные построения были осознаны как метод со своей системой правил и закономерностей. Лишь в 1940 году швейцарский дизайнер Макс Билл впервые применил в книжном оформлении модульную сетку.

Книжный переплет. Дизайн Макса Билла. 1944

Постер. Дизайн Макса Билла. 1945

В 1961 году его соотечественник Йозеф Мюллер-Брокман ввел в употребление первые термины модульного подхода к дизайну и опубликовал 28 примеров разработанных им самим сеток. Именно швейцарская школа дизайна, предельно функциональная и лапидарная, усовершенствовала и подарила миру этот инструмент - модульную сетку.

Сетка и книжные страницы. Дизайн Йозефа Мюллера-Брокмана

Постер. Дизайн Йозефа Мюллера-Брокмана. 1959

Постер. Дизайн Йозефа Мюллера-Брокмана. 1972

Надо сказать, что российские дизайнеры не намного отстали в модульном проектировании от своих западных коллег. Уже в 1960-е годы в Советском Союзе появилась группа единомышленников, использовавших принципы строгого конструирования печатных изданий (впоследствии Сергей Серов в шутку назвал эту школу "советской Швейцарией"). У истоков отечественного модульного подхода к дизайну стояли такие признанные сегодня авторитеты, как Максим Жуков, Михаил Аникст и Аркадий Троянкер.

Книжный переплет. Дизайн Максима Жукова и Аркадия Троянкера. 1970

Книжный разворот. Дизайн Михаила Аникста. 1979

Суперобложка. Дизайн Максима Жукова. 1977

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

Обложка буклета. Дизайн Евгения Григорьева. Санкт-Петербург, 2009

Приведем несколько примеров модульного подхода к дизайну из портфолио нашего издательства.

Для каталога художника Евгения Журова был выбран классический книжный формат in quarto с соотношением сторон 3 к 4. Эти пропорции и легли в основу модульной сетки.

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

Подобный прием позволил легко и гармонично совмещать друг с другом любые по формату картины - как панорамные, вытянутые по горизонтали, так и высокие, вытянутые по вертикали. При перелистывании каталога живописный ряд приобретает живой, пульсирующий ритм.

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

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

Внешний вид нашего тематического календарного каталога был подсказан самим материалом. Этот каталог предназначается для той категории клиентов, которые хотят заказать корпоративный календарь. Каждая тема представлена 12-ю изображениями (по количеству месяцев в году) и помещается на отдельном развороте. Модульная сетка брошюры получилась настолько простая, ясная и открытая, что нет необходимости приводить ее здесь отдельно.

Дизайн открыток из набора "Династия Романовых" (Музеи Московского Кремля), несмотря на ярко выраженную асимметричную композицию, полностью был построен на последовательном делении плоскости по золотому сечению. Совмещение классических, проверенных временем принципов с современными тенденциями порой может привести к интересному результату.

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

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

Кроме того, приступая к модульному конструированию, дизайнеру нелишне иметь хотя бы общие представления о пропорциях, форме, цвете, контрасте, ритме…

Но об этом - в следующих наших статьях.

Литература для самообразования:
1. Лаптев В. Модульные сетки: Проектирование многополосных изданий. М.: РИП-холдинг, 2007.
2. Самара Т. Создавая и ломая сетку. М.: РИП-холдинг, 2005.
3. Херлберт А. Сетка: Модульная система конструирования и производства газет, журналов и книг. М.: Книга, 1984.
4. Bosshard H. R. Der typografische Raster. Z?rich: Niggli, 2000.
5. Elam K., Elsener R. Gestaltungsraster: Ordnungssysteme f?r Schrift. New York: Princeton Architectural Press, 2006.
6. Miller-Brockmann J. Grid systems in graphic designs. Z?rich: Niggli, 1981.

Крайне полезная статья о правилах создания журнальной верстки! Очень рекомендую к прочтению.

Прежде чем рассказать о модульной сетке, давайте поймем, что такое модуль.

Модуль – это кратно повторяющееся изображение, размер или пропорция. – это структура (каркас, шаблон) расположения графических элементов на страницах. Основой модульной сетки является “модуль”, иначе говоря – основной шаг сетки, который визуально определяется шириной и высотой клетки (модульной единицы). Клетки строятся с помощью вертикальных колонок и горизонтальных линий.

Подавляющее большинство типографских сеток строится на базе формата листа бумаги, взятого за основу издания. Как вы понимаете, колонки и базовая сетка страниц создается с помощью автоматических команд программы. Сетка может быть самой разнообразной, всё в зависимости от назначения издания и идеи дизайнера.

Сетка создается для всего разворота, а не для каждой страницы отдельно. Это делается для того, чтобы весь журнальный разворот воспринимался бы как единое целое, а не распадался на правую и левую части, а всё издание не выглядело бы как подшивка из разнородных страниц. Сетка разворота может состоять из 2, 3, 4-х и т.д. равных и неравных по ширине колонок.

Одинаковые по ширине колонки создаются в окне создания документа, либо в панели “Поля и Колонки” (Margins and Colomns). Если нам необходимо задать 3 колонки, то мы вбиваем число 3 в соответствующее поле и т.д.

А как быть, если по нашему замыслу не все колонки должны иметь одинаковую ширину? Например, если текст и изображения будут располагаться в 2-х широких колонках, а пояснительная информация – в боковой узкой колонке?

В этом случае, наша модульная сетка будет строиться на основе разного числа автоматических колонок программы. Например, если мы зададим 8 автоматических колонок для страницы, то задуманные нами 2 широкие колонки (для текста и изображений) займут по 3 автоматические колонки, а узкая боковая колонка будет строиться на основе 2-х автоматических колонок.

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

Заголовки могут помещаться как в одной колонке, так и простираться на несколько колонок. Нередкий случай, когда заголовок является единственным элементом для всей страницы. Всё зависит от креативной идеи и личных предпочтений дизайнера.

Точно так же и графические изображения (фотографии или иллюстрации) могут занимать одну или несколько колонок, а могут и заполнять собой весть разворот. Довольно распространен прием, когда фотография занимает собой одну часть разворота целиком и немного распространяется на вторую часть с тем, чтобы визуально объединить обе части.

-

Модульная сетка не обязательно строится из перпендикулярных линий. Иногда дизайнер решает наклонить сетку или вообще придать ей оригинальную форму, Если Вам хочется выйти за рамки привычного – выходите!
Только постарайтесь, чтобы в погоне за оригинальностью Ваша работа не превратилась в сизифов труд. Представьте себе, каково будет сверстать 40-50 страниц с наклонной или фигурной сеткой…

-

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

Почему? Да потому что читатель прежде всего хочет спокойно читать и усваивать интересную информацию, а не отвлекаться на всякие излишки гениальности дизайнера.

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

 
Статьи по теме:
Лучшие приложения-аудиокниги для Android Скачать на андроид поисковик аудиокниг без регистрации
«Поиск аудиокниг» представляет собой приложение для поиска бесплатных аудиокниг. С его помощью можно искать книги, которые находятся в свободном доступе в Интернете. Характеристика Обожаете читать, но никак не можете выкроить время на любимую книгу? Многи
Спортивные часы garmin fenix 3
Fenix – серия мультиспортивных часов со смарт функциями. Фениксы совмещают в себе стильные смарт-часы, спортивный пульсометр, навигационный компьютер для туристов и альпинистов. Garmin удалось сделать часы, которые стали популярными среди всех, кто ведет
JBL Charge — звук, который всегда с собой Jbl charge 2 копия характеристики
JBL выпустили вторую улучшенную модель портативной колонки, которая также может подзаряжать Ваше мобильное устройство. Мини колонка JBL Charge 2 – это более мощное устройство, усиленное массивными динамиками, расположенными по двум сторонам. Колонка JBL C
Создать яркие баннеры для медийной рекламы
В интернете баннеры часто используются для реализации различных идей, будь то реклама или какие-то объявления. Создать его можно с помощью специальных онлайн-сервисов, которые мы рассмотрим далее в этой статье. Ввиду высокой востребованности баннеров суще