Дизайн — это не ебануть заливку
Есть простой способ посмотреть на дизайн чуть полезнее, чем через «красиво / некрасиво».
Надо спросить: что здесь дорого?
Не обязательно в рублях. Дорогими могут быть краска, место, время человека, пиксели первого экрана, производство, обслуживание или возможность что-нибудь поменять через полгода.
А уже потом имеет смысл рисовать.
Потому что дизайн — это не минимализм. Не белый фон. Не Helvetica. Не обязательные два шрифта. И уж точно не умение заполнить пустое место заливкой, сверху положить текстуру, добавить градиент и тем самым предъявить заказчику доказательства проделанной работы.
Дизайн — это управление ограничениями.
И иногда хороший дизайн действительно означает убрать половину нарисованного.
А иногда — наоборот, сделать вещь нарочито сложной, декоративной и насыщенной деталями.
Вопрос не в количестве деталей. Вопрос в том, что они делают и сколько за них придётся платить.
Сначала спросите: что здесь дорого
Возьмём ресторанное меню.
На первый взгляд всё нормально. Чёрный фон, огромные жёлтые плашки, фотографии еды. Ярко, заметно, даже какая-то айдентика есть.
Но у этого дизайна есть физический носитель.
Его надо печатать.
Причём не один раз. Меню нужно два на стол, столов может быть двадцать. Оно пачкается, рвётся, теряется. Меняются цены. Исчезают блюда. Появляются новые. Поставщик перестаёт возить нужный продукт. Ресторан понимает, что сорок позиций ему не нужны, и оставляет двадцать пять. А через год вообще решает поменять кухню.
И каждый раз принтеру предлагается сначала залить значительную часть листа чёрным, а затем столь же щедро потратить жёлтый.
Хотя цвет здесь действительно нужен практически только фотографиям еды.
Цвет блюда содержит информацию: человек смотрит, что ему принесут.
А жёлтый прямоугольник за надписью «ГОЙ ВИТ» никакой дополнительной информации не содержит.
Хотите жёлтый фон — возьмите жёлтую бумагу.
Хотите серый — возьмите серую бумагу или используйте лёгкий растр.
Хотите белый — вообще прекрасно. Белый у принтера бесплатный.
Комментарий к фото. Цвет имеет смысл там, где он что-нибудь делает. Здесь фотографии от него выигрывают, а декоративные заливки просто превращают оформление в регулярную покупку картриджей.
Но самое прекрасное случилось потом.
Автор через год лично наблюдал это же меню с приклеенными скотчем новыми ценами. В несколько слоёв.
Потому что перепечатать весь комплект полноцветных меню, заново заламинировать и разложить по столам — это уже не «распечатать бумажку». Это тысяч тридцать рублей.
И ресторан совершенно рационально изобрёл более дешёвую систему управления контентом.
Бумажку и скотч.
С технической точки зрения решение безупречно: обновляется за минуту, не требует лицензии, работает без электричества. С эстетической — именно поэтому стоимость изменений стоило посчитать до отправки макета в печать.
Получилось замечательно: дорогие полноцветные заливки, которые должны были сделать меню солиднее, через несколько итераций привели к тому, что оно стало выглядеть как объявление на двери ЖЭКа.
Это важный момент.
Проектируйте не первую версию. Проектируйте вторую
Первую версию почти чего угодно можно сделать красивой.
Вопросы начинаются потом: сколько стоит изменить цену, убрать блюдо, добавить новое, заменить фотографию или обновить расписание.
Стоимость изменения — тоже характеристика дизайна.
Иногда дешёвая распечатка — правильный дизайн
А вот другой подход.
Практически офисная распечатка. Немного цвета, нормальная типографика, прозрачный карман.
Да, это не произведение полиграфического искусства.
Зато массаж подорожал с 40 до 45 тысяч тенге — открыли исходник, поменяли число, распечатали новый лист.
Всё.
Комментарий к фото. Дешёвое изменение — тоже свойство дизайна. Здесь расходником является лист бумаги, а не всё изделие целиком.
Причём дешёвая печать совершенно не обязана выглядеть дёшево. Здесь ощущение порядка и аккуратности создают не дорогие материалы, а типографическая иерархия: заголовки, группы, интервалы, колонки, точки-лидеры.
Это особенно важно для документов с большим количеством информации.
Не надо украшать таблицу.
Надо сделать так, чтобы человек мог ей пользоваться.
Дорогой дизайн тоже можно сделать ремонтопригодным
А вот полноценное дорогое меню: деревянная конструкция, кольца, огромные полноцветные фотографии еды.
И здесь цвет совершенно оправдан.
Фотография еды продаёт еду. Если креветка выглядит вкуснее благодаря качественной полноцветной печати — краска работает.
Но интереснее конструкция.
Страницы на кольцах.
Исчезли креветки — не надо выбрасывать всё меню.
Поменялся раздел — заменили несколько листов.
То есть дизайнер вполне может сделать дорогую вещь, не превращая каждое последующее изменение в повторную покупку этой дорогой вещи.
Комментарий к фото. Не делайте расходником то, что расходником быть не обязано.
Отсюда получается очень полезный принцип:
дорогим и сложным делаем стабильное; дешёвым и заменяемым — изменчивое.
Деревянная папка может прожить пять лет. Кольца — пять лет. Лист с ценами — три месяца.
И это нормально.
Сложность макета и стоимость его эксплуатации — вообще разные вещи
Иногда сам макет может быть натуральным адом.
Вот вам закривленный PDF, набранный Congress EF, для которого дизайнер собственноручно дорисовывал какие-нибудь лигатуры в Illustrator, Sketch или древней Xara Designer Pro X.
Открывать исходник страшно. Передать другому дизайнеру практически невозможно. Возможно, через десять лет даже программу, в которой это было нарисовано, придётся искать в музее.
И это может быть совершенно нормальным решением.
Если перед нами афиша, которую один раз напечатали тиражом и забыли, совершенно неважно, насколько экзотическим способом был получен конечный PDF.
Можно хоть каждую букву руками рисовать.
Производственная единица здесь — готовый плакат.
Но если тем же способом устроено ресторанное меню — поздравляем: вы только что встроили дизайнера в бизнес-процесс ресторана.
Сложность лучше размещать в той части системы, которая меняется реже всего.
А сколько стоит хороший шрифт?
У Gloria Jeans технология выбрана практически идеально.
Белый лист. Чёрная печать. Огромный текст. Никаких фотографий и полноцветных заливок.
Такой плакат можно менять хоть каждый день.
Но выглядит он немного как объявление «ПРОПАЛ КОТ». И это обидно не потому, что плакат дешёвый. Он как раз правильно дешёвый.
И вот здесь начинается самое интересное: улучшить его можно практически бесплатно.
Другой шрифт не требует второго картриджа. Другой кегль — тоже. Разрядка бесплатна. Отступ бесплатен. Композиция бесплатна. Линейка практически бесплатна. Перевернуть текст — бесплатно. Сделать огромную цифру — бесплатно.
То есть технология выбрана правильно, но возможности этой технологии практически не использованы.
Перед нами не слишком дешёвый дизайн.
Перед нами недоиспользованный бесплатный дизайн.
А как можно было сделать
Gloria Jeans — сеть. Дизайнер не должен вручную верстать каждое объявление для каждого магазина. Можно один раз сделать внутренний генератор плакатов.
Продавец вводит произвольный текст, а система сама выбирает размер, переносы, начертание и собирает фирменный А4. Сегодня сюда можно подключить и нейросеть: она раскладывает текст по заранее заданным правилам и отдаёт несколько готовых вариантов. Продавцу остаётся выбрать и нажать «Печать».
Вместо того чтобы учить продавцов графическому дизайну, сеть один раз делает инструмент, который не позволяет сделать некрасиво. Каждый следующий плакат по-прежнему стоит лист бумаги и немного чёрного порошка.
Когда цветной картридж ещё не изобрели
А вот коллеги примерно век назад располагали бумагой, чёрной краской и куда меньшими техническими возможностями.
И этого им хватало, чтобы устроить натуральный аттракцион. Никаких слоёв с режимом Multiply, библиотек градиентов и мокапа на бетонной стене. Приходилось заниматься типографикой.
На плакате множество размеров, ширин и начертаний. Но информация имеет настолько сильную иерархию, что считывается примерно за секунду:
СУД → ПРОСТИТУТКОЙ → СИФИЛИСОМ.
А если стало интересно — можно узнать, где и когда.
Комментарий к фото. Когда цветной картридж ещё не изобрели, а привлечь внимание уже было надо.
И это хороший ответ на современное правило «используйте не больше двух шрифтов».
Нет такого закона.
Хоть десять используй, если понимаешь, кто из них кому начальник.
Один цвет — это ограничение производства, а не дизайна
Вот ещё пример.
Портрет. Венок. Рамки. Указующие персты. Вертикальный текст. Несколько гарнитур. Чудовищные перепады кегля. Декоративные разделители.
Минимализма здесь не ночевало.
Но большая часть выразительности получена не дополнительными красками, а типографикой и композицией.
А здесь вообще один чёрный цвет.
При этом в ход идёт практически весь наборный цех: узкий акцидентный шрифт, жирные брусковые, антиква, линейки, орнаменты, разные ширины набора и перепады масштаба.
И оно работает.
Один цвет — это ограничение производства. Один шрифт одного размера — уже решение дизайнера.
Иногда достаточно второй краски
И обратный пример.
Не обязательно выбирать между «чёрно-белое» и «полноцветное».
Посмотрите, сколько делает здесь один дополнительный красный.
Им не залили фон. Не нарисовали красную текстуру. Не устроили градиент.
Им создали второй уровень информации.
Это вообще очень полезный способ думать о цвете: не «какого цвета сделать макет», а что именно должен делать цвет.
Различать категории? Показывать состояние? Привлекать внимание? Кодировать информацию? Создавать настроение?
Если ответа нет, возможно, цвет действительно не нужен.
Это не значит, что надо топить за минимализм
Потому что вот интерьер, сознательно перегруженный деталями.
Бирюзовая стена. Нарисованный город. Несколько цветов. Светящиеся вертикальные линии. Шестиугольные конструкции со мхом. Деревянное грильято. Разная мебель. Светильники. Велосипед с цветами.
Если применять правило «уберите всё лишнее», половину надо демонтировать.
Только интерьер станет хуже.
Потому что здесь сложность выполняет функцию — создаёт пространство и атмосферу.
А главное, эту стену не печатают заново два экземпляра на каждый стол.
Один раз покрасили. Один раз сделали конструкции. Один раз провели подсветку.
И следующие несколько лет через помещение проходят тысячи людей.
Комментарий к фото. Сложность сама по себе ничего плохого не означает. В данном случае её стоимость амортизируется годами.
Поэтому залить стену бирюзовым — совершенно разумно.
Заливать бирюзовым каждую постоянно меняющуюся бумажку — уже вопрос.
Дизайн можно оплачивать рабочим временем
Есть способ сделать производство очень дешёвым. Например, дизайнер придумывает для ресторана фирменный штамп на салфетках. В презентации всё прекрасно: обычная салфетка, ручная печать, немного крафта.
Потом ресторан начинает работать. Кто-то должен взять салфетку, поставить штамп, отложить, взять следующую. И так несколько сотен раз. Каждый день. Обычно этим занимаются официанты, когда появляется свободная минута.
Клиенту от салфетки нужны две вещи: вытереть с лица еду или промокнуть пролитый борщ. Фирменный штамп не помогает ни с первым, ни со вторым.
Получается довольно изящная экономика: стоимость печати снизили, просто вместо типографии за неё теперь платят рабочим временем сотрудников. Дизайнер получил деньги один раз, а официанты ещё несколько лет вручную производят ту хуйню, которую он продал как дизайн.
А как можно было сделать
Если брендированные салфетки действительно нужны — заказать их сразу с печатью. Если тираж маленький и печать не окупается — купить хорошие обычные салфетки. В обоих случаях официант занимается гостями, а не полиграфическим производством.
А вот другая наклейка
У «Додо Пиццы» на упаковке тоже есть бумажка. Только она нужна. На ней маркировка заказа — сотрудникам проще не перепутать коробки. Заодно этикетка заклеивает упаковку как пломба: клиент видит, что после сборки коробку не открывали.
Одну операцию всё равно надо было выполнять. Ей просто дали вторую полезную работу.
Причём к таким решениям приходят не сразу, и это нормально. Круглая пицца прекрасно живёт в квадратной коробке: квадратную проще производить, хранить стопкой и перевозить. После того как решение найдено, оно выглядит очевидным.
Иногда вообще надо использовать другой носитель
Большое меню над кассой живёт по другим правилам.
Его видно издалека. Площадь ограничена. Фотографии еды продают. Макет проживёт достаточно долго.
Полноцветная печать здесь вполне может быть оправданной.
Но если ассортимент и цены меняются постоянно?
Тогда, возможно, проблема вообще не решается полиграфией.
Экран дороже листа бумаги в момент покупки.
Зато изменение цены не требует печати, ламинации, доставки нового плаката и человека со скотчем.
Сегодня появился бургер — добавили. Завтра закончился — скрыли. Цена изменилась — поменяли число.
Если содержание меняется чаще носителя — отделите содержание от носителя.
Но экран не делает дизайн автоматически хорошим
А вот великолепный антипример.
Перед дизайнером экран.
Цвет практически бесплатный. Контент можно менять. Есть интерактивность.
И всё это технологическое богатство было использовано для того, чтобы нарисовать пять одинаковых серо-голубых батонов с тенями.
Потому что у цифрового интерфейса другое ограничение.
Здесь дорогая вещь — внимание и когнитивная нагрузка пользователя.
Человеку надо понять, чем отличаются пять вариантов, выбрать нужный и не ошибиться.
Поэтому вопрос «сколько стоит этот голубой градиент?» здесь бессмысленен.
Он стоит ноль рублей.
Вопрос другой: какую задачу он решает?
Если никакую, перед нами просто голубой градиент с тенью. Технологически бесплатный — и всё равно лишний.
А вот карта обязана быть сложной
Теперь попробуйте применить к этому макету правило «уберите всё лишнее».
Дорожки убрать нельзя. Вольеры нельзя. Входы нельзя. Туалеты нельзя. Парковку нельзя. Животных желательно оставить.
Получается довольно сложная картинка.
Потому что она описывает сложный объект.
И здесь цвет полезен: он помогает разделять территории, выделять объекты и ориентироваться.
Это хороший пример разницы между сложностью и визуальным шумом.
Сложность содержит информацию. Шум — нет.
Иногда цвет — это сам продукт
Предложить печатать такую карточку одним чёрным цветом ради экономии означало бы экономить именно на продукте.
Иллюстрация — часть продукта. Цвет участвует в визуальной системе игры. Изображение помогает распознаванию. Карточку покупают в том числе как физический красивый объект.
Здесь экономия на качестве полноцветной печати означает экономию на том, за что покупатель платит.
То же относится к упаковке, альбому, постеру, каталогу искусства и куче других вещей.
Поэтому никакого универсального «меньше цвета = лучше» нет.
Есть только вопрос:
что мы получаем за потраченный ресурс?
IKEA: дизайн знает, что сломается первым
А вот почти идеальная инженерная конструкция.
Она буквально разделена на слои с разным сроком жизни.
Пластиковый держатель живёт долго. Белый лист содержит название товара, комплектацию и цену. Красная часть сообщает, где его забрать.
Поменялась цена — заменили бумажку.
Переставили товар — заменили бумажку.
Сам держатель продолжает висеть.
И никакой попытки сделать ценник произведением искусства. IKEA не рассчитывает, что цена 3699 переживёт пластиковый держатель, и не пытается высечь её в граните.
Зато 3699 видно издалека. Название видно. Артикул есть. Ряд и место есть.
Комментарий к фото. Хороший дизайн знает, какая его часть устареет первой, и заранее делает именно эту часть дешёвой для замены.
Это не компромисс дизайна.
Это и есть дизайн.
В вебе всё то же самое, только картриджей нет
На главной Trusty Tools у нас есть пять рекламных баннеров.
Самое простое решение — поставить их друг под другом.
Но первый экран главной — дорогая недвижимость.
Там одновременно конкурируют навигация, товар, преимущества, реклама и следующий экран.
Поэтому пять баннеров собраны в слайдер с анимацией.
Мы платим сложностью разработки и интерфейса за экономию дефицитного пространства.
А в статьях стоят те же пять баннеров.
Только там никакого слайдера нет.
Они спокойно идут друг под другом.
Потому что если человек уже дочитал статью до рекламного блока, ещё тысяча пикселей вертикального скролла ничего принципиально не стоит.
Не обломится.
Отсюда довольно простое правило:
Слайдер нужен не потому, что слайдеры красивые. Слайдер — это плата сложностью интерфейса за экономию пространства. Если пространство ничего не стоит, платить за его экономию незачем.
Карго-культовый дизайн копирует решение. Нормальный дизайн сначала выясняет, какую проблему это решение вообще решало.
Это полезная привычка не только для слайдеров. Очень многие «паттерны» перестают быть паттернами, как только исчезает исходное ограничение.
Не спрашивайте, как сделать проще
Универсального правила «делайте проще» не существует.
Иногда надо сделать проще.
Иногда — сложнее.
Иногда надо убрать цвет.
Иногда надо выкрасить всю стену в бирюзовый, прикрутить к ней пять коробок со мхом и подсветить всё это снизу.
Иногда пять баннеров надо засунуть в сложный анимированный слайдер.
А иногда надо просто вывести те же пять баннеров подряд и не создавать разработчику и пользователю проблему ради решения другой проблемы, которой здесь нет.
Полезнее другое правило:
Не спрашивайте, как сделать дизайн проще. Сначала спросите, что здесь дорого.
Дорого может быть производство.
Может быть каждый следующий экземпляр.
Может быть квадратный метр помещения.
Может быть пиксель первого экрана.
Может быть секунда внимания.
Может быть разработка.
Может быть обслуживание.
Может быть следующее изменение.
А какая-нибудь визуальная сложность при этом может стоить буквально ничего.
Поэтому хороший дизайн не обязательно минималистичный. И совершенно не обязательно дешёвый.
Хороший дизайн тратит дорогой ресурс только там, где получает за него что-то взамен.
Ещё точнее:
Проектируйте стоимость не первой версии, а второй.
Первая версия почти всегда красивая. Вторая показывает, был ли перед вами дизайн или просто картинка.
Хороший дизайн заранее понимает, что дорого, что дёшево, что постоянно, что изменится завтра и за что вообще имеет смысл платить.
Иногда после этого получается белый лист с чёрным текстом.
Иногда — стена с мхом, подсветкой и велосипедом.
Иногда — полноцветная коллекционная карточка.
А иногда — кнопка на экране.
И вот здесь можно вернуться к заголовку. Если цвет помогает продавать еду, различать категории или ориентироваться — используйте цвет. Если сложный интерьер создаёт атмосферу на годы — усложняйте. Если анимация экономит действительно дефицитное пространство — анимируйте.
Но если единственное объяснение решения сводится к тому, что в редакторе есть инструмент «Заливка», — не надо ебануть заливку.
