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

Введение

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

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

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

• Первый шаг: рассмотрение шрифтового оформления
  • О гарнитурах шрифтов или шрифтах
  • О четкости и удобочитаемости
• Второй шаг: добавление шрифтового оформления
  • Внимание к выравниванию
• Третий шаг: цвет
• Четвертый шаг: тестирование
• Заключение
• Контрольные вопросы

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

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

Шрифты, называют также "гарнитурами шрифтов" и используют для вывода текста, чисел, букв, и других символов. Называемые также "глифами", эти символы, буквы и цифры разбиваются по семействам (все связанные), стилю (курсив, нормальный, наклонный, и т.д.), варианту (нормальный или малый прописной), толщине (жирность), растяжению (уменьшенный или увеличенный тип по высоте или ширине) и размеру (по высоте или ширине в пунктах или пикселях). Типографика связана с размещением и внешним видом текста, поэтому она касается внешнего вида глифов и тем, как они размещаются на странице (столбцы, параграфы, выравнивание и тому подобное). Наиболее эффективным способом управления типографикой на странице 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, я также использовала эту гарнитуру шрифта без засечек для всех заголовков. Иногда необходимо нарушать свои собственные правила, и эта компоновка предоставляет простой пример такого случая. Но сначала позвольте мне объяснить различие между двумя гарнитурами шрифтов и почему я придерживаюсь такого простого выбора типа.

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

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

1. Шрифт с засечками (serif): Любая гарнитура шрифта, которая содержит завершающие штрихи, расширяющиеся или сужающиеся концы, или имеет реально отсеченные окончания (включая прямоугольные засечки). В ходе истории шрифт с засечками был выбран для печати основного текста, так как его легко читать на печатной странице. Но Web отличается от печати, и некоторые исследования (http://www.wilsonweb.com/wmt6/html-email-fonts.htm) по удобочитаемости шрифта (http://www.webaim.org/techniques/fonts/#readability) показывают, что некоторые шрифты без засечек читать легче, чем такие как шрифт, показанный на рисунке 10.1, когда он используется для основного текста на странице Web.
   

   
   Рис. 10.1. Пример типа шрифта с засечками, Times New Roman, нормального (не жирного и не курсива), размером 18 pt
2. Без засечек (sans-serif): Любая гарнитура шрифта, конечные штрихи которой не имеют никаких расширений, пересекающих штрихов, или других украшений. Хотя некоторые авторы (http://www.hgrebdes.com/typefaces/fontresearch.php) утверждают, что исследования по удобочитаемости шрифтов не вызывают доверия, я заметила, что эти сайты используют шрифт без засечек для основного текста. Даже статьи, которые утверждают, что гарнитуры шрифтов с засечками более удобочитаемы (http://www.linotype.com/2258-16905/aboutlegibility.html), используют шрифт без засечек в основном тексте своей Web-страницы. Поэтому в этом вопросе я придерживаюсь общего мнения — использую шрифт без засечек, такой как показан на рисунке 10.2, так как он стал традиционной гарнитурой шрифта основного текста для Web.
   

   
   Рис. 10.2. Пример шрифта без засечек, Verdana, нормального, размером 18 pt
3. Рукописный или курсив: Эти шрифты обычно выглядят по большей части как написанные пером или кистью, а не как печатные буквы, как, например, показано на рисунке 10.3 ниже. Эти шрифты будут включать те, которые кажутся рукописными, даже хотя и не являются курсивом. Одной из причин отказа от использования этого типа шрифта на Web-странице, особенно в основном тексте, является трудность чтения в больших отрывках (подумайте о том, как трудно было бы читать написанное от руки письмо, или манускрипт двенадцатого века, который можно увидеть в музее). Кроме того, не все браузеры выводят один и тот же шрифт, поэтому если вы решите использовать рукописный и курсивный шрифт, то он может быть выведен как шрифт с засечками в каком-то другом браузере.
   

   
   Рис. 10.3. Пример рукописного шрифта Staccato, размером 18 pt
4. Специальные шрифты, включая моноширинный: Единственным критерием моноширинного шрифта является единая фиксированная ширина всех глифов, аналогично тому, как может выглядеть машинописная страница. Другие шрифты могут иметь фантастический внешний вид, как показанный на рисунке 10.4 ниже, и эти шрифты используются единственно с декоративной целью. Моноширинные шрифты нашли свое применение на Web-сайте, особенно при выводе программного кода (http://www.lowing.org/fonts/). Эта гарнитура шрифта часто используется для такой цели, так как моноширинный шрифт четко показывает каждую букву и символ, используемые в коде.
   

   
   Рис. 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-страницы клиенту, он обычно не знает разницы между гарнитурами шрифта с засечками и без засечек. Все, что будет знать клиент, это сможет ли он или нет прочитать содержимое страницы. Поэтому, в конечном счете, значение имеет разборчивость текста. Для этого необходимо убедиться, что:

1. Используемый шрифт достаточно большой, чтобы его можно было читать с различным разрешением браузера. Хотя пользователи имеют в некоторых браузерах (таких как Opera) средства для изменения размера шрифта, вы можете попробовать проверить, что используемые шрифты настраиваются для различного разрешения браузера (http://www.456bereastreet.com/archive/200611/ resolution_vs_browser_size_vs_fixed_or_adaptive_width/). Одним из способов сделать это является задание размера шрифтов в процентах (http://www.rnib.org.uk/xpedio/groups/public/documents/publicwebsite/public_fontsizes.hcsp) или ems, а не высотой в пикселях (для этого используется CSS).
2. Обеспечивается достаточный контраст между фоном и основным текстом. Белый или светлый шрифт на черном фоне для больших кусков основного текста может переутомлять глаза (http://www.456bereastreet.com/archive/200608/light_text_on_dark_background_vs_readability/), однако — если вы хотите это использовать, попробуйте предоставить альтернативный stylesheet, чтобы пользователи могли читать вместо этого темную копию на светлом фоне.
3. Заголовки на самом деле отличаются от основного текста. Возможность разбить большие куски текста с помощью заголовков и подзаголовков, или с помощью списков (как этот) облегчает пользователям просмотр страницы, чтобы найти на ней важный материал. Разбиение страницы изображениями также хорошо работает, но убедитесь, что эти изображения подходят к основному тексту. Иначе вы просто впустую заполняете полосу пропускания.
4. Исключается растягивание основного текста на всю ширину экрана с помощью текучей компоновки. Попробуйте прочитать параграф, который заполняет все горизонтальное пространство на большом мониторе — вам это быстро надоест, так как приходится использовать и глаза, и поворачивать голову при чтении текста от одной стороны экрана до другой. Просмотрите следующую Web-страницу по удобочитаемости (http://www.bastoky.com/Readability.htm), которая с моей точки зрения является лучшей, что я видела до сих пор, чтобы проиллюстрировать типичную удобную для чтения ширину основного текста (иллюстрация, показанная ниже на рисунке 10.5). Эта страница поясняет также подробно, как люди читают страницу, независимо от того будет ли это Web или печатный материал. Показанное ниже изображение было получено на двадцати-четырех дюймовом экране с разрешением 1920 x 1200. Сравните это изображение с тем, что вы увидите на своем экране, когда перейдете по предыдущей ссылке. Затем проверьте разрешение своего экрана, чтобы увидеть различие. Иногда фиксированная компоновка является хорошим решением, так как она будет определять параметры области основного текста для удобства читателей. Не беспокойтесь обо всем свободном пространстве вокруг этой области основного текста (как на показанном ниже изображении). Создайте спокойный фон, который не отвлекает от дизайна текста, и вы сделаете хорошую услугу для тех, кто владеет большими экранами.

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

Рис. 10.5. Пример подходящей ширины основного текста, выводимого на большом экране

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