Веб-дизайн / 7.3

“

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

Глоссарий

Для успешного освоения материала рекомендуем вам изучить следующие понятия:

Отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений

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

Термин, используемый в маркетинге или рекламе для обозначения группы людей, объединенных общими признаками, или объединенной ради какой-либо цели или задачи

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

Разница между элементами, которая достигается с помощью цвета, оттенков, размеров, форм, расстояния и выравнивания

Графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определенного размера и рисунка

Элементы, выступающие в шрифте относительно концов букв и символов

Видеолекция

Конспект

Зачем нужен дизайн

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

Кто такой веб-дизайнер

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

Целевая аудитория

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

Целевая аудитория — это те, на кого ориентирован ваш продукт, те кто будет заинтересован в его использовании.

Целевая аудитория различается по:

возрасту
полу
национальности
образованию
месту проживания
работе
и многим другим факторам.

Как отличаются сайты под разные аудитории

В зависимости от вашей аудитории, характера мероприятия и даже времени года зависит правильное направление дизайна.

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

Дизайн для премиум сегмента, наоборот — черные цвета и острые углы.

Юзабилити

Юзабилити (удобство использования) — уровень сложности интерфейса. Это применимо к любой информационной системе — сайту, программе или приложению.

Где применяется юзабилити

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

В чем измеряется

Уровень юзабилити — не абстрактная величина, он имеет единицу измерения, которая определена в международном стандарте ISO 9241−210.

Характеризуется количеством физических и умственных усилий, которые тратят пользователи на достижение своей цели, и называется стоимостью взаимодействия.

Дизайнеры стремятся снизить стоимость взаимодействия настолько, насколько это возможно.

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

Контраст

Контраст очень важен, ведь если вы сделали недостаточно контрастное изображение, то пользователь, скорее всего, даже не увидит, что вы сделали.

Шрифты

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

Размер шрифта

1. Размер шрифта зависит от количества текста.

Если текста очень много, то около 18 px будет достаточно для комфортного чтения.
Если текста очень мало, то нужно сделать его крупнее — до 20−22 px.

2. Нужно соблюдать иерархию.

3. Заголовок должен визуально отличаться от обычного текста.

4. Не стоит забывать о межстрочном интервале, особенно когда текста много.

С засечками или без

1. С засечками.

Книги
Газеты
Печатные издания

2. Без засечек.

На компьютере

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

Изображения для сайта

Тексты с картинками читают больше, чем тексты без картинок. Просто накидать картинок — недостаточно, нужно уметь их использовать.

Важно

Самое главное — картинка должна быть качественная

Также она должна быть осмысленная и по теме. Стоит избегать использования клише. Картинки должны задавать настроение и быть в тренде.

Где брать картинки

Искать картинки можно на бесплатных стоках, фотобанках, нанимать фотографов и покупать у них.

Подборка бесплатных стоков:

Оптимизация картинок

При использовании картинок на сайтах нужно помнить и об оптимизации, ведь если у вас на сайте выводятся новости с превью, то, как правило, размер превью-элемента не больше 300 пикселей, поэтому не нужно туда запихивать FullHD картинку.

Важно

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

Выравнивание контента

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

Отступы

Не нужно прижимать блоки и абзацы текста друг к другу. Нужно не бояться делать отступы.

Цвет

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

Сервисы, которые помогут

Подбор цвета

Для всех новичков выбор цвета — всегда проблема. Справиться с этим помогут сервисы для подбора цветов.

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

Идеи сайтов

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

Шрифты и иконки

Если вы ищете не идею целиком, а какие-то отдельные части, например иконки, шрифты или микроанимацию, обратите внимание на сайт dribbble.com, он является крупнейшей платформой для дизайнеров, которая позволяет делиться своей работой в Интернете.

Общие сервисы

Помимо всего этого есть behance.net — это социальная медиа-платформа, принадлежащая компании Adobe. Там часто демонстрируются не только работы, но и презентации, описывающие историю создания работы.

“

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

Дополнительные материалы

Полезные статьи
Типографика за 10 минут

Теория близости: главное правило дизайна

Всё про кнопки

Изучение
Школа веб-дизайна WDI

Design Prosmotr

Упражнения

Тренажеры
Игра на цветоощущение

Игра на внимательность

Интерактивное задание

Тест