USE - Урок 02 (2015)

Юзабилити
и эргономика веб-страниц
Урок 2
Стиль и цветовое оформление
Виды сайтов
Функциональные стили
Веб-колористика
Содержание
Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
Виды сайтов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
Функциональные стили сайтов . . . . . . . . . . . . . . . . 15
Веб-колористика . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Психология цвета . . . . . . . . . . . . . . . . . . . . . 24
Цветовая схема сайта . . . . . . . . . . . . . . . . . . . 27
Сервисы подбора цветовых схем. . . . . . . . . . . 31
Урок 2 Стиль и цветовое оформление

Юзабилити и эргономика веб-страниц
Шаблон проектирования (паттерн, design
pattern) – повторимая архитектурная кон-
стиля, конечно же, лежат худо- струкция, представляющая собой решение
жественные стили, историю раз- проблемы проектирования в рамках не-
которого часто возникающего контекста.
вития которых вы в подробно- Это – определение из Википедии.
стях изучили в первом семестре. Практически в любой практической сфере
Как я уже заметил, веб-дизайн в (а дизайн – это одна из них) существуют
Введение этом не уникален и повторяться

готовые типовые конструкции, которые
прекрасно подходят для некоторых похо-
нет смысла. жих задач. Наибольшее распространение
термин паттерн получил в программирова-
В прошлом уроке мы выявили четкие границы Речь пойдет не о художе- нии, тем не менее, это явление прекрасно
профессии «Веб-дизайнер». Сегодня пришло ственном стиле, а о функцио- прижилось и в других отраслях. А истоки
понятия паттерн вообще находятся в ар-
время поговорить подробнее о ней. нальном стиле веб-сайта. Что хитектуре.
Напомню, все в том же прошлом уроке такое функциональный стиль?
было определено, что круг задач веб-дизайнера Это – паттерн, шаблон, т. е. типовое решение
это: оформления веб-сайта какого либо опреде-
ленного вида или функционала. Это, своего
◆◆ Колористика рода, жанр. Тот или иной стиль определяет
◆◆ Типографика общие принципы выбора цвета элементов,
◆◆ Компоновка построения макета и т.д. Стиль содержит, в
концентрированном виде, опыт, накоплен-
Сегодня мы уделим более пристальное ный для решения той или иной задачи. Без-
внимание именно колористике, т.е. цвету в условно, функциональный стиль определяется
оформлении веб сайта. условиями использования сайта, задачами
Но прежде, я бы хотел остановиться на бо- которые он решает. Поэтому, перво-наперво,
лее общем понятии, которое определяет внеш- нужно разобраться с классификацией сайтов
ний вид сайта в целом. Это – стиль. Понятие по их области применения и предоставляемым
стиля в веб-дизайне имеет такое же значение, функциям.
что и в других отраслях дизайна. В основе
Введение
Разберем их по отдельности.
Сайт-визитка
Сайт-визитка – это, наверное, один самых
старых видов коммерческих сайтов. В самом
Виды сайтов начале коммерческого освоения веб, предпри-
нимателям хотелось, чтобы клиенты макси-
За 20 лет существования, появилось доволь- мально доступно могли получить основную
но много вариантов использования веб- информацию о компании и её деятельности.
пространства. Также существует довольно Таким образом, мы можем сформулиро-
большое количество классификаций: по техно- вать следующее: сайт-визитка – это простой
логии, по условиям работы, по коммерческим информационный сайт, состоящий из не-
характеристикам и т.д. большого количества страниц (5 ± 2), и со-
Если не углубляться в технологию созда- держащий основную информацию об орга-
ния сайта, а сосредоточиться исключительно низации или частном лице, её (его) товарах
на аспектах внешнего вида, то можно клас- или услугах, прайс-листы, контактные данные
сифицировать сайты следующим образом (в и форму обратной связи.
порядке усложнения функционала и дизайна): Практически каждый сайт-визитка обяза-
тельно имеет три основные страницы:
1. Сайт-визитка
2. Личный сайт, сайт-портфолио ◆◆ О компании (новости) — содержит кра-
3. Блог ткое описание компании, чем она занима-
4. Промо-сайт ется, возможно — её историю, ключевые
5. Интернет-магазин, интернет-каталог фигуры в организации;
6. Корпоративный сайт ◆◆ Услуги (продукция) — каталог предостав-
7. Портал, веб-сервис ляемых услуг или продукции, возможно с
ценами; как правило, для сайтов-визиток
не используют «продвинутые» интерак-
тичные каталоги, и часто ограничивают-
ся статичной версией или даже простой
ссылкой для скачивания прайс-листа в
формате Microsoft Word или Excel;
◆◆ Контакты — адрес, телефоны и другие
средства связи, возможно, карта проезда.
Какая-то из этих страниц также выполня-

ет роль главной. Остальное наполнение варьи-
руется от задачи к задаче.
Как правило, сайт-визитка не требует
каких-то особенных средств управления, т.е.
«движка». Часто он бывает статичным и не
требует довольно частого обновления. Безус-
ловно, это самый дешевый вид сайта. Многие
веб-студии создают такие сайты за несколько
часов на основе шаблонных средств. Это мо-
жет стоить буквально от 60$.
Кстати, сайт-визитка, может быть частью
полного фирменного стиля компании, по-
скольку в большей степени решает именно
имиджевые задачи.
Сайт-портфолио
Как следует из названия, сайт-портфолио
предназначен для демонстрации работ опре-
деленного автора, как правило, владельца
сайта. Главная задача такого сайта – предста-
вительская. Поэтому, можно встретить такое
обозначение данного вида сайтов как предста-
вительский сайт. С одной стороны – это та же
визитка, но тут есть несколько особенностей:
◆◆ Во-первых: основная задача такого сай-

та – это дать посмотреть представленные
работы, а не просто проинформировать об
их наличии. Это потребует более сложного
функционала и более продуманной и раз-
ветвленной структуры
◆◆ Во-вторых: такой сайт нужно будет об-
новлять чаще, чем просто визитку, если
владелец, конечно же, желает, чтобы его
портфолио было актуальным.
Наличие этих двух моментов, налагает не-

обходимость использования «движка» для
сайта, что делает его дороже.
Я очень рассчитываю, что вы уже имеете
список подходящих для себя блогов и ре-
Блог ◆◆ Организовывать записи по гулярно их читаете. Если же нет, то настоя-
Блог — это тоже разновидность личного, т.е. хронологии, тематике и т.д. тельно рекомендую обзавестись таковыми.
Это очень способствует профессиональ-
представительского сайта, но с очень важной ному росту. Можно начать хотя бы с таких:
особенностью: частое (регулярное) обновле- По умолчанию, записи выво- habrahabr.ru — большая блоговая сеть, где
ние. дятся на главной странице сайта находится множество профессиональных
блогов на тему IT от программирования
Слово blog происходит от слияния двух в обратной хронологической по- до дизайна
слов – web и log, т.е. буквально: «сетевой днев- следовательности, т. е. от новых dejurka.ru — журнал, посвященный веб-
ник». Но не стоит понимать понятие «блог» к старым. дизайну во всем его многообразии.
coolwebmasters.com — очень интересная
столь узко. Фактически за десятилетие суще- Согласитесь, этот формат не подборка материалов по веб-дизайну.
ствования, блог как форма существования накладывает никаких ограниче- Часто попадаются наборы готовых эле-
ментов, которые можно использовать для
сайта, эволюционировал из простого сред- ний на тематику. По этой при- практических целей.
ства публикации впечатлений в мощное мар- чине блоги успешно решают как Ну и на английском языке несколько ре-
кетинговое и даже социально-политическое личные, так и корпоративные сурсов:
smashingmagazine.com — один из луч-
явление. задачи. ших в мире интернет-журналов для веб-
Если посмотреть на блог с технической мастеров.
точки зрения, то это сайт, построенный на Краткая классификация бло- netmagazine.com — журнал о всемирной
паутине.
специальном «движке», который позволяет: гов:
◆◆ Быстро написать, отредактировать и опу- ◆◆ Личные блоги — решают психологиче-

бликовать кусок текста с иллюстрациями. скую функцию. В основном создаются не
Это – запись блога или пост. на базе отдельного полноценного сайта, а
◆◆ Добавить к посту (записи) мультимедий- с помощью популярных блог-платформ:
ное содержимое: видео, аудио, архив и т.д. LiveJournal, Blogger.com, LiveInternet и т.д.
◆◆ Комментировать читателям блога его за- ◆◆ Профессиональные блоги — решают ком-
писи, накапливая комментарии. муникативную задачу в профессиональ-
ной среде. В нашей области — IT — бло-
ги фактически решают образовательную
функцию. Скорость книгоиздательства не
позволяет распространять актуальные зна-
ния в быстроизменяющемся IT’шном мире
в формате традиционного учебника, пусть
даже электронного. Поэтому блоги профес-
сионалов той или иной сфере помогают уз-
навать о новых технологиях в разы быстрее.
◆◆ Корпоративные блоги – официальные бло-
ги каких-либо организаций, сообществ,
фирм. В них они размещают самые послед-
ние свои новости. В них происходит от-
веты на вопросы пользователей. Для того,
чтобы быть в курсе новостей индустрии,
также полезно читать такие сайты.
В последнее время наблюдается очень

устойчивый спрос на создание блогов. Суще-
ствуют готовые движки для их создания. В
курсе CMS вы будете рассматривать некоторые
из них детально. Поэтому не будем забегать
вперед, а сформулируем основные принципы
«блогового» дизайна. Он довольно типовой.
Такой дизайн довольно распространен и
может быть применен в сайтах различной на-
правленности, не обязательно блог.
Промо-сайт
Промо-сайт создается исключительно в ре-
кламных целях и служит для продвижения
какой-либо услуги или товара в сети. Это на-
кладывает определенные требования к функ-
ционалу и внешнему виду.
Промо-сайт можно сравнить с сайтом ви-
зиткой по наполнению и функционалу. Чем
выделяется промо-сайт, так это — дизайном.
Фактически стоимость промо-сайта и скла-
дывается из стоимости дизайна. Он должен
быть привлекательным, богатым, ярким, за-
поминающимся и впечатляющим. По этой
причине типовых рамок для промо-дизайна
нет. Здесь уместен полет фантазии дизайне-
ра, применение креативных средств передачи
смысла и оригинальных решений. Это сайты,
создающиеся для вау-эффекта. Неизменными
остаются лишь базовые вещи: здравый смысл
и забота о пользователе.
Промо-сайты имеют довольно большой
разброс в цене, связанный с широким выбо-
ром технологий для их создания: частенько
это – Flash, но в последние годы, все чаще мож-
но встретить отличный сайт, разработанный
с помощью JavaScript решений.
Одна из отличительных черт промо-сай-
тов – это короткая жизнь. Прошло время ак-
ции, товара или услуги – прошло время сайта.
Один из самых необычных сайтов – это
сайт, рекламирующий минеральную воду
«Боржоми» (Borjomi). Это — самый глубокий
сайт в мире (thedeepestsite.com). Он в длину ре-
альных 8 километров! Эти 8 км можно пройти,
крутя колесико мыши, при этом отображается
глубина и скорость продвижения. Цель — до-
стигнуть глубины, на которой располагается
источник минеральной воды Borjomi.
Интернет-магазин
Сложно представить себе современного поль-
зователя Интернет, который бы не имел дела
с интернет-магазинами. Он-лайн торговля
стабильно набирает популярность последние
несколько лет и, соответственно, спрос на со- к проектированию – проектирование опыта
ответствующие сайты также стабилен. взаимодействия, т. е. UX (User eXperience). Это
Безусловно сайты интернет-магазинов – важнейший момент, к которо- Опыт взаимодействия — совокупность
обладают довольно сложным, но при этом му мы еще вернемся в следую- ощущений, которые испытывает пользо-
типовым функционалом. А также, что очень щих уроках. ватель при работе с каким-либо объектом.
В нашем случае этим объектом является
важно, именно такие сайты и заставляют нас сайт. Проектирование пользовательско-
столкнуться с таким понятием, как дизайн ин- го опыта заключается в построении сайта
таким образом, чтобы пользователь нака-
терфейса, т.е. потребует специального подхода пливал позитивные ощущения при работе
с ним. Сюда входит очень много критериев:
сайт должен быть удобным, привлекатель-
ным, быстрым и т.д.
Обо всем этом мы будем говорить отдель-
но и подробно.
В общих чертах, интернет-магазин вклю-
чает в себя следующие крупные части:
◆◆ Каталог, имеющий четкую древовидную

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

ках интернет-магазинов, которые бывают как
коммерческими (что делает проект дороже),
так и свободными.
Каталог интернет-магазина — это, фак-
тически самая главная часть сайта с точки
зрения дизайнера самая главная, поскольку
именно она обращена к пользователю, т.е. и
является, по сути, интерфейсом. Стоит по-
смотреть на примеры реализации этой части в
реальных сайтах. (К проектированию системы
навигации в интернет-магазинах в том числе,
мы еще вернемся.)
Корпоративный сайт
Фактически это вид сайтов — это сильно ус-
ложненная форма сайта-визитки, поскольку
подразумевает наличие какого-то дополни-
тельного функционала, помимо простой ин-
формации о компании. Что это может быть?
К примеру:
◆◆ форма заказа
◆◆ чат с менеджером-консультантом
◆◆ какой-то калькулятор, который рассчи-
тывает стоимость проекта или еще что-то
◆◆ интерактивный каталог с мощным поис-
ком, и т.д.
Часто корпоративный сайт является одно-

временно и средством корпоративного менед-
жмента, имея отдельные закрытые разделы
для сотрудников, клиентов, контрагентов и
так далее.
Такой сайт и стоит подороже и разраба-
тывается дольше и, что важно для нас, решает
не только имиджевые задачи, будучи частью
фирменного стиля, но и вполне конкретные
практические задачи, т.е. должен иметь дизайн
интерфейса, т.е. он потребует специального
подхода к проектированию — уже упоминав-
шегося проектирования опыта взаимодей-
ствия, User eXperience.
Стоимость разработки такого сайта может
очень серьезно варьироваться в зависимости
от сложности функционала от 150$ и до не-
скольких тысяч долларов. Примерами таких
сайтов могут служить сайты каких-либо круп- Сервис планирования авиа-
перелета на сайте wizzair.com
ных компаний. С этими данными пользователь может что-то
делать: вычислять, обрабатывать и т.д.
Портал, сайты веб-сервисов К таким сервисам можно отнести:
Веб-сервис, это программный продукт, ин-
терфейс которого находится на веб-странице, ◆◆ системы заказа и покупки билетов на са-
загружаемой в браузер пользователя. С по- молеты, поезда и т.д.
мощью интерфейса, пользователь получает ◆◆ аналитические и статистические сервисы
доступ к каким-либо данным, которые либо ◆◆ геоинформационные сервисы
распределены по разным серверам, либо про- ◆◆ социальные сервисы.
сто лежат на сервере владельца сервиса. Этот
доступ может быть и платным и свободным. Разработка таких сайтов сопряжена с се-
рьезными исследовательскими задачами как
в области программирования, так и в области всего менеджер, по управлению, пользо-
дизайна интерфейсов, поскольку тут на первое вательскими данными.
место выходят вопросы удобства, эффектив- ◆◆ Средство коммуникации, т. е. обмена со-
ности и т.д. общениями внутри сети между пользова-
телями.
Социальные сети ◆◆ Страница поиска пользователей. Важней-
Особое значение в веб-дизайне имеет такая шая часть системы и место приложения
разновидность сайтов, как социальные сети. дизайнерской мысли на предмет проекти-
Сложно представить себе современного че- рования интерфейса.
ловека, который не знаком с ними. Более под-
робно о социальных сетях как инструменте Безусловно, этим, функционал современ-
маркетинга (а это и есть в первую очередь ной социальной сети не ограничивается, но
инструмент маркетинга, а не способ время- эти три задачи являются главнейшими и аб-
препровождения, как вы, должно быть, дума- солютно необходимыми.
ете…), вы узнаете из курса SEO, который вас Разработка социальной сети – занятие до-
ожидает в будущем. вольно сложное, поскольку такие сайты очень
Здесь хотелось бы остановиться на осо- популярны, а стало быть, должны очень на-
бенностях дизайна подобных сервисов. Итак, дежными и, в то же время, предельно просты-
главные элементы социальной сети: ми в использовании.
◆◆ Страница профиля (аккаунт). Тут нахо-

дятся анкетные данные пользователя, его
фото и основные ссылки, которые могут
быть полезны пользователю. Следует пом-
нить, что социальная сеть — это прежде
Функциональные стили сайтов
Познакомившись с тем, какие бывают сайты,
мы можем углубиться в изучение типовых
решений в их дизайне, т.е. функциональных
стилях.
Какой-либо официальной классификации
этих стилей, конечно же, нет, но все же можно
выделить следующие:
◆◆ Минимализм
◆◆ Информационный стиль
◆◆ Американский бизнес-стиль
◆◆ Промо-стиль
Минимализм
Я не буду давать определение минимализма,
как направления в творчестве, рассчитывая
на то, что Вы с ним знакомы из предыдущих
курсов. Напомню, что речь идет о минимуме
используемых в дизайне материалов, простоте

и единообразии форм, творческом самоогра- ◆◆ Пустое пространство – это часть компози-
ничении. Т. е. минимализм — это очень логич- ции. Его эффективное использование – это
ный стиль, основанный на математичности, главная проблема в минимализме.
стремящийся к ясности и простоте. ◆◆ Резиновая или просто очень свободная
Для знакомства давайте посмотрим сетка. Более подробно о модульных сетках
несколько примеров: stefankanchev.com, в веб-дизайне мы поговорим чуть-позже,
ampersanderson.com, simonfosterdesign. но я надеюсь, что это понятие вам знакомо
com, rrost.com, rule-of-three.co.uk, bvd. из курса полиграфии.
s e , t he worldwe l i ve i n .c o.u k , m a n g rove . ◆◆ Примитивность цветовой палитры. Боль-
com, harlointeractive.com, ze-studio.com, шое количество однотонных пространств.
craftingtype.com, rypearts.com, yesstudio.co.uk, Высокий контраст.
foundrycollective.com. ◆◆ Аскетичность. Отсутствие сложных орна-
ментов, громоздких изображений и лиш-
Тематика этих сайтов, безусловно разли- него декора. Минимальное количество фо-
чается, но общие нотки в оформлении, уверен новой графики.
вы уловили. Давайте сформулируем основные ◆◆ Строгая типографика. Небольшое коли-
отличительные черты минимализма: чество шрифтов, которые должны быть
очень читабельными. Без лишних эффек-
◆◆ Малое количество элементов на странице. тов.
Они не обязательно должны быть малень-
кими. Их малое количество создает яс- Как стиль минимализм подкупает своей
ность в композиции. У каждого элемента кажущейся простотой в разработке и начи-
должно быть свое четкое предназначение. нающие дизайнеры стремятся к нему, но глав-
◆◆ Среди элементов страницы должен четко ный подводный камень — это найти грань
просматриваться главный элемент. При- между истинным минимализмом и просто
чем он должен быть ровно один.

отсутствием дизайна. Вспомните дизайн на-
чала 90-х. Это тоже минимализм?
Виды сайтов, для которых может подойти
такой стиль, я думаю, очевидны из приведен-
ных примеров:
◆◆ Портфолио человека творческой профес-

сии: фотосайт, галерея
◆◆ Промо-сайт: сайт-афиша какого либо ме-
роприятия
Информационный дизайн
Информационный дизайн черпает своё вдох-
новение из дизайна газет и журналов. Главная
задача, решаемая с его помощью – это эффек-
тивное донесение большого объема разнопла-
новой информации: новости, отчеты, резуль-
таты расчетов и т.д.
Взяв от минимализма лаконичность и яс-
ность при минимуме выразительных средств,
информационный дизайн очень уместен для
сайтов с очень частым обновлением и высо-
кой оперативностью, поскольку в этом случае
некогда поражать и вдохновлять, нужно дать
посетителю нужную информацию быстро и
внятно.

Ярчайший пример проявления информа- речь идет о том, что ширина основного
ционного дизайна — он-лайн средства мас- блока, который содержит страницу фик-
совой информации, официальные Интернет- сирована и не изменяется в зависимости
представительства государственных структур: от ширины экрана.
kremlin.ru, bbc.com, cnn.com, cgevent.ru, biz. ◆◆ Жесткая модульная сетка.
liga.net, korrespondent.net, smashingmagazine. ◆◆ Лаконичность. Почти полное отсутствие
com, coolwebmasters.com свободного пространства и лишнего де-
Какое понятие приходит на ум при взгляде кора.
на сайт в инфостиле? Структура или сетка. Так
и есть, основа такого дизайна — это модуль- Американский бизнес стиль
ная сетка, причем тщательно рассчитанная Если посмотреть на коммерческие сайты, т.е.
и очень жесткая. Это принципиально решает те, которые очень четко нацелены на продажи
и основную задачу в плане донесения инфор- и привлечение клиентов, мы увидим в них
мации, т. е. удобства использования (помните много общего в плане элементов дизайна. Это,
о UX?) и задачу обслуживания, поскольку на- безусловно, не от того, что у дизайнеров очень
полнять сайт с очень четкой структурой не в плохо с фантазией, а из практических сооб-
пример легче и быстрее. ражений не придумывать что-то еще, если и
Хоть все достаточно очевидно, я все же это работает.
сформулирую основные черты инфостиля: Поскольку главная задача такого дизайна
— продавать, то он сильно замешан на психо-
◆◆ Огромное количество контента. Главная логии пользователя, психологии восприятия.
цель – эффективная читабельность, адап- Восприятия всего: и формы, и цвета и распо-
тация к беглому ознакомлению. ложения.
◆◆ Фиксированный по ширине шаблон. Мы Итак, посмотрим на представителей этого
еще вернемся к вопросу ширины шаблона стиля: foxtrot.com.ua, mobilluck.com.ua, next.
в будущем, но, думаю, вы понимаете, что co.uk, mayoclinic.com, metalist.ua, shakhtar.

com, obolon.ua, htc.com, apple.com, nokia.com,
microsoft.com
Теперь, аналогично и другим рассмотрен-
ным нами стилям, определим основные от-
личительные черты:
◆◆ Центральное изображение. В оптическом

центре первого экрана главной страни-
цы находится большая (около половины
и выше площади экрана) мотивационная
картинка (слайдшоу, видео). Характер кар-
тинки:
• презентационное высококачественное
изображение рекламируемого товара;
• фото или видео важного события;
• абстрактная бизнес тематика, т.е. изо-
бражение на тему денег, успеха, карьеры
и т.д: довольные клиенты, счастливые
улыбающиеся люди, сосредоточенно
раздумывающие люди, авто или бегу-
щий человек чтобы подчеркнуть ско-
рость, пожимающие руку люди, что ука-
зывает на их сотрудничество и т.д.
Рядом с изображением, как правило, раз-

мещается важнейшая информация, ссылка

или кнопка для того, чтобы призвать пользо- Сайты, конечно, никто не сгибает, но тут
вателя сделать что-то. есть своя особенность. Нижняя часть стра-
ницы сразу, также как и с газетой, видна не
◆◆ Жесткая модульная сетка. Как правило, будет, но её можно проскроллить. Проектиро-
используют две-три колонки для разме- вать дизайн нужно так, чтобы у пользователя
щения информации под центральным изо- не сложилось ощущение, что он видит ВСЮ
бражением. страницу целиком. Пользователь должен по-
◆◆ Фиксированная верстка. В последнее вре- нимать, что ниже еще что-то есть.
мя стремительно развивается адаптивная Ранее к вопросу скроллинга вообще от-
верстка, поэтому фиксированность име- носились весьма осторожно. Бытовало мне-
ет определённые оговорки. Подробнее об ние, что скроллить пользователи не любят и,
этом мы будем говорить отдельно. поэтому, все самое важное нужно вместить
◆◆ Крупный подвал, содержащий карту сай- именно на первый экран страницы. Позже все
та, поиск либо наполненный социализиру- убедились в том, что это совсем не так, а даже
ющими функциями. наоборот — пользователи очень любят скро-
лить. Поэтому не стоит этого бояться.
Важное внимание нужно уделять области Область применения американского биз-
своеобразной «линии сгиба». Как вы знаете, нес-стиля очевидна из его названия. Это ком-
при разработке дизайна газеты, мы должны мерческие сайты самой разной направленно-
думать о том, что часть первой полосы будет сти: интернет магазин, корпоративный сайт,
не видна читателю, так как будет согнута по- каталог и т.д.
полам при выставлении её на лотке при про-
даже. Т.е. имеется в виду то, что важную ин- Промо-стиль
формацию стоит вместить именно в это место, Это своеобразный и довольно сложный стиль,
которое читатель увидит первым. который наиболее полно позволяет реализо-
вать дизайнерские идеи. Тут можно экспери-

ментировать. Я уже рассказывал о нем в этом которые вы успели рассмотреть в предыдущих
уроке. Приведу лишь несколько дополнитель- семестрах.
ных примеров: goinnutty.com, vectorform.com,
coucoushop.ch, 321akce.cz, clearairchallenge.com,
pigspotter.co.za, viens-la.com, space.angrybirds.
com, matteozanga.it, blacknegative.com, lena-
sanz.com, naturevalleytrailview.com, jimcarrey.
com, pepperworks.pl, costumize.me, f0.byd.com,
pleasurehunt2.mymagnum.com, leoburnett.ca,
the-planet-zero.com
Итог
В качестве итога, нужно обязательно подчер-
кнуть, что эти стили можно и нужно комби-
нировать. Это, безусловно, может раскрыть
дополнительные возможности.
Помнить нужно главное: сайт создается
для посетителей, т. е. очень важно не переу-
сердствовать в реализации тех или иных идей.
Стили — это условности. Они — не догма.
Поэтому приступим к рассмотрению ос-
новных составляющих графического дизайна.
Начнем с колористики — цвета для сайта, как
наименее специфичной области и наименее
отличающейся от классических концепций,

Хорошо ли вы помните
теорию цвета?
Цвет на сайте — это мощный канал пере- Что такое аддитивная
дачи информации эмоционального плана. модель и субстрактив-
ная модель?
Цвет неразрывно связан с психологией вос- Зачем нужна модель HSL
приятия и формирует общее настроение. Мы (HSB) ? Что означают по-
нятия цветовой тон, на-
можем корректировать настроение пользова- сыщенность, яркость?
Веб-колористика теля сайта, вводя его как бы в «резонанс» с той Что такое цветовой ох-
информацией, которую пользователь получа- ват?
Как связаны обозначе-
Работая над дизайном чего-либо, дизайнер не- ет из контента сайта. Это, как вы понимаете, ния цвета в десятерич-
избежно столкнется с вопросом выбора цвета весьма способствует позитивному UX. А это, ной форме и шестнадца-
или сочетания цветов для своего проекта. Веб- тиричной форме?
как раз, и есть нашей целью.
Например, что это за
дизайн не только не исключение, а, скорее на- Цвет для сайта основан на модели RGB цвет: rgb(255, 185, 10 )? А
оборот, та отрасль, где цвет очень часто имеет и поэтому, все, что нужно знать о цвете для это какой: #fea910 ?
определяющее значение в судьбе проекта. Если вы затрудняетесь в
печати сюда не очень применимо. Здесь нет ответах на эти вопросы,
Сложно удержаться от банальных фраз о цветоделения и прочих допечатных процессов. то очень настоятельно
цвете. Уверен, что вы много об этом читали Это, безусловно, облегчает работу. В браузере рекомендую повторить
этот материал.
и слышали. Цвет — это жизнь. Бесцветные с помощью средств CSS можно использовать
объекты кажутся мертвыми и не вызывают весь цветовой охват RGB, т. е. 16,8 миллионов
интереса. оттенков.
С другой стороны, сам по себе цвет, вряд Сразу стоит сказать, что в этом уроке вы
ли судьбоносен. Цвет, будучи удачно выбран- не найдете руководства о том, как именно за-
ным в соответствии с задачами сайта и ожи- дать цвет для какого-то элемента страницы.
даниями пользователей, может помочь или Это — часть курса HTML / CSS, который вы
же, наоборот, навредить, если игнорировать изучаете параллельно.
определенные правила и методики в его выбо- Важнейший момент — это сочетания цве-
ре. Обозначим основные моменты, о которых тов. Вряд ли имеет смысл использовать для
пойдет речь в этой главе: сайта 1 цвет, их явно будет больше. Как ми-
нимум сразу нужно определиться с тем, что
цвета бывают хроматическими, т.е. имеющие
цветовой тон отличный от черного и белого,
и ахроматическими, т. е. в шкале серых от-
тенков.
Психология цвета
Как известно, человек очень четко ассоциирует
какой-либо цвет с определенным настроением,
состоянием, действием. Большая часть этих
ассоциаций находится на подсознательном
уровне. Все знают, что красный – это страсть,
любовь, активность, а зеленый – это природа,
естественность, натуральность. А что осталь-
ные цвета?
◆◆ Голубой – терпение, мир, спокойствие, на-

дежность, любовь, стабильность. Один из
самых любимых цветов, особенно у муж-
чин. Это связано со стабильностью и глу-
биной, профессионализмом, доверием.
◆◆ Желтый – цвет, который чаще всего ассо-
циируется с живостью. Энергичный, дает
ощущение счастья. Кроме того, он ассоци-
ируется с любопытством, развлечением, Даже пол зрителя имеет важное значение в восприятии цвета
радостью, интеллектом, осторожностью.
◆◆ Оранжевый – бодрость и творчество. Ас- • Запад: возбуждение, любовь, страсть
социируется с дружелюбием, уверенно- • Иврит: жертва, грех
стью, игривостью, мужеством, стойкостью. • Япония: жизнь
◆◆ Фиолетовый – традиционно ассоциирует- ◆◆ Голубой – цвет безопасности почти во все
ся с властью, благородством и богатством. мире
Мудрость, независимость, благородство, • Европа: успокоение, цвет Христа, одно-
роскошь, честолюбие, достоинство, магия временно – печаль, депрессия
и тайны. • Иран: траур, цвет неба и духовность
◆◆ Коричневый – цвет релаксации и уверен- • Китай: бессмертие
ности. Коричневый означает приземлен- • Индуизм: цвет Кришны
ность, природу, долговечность, комфорт, • Иудаизм: святость
надежность. • Ближний Восток: защита
◆◆ Желтый
Также огромное влияние на восприятие • Европа: счастье, надежда, радость, тру-
цвета оказывает социально-культурная среда. сость в опасностях, слабость
Культурный аспект для цветной символики • Египет: траур
может быть очень сильным, так что нужно • Япония: мужество
иметь представление о том, какова аудитория • Индия: торговцы
сайта и ориентироваться в том, какое значение • Буддизм: мудрость
имеют цвета в различных культурах: ◆◆ Оранжевый
• Европа: осень, урожай, творчество, де-
◆◆ Красный шевые товары
• Китай: цвет невесты, удачи, торжества • Индуизм: шафран (персиковый оранже-
• Индия: чистота вый) священный цвет
• Южная Африка: траурные цвета ◆◆ Зеленый
• Восток: радость (в сочетании с белым) • Япония: жизнь
• Ислам: священный цвет, надежда, до- и будьте умеренны в рассуждениях. Не нужно
бродетель таинственности.
• Ирландия: символ всей страны Процитирую Романа Воронежского – од-
• Европа / США: весна, новое рождение, ного из арт-директоров студии Артемия Ле-
День Святого Патрика, Рождество (с бедева:
красным)
• США: деньги «Цвет – явление идеологическое. Идеология такая: сам по себе
цвет не значит ничего. Вообще ничего.
◆◆ Белый Беседы о том, что какие-то цвета с какими-то не сочетаются
• Европа: брак, ангелы, врачи, больница, или что-то означают в отрыве от контекста – шаманство хуже
гороскопов.
мир «Красный означает опасность», – говорит человек, который
• Япония: траур, белая гвоздика символи- сегодня утром мужественно съел помидор и не дрогнул. «Чер-
зирует смерть ный – слишком мрачный», – утверждает второй, который се-
годня утром читал черные буквы на белом листе и смеялся.
• Китай: траур, смерть, «Серый скучный», – жалуется третий. Сами вы скучный. Посмотрите на Бастера Китона – весь
• Индия: несчастья из оттенков серого, а повеселей вас будет.
◆◆ Черный «Синий символизирует надежду, зеленый – обновление», – вешает лапшу дизайнер. Дизайнер,
не вешай. Клиенту лучше честно сознаться: вот 16 млн цветов (если rgb) или веер (пантон),
• Европа: траур, похороны, смерть, покой тыкайте пальцем. Покрасим в любой. Но кнопка «Удалить» останется красной (а с этим клиент
• Иудаизм: несчастье, зло никогда и не спорит).
Когда мне говорят, что красный с зеленым не сочетаются, я сатанею. Посмотри на грядку
• Австралийские аборигены: цвет людей клубники, дундук!
Вот. А мои любимые цвета — черный и белый. Потому что на них рисовать удобней.
Уверен, что вы и раньше представляли
себе эти моменты, но лишним не будет это Т. е. будьте здравомысленны. :)
все еще раз осознать и повторить.
Хочу предостеречь вас от переоценки вли-
яния цвета и их сочетаний. Не цвет главный
на сайте. Главное блюдо – контент, а цвет – это
гарнир. Относитесь к цвету, как к инструменту
Цветовая схема сайта
Итак, определившись с основным цветом ва-
шей страницы на основании психологических
особенностей восприятия, мы задаемся вопро-
сом: «Какие еще цвета я могу использовать?».
Здесь, конечно же, на помощь нам придет
цветовой круг, который, я уверен, вам хорошо
знаком. Совокупность всех цветов сайта назы-
вают цветовой схемой. Здесь мы рассмотрим
принципы её формирования.
Главный принцип – это гармония цвета,

которая подчиняется определенной логике.
Т.е. цвета должны находиться во взаимосвязи
– контрасте. Существуют несколько типовых
контрастов. Рассмотрим их.
Монохромный. Устроен довольно просто:
берем один главный цвет и подбираем допол-
нительные, оперируя его насыщенностью и
яркостью.
Думаю, что область применения такой
цветовой схемы очевидна – минималистичные
сайты, либо, наоборот, промо-сайты, которые
ориентированы на очень четкую фирменную
стилистику.
Аналоговый. Берем на цветовом круге
один цвет и подбираем 2–3 рядом стоящих по
кругу цвета.
Сразу хочу оговориться о семантике слова
Монохромная цветовая палитра
аналоговый. Уверен, что у многих из вас воз-
никли ассоциации с понятием «цифровой»,
т. е. «не аналоговый». Эти вещи к аналогово-
му контрасту отношения никакого не имеют.
Аналоговый здесь означает – подобный, т.е. мы
используем подобные, похожие цвета.
Комплементарный. В комплементарном
сочетании находятся противоположные на
круге цвета. Кстати это и есть классическая
грядка с клубникой или арбуз, т. е. красное с
зеленым. Это — якобы не сочетаемое. На са- Аналоговая цветовая палитра
мом деле секрет в объеме использования цвета
и в оттенках, поскольку, к примеру, красный
может быть приглушенным, а зеленый, напро-
тив, понасыщеннее и поярче или, наоборот,
потемнее и выступать в качестве основного
доминирующего цвета. А красным покрасим
Комплементарная цветовая палитра

небольшие по размеру детали, подчеркнув их
важность.
Посмотрите на схему. Тут есть по 5 вари-
антов зеленого и красного. Мы можем исполь-
зовать любую пару.
Сплит-комплементарный. Это более мяг-
кий, компромиссный вариант комплементар-
ного контраста. Он получается путем добав- Сплит-комплементарная цветовая палитра
ления вместо противоположного цвета, пары
его соседей по кругу.
Триадный. Это – классика. Используем
3 цвета, которые находятся на равных рас-
стояниях друг от друга по кругу. Фактически,
триадный контраст продолжает дело смягче-
ния комплементарной гармонии, делая это еще
сильнее, чем сплит-комплементарный.
Получается очень ясная гармония. От-
лично подойдет для оформления сайта, где Триадная цветовая палитра
главный момент – простота. Это какой-либо
сервис широкой целевой аудитории, что-то
семейное или же просто детское.
Тетрадный. Если вам мало оттенков, по-
лученных триадным контрастом, то можно
добавить еще, вписав в круг квадрат или пря-
моугольник. Получится тетрадная гармония.
Тетрадная цветовая палитра
Не зацикливайтесь на чистых цветах, экс- их серые градации уже присутствуют в схеме
периментируйте с оттенками по яркости и изначально.
насыщенности, а также слушайте свою ин-
туицию. Не расстраивайтесь, когда заказчик
говорит, что слишком много розового отдает
легкомысленностью, а коричневый у него ассо-
циируется с нехорошими вещами. Возможно
он прав. А возможно слишком субъективен.
Очень важно не забывать о количестве
цвета в странице целиком. На схемах квадра-
тики цветов одинаковых размеров, но на стра-
нице площадь, залитая тем или иным цветом
будет очень разная, что сильно изменит вос-
приятие цвета.
Сколько же должно быть цветов в цвето-
вой схеме сайта? Чаще всего можно вести речь
о пяти:
◆◆ цвет переднего плана и его дублер

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

цветах. Считайте, что белый, черный и все
Сервисы подбора цветовых схем.
Напоследок, хочу представить вам очень
мощных помощников в деле подбора цветовой
схемы сайта.
http://colorschemedesigner.com — очень
мощный сервис, позволяющий манипулиро-
вать цветовым кругом. Кстати примеры в дан-
ной главе сделаны именно в нем.
Уверен, разобраться с его интерфейсом
вам не составит особого труда.
http://www.colourlovers.com — это сайт-

сообщество, полезный не только веб-
дизайнеру. С его помощью можно решать лю-
бые колористические вопросы.
Здесь можно подбирать сочетания, следить
за трендами, выбирать готовые цветовые схе-
мы по тематике или популярности.
http://design-seeds.com — блог, каждый
пост в котором — это цветовая схема, создан-
ная по фотографии.
https://kuler.adobe.com — нельзя не упо-

мянуть об Adobe Kuler, хотя, подозреваю, вы
и так его знаете.
Хочу также порекомендовать очень ин-

тересную инфографику о том, какие цве-
та используют бренды в вебе (http://static.
colourlovers.com.s3.amazonaws.com/uploads/
images/top-web-brand-colors.html).
Андрей Пилипенко

© Компьютерная Академия «Шаг», 2013

www.itstep.org

USE - Урок 02 (2015)

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

USE - Урок 02 (2015)

Загружено:

Авторское право:

Доступные форматы

Юзабилити

Урок 2 Стиль и цветовое оформление

Введение этом не уникален и повторяться

Какая-то из этих страниц также выполня-

◆◆ Во-первых: основная задача такого сай-

Наличие этих двух моментов, налагает не-

◆◆ Быстро написать, отредактировать и опу- ◆◆ Личные блоги — решают психологиче-

В последнее время наблюдается очень

◆◆ Каталог, имеющий четкую древовидную

Почти все эти части можно найти в движ-

Часто корпоративный сайт является одно-

◆◆ Страница профиля (аккаунт). Тут нахо-

Функциональные стили сайтов

Функциональные стили сайтов

◆◆ Портфолио человека творческой профес-

Функциональные стили сайтов

Функциональные стили сайтов

◆◆ Центральное изображение. В оптическом

Рядом с изображением, как правило, раз-

Функциональные стили сайтов

Функциональные стили сайтов

Функциональные стили сайтов

◆◆ Голубой – терпение, мир, спокойствие, на-

Главный принцип – это гармония цвета,

Комплементарная цветовая палитра

Тетрадная цветовая палитра

◆◆ цвет переднего плана и его дублер

Подчеркну – речь идет о хроматических

http://www.colourlovers.com — это сайт-

https://kuler.adobe.com — нельзя не упо-

Хочу также порекомендовать очень ин-

Юзабилити и эргономика веб-страниц

© Компьютерная Академия «Шаг», 2013

Вам также может понравиться