47
Рис. 2.2. Стартовая страница курса «Грамотный визуал»
При нажатии в шапке меню на ссылку «для кого» (см. рис. 2.3.)
пользователь переходит на страницу с описанием модулей курса, сроков
исполнения и его преимуществ. На странице расположены: иллюстрация в виде
планшетки с описанием курса, мотивационный текст и окно «задать вопрос,
нажимая на которое можно перейти в чат (см. рис. 2.4.).
Рис. 2.3. Переход на страницу раздела «для кого»
Рис. 2.4. Диалоговое окно
При нажатии в шапке меню на ссылку «Что вы получите» (см. рис. 2.5.)
пользователь переходит на страницу с описанием профессий и навыков,
которым будут обучать на курсе. На странице расположены: шесть
иллюстраций и текстовое описание к каждому модулю.
48
Рис. 2.5. Переход на страницу раздела «что ты получишь»
При нажатии в шапке меню на ссылку «тарифы» (см. рис. 2.6.)
пользователь переходит на страницу с тремя тарифами курса, к каждому из них
нарисована векторная иллюстрация и представлено текстовое описание с
модулями курса, а также в конце страницы под каждым тарифом есть кнопа
регистрации.
Рис. 2.6. Переход на страницу раздела «тарифы»
При нажатии в шапке меню на ссылку «программа» (см. рис. 2.7.)
пользователь переходит на страницу с описанием каждого модуля курса. На
ней расположены несложные графические элементы в виде блоков и кружками,
обладающие функцией раскрывать каждый модуль и прочитать полное его
описание (см. рис. 2.8.).
49
Рис. 2.7. Переход на страницу раздела «программа»
Рис. 2.8. Раскрытие программы курса
И последняя страница представляет частые вопросы, которые задают
ученики и потенциальные клиенты, и ответы операторов курса. Содержит
графические элементы в виде всплывающих окон и текстом в них (см. рис. 2.9).
50
Рис. 2.9. Переход на страницу «часто задаваемые вопросы»
2.3 Выбор и обоснование шрифтового оформления
Выбор шрифта - важный момент при создании собственного сайта. Для
сайта оптимально выбрать два шрифта – один для заголовков, другой для
текста. Это практично для пользователей, им будет сразу интуитивно понятно,
где находится заголовок, а где основной текст. И дизайн самого сайта будет
выглядеть более целостно.
Для начала необходимо определиться с видом шрифта, а конкретно:
гротеск или антиква. Обычно шрифты, именуемые антиквой, используются в
печати, а для веб-дизайна чаще используются шрифты без засечек, потому что
на экране засечки превращаются в помехи, которые только усложняют
восприятие текста, в отличие от бумаги, на ней такие шрифты воспринимаются
хорошо, при чтении глаза устают меньше. При этом необходимо оставлять
оптимальный межстрочный интервал, чтобы глаз посетителя мог без труда
отделять одну строчку от другой.
Сайт должен быть читабельным. Если выбирать между
оригинальностью идеи и удобством для посетителя - любой веб-дизайнер не
51
раздумывая выберет второе. Необходимо было выбрать шрифты, которые
отвечали бы параметрам заказчика, были удобно читаемыми и не перегружали
сайт. С заказчиком было решено, что шрифты должны быть без засечек,
плавными и не привлекающими много внимания, так как в виде основного
акцента присутствуют авторские иллюстрации.
Были утверждены два шрифта:
Заголовки – Gilroy (см. рис. 2.10.), начертание bold, 36 пт, #333333.
Основной текст – Noah (см. рис. 2.11.), начертание bold и regular, 20 пт,
#333333.
Параметры шрифтов:
Название – Gilroy
Автор – Радомир Тинков
Поддержка кириллицы – Да
Поддержка латиницы – Да
Категория – Sans Serif
Начертания – Thin, Thin Italic, Ultra-Light, Ultra-Light Italic, Light, Light
Italic, Regular, Italic, Medium, Medium Italic, Semibold, Semibold Italic, Bold,
Bold Italic, Extra Bold, Extra Bold Italic, Black, Black Italic, Heavy, Heavy Italic
Лицензия – бесплатно
Рис. 2.10. Пример шрифта Gilroy
Название – Noah
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].