Вам наверняка приходилось слышать пожелания вроде этого: "Только я хочу, чтобы всё было сделано в едином стиле!". Или: "Пусть будет какой-нибудь такой тёплый, ламповый стиль".
Что скрывается за этими словами? И как этого добиться? Об этом поговорим сегодня.
Пример из соседней отрасли
Давайте, для начала, отвлечёмся от интерфейсов и посмотрим на вот эту картинку.
Попробуйте ответить, в каком стиле выполнена эта комната?
Даже если вы далеки от дизайна интерьеров, вы, вероятно, скажете, что это - лофт. Как вы это поняли?
Скорее всего, на эту мысль вас натолкнули роскошные стены из "необработанного" кирпича.
Но что именно делает эту комнату стильной? Какие приёмы мешают вам подумать, что это недостроенный сарай, посреди которого стоит мебель и лежит ковёр?
Гармония и стиль достигаются за счёт множества неброских, но поддерживающих друг друга элементов. Присмотритесь к мебели, светильникам, лестницам, окнам, - и вы увидите, что все они содержат тонкие металлические детали. Эти детали выглядят одинаковыми, или очень похожими.
В этом интерьере есть и другие повторяющиеся, поддерживающие друг друга детали. При желании вы легко их найдёте сами.
Этот пример позволяет нам нащупать и сформулировать ещё одно фундаментальное правило дизайна:
Давайте немного пофантазируем и получим следствие из этого правила. Представьте, что оконные рамы выкрашены в цвет слоновой кости а на окнах светлые занавески в мелкий цветочек.
Лестница более массивная, деревянная, со скруглёнными перилами. Вместо стеллажей и полок - деревянные, крашенные в светлые цвета шкафы на изогнутых ножках. Деревянный дощатый пол с лоскутными ковриками? К какому стилю вы отнесли бы такой интерьер?
Лофт уже не был бы так очевиден. Это был был бы более деревенский стиль, прованс.
Это помогает нам сформулировать следствие:
Что всё это значит?
Если вы хотите сделать стильное, интересное, целостное решение, то найдите какие-нибудь графические элементы и повторяйте их на протяжении всей своей работы.
От того, какие элементы вы выберете, зависит то, как пользователь будет воспринимать ваш продукт. Какие эмоции он будет испытывать.
Как это работает в IT
Технология создания IT-продуктов такова, что повторения всегда возникают, хотим мы того, или нет. Использование CSS делает повторения неизбежными и очень трудно найти сайт, где их нет вовсе.
Мы давно привыкли к одинаковым цветам ссылок и кнопок. Информационные блоки выглядят однотипно. Шрифты, кегли и цвета текстов повторяются, ну и так далее. Список можно продолжать.
Как же применить принцип повторения в IT, если он и так выполняется, как будто сам собой? Есть два типа ошибок, из-за которых всё ломается.
Ошибка проектировщика
Бывает, что "мина" закладывается на этапе проектирования интерфейса. Создатель интерфейса берёт и делает один и тот же элемент по-разному. Это не только разрушает стиль, но и снижает эргономику.
1. Самый простой пример такой ошибки мы видели совсем недавно, на портале Работа в Росии, но не заостряли на этом внимание. Вот эта ошибка:
У некоторых полей есть функция вызова справки. Справка появляется, если нажать на знак вопроса. Что-то заставило проектировщика рисовать эти вопросики в разных местах.
2. Другой яркий пример такой ошибки - по-разному позиционировать кнопки, похожие по назначению.
Представьте, что у вас есть интерфейс, в котором много всплывающих окон или форм ввода данных. И на всех этих формах есть главная кнопка, которая может называться по-разному: "Отправить", "Сохранить", "Выбрать", "Добавить", ... . У этих кнопок есть две общие черты:
- все они - подтверждают те или иные действия пользователя и как-то дальше направляют результат этих действий;
- возле них практически всегда есть кнопка "Отмена".
Так вот, представьте, что эти кнопки на разных формах стоят в разных местах. В галерее схематический пример, как это бывает:
Ошибка графического дизайнера
Ошибка дизайнера - игнорировать принцип повторений или относиться к нему небрежно. Если вам нужно по-настоящему стильное решение, то недостаточно просто покрасить кнопки в одинаковые цвета, надо постараться побольше.
Надо найти или создать (например, нарисовать) красивые элементы. Выделить какие-то фишки. И придумать, как их можно повторить.
Если дизайнер с этим не справляется - получается откровенно скучный и пресный вид. А то и хуже.
Пример. Настало время историй.
Когда нашей компании исполнилось 20 лет, мы решили создать юбилейный логотип. Требования к логотипу были такие:
- Логотип должен показывать, что мы работаем уже давно и не собираемся останавливаться.
- Логотип должен оставаться актуальным в любое время, а не только в год двадцатилетия.
- Логотип должен содержать отсылки к IT-сфере, к разработке программного обеспечения.
- Логотип должен быть современным, стильным и лаконичным.
- Логотип должен быть таким, чтобы его можно было набрать на клавиатуре без всяких графических редакторов.
- Юбилейный должен гармонично сочетаться с главным логотипом. Потому что мы его любим и не собираемся от него отказываться.
Мы придумали концепцию и сделали эскиз, который отдали на доработку дизайнеру. Вот наш набросок на салфетке :-)
На первой итерации дизайнер дал нам вот это. И очень обиделся на то, как мы встретили результат его труда. :-)
После некоторого количества итераций, пояснений и разбитых клавиатур мы получили то, что хотели:
Что мы сделали?
1. Растянули логотип и выровняли края.
2. Повторили толщину линий. Два параллельных отрезка на главном логотипе и буквы на юбилейном имеют близкую толщину.
3. Повторили мотив с двумя тонкими параллельными линиями, которые расположены недалеко друг от друга. Знак равенства и буква F поддерживают мотив горизонтальных линий на главном логотипе.
4. Ну и цвет, конечно.
Вывод
Кто ещё умеет повторять красиво?
1. Полистайте инстаграм Департамента экономики Ростова-на-Дону. Посмотрите, как оформлены посты. С повторениями там полный порядок. :-)
2. Загляните в ближайшее отделение сбербанка и посмотрите их рекламные листовки и раскладушки. Содержимое в них - так себе. Только не берите кредит!
Выглядят они отлично.
Кому надо поработать над дизайном?
Есть что улучшить на сайте Минздрава Ростовской области.
Наш вариант ответа и новая статья будут здесь на следующей неделе.
UPD: а вот и наш разбор.
Автор: Светлана Хомякова