Статьи / Веб-Дизайн / Дизайн сайта.

  2008-11-03 17:23

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

Дизайн - это лицо сайта, и на лице должен быть написан успех.
Это фундаментальное условие работы с людьми.

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

- Расположение информации.
- Навигация по сайту.
- Цветовое решение.

Технических аспектов влияющих на восприятие сайта не много, но они не менее важны.
Страницы сайта, выполняющие одни и те же функции, должны иметь единый дизайн. В противном случае, трудно воспринимать информацию как единое целое. Сайт, выдержанный в едином стиле, работает на узнаваемость (продвижение торговой марки), набор страниц с разным дизайном этого свойства не имеет.
Дизайн сайта, структура, и содержание должны связываться только концептуально, технически они должны быть независимы друг от друга. Иначе, любое изменение дизайна, структуры или содержания повлечет за собой переработку всего сайта.
Расположение информационных блоков
Количество и расположение информационных блоков зависит от задач возлагаемых на проект и содержания.
Основной принцип здесь, чем проще - тем лучше.
Как правило, используется одно из устоявшихся решений отвечающие основным требования веб дизайна - простота и наглядность.
A. 1 колонка - простая страничка с последовательно идущими картинками и текстом.
B. 2 колонки - основная колонка, широкая, под текст, дополнительная, поуже, справа или слева
C. 3 колонки - основная колонка в центре, по бокам - дополнительные колонки.


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

Примеры расположения информации на странице:




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

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

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

Память
Кратковременная память человека ограничена 7-ю элементами информации (Г.А. Миллер). Семь, это усредненное значение, обычно это значение меняется в пределах от 5 до 9. Поэтому, если есть возможность ориентироваться нужно на цифру 5, а не 7.
Из этого вытекает:
В простом меню количество пунктов не должно превышать 7.
Если пунктов меню больше, их надо разбить на группы. При этом групп должно быть не более 7 и количество пунктов в одной группе не должно превышать 7.
Что это дает? Если меню сайта запоминается при первом взгляде, это сразу помогает понять:
о чем сайт (в первом приближение);
какую информацию он содержит;
где искать нужную информацию.
Кроме того, меню сохраняется в памяти во время работы с сайтом. Что делает работу более удобной и понятной.
Если меню сайта более длинное, то не факт, что его дочитают до конца.

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


Цветовое решение
Цвет один из самых неоднозначных элементов веб дизайна. Цвет может подчеркнуть контекст, а может и оттолкнуть.
Для создания эффективного дизайна необходимо учитывать ряд требований налагаемых на выбор цветового решения:
Текст не должен сливаться с фоном, а заголовки теряться.
Использование контрастных сочетаний вызывающих напряжение глаз так же не приемлемо.
Необходимо что бы цветовое решение соответствовало форме подачи материала, его содержанию, аудитории сайта.
При поиске цветового решения важно найти сочетание цветов гармонирующих друг с другом. Универсальных решений приводящих к 100% успеху нет, но есть методики помогающее добиться хороших результатов.
При подборе сочетания из двух цветов можно использовать методику, основанную на свойствах цветового круга. Если выбрать дополняющие (комплиментарные) цвета лежащие на круге напротив, то каждый из них будет в сочетание с другим ярче и выразительнее.


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


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


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


Автор: METASSET Group