Дизайн сайта

Разработка дизайна сайта.    Разработка дизайна является самым интересным, творческим этапом в производстве сайта, о котором можно рассказывать очень много и писать не статьи, а целые тома с интересными примерами и красочными иллюстрациями. Мы остановимся на некоторых основных моментах разработки дизайна сайта.    Первое, с чего начинается разработка дизайна сайта - постановка Визуала. В среде web-дизайнеров визуалом принято называть общую графическую концепцию, применяемую в оформлении web-сайта. Хотя в Интернете и существует множество сайтов, не имеющих единой дизайнерской концепции, на наш взгляд, сайты, обладающие четко выраженным визуалом, лучше запоминаются посетителями, вызывая положительные эмоции на подсознательном уровне. Наличие оригинального дизайнерского решения на сайте будет способствовать тому, что о его существовании не забудут даже спустя годы. А что может быть более лучше для компании, чем запоминаемость ее торговой марки? Разработка web-дизайна включает в себя такие этапы, как: разработка цветового решения сайта и выбор фона; построение композиционной модели; создание навигационной панели; обработка графических элементов и фотоизображений; выбор стиля шрифтов и заголовков. 1. Разработка цветового решения сайта. Цвет - это область, в которой компьютерная графика имеет самое большое преимущество перед графикой естественной. Экран компьютера, в отличие от листа бумаги, сам излучает свет, и регулирование количества этого света позволяет охватить гораздо более широкий цветовой спектр, чем тот, который можно воспроизвести на бумаге.   Любой цвет, как любая форма, несет с собой свое собственное настроение, звучание, ноту определенной высоты и тембра. Восприятие цвета зависит от того, какую форму и площадь он занимает, а также от окружающих цветов. При уменьшении занимаемой цветом площади количество оттенков, которые способен различить глаз, уменьшается, а большинство цветов начинают выглядеть тусклыми и темными. Поэтому часто на практике для небольших по размеру элементов выбирают более яркие примитивные цвета, а для того, чтобы показать всю красоту какого-нибудь темного, слабонасыщенного оттенка, необходима достаточная площадь (например, фон всей html-страницы). Светлый цвет по соседству с темным кажется еще светлее, а темный рядом со светлым - темнее (световой контраст).   Цвета на странице должны гармонично сочетаться. Для определения гармоничного сочетания различных цветов пользуются цветовыми (колориметрическими) кругами. Наиболее популярным является колориметрический круг естественных цветов по Гете, изображенный слева. В круге представлены первичные цвета (треугольник "Синий-Красный-Желтый") и субтрактивные цвета (перевернутый треугольник "Фиолетовый-Оранжевый-Зеленый"). Цвета, не попадающие в треугольники, называются смешанными, например, Желто-зеленый, Красно-фиолетовый и т.д. 1.1 Расположенные друг против друга цвета (например Фиолетовый и Желтый) дают контрастные сочетания. Если они расположены рядом, то они взаимно усиливают друг друга, их сочетание гармонично. 1.2 Менее гармоничным является сочетание цветов, расположенных по углам основоного, либо перевернутого треугольника (например Синий и Желтый). 1.3 Для подбора цветовых аккордов в два, три или четыре цвета используются цвета, расположенные в круге под углом 90 градусов (например, "Красный-Желто-оранжевый-Зеленый")   Хроматические цветовые тона с ахроматическими (белый, черный, серый) наиболее гармоничны в следующих сочетаниях: красный, оранжевый, желтый (теплый тона) гармонично сочетаются с черным, а голубой, синий, фиолетовый (холодные тона) сочетаются с белым цветом. Выбор фона. Некоторые правила, которые необходимо учитывать при выборе фона: 1.4 Серый, черный и белый фон часто образует приятное сочетание, но белые предметы на светлом фоне пропадают. Бежевые цвета теряются на серем фоне. 1.5 На красном фоне серый кажется зеленоватым, на желтом - синеватым, на зеленом - чуть розоватым, на синем желтоватым. 1.6 Оранжево-желтый, зеленовато-голубой, голубой, а также белый уменьшают зрительное и цветовое утомление и относятся к группе оптимальных цветов 1.7 Теплые тона обладают свойством "приближаться", а холодные - "удаляться". 1.8 Среди ахроматических светлые воспринимаются приближающимися, а темные удаляющимися цветами.   2. Построение композиционной модели сайта. Композиция (от лат. compositio) - составление, соединение, сочетание различных частей в одно целое в соответствии с определенной идеей. Художественный образ композиции должен сочетать в себе индивидуальные, характерные черты, обобщенные, типические свойства и элементы творческого выражения, фантазии дизайнера. Композиция делает произведение цельным, выразительным, гармоничным, задает определенный тон всему творению, создает единое композиционное пространство. Следует обращать внимание на логику композиции, наличие смыслового и изобразительного центров. Текстовое оформление - это тоже элемент композиции, но об этом позже.   Любую композицию всегда можно разбить на элементы, связанные между собой разного рода отношениями - отношения баланса, контраста, вложенности, по следовательности и т.д. Эти отношения выражаются через различные визуальные аспекты объектов: их размеры, форму, пропорции, взаимное расположение, цвет.   3. Создание навигационной панели сайта. Основное противоречие в дизайне навигационной панели сайта сводится к вопросу: как сделать так, чтобы кнопка на панели как можно лучше вписывалась в композицию, не раздражала своим утилитарным предназначением - и в то же время была была достаточно эффективной и интуитивно понятной? Как добиться того, чтобы даже самому неискушенному пользователю было ясно, что это именно кнопка, а не просто надпись или картинка?   В навигационных панелях кнопки строятся на основе текстовых надписей, но реализованы они в виде графических вставок. Наиболее интересны кнопки, оформленные с использованием небольших стилизованных рисунков, символизирующих содержимое соответсвующих разделов. Разумеется, чтобы вытянуть на себе всю композицию, рисованная навигационная панель должна обладать художественными достоинствами и стилистическим единством выше среднего уровня.   4. Обработка графических элементов и фотоизображений. Технологическая цепочка производства графики для web-сайтов включает в себя три этапа: создание графических элементов в векторном редакторе, экспорт в полноцветный растровый формат, и наконец, оптимизицию полученной графики для web с одновременным ее переводом в формат с ограниченной цветностью (GIF) или в формат, реализующий сжатие с потерями (JPEG). Иногда между вторым и третьим этапами на изображение накладываются какие-то специфические растровые эффекты (например, тени или размывки), в других случаях, наоборот, второй этап может отсутствовать вообще, если векторная программа способна экспортировать графику сразу в GIF или JPEG. Оптимизация графики - т.е. поиск компромисса между ее качеством и объемом файла - сводится к выбору, во-первых, одного из двух форматов, во-вторых, параметров сжатия в выбранном формате. В большинстве случаев можно сразу выбрать формат JPEG для фотографий и композиций, в которых они доминируют, либо в GIF для полноцветных логотипов, надписей, заголовков и т.д.