Дипломная работа: Графическая концепция web-сайта
Внимание! Если размещение файла нарушает Ваши авторские права, то обязательно сообщите нам
52
Автор – Свет Симонов
Поддержка кириллицы – Да
Поддержка латиницы – Да
Категория – Sans Serif
Начертания – Light, Light Italic, Regular, Italic, Medium, Medium Italic,
Bold, Bold Italic
Лицензия – бесплатно
Рис. 2.11. Пример шрифта Noah
2.4 Выбор и обоснование колористического решения
Цвета в жизни человека занимают много места. Они заставляют людей
принимать решения. Что касается веб-дизайна, цветовое оформление всегда
было предметом дискуссий и споров, и остается исключительно
индивидуальным параметром, который зависит от типа сайта, целевой
аудитории, стиля компании и прочих критериев.
Разработка дизайна нового интерфейса состоит из двух больших сфер
производства. Визуальный дизайн и проектирование UI. Назначение обоих –
контролировать и удерживать внимание пользователя, помогать ему освоиться
в пространстве портала и одновременно направить его к целевым действиям,
таким как например покупка услуги или товара. Умение веб-дизайнера
грамотно работать с цветом и формой влияет на то, насколько интерфейс будет
выгодным с точки зрения товарооборота. Для этого необходимо четко
осознавать модные тенденции и строго следовать своду принципов.
53
При разработке дизайна веб-сайта часто используется стандартный
цветовой круг для выбора наиболее гармоничных и сочетающихся друг с
другом оттенков, они могут быть диаметральны друг другу находясь на
противоположных сторонах круга, или располагаются вместе. В первом случае
получается яркое сочетание, подходящее для выделения акцентных элементов.
Во втором – гармоничный мягкий переход от одного цвета к другому, который
используется, когда не нужно выделять акценты.
Чаще используется именно комплементарное сочетание, оно
применяется для того, чтобы агитировать потенциального клиента к целевому
действию.
Чтобы добиться цветового баланса, которое будет удерживать внимание
посетителя, рекомендуется комбинировать цвета в соотношении и 60/30/10:
60% – превалирующий цвет;
30% – дополнительный цвет (можно использовать два оттенка
одного);
10% – цветовые акценты.
После разработки стратегии визуальной концепции сайта была
проведена работа по подбору цветовой палитры, так как верно подобранная
цветовая гамма является одним из важнейших элементов веб-дизайна, которая
способна удержать пользователя. Цвет может влиять на самочувствие и
настроение человека, некоторые цветовые решения могут как понравиться
посетителю, так и отпугнуть его
8
. Так как сайт направлен на определённую
аудиторию, у которой есть свои предпочтения в цветах, то большую роль в
создании цветовой схемы играет то, как человеческий глаз воспринимает тот
или иной цвет. Восприятие зависит от таких параметров как восприятие сайта в
целом, форма основных элементов дизайна, дополнительных деталей,
читабельность текста. Доминирующие цвета сайта должны позитивно
восприниматься пользователями.
8
Стив К. Не заставляйте меня думать. Веб-юзабилити и здравый смысл. Издательство: Эксмо, 2014г.
С. 122 [13]
54
Для дизайна сайта данного проекта была выбрана цветовая гамма,
состоящая из бежевых оттенков, пастельного розового и голубого. Наибольшее
пространство занимает классический белый цвет, он служит основным фоном и
присутствует в некоторых графических элементах.
Белый является нейтральным цветом, символизирующий чистоту, свет и
мудрость. Он может хорошо сочетаться со всеми остальными цветами. Его
можно ассоциировать с чистым листом бумаги.
Бежевый цвет также является нейтральным, так как если его
использовать как основной цвет он довольно маловыразительный и блеклый,
однако в сочетании вместе с другими цветами, принимая их влияние, он может
раскрыться сам и позволить это сделать дополнительному цвету, избежав
чрезмерности и излишней контрастности. Бежевый обычно используют в
качестве фона. Светлые тона бежевого выглядят современно, актуально и
чисто, более темные оттенки передают чувство традиционности и
практичности.
Розовый большинство из нас считает девичьим цветом, но веб-сайты,
спроектированные в розовых тонах, могут выглядеть весьма броско и "цеплять"
взор. Сочетание розового в дизайне веб-сайтов с более светлыми или тёмными
оттенками может привносить в него зримую контрастность. Розовый цвет -
бледный оттенок красного, а название его происходит от цветка этой окраски (в
английском языке от гвоздики, в русском от розы). Розовый часто выигрышно
преподносится в сочетании с белым или голубым. Ассоциируется с
женственностью, чувственностью, нежностью, детством и романтикой, что
отлично походит под целевую аудиторию данного сайта.
Серый цвет представляет собой нечто общее между белым и черным
цветами. Он не привлекает много внимания и не перетягивает на себя интерес
пользователя, уступая дорогу более важным цветам. Серый будет сочетаться с
большинством цветов и оттенков, а так как не будет происходить пресыщения,
сам по себе он никогда не надоест.
Голубой цвет является успокаивающим и почти никогда не вызывает
55
негативных эмоций, скорее наоборот, внушает чувство расслабленности и
спокойствия. Данный цвет выступает одним из самых популярных цветов в
веб-дизайне, в первую очередь из-за психологического воздействия. Его можно
использовать на сайтах разной тематики, начиная с делового бизнес-ресурса,
заканчивая развлекательными ресурсами.
Подбор цвета – особенно значительный и неотъемлемый этап создания
графической концепции веб-сайта, так как при неправильном подборе цветовой
палитры можно потерять часть потенциальных клиентов или снизить
конверсию. В результате работы был разработан визуальный образ, создающий
ощущение легкости и современности, основанный на потребностях целевой
аудитории компании, для которой выполнялся дизайн-проект и анализа
аналогичных сайтов-конкурентов.
Рис. 2.12. Ключевые и второстепенные цвета сайта
56
2.5 Выбор и обоснование стиля сайта
Основываясь на современных тенденциях в веб-дизайне и пожеланиях
заказчика, стилем, в котором будет выполняться оформление сайта был выбран
flat design. С английского языка flat design переводится как «плоский дизайн», а
стал он абсолютным фаворитом после презентации Apple ОС iOS. На вершину
встал минималистичный подход к дизайну для хорошей проработки юзабилити.
Акцент был сделан на комфорт пользователя, без перегруза сайта лишними
деталями
9
. Данный стиль выступает против «сквеформизма». Стали делать
акцент на более простые, но при этом все еще интересные решения.
Пользователи, уставшие от реализма, с удовольствием быстро приняли это
направление, и все больше сайтов переходят именно к такому формату.
Хочется отметить, что плоско вовсе не значит скучно. Решения плоского
дизайна могут быть очень гармоничными и приятными визуальному
восприятию, они более утонченные, чистые, избавленные от избыточности
элементов. Они, наконец, делают контент понятным и приятным. Далее
рассмотрим основные принципы, чтобы применять их на практике.
Чересчур вычурные эффекты в этом стиле не приветствуются. Целью
Стиля flat design не является стремление передавать объемы, поэтому в основе
лежит одномерная визуализация. Это значит, что в нем скорее всего
отсутствуют тени, рефлексы, блики с текстурами (исключение составляют
длинные тени). Только передача контуров, и ничего более.
Чем проще, тем лучше. Рекомендуется использование несложных фигур
в дизайне и следить за четкостью контуров, которые призваны подчеркнуть
эфирность и невесомость. Кроме того, такие лаконичные объекты успешно
имитируют сенсор, вызывая желание к взаимодействию с объектом (призыв к
нажатию). Однако легкость элементов не равна простоте дизайна в целом – это
относится только к контурам и очертаниям. В результате, все, что видит
пользователь, ему понятно, и он может с легкостью этим пользоваться.
9
Петроченков А., Новиков Е. Идеальный Landing Page. Создаем продающие веб-страницы.
Издательство: Питер, 2017. С. 225 [10].
Источник: https://baza.diplomsite.ru/previewfile/756