Шаблон внутренней страницы

---

Орловский государственный университет им. И.С. Тургенева Г. Орел, Россия

Амелина Ольга Юрьевна, Алдошина Татьяна Николаевна

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

Ключевые слова: веб-дизайн, модуль, модульная сетка, дизайн сетки, иерархическая сетка.

Модульная сетка как инструмент управления и организации визуальной информацией известна в течение многих десятилетий проектной деятельности. В 1950-х годах группа швейцарских дизайнеров, таких как Джозеф Мюллер-Брокманн и Карл Герстнер, начала искать лучший способ систематизации того, как информация должна быть организована на печатной странице. Их работа стала известна как дизайн сетки. Как система, сетка рационально организует поверхность листа, делая восприятие более лёгким и заставляя дизайнера быть более осторожным в использовании графических ресурсов (Рис.1. Дизайн сетки дизайнеров швейцарской школы и расположение информации на печатном листе).

Рис. 1. Дизайн сетки дизайнеров швейцарской школы и расположение информации на печатном листе

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

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

На основе модулей строится сетка - вертикальные и горизонтальные линии, разделяющие страницу на прямоугольники. Именно модуль задает стартовый размер всем элементам веб-страницы. Если мы выбрали модуль 4х4px (рх – пиксель – наименьший логический элемент двумерного цифрового изображения в растрвой графике), то весь макет должен соотвествовать этим размерам, т.е картное двум (Рис.2. Понятие моудльности)

Рис. 2. Понятие моудльности

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

Определения понятия модульной сетки и анализ взаимодействия её различных составных частей (модулей, линий, пробельных интервалов), позволяет привести примеры модульных сеток, наиболее часто применяемых в веб-дизайне:

1. Колоночная сетка- сетка, имеющая колонки в своей структуре (Рис.3. Колоночная сетка ).

Рис.3. Колоночная сетка

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

Рис. 4. Систематизация информации в веб-пространстве на основе колоночной вертикальной модульной сетки

2. Модульная сетка - состоящая из пересекающихся прямых вертикальных и горизонтальных линий, которые образуют модули (Рис.5. Модульная сетка, состоящая из пересекающихся прямых горизонтальных и вертикальных линий).

Рис. 5. Модульная сетка, состоящая из пересекающихся прямых горизонтальных и вертикальных линий

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

Рис.6. Верстка макета сайта на основе модульной сетки, состоящей из пересекающихся прямых вертикальных и горизонтальных линий

3. Иерархическая сетка - сетка с интуитивным размещением блоков, без какой-либо логической структуры (Рис. 7. Иерархическая модульная сетка).

Рис. 7. Иерархическая модульная сетка

Иерархическая модульная сетка (произвольная) - это интуитивно построенная сетка, которая фокусируется на пропорциях элементов в дизайне. Этот тип сетки часто используется, когда контент не стандартизированный и однообразный. (Рис. 8. Верстка макета сайта на основе иерархической модольнуй сетки).

Рис. 8. Верстка макета сайта на основе иерархической модольнуй сетки

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

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

На примере сайта MULTISCANPRO мы рассмотрим принцип работы модульной системы в процессе организации и систематизации визуальной информации. Сайт разрабатывался с учетом фирменного стиля компании (Рис.9. Фирменный стиль компании MULTISCANPRO).

Рис. 9. Фирменный стиль компании MULTISCANPRO.

Сначала был разработан примерный скелет сайта (Рис. 10. Примерный скелет разрабатываемого сайта MULTISCANPRO).

Рис.10. Примерный скелет разрабатываемого сайта MULTISCANPRO

После того, как примерный скелет сайта готов, проектируется непосредственно сам дизайн с учетом использования модульной сетки (Рис. 11. Макет главной страницы сайта компании MULTISCANPRO), которая помогает выстроить все элементы и закомпоновать информацию.

Рис. 11. Макет главной страницы сайта компании MULTISCANPRO

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

В процессе создания веб-дизайна была задана определенная модульная структура, которой необходимо придерживайтесь от первой до последней страницы сайта (Рис. 12. Макет страниц сайта компании MULTISCANPRO).

Рис. 12. Макет страниц сайта компании MULTISCANPRO

Благодаря сетке видно, как будут выстраиваться элементы и будет ли корректно отображаться информация сайта при адаптиве - при изменении разрешения (Рис. 13. Сохранение визуальной части веб-страницы при адаптиве).

Рис. 13. Сохранение визуальной части веб-страницы при адаптиве

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

Удачно сконструированная сетка даёт возможность легко справиться с поставленными задачами в веб-дизайне. Она позволяет свёрстывать текст и иллюстративный материал систематически и логически; организовать текст и иллюстрации компактно, соблюдая их собственный внутренний ритм; объединять визуальный материал на основе ясной структуры. Элементы упорядочены так, что все части вместе архитектонично соединены и скоординированы в веб - пространстве.