Цветовые схемы и макеты дизайна

Введение

После того как Web-дизайнер представил архитектуру сайта, или каркас, клиенту для утверждения, следующий шаг состоит в определении внешнего вида сайта с помощью цвета и графики. В этой лекции будет показано, как сохранить этот процесс насколько возможно простым, как для разработчика, так и для клиента. Я придерживаюсь философии KISS (Keep Its Simple Stupid) — Будь проще. Имеется две причины для использования такой тактики: Первая, жизнь и так достаточно сложна, зачем усложнять еще; вторая, простой план помогает также сохранить сайт более доступным и легче используемым для всех заинтересованных сторон. В этой лекции будет рассмотрено:

Лекция имеет следующее содержание:

Первый шаг: рассмотрение шрифтового оформления

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

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

Одним из первых шагов по окончательному оформлению Web-дизайна является решение о шрифтах (http://www.w3.org/TR/REC-CSS2/fonts.html), которые будут использоваться на Web-сайте. Многие исследования показывают, что множество гарнитур шрифта на Web-сайте может путать читателя. С другой стороны, сайт, который использует везде только один шрифт, кажется безвкусным. Потому я советую использовать одну гарнитуру шрифта для заголовков и подзаголовков и другую гарнитуру шрифта для основного текста, особенно если планируется добавить на сайт рекламу. Использование одного шрифта для заголовков и другого для основного текста на всем Web-сайте добавит сайту целостность, и позволит также читателю различать заголовки и основной текст при просмотре Web-страницы. Реклама добавит разнообразие, так как никогда невозможно знать заранее, какие гарнитуры или варианты гарнитуры рекламодатель может использовать в баннере или текстовой рекламе. Лично я обычно использую шрифт Verdana для основного текста и Times Roman или Georgia для заголовков, и я придерживаюсь использования этих двух шрифтов и их вариантов в течение всей моей карьеры Web-дизайнера. Гарнитуры шрифтов Times Roman или Georgia используют засечки, а шрифт Verdana засечек не имеет. Как вы скоро увидите, я решила оставить для основного текста шрифт Verdana, но так как логотип был создан с помощью Arial Black, я также использовала эту гарнитуру шрифта без засечек для всех заголовков. Иногда необходимо нарушать свои собственные правила, и эта компоновка предоставляет простой пример такого случая. Но сначала позвольте мне объяснить различие между двумя гарнитурами шрифтов и почему я придерживаюсь такого простого выбора типа.

О гарнитурах шрифтов или шрифтах

Существует четыре следующие основные типы шрифтов:

) по удобочитаемости шрифта (http://www.webaim.org/techniques/fonts/#readability) показывают, что некоторые шрифты без засечек читать легче, чем такие как шрифт, показанный на рис 10.1(рис 10.1) Пример типа шрифта с засечками, Times New Roman, нормального (не жирного и не курсива), размером 18 pt

) утверждают, что исследования по удобочитаемости шрифтов не вызывают доверия, я заметила, что эти сайты используют шрифт без засечек для основного текста. Даже статьи, которые утверждают, что гарнитуры шрифтов с засечками более удобочитаемы (http://www.linotype.com/2258-16905/aboutlegibility.html), используют шрифт без засечек в основном тексте своей Web-страницы. Поэтому в этом вопросе я придерживаюсь общего мнения — использую шрифт без засечек, такой как показан на рис 10.2(рис 10.2) Пример шрифта без засечек, Verdana, нормального, размером 18 pt

(рис 10.3) Пример рукописного шрифта Staccato, размером 18 pt

). Эта гарнитура шрифта часто используется для такой цели, так как моноширинный шрифт четко показывает каждую букву и символ, используемые в коде.(рис 10.4) Пример специального шрифта, Jokewood, размером 18 pt

Взгляд на изображения выше показывает, что не все типы шрифта создаются одинаковыми, даже если создаются одного размера в пунктах. Размер в пунктах определяет высоту букв, и некоторые шрифты будут больше при 18 пунктах, чем другие. Существуют также и другие различия, такие как расстояние между буквами и словами, или тот факт, что некоторые гарнитуры шрифтов, такие как Jokewood, не имеют букв нижнего регистра. Но легко можно видеть, что шрифты Jokewood и Staccato было бы трудно читать как основной текст. Эти шрифты могут найти применение в небольшой области, такой как заголовки или в рекламных объявлениях.

Один из моментов для рассмотрения состоит в том, что эти шрифты могут выглядеть по разному во всех браузерах, так как различные браузеры остаются по сути несовместимыми. Вы могли обратить внимание на мой комментарий выше, что "не все браузеры выводят одни и те же шрифты". Причина этой проблемы состоит в том, что не все операционные системы поддерживают одни и те же шрифты. Они могут поддерживать одни и те же шрифты, но вариант, толщина и другие факторы могут представляться по разному в том или ином браузере. В связи с этим для вывода Web-страницы можно использовать базовый шрифт (http://www.upsdell.com/BrowserNews/res_fonts.htm), или просто "serif" или "sans-serif". Можно также использовать базовое имя и имя выбранного шрифта и надеяться на лучшее, так как пользователи в некоторых случаях также имеют возможность изменить шрифт или то, как он выглядит.

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

Именно по этой причине, как Web-дизайнер, вы должны понять тот факт, что Web является — во всех отношениях — по сути пластичным форматом. При дизайне Web-сайта вы можете контролировать многое. Тип шрифта является одним из объектов, над которым вы имеете некоторый контроль, но только если вы сохраняете его как можно более простым. И именно это является причиной, почему я постоянно все эти годы использую шрифт Verdana для основного текста и Times Roman или Georgia для заголовков.

Помня об этом, дизайнеры шрифтов и программисты постоянно пытаются найти способы сделать шрифты более читаемыми и красивыми (http://brainstormsandraves.com/articles/typography/webfonts/). Поэтому принимайте сказанное с некоторой долей критики и пробуйте что-нибудь новое, если считаете, что это будет работать. Достаточно скоро вы обнаружите, получится это или нет, когда протестируете самостоятельно Web-страницу на ряде браузеров (что будет показано дальше в этой лекции).

О разборчивости и удобочитаемости

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

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

Второй шаг: добавление печатного оформления

Когда шрифты для использования на сайте будут выбраны, необходимо разместить заголовки, подзаголовки, и основной текст в компоновке сайта. В предыдущей лекции была представлена воображаемая компания, "Wiki Whatevers", которая хочет сделать общедоступными на Web-сайте фрагменты своего кода, как материал с открытым исходным кодом. Я создала архитектуру сайта для утверждения, и я рада сообщить, что заказчикам нравится представленная идея! Хотя этот каркас кажется застывшим, он избегает какого-либо размещения графики или изображений, которые могли бы создать у клиента предвзятое представление о том, как все будет выглядеть, включая логотип компании. Изображение этого каркаса показано ниже на рисунке 10.6:

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

Основной текст выше добавляет на сайт " цвет ", хотя единственный цвет был добавлен логотипом. Основной текст добавил некоторое "значение", не только содержимым, но окраской, тонами, и тенями черного, белого и серого. Я добавила только те объекты, которые существенны для сайта — логотип, название сайта (которое является также названием компании), и подзаголовок (Open Source Wikis), ссылки и подписка на рассылку новостей в среднем столбце, и информацию нижнего колонтитула о компании, а также текстовые ссылки и рекламный текст. Поле поиска оказалось слишком большим, чтобы разместиться в одном столбце, поэтому оно помещено в верхнем колонтитуле.

Внимание к выравниванию

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

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

Так как логотип имеет не слишком выдающийся дизайн, я попыталась сохранить его размер небольшим. Кроме того, толщина гарнитуры шрифта Arial Black заставляет логотип выглядеть больше и более непропорциональным, чем любой другой элемент на странице. Хотя я его существенно уменьшила, я хотела бы, чтобы логотип был достаточно большим, чтобы соответствовать по размеру названию компании и их девизу, "Open Source Wikis", в пространстве, предоставляемом высотой логотипа. Можно видеть по красным линиям, которые помещены на иллюстрации выше, что название компании выравнивается по верху наклонного логотипа, а девиз размещается внизу черной буквы "W" логотипа. Взглянув вниз от первой буквы "W" в логотипе, вы увидите, что заголовок "The latest Wiki" выровнен с левой нижней точкой этой буквы. Так как логотип наклонный, то самая нижняя точка помогает указать на заголовок, расположенный ниже средств навигации. Фактически это отодвигает навигацию на второй план, так как заголовок такой же жирный, как и название компании.

В этом месте я заметила, что гарнитура шрифта Georgia, выбранного для заголовка записи блога кажется немного слишком активной для этой области. Поэтому я решила изменить шрифт заголовков на шрифт без засечек Arial Black, который слегка отличается от Verdana, который используется в основном тексте, но не настолько, чтобы создать хаос.

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

Можно было бы выровнять также основной текст с верхним левым углом логотипа и с заголовками, но показанный выше отступ позволяет читателю быстро просматривать заголовки и читать текст, который важен для читателя. При этом нужно сказать, что каждая Web-страница будет другой, и другой дизайн логотипа может потребовать совершенно другое выравнивание. Необходимо выровнять все важные элементы на странице таким образом, чтобы они выглядели естественно. Читатель не заметит, что вы столкнулись с этой проблемой (также как и клиент в большинстве случаев). Но в тот же самый момент, когда вы не уделите время для выравнивания на странице важных объектов, кто-то сделает замечание, что "что-то не совсем правильно".

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

Внимательно посмотрите на Web-страницы, когда в следующий раз будете путешествовать в Интернет. Обратите внимание на страницы, которые кажутся вам хорошо спроектированными, или на те страницы, которые просто "кажутся правильными". Обратите внимание на выравнивание основного текста, заголовков, логотипов и других элементов на странице. Выровнены ли они? Плавно ли переходят они от одного элемента к другому? Возможно, что дизайнер выбрал время, чтобы проработать небольшие детали, такие как эти, чтобы сделать дизайн страницы менее важным, чем содержимое — что, во всех отношениях — является целью хорошего дизайна.

Конечно, дизайн может вызывать некоторые проблемы в различных браузерах. Текст может не выравниваться вполне ровно в Safari, но он может выглядеть отлично выровненным в Opera или Firefox. Эта задача вполне разрешима, но только после выбора цветов для сайта.

Третий шаг: цвет

Когда макет Web-сайта готовится для клиента, я обычно стараюсь придерживаться насколько возможно начального каркаса, который был разработан ранее, прежде чем снова показывать образцы клиенту. Когда возможно, я предпочитаю использовать для каркаса код, а не изображение. В этом случае можно добавить такие элементы как логотип, основной текст, и даже макетную рекламу, чтобы показать клиенту, как все будет выглядеть на окончательной странице. При такой законченной компоновке клиент не имеет иллюзий о том, как будет выглядеть страница со всеми предполагаемыми элементами. Затем клиент может принять решения о том, что можно добавить или удалить. Кроме того, когда я смогу показать клиенту Web-страницу на компьютере так, как она будет выглядеть в Web, клиент сможет наглядно представить, как страница будет выглядеть, если он посетит ее в реальном времени.

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

Когда в лекции 8 был представлен инструмент Color Scheme Generator II, я не упомянула, что в этом инструменте можно ввести шестнадцатеричное значение цвета, чтобы сгенерировать цветовую схему из конкретного цвета. Прямо под цветовым кругом имеется ссылка "Enter RGB" ("Введите RGB"). В нашем случае золотой цвет логотипа является самым сильным цветом, поэтому я ввела шестнадцатеричное значение ( #eab304 ), чтобы посмотреть, что получится с таким выбором. Полученная монохроматическая схема была несколько монотонной, но контрастная цветовая схема была многообещающей. Эта схема содержит сине-фиолетовый цвет, с которым можно было бы поработать, так как тень позади логотипа также оттеняется синим цветом, как показано рисунке 10.9:

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

На изображении выше можно видеть, что цвета будут для сайта слишком темными и "тяжелыми". Поэтому я уменьшила плотность в навигационной панели до 75%, и плотность цвета в области рекламы до 20%. Вы можете сразу видеть, что получилось, ниже на рисунке 10.11:

Уменьшение плотности цвета в панели навигации делает ее более согласованной с цветом логотипа. Уменьшение плотности цвета фона размещения рекламы сближает его с цветом ссылок. Так как реклама состоит из ссылок, то это уменьшение плотности и согласование с ссылками сайта является уместным. Тот факт, что добавлен цвет в качестве фона для рекламы является хорошим моментом — если используется служба рекламы, такая как Google Adsense, то вы узнаете, что Google предпочитает, чтобы реклама была выделена относительно основного текста — добавление цвета помогает удовлетворить этому критерию. Я использую также темный контрастный цвет #2B0DA4 для строки девиза, и это добавление помогает добавить синий контрастный цвет вокруг всей страницы.

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

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

Имеется еще одна хорошая причина сохранить эту компоновку простой — внутренние страницы будут содержать фрагменты кода, и я использую моноширинный шрифт для этого кода, чтобы соответствовать принятой практике. Это еще одна причина, почему я решила использовать два различных шрифта без засечек, которые похожи по стилю. Применение моноширинного шрифта внутри этого сайта добавит достаточно шрифтового разнообразия, вместе c различными рекламными вариантами. Проверьте, что для заголовков и подзаголовков используются элементы заголовков ( h1, h2, h3, и т.д.), а не атрибуты жирности ( strong ) или курсива ( em ). Использование элементов заголовков сделает сайт более доступным. Внешний вид этих заголовков можно изменять в таблице стилей (CSS).

Необходимо заметить несколько вещей относительно приведенной выше страницы:

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

Я также добавила строку тегов и отметку даты/времени, чтобы зрители могли видеть, насколько свежими являются записи блога. Все эти элементы, как можно видеть ниже, создают дополнительный "вес" и беспорядок на сайте. Это просто еще одна из причин, почему можно стараться сохранить жизненно важную информацию как можно более простой — зритель будет иметь больше чем достаточно, когда он посетит сайт в данном виде. Посмотрите на рисунке 10.12 ниже окончательный результат:

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

После создания других страниц все они проходят через последний этап своего создания, прежде чем снова попадают к клиенту.

Четвертый шаг: тестирование

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

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

Заключение

Хотя цвет и компоновка остаются наиболее привлекательными для дизайнера, также должны быть рассмотрены другие элементы дизайна. Оформление текста, изображения, и возможность учесть потребности клиента по включению рекламы и некоторой монетизации, играют определенную роль в дизайне Web-сайта. Требования, предъявляемые к дизайнеру действовать в соответствии c желаниями клиента, удовлетворять потребностям читателей, которые требуют доступности и удобных для использования сайтов, и создавать при этом отличный дизайн, могут показаться иногда чрезмерными.

Еще более разочаровывающим является отсутствие совместимости между различными браузерами. Хотя за последнее десятилетие было сделано некоторое продвижение в направлении совместимости, необходимо понимать, что завершенный дизайн может казаться живущим своей собственной жизнью в некоторых браузерах. Кроме того, необходимо понимать, что пользователи могут изменять Web-сайт, нажимая на кнопки в некоторых браузерах. Изображения могут исключаться, цвет фона и текста изменяться, и все, создаваемое с помощью JavaScript, может игнорироваться.

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

Контрольные вопросы

Об авторе