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

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

Введение

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