Третий шаг: цвет
Когда макет Web-сайта готовится для клиента, я обычно стараюсь придерживаться насколько возможно начального каркаса, который был разработан ранее, прежде чем снова показывать образцы клиенту. Когда возможно, я предпочитаю использовать для каркаса код, а не изображение. В этом случае можно добавить такие элементы как логотип, основной текст, и даже макетную рекламу, чтобы показать клиенту, как все будет выглядеть на окончательной странице. При такой законченной компоновке клиент не имеет иллюзий о том, как будет выглядеть страница со всеми предполагаемыми элементами. Затем клиент может принять решения о том, что можно добавить или удалить. Кроме того, когда я смогу показать клиенту Web-страницу на компьютере так, как она будет выглядеть в Web, клиент сможет наглядно представить, как страница будет выглядеть, если он посетит ее в реальном времени.
Цвет является частью и объединяющим элементом этой установки "все на своем месте". Причина этого в том, что различные цветовые схемы могут полностью изменять настроение сайта, даже со всеми элементами находящимися на своем месте. Более того, я предпочитаю иметь минимальное количество цветовых образцов, так как слишком большое количество образцов может внести путаницу. В данном случае клиент имеет ограниченный бюджет, поэтому я предложила им ограничиться только одной цветовой схемой в качестве образца для работы.
Когда в лекции 8 был представлен инструмент Color Scheme Generator II, я не упомянула, что в этом инструменте можно ввести шестнадцатеричное значение цвета, чтобы сгенерировать цветовую схему из конкретного цвета. Прямо под цветовым кругом имеется ссылка "Enter RGB" ("Введите RGB"). В нашем случае золотой цвет логотипа является самым сильным цветом, поэтому я ввела шестнадцатеричное значение (#eab304), чтобы посмотреть, что получится с таким выбором. Полученная монохроматическая схема была несколько монотонной, но контрастная цветовая схема была многообещающей. Эта схема содержит сине-фиолетовый цвет, с которым можно было бы поработать, так как тень позади логотипа также оттеняется синим цветом, как показано рисунке 10.9:
Рис. 10.9. Контрастная цветовая схема на основе значения #eab304
Используя показанные здесь цвета, я решила использовать основной золотой цвет логотипа в качестве фона для верхних средств навигации. Я использовала темно-синий цвет (почти сине-фиолетовый) #2b0da4 для ссылок (которые будут также подчеркнуты), и я использовала более светлый оттенок этого же синего цвета для фона рекламы. Можно видеть, как цветовые добавки изменяют внешний вид компоновки на рисунке 10.10:
Рис. 10.10. Компоновка с контрастными цветами
На изображении выше можно видеть, что цвета будут для сайта слишком темными и "тяжелыми". Поэтому я уменьшила плотность в навигационной панели до 75%, и плотность цвета в области рекламы до 20%. Вы можете сразу видеть, что получилось, ниже на рисунке 10.11:
Уменьшение плотности цвета в панели навигации делает ее более согласованной с цветом логотипа. Уменьшение плотности цвета фона размещения рекламы сближает его с цветом ссылок. Так как реклама состоит из ссылок, то это уменьшение плотности и согласование с ссылками сайта является уместным. Тот факт, что добавлен цвет в качестве фона для рекламы является хорошим моментом — если используется служба рекламы, такая как Google Adsense, то вы узнаете, что Google предпочитает, чтобы реклама была выделена относительно основного текста — добавление цвета помогает удовлетворить этому критерию. Я использую также темный контрастный цвет #2B0DA4 для строки девиза, и это добавление помогает добавить синий контрастный цвет вокруг всей страницы.
Рис. 10.11. Компоновка с уменьшенной плотностью цвета
Хотя эта компоновка может выглядеть, как будто она была создана легко, я затратила некоторое время на подбор цветов из контрастной цветовой схемы для фона, на цвета для заголовков и на изменение несколько раз компоновки рекламы. С каждым изменением казалось, что цвета подавляют простую компоновку, поэтому я исключила их и осталась с черным цветом для всего текста, за исключением девиза. Хотя я могла бы использовать цвет "посещенной" ссылки, я решила, что лучший выбор состоит в сохранении простой двухцветной основы, которая будет легко принимать цветные изображения, не создавая цветового кошмара.
С другой стороны можно видеть, что предварительное создание каркаса также может упростить работу — когда имеется готовая "карта" или архитектура, добавление цвета является в некоторой степени раскрашиванием "трафарета". Если вы придерживаетесь своей компоновки, то можно использовать эту компоновку для определения своего выбора. Кроме того, если сохранить ее простой, то дизайн может быть более элегантным в долгосрочном плане, а также более легко используемым и доступным.
Имеется еще одна хорошая причина сохранить эту компоновку простой — внутренние страницы будут содержать фрагменты кода, и я использую моноширинный шрифт для этого кода, чтобы соответствовать принятой практике. Это еще одна причина, почему я решила использовать два различных шрифта без засечек, которые похожи по стилю. Применение моноширинного шрифта внутри этого сайта добавит достаточно шрифтового разнообразия, вместе c различными рекламными вариантами. Проверьте, что для заголовков и подзаголовков используются элементы заголовков (h1, h2, h3, и т.д.), а не атрибуты жирности (strong) или курсива (em). Использование элементов заголовков сделает сайт более доступным. Внешний вид этих заголовков можно изменять в таблице стилей (CSS).
Необходимо заметить несколько вещей относительно приведенной выше страницы:
Я сохранила название компании вверху страницы черным цветом, так как это помогает распространить черный цвет в логотипе по верху страницы.
Я использовала выравнивание по центру вверху среднего столбца, чтобы привлечь внимание к средству регистрации. Так как форма для регистрации для подписки на рассылку новостей заполняет ширину этого столбца, то центрированный текст уравновешивается этим выравниванием, и заставляет основной текст казаться "принадлежащим" очертанию, созданному этой формой.
Центрированное выравнивание адреса внизу страницы в нижнем колонтитуле может казаться смещенным относительно центра, но я хотела, чтобы адрес стал частью области, которая несет основной текст для сайта. По мере развития сайта этот правый столбец заполнится дополнительными ссылками и, возможно, какими-то изображениями, и я хочу, чтобы эта область была полностью отделена от основного текста сайта. Это разделение предупреждает зрителей, что им нужно переместиться в правый столбец, если им нужно найти дополнительную информацию.
Наконец, как завершающий штрих, я добавлю на страницу изображения. Если только клиент не имеет готовое изображение для использования, то выбранное изображение должно "подходить" схеме компоновки. Другими словами, попробуйте найти подходящее изображение, которое отражает выбранные для сайта цвета. В этом случае я решила добавить в компоновку немного юмора с помощью готовой фотографии компьютерного фаната. Одной из причин выбора этой фотографии является то, что человек на изображении смотрит прямо на зрителя, что означает, что это изображение может привлечь взгляд зрителя прежде чем что-то иное на сайте. Так как это изображение очень важно, то мне понравилось, что цвета на его рубашке кажутся близкими к золотому и синему цветам сайта. Наконец, его черные очки отражают тяжелые черные акценты в заголовках сайта. После всего этого я добавила в Photoshop синий отблеск в тени и желтый отблеск в яркие участки этой фотографии, чтобы в большей степени согласовать ее с общей цветовой схемой.
Я также добавила строку тегов и отметку даты/времени, чтобы зрители могли видеть, насколько свежими являются записи блога. Все эти элементы, как можно видеть ниже, создают дополнительный "вес" и беспорядок на сайте. Это просто еще одна из причин, почему можно стараться сохранить жизненно важную информацию как можно более простой — зритель будет иметь больше чем достаточно, когда он посетит сайт в данном виде. Посмотрите на рисунке 10.12 ниже окончательный результат:
Web-дизайн хорош тем, что он не является дизайном печати. Печать навсегда, а Web-дизайн постоянно изменяется. Поэтому этот сайт может измениться со временем, чтобы отразить развитие группы. Ошибки можно исправить, а цвета можно модифицировать. Сказав об этом, лучше все-таки с самого начала иметь в сети продукт как можно лучшего качества. Такая цель, как создание наиболее качественного продукта, будет хорошо служить как репутации разработчика, так и репутации клиента.
Рис. 10.12. Окончательный дизайн, подготовленный для критического рассмотрения клиентом
После создания других страниц все они проходят через последний этап своего создания, прежде чем снова попадают к клиенту.