Твори как дизайнер
Что выделяет дизайнеров среди остальных? Где «секретный соус»? Никаких загадок, ответ кроется в использовании базовых принципов. На самом деле, обращаясь к ним, мы могли бы сделать отчёты, презентации, таблицы и схемы, которые создаём, притягательнее. 17 октября на ITSubbotnik #7 обсудили, какие базовые подходы дизайна стоит использовать, чтобы сделать мир вокруг проще, доступнее и красивее.
Автор поста стремится вдохновить и сподвигнуть, но не научить. Заметка и беседа, вместе—желание неравнодушного коллеги, энтузиаста поделиться собственным опытом и наблюдениями. В комментариях сбоку от текста есть ссылки на книги для погружения. В конце поста есть слайды и видео выступления.
Почему важно окружать себя красотой
Николай Константинович Рерих часто приводил слова Платона:
«Если вы будете окружать себя красивыми вещами, то под их воздействием сделаетесь сами прекраснее и лучше, а это в конце концов приблизит к общей гармонии жизни».
Теперь становится ясным, почему важно обращать внимание на то, какие вещи нас окружают.
Часто бывает следующее: смотрим на отчет, таблицу, презентацию, схему и чувствуем, что сделано плохо. Но что изменить, что исправить, чтобы стало лучше, мы не знаем. Или, напротив, чувствуем, что выполнено хорошо, но не знаем, как выразить, почему классно.
Для того, чтобы делать красиво, не нужно быть художником. Достаточно обратиться к опыту дизайнеров и уделить внимание нескольким базовым принципам, которые внесут порядок в работы, которые создаём каждый день. Об этом заметка.
Почему творить как дизайнер под силу каждому?
Дело в том, что дизайнер и художник — это не одно и тоже.
Художник создаёт эпоху, передаёт её настроение, приправляя своим собственным стилем, видением.
Дизайнер решает поставленную перед ним задачу.
И вот это — ключевое отличие. Художник сам ставит себе ограничения. Дизайнер творит в рамках, которые ему обозначили. И здесь важно понимать, что когда есть ограничения, работать проще. Нам есть, от чего отталкиваться. Ограничения упрощают работу.
Вот как устроен типичный дизайн-процесс. Беспорядок в начале постепенно переходит в осмысленный порядок в конце. Естественно, внутри рамок не все и сразу становится понятным. Но сам процесс обрамлен не зря: мы видим, где есть границы.
Как дизайнеры устраняют хаос? Используют базовые принципы, чтобы получить что-то осмысленное. Дизайнер ≠ художник. Дизайнер решает поставленную задачу и пользуется известными подходами.
Почему знать о дизайне может быть выгодно?
Разберёмся с помощью метафоры. Все крупные инновационные компании типа IDEO, Apple, Google гоняются за T-образными личностями. Что это? Это такая метафора компетентного и разностороннего специалиста, собранная из двух линий. Вертикаль показывает, что человек — мастер своего дела (программист, инженер, дизайнер). Горизонталь — что он настолько энтузиаст, что может учиться у других людей и перенимать их навыки. Примеры: архитектор-психолог, инженер-медик, дизайнер-программист и тд.
Чаще всего нам приходится иметь дело с I-личностями. Мастерами своего дела и только. Но представьте, насколько вырастает ценность человека в команде, в проекте, который обладает смежными навыками.
Зачем ходить далеко? Допустим, нам приходится работать в команде с дизайнером. Зная некоторую базу в этой сфере, нам будет легче:
— оценивать работу,
— доносить мысли,
— предлагать идеи,
— презентовать работу.
Возможно, в критической ситуации мы бы даже смогли принять решение в отсутствие дизайнера и быть уверенными, в нашем выборе.
Так три вопроса «Почему» и три ответа на них, приводят нас к базовым принципам, которые обсудим. Начнём с принципа близости.
Принцип близости
Мы воспринимаем то, что расположено рядом друг с другом, как нечто связанное или как единое целое.
Правило: давайте группировать то, что связано.
Представим семью, которая гуляет по парку. Отличный денёк и даже не пасмурно (не то, что в Питере).
Внезапно всё поменялось. И теперь уже отец с сыном идут вместе, рядом с ними какая-то женщина.
Вот мама идёт с ребёнком, а рядом с ними какой-то чувак.
Здесь молодая пара подумывает о ребёнке.
Эту группировку объектов и называют принципом близости. Когда его нарушают, это приводит к занимательным казусам.
К пиву подают свежую рыбку.
На 20-ом развороте необычно подходят к вопросу питания.
Или, к примеру, в одном из зоопарков Ростова предлагают пожаловаться на высокие тарифы ЖКХ.
Всего этого можно было избежать. Давайте уделим внимание вещам, на которые стоит обращать внимание.
Радио-кнопки. Проблема: не понятно, какая кнопка сейчас выбрана. Решение: отделить кнопки друг от друга.
Заголовки между абзацами. Ниже часть статьи про T-личность, о которой было сказано выше. Проблема: не очевидно, какой заголовок к какому абзацу относится. Решение: заголовки набирать рядом с абзацем, которому принадлежит. (Хотя читатель в данном случае сообразит, что к чему, лучше потратить его усилия на сам текст. В нем ведь тоже ещё нужно разобраться. Пусть текст не отвлекает, хороший дизайн — незаметный дизайн).
Расстояние между полями. Ради шутки в офисе решили повесить плакат с разными фактами о компании. Затея интересная: оттуда узнал, что компания выпускает больше 500 студентов в год. Это клёво, идеи Тодда Роуза о замене современного высшего в действии. Или, что есть свой R&D центр, который называется «Гараж» и в котором можно развивать и пробовать новые технологии. Но есть в этой карте что-то, что смущает.
Если приглядеться, то замечаешь несостыковку: с 23-го шага перепрыгиваешь на 35-ый.
Дизайнер хотел, чтобы выглядело согласованно, поэтому здесь есть дорога, которая связывает два шага. Но принцип близости перевешивает.
Проблема: с 23 шага попадаешь на 35. Решение: поменять цифры и согласовать поля. Что получилось? Нам удалось устранить недоработку и при этом пролить меньше чернил — макет остался тем же.
Джинсы и подписи. Этот пример взял из совета Ильи Бирмана. На одной из старых версий сайта Ламоды пользователи угадывали, какая из пар джинсов как называется. Проблема: подписи на одинаковом расстоянии от картинок. Решение: сократить расстояние между связанными подписями и картинками.
За теорией близости лежит цель — организовать информацию так, чтобы сделать её доступной, легкой для считывания. Легко скомпонуем, это быстрее прочитают и лучше запомнят.
Правило: давайте группировать то, что связано.
Принцип выравнивания
Мы сгруппировали, то есть организовали, объекты на странице. Теперь наша задача связать их визуально, чтобы создать равновесие, целостность работы.
Правило: давайте выравнивать элементы, относительно других элементов.
Когда есть несколько вещей, разбросанных на столе — это вызывает чувство беспорядка. Все потому, что вещи лежат произвольно.
Если выровнять их, беспорядок исчезнет. И, кажется, это лучшая метафора, которая объясняет принцип выравнивания.
Однако иногда так легко порядок не навести. Вот и приходится чувствовать себя перфекционистом в аду. Скажите, почему люк не поправили?
Почему ручки задом наперёд?
Почему писуары установили без лийнеки?
Во всех примерах нарушен принцип выравнивания. Откуда возникает дискомфорт? Человеческий глаз так устроен, что умеет распознавать гармонию. То есть общее впечатление может быть вполне себе ОК, но внутри мы в сомнениях. Так мы чувствуем, что гармония нарушена. Посмотрим на примеры.
Я.ру. Однажды открыл минималистичную версию поиска от Яндекса. Издалека все казалось нормальным, но конец полоски смущал. Когда приблизил, стало ясно, что не так. Проблема: нарушили выравнивание. Решение: выровнять, сделать одним целым.
Презентация. Здесь ничего приближать не придётся, но проблема так сразу не очевидна. Будем разбираться.
Проблема: элементы не согласованы относительно друг друга, что-то по центру, что-то слева. Решение: выровнять элементы. Давайте начертим линии, чтобы не быть голословными. Предлагаю взять за правило расчерчивать на линии, чтобы добиваться порядка в работе.
Мы видим, заголовок выровнен с логотипом, что хорошо. Обратим внимание на линию у блоков текста. Да, текст по центру, но из-за плавных границ нету строгости. Давайте попробуем выровнять текст по правому или левому краю, чтобы добавить аккуратности работе, сделать её более собранной. Посмотрим, что получится.
Стало опрятнее. А если приглушить шум (яркий цвет и заглавные буквы), то станет ещё сильнее.
Дизайнеры используют в работах сетки и направляющие, чтобы сделать работу собранной.
Таблички и выравнивание. Давайте закрепим вопрос про выравнивание ещё на одном примере, о котором рассказывает Эркен Кагаров из студии Артемия Лебедева в своей беседе. На картинке две таблички: посольства Швейцарии и России.
Выравнивание по левому или правому краям даёт ассиметрию, а по центру — симметрию. Первое символизирует движение, динамику, второе — покой, статику. Складывается впечатление, что на первой картинке что-то изменяется, есть жизнь, а на второй — застой.
Выровнять слева или справа — сделать функциональным. Выровнять по центру — сделать торжественным, притягивающим внимание.
Справа и слева — просто. А по центру — сложно.
Давайте выравнивать по правому или левому краю, чтобы показать движение. Давайте выравнивать по центру, чтобы сделать акцент, привлечь внимание. Давайте избегать выравнивания по ширине совсем, иначе получится как на стенде в Линдуловской роще. Удивительное красивое место, в котором почему-то забыли уделить внимание стендам, их внешнему виду. Вероятно, подумали, что красоты здесь и так достаточно.
Опросник для детей. Когда делали приложение для детей с ограниченными возможностями, то пришлось иметь дело с большим количеством опросников о проверке состояния. Скажу честно, сверстаны они без заботы о человеке. И это можно исправить. Давайте посмотрим.
Бросается в глаза выравнивание по центру. Слишком громко. Запредельно слышно. От линий похоронное настроение — всё обречено.
Стоит выровнять по левому краю и становится строже. Будет не совсем честно использовать другие принципы, чтобы улучшить работу. Поэтому предлагаю оставить как есть, но к линиям мы ещё вернемся.
Принцип выравнивания требует действовать осознанно. Теперь не будет никакого хаоса на странице, ведь мы будем сами требовать от себя порядка. Если выровнять все объекты на странице, то появится та целостность, которой работе не доставало.
Правило: давайте выравнивать элементы, относительно других элементов.
Принцип повторения
Мы организовали элементы и связали их визуально. Теперь повторим отдельные объекты, чтобы укрепить связи между отдельными частями. Говоря другими словами, добавим работе законченности, придадим целостный вид.
Правило: давайте повторять некоторые элементы дизайна.
В любой хорошей работе мы сумеем отыскать, как один и тот же элемент обыгрывается несколько раз. Или, наоборот, один и тот же приём используется несколько раз, но с разными элементами. Это делает работу консистентной, помогает сохранить преемственность во всей работе. Обратимся к примерам.
Узнаваемость. Яндекс, как и многие другие компании использует один стиль в иконках для своих сервисов. Это в большинстве своём палитра из красного, синего, желотого, черного и белого цветов. Из форм в основном круги и треугольники. Тени плоские, неразмытые. Вместе это помогает достичь узнаваемости: повторение добавляет преемственности.
Контекст. iOS и другие операционные системы используют одинаковые заголовки, полоски меню и элементы управления, чтобы создать особое окружение. Человек по расположению этих элементов определяет, где он находится, что можно сделать, а что нет. В этом сила повторения.
Эмоции. А вот как с помощью повторения можно добиваться выразительности и шуточного эффекта.
Усиление. Повторение несёт в себе большой потенциал. Кажется, многие в Петербурге видели баннеры Йоты с рекламой. Эффектно и доходчиво.
В ораторском искусстве существует классная мудрость на этот счёт: «Скажи. Скажи ещё раз. Повтори то, что сказал». Возможно, вы будете удивлены: наша с вами беседа построена с опорой на эту мудрость. Мы начинаем с правила, потом повторяем его другими словами, потом снова обращаемся к этому правилу. Это и есть принцип повторения.
Закрепим на практике.
Ещё слайд из презентации. Через текст сложно продираться. Однако что стоит отметить, так это группировку — кажется, кто-то использовал принцип близости.
Повторение работает с разными элементами, как мы уже убедились ранее: текст, форма, цвет. Но мы начнём с привычного. Попробуем повторить заголовок?
Применим ко всем группам. Заметим, что заголовок может и должен быть говорящим, передавать суть всего текста под ним. Так, мы экономим время на чтение и избавляем от ненужной работы. Человек изучает презентацию, останавливается и углубляется там, где нужно.
Группу из одного предложения переместим под заголовок. Это будет посылом или «месседжем» слайда. Так придали работе законченный вид.
Опросник для детей. Вернемся к опроснику и сделаем его человечнее.
Для начала оставим только текст и картинку.
Применим принципы близости и выравнивания.
Добавим объекты и повторим их.
Сравним.
Стало свежее, добрее и человечнее. Конечно, только тестирование и реальные условия скажут, подходит это решение или нет.
Повторение делает работу целостной. А это, в свою очередь, создаёт интерес.
Правило: давайте повторять некоторые элементы дизайна.
Принцип контраста
Контраст создаёт иерархию, отделяет главное от второстепенного.
Правило: давайте делать некоторые элементы контрастными, чтобы они привлекали внимание.
Посмотрим на контрасты в сравнении. Начнём с текста. Возьмём за исходный текст формулировку правила. Что мы могли бы попробовать для начала? Сделать заголовок жирным. Теперь он явно выделяется из-за своей насыщенности. Назовём такой контраст «обычный — жирный».
Затем мы могли бы увеличить размер заголовка. Такой контраст назовём «маленький — большой».
Мы могли бы обойтись меньшим и не расходовать чернил совсем, а только отодвинуть заголовок от текста. Так тоже возникает контраст, «с отступом—без отступа». Давайте разберёмся почему? Если присмотреться, то становится ясным, что текст правила — это ни что иное, как четыре линии на одном расстоянии, сгруппированые вместе. Расстояние между заголовком и текстом существенно больше, чем расстояние между строками в самом тексте. Так, в дело вступает принцип близости. И это примечательно, потому что базовые подходы дизайна не существуют раздельно, в вакууме. Напротив, они всегда идут рука об руку. В хорошей работе мы найдём каждый из этих принципов.
Вернеёмся к тексту. Мы также могли бы выделить отдельное слово или несколько цветом, чтобы привлечь внимание. Этот контраст назовём «с цветом—без цвета».
Каждый из примеров выше помогает добиться одного: приковать внимание к конкретному элементу. Мы создаём напряжение и тем самым добиваемся того, чтобы человек сравнивал, сопоставлял объекты между собой.
Мы видели много примеров с текстом и заголовком. Тут будет важно поделиться некоторым наблюдением: заголовок и текст работают особенно хорошо, если они набраны разными шрифтами. И это ещё один контраст. Подобрать такую пару — непростая задача. Однако существует немало ресурсов, на которых энтузиасты делятся сильными сочетаниями. Один из таких — fontpair.co.
На сайте редставлена большая коллекция бесплатных шрифтов, которые можно брать для документов, презентаций, схем и смело использовать.
Поговорим про контраст в цвете. Искать сочетания цветов также непросто. Скажу по секрету, я не видел ни одного дизайнера, который бы подбирал цвета для своей работы, сидя и смешивая краски на палитре. Как в случае и со шрифтами есть ресурсы, где энтузиасты собрали и собирают палитры удачных цветов решений. Не удивительно, что есть ресурсы, где цвета подбирает нейронная сеть. Например, coolors.co
Возможно, вы заметили, что конкретно этот принцип мы обсудили совершенно иначе, нежели другие. Это и есть контраст, когда мы осознанно нарушаем правило, чтобы привлечь внимание человека.
Правило: давайте делать некоторые элементы контрастными, чтобы они привлекали внимание.
Подведём итог
В любой хорошей работе мы сумеем отыскать все четыре принципа, которые идут рука об руку. За близостью и группировкой следует выравнивание. Там где порядок, нужна целостность, никак без повторения. Но работа была бы скучной, если бы не контраст.
Улучшим таблицу
Давайте сейчас последовательно применим полученные знания о базовых подходах и посмотрим, как можно улучшить таблицу. Компания Darkhorse Analytics создала вирусное руководство к действию. И оно донельзя лучше подходит для объяснения.
Итак, у нас есть таблица.
Уберём всё лишнее. Добавим полоску, чтобы визуально отделить названия столбцов от их содержимого.
Применим принцип выравнивания. Причём текст выровняем по левому краю, а все количественные значения и даты по правому.
Избавимся от переносов, напишем текст в одну строку.
Применим принцип близости, сгруппируем связанные объекты.
Уберём повторяющийся текст, цифры округлим, множитель на тысячу вынесем в заголовок.
Добавим контраст и выделим строчку, чтобы привлечь внимание. Повторения добились засчёт выравнивания и группировки.
Что дальше
Дизайнер ≠ художник. Именно поэтому дизайн более доступен, чем мы думаем.
Дизайнер решает поставленную задачу с помощью базовых подходов. Чтобы получать максимум от их использования, нам предстоит:
—практиковаться, пробовать;
—тестировать и устраивать мозговые штурмы (спрашивать у коллег, что не так и что не нравится, принимать обратную связь, исправлять делать лучше);
—самим давать обратную связь.
Закончим нашу беседу той самой цитатой, которую цитировал Рерих:
«Если вы будете окружать себя красивыми вещами, то под их воздействием сделаетесь сами прекраснее и лучше, а это в конце концов приблизит к общей гармонии жизни».
