olga-olga

7 лет назад

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

Курс «Введение в специальность» , конспект лекций 3-ей недели.
Условия проекта Академия

Введение в визуальный дизайн

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

иллюстрация

Работа над макетами занимает 90 % времени работы веб-дизайнера.
Многие начинают ее с макета главной страницы. Можно назвать несколько причин – она первая, она самая сложная и потому должна быть самой проработанной. На работу с ней уходит большая часть времени, а остальные страницы делаются по единому шаблону, который она задает.

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

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

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

Ограничения по навигации - горизонтальная ограничена шириной экрана, а вертикальная (вниз-вверх) ограничений не имеет.

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

Инструменты и ресурсы

Ресурсы

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

Ключевые инструменты для дизайнера – сетка, шрифт и цвет.

Типографика

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

Типы шрифтов

Антиква - переработка письма инструментом (узким пером), живые шрифты - Serif (Засечки) - хорош в наборе для удобочитания больших текстов
Гротеск - сконструированные шрифты, сделанные циркулем и линейкой, геометрические - Sans-Serif или Gothic
Брусковые - выполнены по принципу гротесков, но с выходами из прорисовки линий - Slab-Serif (Слэбы)
Рукописные – эмулируют надпись от руки - Script
Моноширинные - у всех букв одинаковая ширина - сейчас используются как атмосферные шрифты – Monospaced
Каллиграфия - по сути, не является шрифтом, но это инструмент типографики, который нужно учитывать - сочетается почти со всем
Леттеринг - текстовую информацию превращаем в изображение

Гарнитура шрифта – семейство начертаний шрифта, имеющих общие стилевые особенности. В данной гарнитуре шрифты могут отличаться размером (кеглем), начертанием (прямой, курсив и др.), насыщенностью (светлый, полужирный и др.).

Кегль — высота буквы от самого нижнего элемента до самого верхнего.

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

Интерлиньяж — расстояние между базовыми линиями.

Трекинг — это у нас расстояние между буквами, но не двумя конкретными, а всеми вместе в наборе. Он может быть разреженный (положительный), плотный набор (отрицательный) и нормальный (нулевой).

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

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

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

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

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

Задачи при подборе шрифтовых сочетаний

Функциональная - акциденция (акцентирование) и набор основного текста
Стилистическая – передает атмосферу и эмоции.

Как бы нам ни нравилась эстетика шрифта, функциональность первична.

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

Нам известно, что еще со времен Древнего мира люди научились подмечать закономерности в размерах объектов и явлений и применять их для упрощения построений.

Характерным примером является правило золотого сечения, когда отрезок делится на две части с таким расчетом, чтобы вся величина относилась к большей части так же, как большая относится к меньшей. Это отношение примерно равно 1,6 (в житейском варианте – 3:5:8). Другой вариант – числа Фибоначчи - последовательность чисел, таких, что каждое следующее является суммой двух предыдущих.

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

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

Модульная сетка – это инструмент, который с одной стороны держит дизайнера в рамках, с другой помогает, высвобождая время.
Ее использование позволяет проектировщику быстро понимать и адаптировать

габариты элементов,
положение элементов на макете.

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

Виды сеток

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

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

Принцип построения сетки

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

иллюстрация

Работа с цветом

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

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

Есть набор цветовых моделей — RGB, CMYK, HSB и LAB.

RGB — это аддитивная цветовая модель, изначально цифровая, то есть там где у нас цвета излучаются из устройства.
CMYK — cyan, magenta, yellow, black – цифровой показатель в диапазоне 256, который отражает процентное содержание каждой из составляющих.
HSB - hue, saturation и brightness — тон, насыщенность, яркость. Тон — это на цветовом круге то направление, та цветовая составляющая, которую мы выбираем. Saturation — степень насыщенности цвета. Brightness — это параметр темного и светлого.
LAB - lightness и два параметра цветовых A и B.

Сочетание цветов

Для грамотного сочетания цветов есть определенный набор механик и принципов. Залог успеха – знание принципов и частая практика.

Инструмент для проверки сочетаемости цветов - цветовой круг, который отражает таблицу перехода цветов и их насыщенности. Гармоничные сочетания находятся на концах отрезка, проходящего через центр (контрастные цвета – комплементарное сочетание), а также треугольников (равностороннего или равнобедренного) и прямоугольников. Такие сочетания называются соответственно триада и тетрада.
Аналогичное (аналоговое) сочетание, когда цвета расположены в близлежащих секторах круга.
Черный – это полное отсутствие цвета, белый – это смесь всех цветов. Поэтому они сочетаются со всеми цветами.

Задачи, решаемые цветом

эмоциональные,
функциональные.

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

Блочность информации

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

Ключевые атрибуты блочности

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

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

Разделители – декоративные элементы, подчеркивающие блочность и усиливающие акценты.

Плашки и врезки акцентируют текстовые блоки наиболее ярко.

Оптические компенсации

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

Общие рекомендации по компенсации

Задать общие правила для всех элементов интерфейса
Анализировать референсы с точки зрения теоретической базы
Смотреть на работу с точки зрения критика: что хорошо, что плохо, почему так сделано
Сохранять себе заметки
Практиковаться