March 12, 2002


 

 


 


 

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


Для начала необходима концепция блочного устройства страницы:
- расположение блоков (общая конструкция)
- предназначение каждого блока
- размеры каждого блока
- технология загрузки информации в блок
- технология обновления информации (если такое подразумевается)

 

Общая конструкция страницы.


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


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


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


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


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


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


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


На данный момент существуют:


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


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


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


- "динамический" дизайн - в примитивном варианте бегающие по экрануили просто движущиеся изображения (в основном - флеш, но сюда же можно отнести и DHTML, и Java и даже анимационный GIF). В хорошо продуманном сценарии это может быть целое произведение искусства, последовательно разворачивающее перед зрителем мысль автора или какой-то художественный образ. Интерфейсы на флешах часто поражают наше воображение в самом хорошем смысле этого слова.
"смешанные" типы - суть понятна и так. Обычно комбинация всех тих типов.
Тот огромный поток информации, которую современный человек воспринимает постоянно, передается во многом с помощью шрифта. Однако шрифт, по своей природе, это не только упорядоченная графическая форма определенной системы письма, но и средство эстетического и художественного оформления носителя информации. Именно эта его функция и представляет интерес с точки зрения дизайна.


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