Презентация для студентов специальности 09.02.07 "Информационные системы и программирование" на тему: "Информационный дизайн сайта: практические рекомендации"

Информационный дизайн

Мультимедийный контент. Сайт

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

Каким должен быть дизайн сайта?
Уникальным и запоминающимся, но не вычурным, картинка не должна отвлекать внимание от содержания, а наоборот помогать ориентироваться на странице и подчеркивать самое важное.

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

Концепция сайта — первый шаг в создании веб-дизайна

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

На этом шаге необходимо принять решения по множеству аспектов:

1) выбрать структуру сайта: одностраничный лендинг или многостраничный многофункциональный сайт,
2) обозначить целевую аудиторию,
3) изучить существующие сайты конкурентов, проанализировать сильные и слабые стороны,
4) заказчику нужно максимально обозначить свои идеи и представления. Для этого можно составить два списка веб-страниц, которые нравятся и абсолютно не подходят,
5) обозначить предпочтительную цветовую гамму и определиться с самим дизайном с учетом существующего фирменного стиля компании-заказчик

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

«Дизайн создается для людей»

Надо держать эту мысль в голове на протяжении всего времени работы над проектом. Как только дизайнер услышал тематику будущего сайта, он должен представить тех людей, которые будут им пользоваться.
Можно Придумать пару-тройку персонажей (будем так их называть) и объективно оцениваем их возраст, место проживания, характер, предпочтения, образ жизни и даже то, как они выглядят.

Если смотреть на дизайн сайта в совокупности, правило, которому он должен соответствовать — это целостность. Все блоки на сайте должны являться частью единого целого. Нужно располагать элементы на сайте так, чтобы они принадлежали к одному выбранному стилю. Нельзя создавать несочетаемые между собой компоненты.

Например, если мы делаем ссылку синего цвета и подчеркнутой, все ссылки на сайте оформляются аналогично. Если мы делаем кнопку с тенью на главной странице, то все кнопки на сайте должны быть с тенью. Также к некоторым другим элементам обязательно нужно применить тень.

Следующее правило грамотной композиции — подчиненность.
Любой элемент на сайте должен быть обоснован. Почему мы выбрали данный цвет? Зачем мы сделали шрифт такого размера? Для чего мы добавили вон ту маленькую черточку?
И так далее. На все эти вопросы вы должны дать точный и ясный ответ.

Все составляющие сайта должны быть похожи на то, что человек видит в реальной жизни

Всё, что создано природой, практически не имеет острых углов.
Старайтесь для своего сайта выбирать более сглаженные формы
 Либо разбавлять слишком «агрессивные» детали более «спокойными»

Акцент в графике

Ни одна композиция не будет выполнять своих функций без расстановки акцентов и контраста.
Акцентами в веб-дизайне, в большинстве случаев, выступают кнопки, заголовки и какие-либо изображения. Самое важное — не перепутать все компоненты и правильно их ранжировать.
Если кнопка на сайте для главной услуги синяя, то к дополнительным услугам мы делаем кнопки менее контрастными. Например, можно оставить синей обводку, но заливку у кнопки сделать белой

Акцент в графике

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

Весь этот мир человек воспринимает в цвете с самого рождения.
Куда бы мы ни посмотрели, везде мы видим цветную картинку. Поэтому визуальное восприятие — самое первое, что вызывает определенные ассоциации у пользователей.
Каждый дизайнер должен об этом знать и «использовать» чувства людей во благо хорошего дизайна.

Прежде чем подбирать цвета, нужно задать себе несколько вопросов

У каждого человека ассоциации с цветом разные. Каждый воспринимает все по-своему. Существуют группы цветов, которые воздействуют на пользователя одинаково практически всегда.
Красный — смелость, опасность.
Зеленый — цвет жизни, умиротворенности.
Синий — свежесть, легкость.
Желтый — энергия, радость.
Белый — доброта, чистота.
Черный — стабильность, строгость, уверенность.

Какой вариант лучше?

Для многих компаний главными цветами являются цвета логотипа.

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

Фоновый цвет очень важен при информативном сайте. Он не должен отвлекать пользователя от чтения. Подбираем такой оттенок, который будет снимать нагрузку с глаз и не раздражать своим присутствием.
Вспомогательный тон — один из оттенков главного фона. Помогает визуально разметить другие блоки на странице. Вспомогательный цвет показывает отличие второстепенных действий от основных. Его главная задача отделить основной цвет от других.

Цветовая Спектрограмма

https://www.materialpalette.com/

https://color.adobe.com/ru/create

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

Типографика

Шрифты с засечками (Serif) — часто используются для сайтов, связанных с историей, модой, архитектурой. Встречаются также на новостных порталах, так как имитируют газетный шрифт.
Шрифты без засечек (Sans-Serif) смело можно использовать на сайтах с различной тематикой.
Акцидентные шрифты — графичные шрифты, почти всегда используются только для заголовков.
Рукописные шрифты — шрифты, имитирующие написание от руки. Их можно использовать для заголовков и не очень больших абзацев.

Типографика

У каждого шрифта есть свое семейство (Font Family) - гарнитура. Гарнитура — совокупность шрифтов, которые объединены определенным стилем и имеют различное начертание.

Типографика

Шрифты имеют кегль — величину в пунктах, трекинг — равномерное расстояние между буквами, кернинг — избирательное расстояние между буквами.
Когда на странице появляется блок с текстом, для него задается интерлиньяж — расстояние между строками текста. Иногда им пренебрегают, из-за чего создается ощущение сжатости текста, который сложно прочитать.

Типографика

После того как вы подобрали нужную вам группу шрифтов, нужно их применить для всех заголовков и подзаголовков

Типографика в заголовках. Для более значимых мы применяем шрифт крупнее (например, для УТП), остальные подзаголовки делаем меньше:

Сколько шрифтов использовать?

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

Он просто не поймет, где нужно остановить свой взгляд, и полностью весь текст вряд ли прочтет. Для одного сайта используем максимум три шрифта, лучше вообще один. При этом нужно менять его начертание или вес.

Какой вариант лучше?

Какие цвета подобрать для текста?

Цвет шрифта относительно фона должен быть контрастным. Есть одно простое правило, которое действует безоговорочно:
Белое на черном, черное на белом.
Если фон светлый, для текста используем темные цвета.
Если фон темный, для текста используем светлые цвета.

В типографике существует правило: внутреннее ≤ внешнее.

Расстояние между словами должно быть больше, чем расстояние между буквами.
Расстояние между строками должно быть больше, чем между словами.
Расстояние между абзацами должно быть больше, чем расстояние между строками.

Проверка заказчиком

Исправление возможных ошибок и недочетов, добавление элементов

Потренируемся?

Клининговая компания
Дом отдыха на берегу реки
Строительство и ремонт домов/квартир
Фирма по предоставлению услуг дизайна интерьера
Пожарная служба
Магазин по продаже элитных мужских костюмов
Театр
Авиакомпания
Ферма
Школа каратэ

Долги

Ресторан
Автосервис
Обувной магазин
Фитнес-клуб
Магазин по продаже цифровой техники и аксессуаров
Риэлторская компания
Магазин про продаже мягкой мебели
Магазин строительных материалов
Караоке-бар