Академия. Дизайнер интерфейсов. Введение в специальность. Конспект 3 недели.

На третьей недели курса "Дизайнер интерфейсов. Введение в основы" Максим Павлов знакомит нас с визуальным дизайном.

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

90 % времени работы веб-дизайнера составляет работа над макетами.
Многие думают, что главной всегда является первая страница, но это ошибка. На примере СМИ сайтов, показывается, что главной является страница с конечным материалом, вот она и получается  стилеобразующей. А уже наработанная стилистика накладывается на оставшиеся страницы. 

Страницы можно разделить  на два типа: 

1. Ключевые внутрянки (над ними нужно чуть больше подумать, проработать логику, показать различные состояния);
2. Типовые внутренние страницы (тут уже ничего изобретать не надо, просто все делается по общему типу).

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

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

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

Как совет, Максим Павлов предлагает всегда равняться на топовых дизайнеров, постоянно расширяя свои границы, а не только наблюдать примеры баннерной рекламы в метро и т.п.

Ключевые инструменты для создания макета.

1. Сетка.
2. Шрифт.
3. Грамотная работа с цветом.

Основные понятия типографики.

Типографика - это искусство работы со шрифтом, составления гармоничных и удобочитаемых форм.

Следующий раздел полностью посвящен разбору примеров плохой типографики.

Выбор и сочетания шрифтов.

Шрифт может задавать характер и выбирать его следует исходя из атмосферы проекта (романтическая, военная, кулинарная).

Функции гарнитуры.

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

Остальной раздел посвящен разбору примеров сочетания разных шрифтов.

Модульные сетки.

Виды сеток.

1. Блочная, весь текст внутри, в рамках одного блока (книжная страница)
2. Колоночная сетка, в рамках одной экранной формы нам нужно работать с разнородной информацией.
3. Модульная сетка, когда появляются горизонтальные разделения.
4. Иерархическая, когда к стандартности добавляется композиционная красота.

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

Принципы построения модульной сетки.

1. Определение габаритов, которыми мы ограничены (разрешение, размеры носителя, ориентация).
2. Определяемся с модулем и микромодулем. Модуль зависит от контента. Микромодуль – это минимальная неделимая величина. Они должны быть, желательно, кратны.
3. Определяем колоночную вертикальную сетку.
4. Переворот на 90 градусов.
5. Сделать разлиновку.
   

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

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

Сочетание цветов.
Возможность грамотного сочетания цветов - есть определенный набор механик и принципов.

Принципы сочетания цветов по цветовому кругу.

1. Комплементарное сочетание;
2. Триада — сочетание 3 цветов;
3. Аналогичное сочетание;
4. Раздельно-комплиментарное сочетание;
5. Тетрада — сочетание 4 цветов;
6. Квадрат.

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

Блочность.
Блочность — это объединение элементов по определенным признакам, выстраивание иерархии между ними.  На что взгляд падает в первую очередь, потом во вторую и т.д.?
Ключевые атрибуты блочности:

1. Размер элемента;
2. Расстояние между элементами;
3. Цвет элементов (цветовое маркирование);
4. Форма элементов.
   

Далее разбираются примеры правильной работы с информацией по принципу блочности.

Что было наиболее интересным и впечатляющим на данной неделе курса?
Курс этой недели оказался полностью практическим. Было трудно составлять конспект, потому что теоретических основ практически не было. Вся информация была для меня новой. Я познакомилась с таким понятием, как типографика. Особенно интересным был раздел по сочетанию цветов, т.к. эти знания можно применить абсолютно везде, от ремонта до подбора гардероба.