Как дизайнеру развить чувство прекрасного и научиться применять его в работе? | Часть 2

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

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

Например, шрифт.

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

Поэтому стоит обращать внимание на детали. Например, на межбуквенное расстояние. За это отвечают трекинг и кернинг.

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

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

А какими бывают шрифты?

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

Гротеск — нет засечек и почти отсутствует разница в толщине штрихов. Если она и есть, то совсем незначительная. Возможные ассоциации: футуристичность, лаконизм, логика, современный стиль.

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

Рукописные — имитируют письмо от руки. Форма букв обычно более округлая, острых углов меньше, есть соединительные штрихи между буквами. Также характерен наклон осей букв вправо. Возможные ассоциации: ручная работа, легкость, непринужденность, быстрые заметки, непосредственность, иногда женственность.

Если шрифт — это конкретный набор символов, то объединение сходных по стилю шрифтов — гарнитуры. Внутри гарнитуры шрифты различаются начертаниями. Например, Helvetica — это гарнитура, а Helvetica Bold — шрифт.

Типографическая система

Что еще отличает хорошую типографику? Наличие системы. Это иерархия всех текстовых стилей, которые применяются в макете. Система нужна для порядка и преемственности в макетах.

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

Типографика швейцарской школы дизайна— лучший пример системности. В основе этой школы — философия Баухаус и ее принцип: «Форма следует за функцией». Основы швейцарцев в дизайне: выравнивание макетов по модульной сетке, акцент на типографике и ассиметричная композиция. В их работах прослеживается четкая иерархия объектов.

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

Советы по работе с типографикой:

• Изучите, какие бывают шрифты.
• Ознакомьтесь с классикой шрифтов.
• Почитайте книгу «Живая типографика» и блог Александры Корольковой;
• Погуглите, что такое типографическая система и как ее строить. Приходите в Chulakov School за практикой!
• Вдохновляйтесь работами швейцарской школы.

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

Какие бывают сочетания?

• Комплементарное. Когда цвета расположены друг напротив друга. Один цвет — основной, второй — дополнительный. Хорошо подходит для расстановки акцентов.

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

• Классическая триада. Строим равносторонний треугольник и получаем три контрастных цвета.

• Аналоговая триада. Сочетание трех соседних цветов, расположенных рядом на внешнем круге. Эта палитра — спокойная и сдержанная. Подойдет, если нужны мягкие переходы между цветами без резких акцентов.

• Тетрада. Сочетание четырех цветов по углам квадрата. Получается две пары дополнительных цветов.

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

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

Цветовое кодирование

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

Советы:

• Ознакомьтесь с цветовой теорией Иттена — это база.
• Смотрите сайт Dribbble в разделе Colors. Там можно воспользоваться поиском по цветам.
• Придерживайтесь принципа 60–30–10, где 60% — ваш основной тон, 30% — второстепенный цвет и 10% — акцентный цвет.
• Используйте до трех основных цветов и несколько их оттенков.
• Сходите в галерею.
• Наблюдайте за природой.

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

Есть несколько проблем, связанных с вижуалами.

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

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

Советы по работе с вижуалами:

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

Грамотный текст дает +50 очков профессиональности. Как научиться лучше писать?

• Освежите правила орфографии и пунктуации, вспомните школьные правила.
• Почитайте блог Ильи Бирмана и «Пиши, сокращай» Ильяхова.
• Перечитывайте свои тексты, желательно вслух. По запинкам в речи и паузам, чтобы перевести дыхание, вы поймете, где текст нужно переписать. Проверяйте тексты на ошибки.
• Пишите по-человечески.
• Избегайте штампов и непроверенных суждений. Вместо «Ученые ломают голову над проблемой перенаселения» напишите «Ученые работают над проблемой перенаселения».
• Добавляйте точность. Вместо «Мы входим в 20-ку лучших компаний» напишите «Мы занимаем 15-е место».

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

Задайте себе вопрос: «Для чего я использую эти приемы?». Подумайте о клиенте и его потребностях. Типичный пример — работа, которую мы нашли на Dribbble. Красивая, яркая, но бесполезная для настоящего инвестора. Непонятно, какие значения находятся на закругленном графике. Дизайнер, который позаботился бы о смысле, сделал бы пики острыми и задал правильное направление.

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

Ставьте стрелочку вверх, если статья вам понравилась. Больше контента по теме UX/UI-дизайна вы найдете в нашем сообществе Вконтакте