Hi-Tech

Поиск и создание образов для дизайна «Яндекс.Еды», «Такси» и других проектов

Сначала я хотел понять, возможна ли методология в рамках хотя бы одного продукта. Десять лет я синтезировал из разных областей знаний методологию создания продуктов. А следом третий: отчуждаема ли эта методология от меня? Когда нашёлся кандидат на роль, возник следующий вопрос: возможна ли методология, общая для разных продуктов? Это я сейчас и проверю.

В закладки

Поделиться

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

А также о типографике, цвете, сетке и семантике, о подложке карт, тексте, об иллюстрации, о фото- и видеосъёмке, о компиляции всего этого в продукт.

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

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

С момента прошлого рассказа со мной произошли две вещи:

  1. Я переключился на новые продукты.
  2. И делал их параллельно.

Однажды я ехал в поезде, и соседом оказался преподаватель из университета (по совместительству масон). Знаете, есть термин «кроссплатформенный», а тут сталкиваешься с «кросспродуктовым». Примерная цитата ответа (простите, что взял одну из ваших газет, иначе я бы забыл весь наш разговор): На столе у него лежала стопка новостных газет от разных изданий и на разных языках — я поинтересовался, зачем ему столько.

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

Чем конкретно я занимался последнее время:

  • «Яндекс.Такси» — приложение для водителей, интерфейсы сателлитов.
  • «Яндекс.Еда» — концепция бренда.
  • DMS — логистика грузоперевозок.
  • Emex — экосистема инструментов вокруг рынка автозапчастей.

Пункты прилично разнесены: у каждого своя технология (Android, iOS, веб), свой контекст использования (устройство на столе, в руке, на панели автомобиля), своя аудитория (водители, курьеры, диспетчеры, аналитики, руководители компаний и голодные люди).

У каждого была своя команда: это люди не из разных этажей одной организации, а из разных индустрий (читайте, планет). Я застал каждый продукт на разных стадиях развития: «Такси» уже работало на высоких оборотах, DMS пробовал запуститься, а Emex перерождался.

К этому я мог сколько угодно готовиться, но пока не окунулся, сложно было воспринимать себя иначе, чем «дизайнер из команды "Яндекс.Поиска"»: у тебя в голове веб-технологии с их возможностями и проблемами, n-мерное пространство экспериментов, закон больших чисел, пробирки с оттенками синего и так далее. Обо что сразу бьёшься лбом: ценности, процессы и технологии у вас совершенно разные.

У нас есть лейауты — это оно?», «Вот зачем ты нагородил своих окон — смотри, какой есть jQuery-плагин». У других: «Учти, что на четвёрке тени не работают», «Высота строки не настраивается», «Давай раскатим и отзывы почитаем», «Что такое сетки?

А как декомпозировать собственный опыт? Так возникла интересная задача: ранее я декомпозировал интерфейсы. Разные проекты нуждаются в подмножестве моих экспертиз, и мне отводится определённая роль. Как отделить методологические находки от технологических, образные от графических? Кроме того, возникает риск стать вечным евангелистом единственной конфигурации (графического стиля, инфраструктуры — не важно), а это остановит и развитие, и спрос.

В своей работе я увидел три пласта.

  1. Образ.
  2. Модель.
  3. Технология.

Что я подразумеваю под этими тремя пластами на примере своих записей:

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

Образы

Читаем «Карту Птолемея» Герца Франка:

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

«Статьи, дневники, замыслы» документалиста Вертова:

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

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

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

  • Какую пропорцию отступов сделать.
  • В какой цвет покрасить основные кнопки.
  • Какую иллюстрацию заказать у подрядчика.
  • Каким тоном сообщить об ошибке ввода.
  • Как кадрировать снимок для баннера.

А результат после длинной череды микрорешений должен получиться цельным и производить нужное и однозначное впечатление. И не я один принимаю решения: почти всегда есть другие дизайнеры.

Так, любое решение, принятое в рамках образной системы координат, становится объяснимым — что сокращает споры и душевные терзания: Единый набор образов продукта в голове каждого дизайнера помогает принимать неслучайные решения, калибрует мысли и действия, указывает возможные направления (когда не перебираешь, а выбираешь).

Или он идёт читать книгу о художественной композиции и ставит «логотип» справа, а «навигацию» — по вертикали. Тогда он идёт и смотрит, как это сделано у других ребят, и ставит «логотип» слева вверху, а «навигацию» — по горизонтали. Потому что туман, туман в голове. Или он с подёрнутой влажной дымкой глазами ставит «логотип» где-то там, а «навигацию» — где-то сям. Тьма, и носится морозная пыль.

Почему заголовок капсом? А правда, проверьте себя и коллег, поинтересуйтесь любой мелочью в своём продукте: почему кнопка синяя? Почему мы с человеком на ты? Почему всё такое округлое?

— А вопросы уже можно задавать?

— Пожалуйста.

Мне вот надо, чтобы заказы росли. — Вся эта лирика ваша про образы как поможет моему продукту? Вон мы с друзьями наугад себя назвали, логотип мне мой ребёнок нарисовал, а интерфейс на Bootstrap собран. Просто, понимаете, если продукт держит нужную планку качества, всё остальное вообще не важно. И это не помешало нам выйти в лидеры.

— А на какой стадии ваш бизнес?

— Ну вот мы запустились и уверенно растем.

То есть вы пока беспрепятственно захватываете рынок, а не боретесь за долю. — Значит, вам пока никто не мешал. Первая: вы поделили рынок и поравнялись с конкурентами — как продолжать расти дальше? Впереди вас ждут минимум две задачи.

Вторая: когда вы все только начинали, вы имели контроль, сами принимали и сами исполняли решения; с ростом команды принятие и исполнение многих решений придется делегировать — как сохранить контроль?

— Если я объясню всем, почему кнопки синие, я сохраню контроль?

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

— А что с первой задачей?

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

Как я воспитывал в себе привычку поиска и анализа образов:

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

Но анализ найденных образов позволяет с минимальными потерями перенести их в инженерию и построить модель.

Этим, на мой взгляд, отличаются документальные и художественные продукты: первые «проникают в природу за образными открытиями», вторые эти образные открытия компилируют из контекста и переживаний (кстати, compilatio с латинского — кража). Почему я говорю «поиск и создание образов», почему не просто поиск?

По разным причинам внедрено не всё или не в том виде, но для описания методологии мне важно показать цельные картины. Дальше я начну показывать примеры своих работ с дотошным описанием процесса принятия решений. А какие могли быть причины:

  • Даже для логотипа неплохо иметь стопку примеров использования; логотип при этом могут взять, а примеры использования — нет.
  • Полезно бежать впреди паровоза, перебирать концепции, показывать команде разные варианты будущего.
  • У меня есть фетиш: не всегда делать только то, о чём попросили; или делать то, о чём не просили вовсе. Так веселее.
  • Ну и конечно, технологические компромиссы, устранение которых — отдельная работа.

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

Heartbeats by José González

"Heartbeats" from "Veneer" Website: http://found.ee/JGWebsite Mailing list…

soundcloud.com

Образы для «Яндекс.Еды»

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

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

В этой ситуации что такое хороший логотип? Образы коммуникации еще не сформированы, поиск общего языка с растущей аудиторией только начнется. Я вынес для себя такие проверочные вопросы.

  1. Живет ли знак в среде бренда? Или это наклейка в углу? Хотелось не выдумывать знак, а найти, рассмотреть: наблюдая за работой курьеров, за прилавками с едой, за посетителями в кафе. Не новую форму, а что-то, что лежит перед носом, но ты упорно это игнорируешь. Чтобы простой и очевидный знак рифмовался с простым названием сервиса.
  2. Нет ли перекоса в ту или иную метафору? «Яндекс.Еда» будет взаимодействовать со всеми кухнями и продуктами: если знак будет слишком десертным или слишком «восточным», или слишком фастфудным, это может усложнить дистрибуцию бренда на все ниши.
  3. Как много производных образов даёт знак? Если на старте в голову лезет не одна и не две ассоциации, то и дальше будет не сложно придумывать.
  4. Оставляет ли знак продукту запасы по ходам? Хорошо, когда есть возможность делать разную рекламу каждый сезон, где знак играет новую роль, сохраняя ассоциацию с брендом.

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

И вынимаю оттуда образ спирали.

Делов-то!

Выше мы взяли курс на универсальность, а наиболее универсальным я вижу оранжевый. Какой цвет выбрать для знака: с едой я могу связать оранжевый, зеленый и красный.

Покрытие по кухням (второй пункт).

Дальше я начинаю играть со знаком, смотреть, сколько производных я смогу из него вытянуть при беглом взгляде:

Продолжаю игру с образом тарелки. Буква «е», диффузия и тарелка (далее пункты три и четыре).

Дорожные знаки — ок, возможно, реклама на дороге

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

В верхнем левом углу происходит магия — тоже запомним

Позже обнаруживаем, что тарелка со спиральной текстурой — частое явление; закупаемся в Zara Home, фоткаем на память. Такой дешевый прием прокладывает мостик до любого кадра с тарелкой и впитывает его настроение— тоже отлично.

Одну из них снимем в ролике и заберем в интерфейс.

Про диффузию еще такой прием нашелся.

Спираль вкладывается в другую спираль — ход с масками тоже может пригодиться

Но тут я сделаю небольшое отступление про логотипы вообще. И осталась буква «е».

Да, их очень много вокруг и в будущем появится еще больше. Я не принимаю за логотип разваливающиеся (не склеенные образно) конструкции «знак и подпись». Это конец истории, а не начало. Но они слабые: их не вписать никуда кроме как в чистый лист с «охранным полем», скука какая. И мне куда приятнее работать с монолитными, крепко сбитыми знаками.

Либо со знаками и подписями, разнесенными по опорным точкам макета.

Поэтому е-спираль я ставлю внутрь «Яндекс.Еды» вместо точки.

Конечно, это не исключает использование знака и без логотипного шрифта.

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

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

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

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

Говорю ему: «Собралась у меня такая вот концепция, давай попробуем поснимать?» И сразу полезли вопросы: что, как и для каких контекстов? Видео и фото. Тут я работал в паре с Тарасом Шаровым (далее просто Тарас) — он у нас большой любитель поснимать. Образная концепция требовала развития, и я пошел искать референсы. Это просто еда, еда и руки, еда и люди, просто довольные сытые люди?

Из замученной спирали ответов на эти вопросы не вытянешь, но я запомнил раскиданные кадры с тарелкой и людьми:

Из зала полетели шутки про две основные потребности: в еде и сексе

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

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

Это помогло лучше понять правила игры: пленка, вспышка, нарочито неправильные углы съемки, псевдослучайное кадрирование и смакование деталей. Покопался в Pinterest, там нашелся король жанра — Юрген Теллер.

От вспышки в процессе отказались, от пережаренных контрастов тоже. Но мы не стремились в точности воспроизвести референсы — они скорее давали вектор, показывали, как ещё бывает. Тарас мне ещё рассказал про color grading — Instagram-фильтры для богатых; с помощью них (и не только) режиссеры добиваются узнаваемости фильма в каждом кадре.

Жалко, бургер под красной лампой никто не купит

Со этим багажом новых знаний и отсылок мы начали искать почерк фотографий «Яндекс.Еды».

Стало понятно, что надо следить, как ведут себя в кадре мясо и хлеб — на некоторых пленках котлета принимала трупный оттенок, а булка покрывалась пылью, несмотря на то, что остальные предметы в кадре смотрелись очень даже художественно.

И первая серия антиглянцевых фотографий для SMM получилась такой. Холодные краски, которые так классно и глубоко смотрятся в кино, убивали съедобность наших фотографий — поэтому остановились на теплых и ярких тонах.

Теперь интерфейс. Основное открытие: как только главным героем в кадре или в интерфейсе становится еда, мозг иначе воспринимает привычные вещи — я, например, вижу здесь сковородку.

Понаблюдав за подобными особенностями восприятия, я сформулировал принцип: не рисовать еду и не рисовать на еде. На практике это значит, что фильтры по кухням я сделаю не иконками, а миниатюрными фотографиями; а названия блюд и ресторанов напишу под фотками, а не поверх (добавил пункт в образную концепцию).

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

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

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

На этом моменте у вас должны возникнуть вопросы:

  • Как поддержать такое качество снимков для сотен и тысяч подключаемых ресторанов?
  • Не лишат ли светофильтры снимки разных ресторанов своей уникальности?
  • Как закладываться в фотографиях на изменения в дизайне приложения?

Получилось два документа, которые отвечают на поднятые вопросы. По ходу работы я просил Тараса все свои мысли записывать.

Жанровость

Что формирует… Пробуем подкапываться под тему жанровости с точки зрения формирования «правильных ощущений».

telegra.ph

Технология снимков

Прежде… Под технологией будем понимать способ поточного получения фотографий с нужными характеристиками.

telegra.ph

Пару слов о цвете (подробнее будет в моделях):

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

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

Вес слова не меньше, чем вся проделанная работа выше — то есть кривыми фразами можно как уничтожить впечатление, так и возвести его в квадрат. Отдельно расскажу о языке. Экран оживает в тот момент, когда начинает разговаривать. Характер продукта, его забота, его образы — во многом они там же, в языке.

Даже если вы не водите, все равно рекомендую скачать приложение, чтобы ощутить языковой контакт с продуктом. Посмотрите на «Яндекс.Драйв». И на всякий случай: я к «Драйву» отношения не имею, делает его мой друг Рома. Это забытое чувство.

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

Образная концепция, как я и обещал, получила развитие:

Это и была моя финальная презентация — телефон с прототипом на столе. И вот теперь спектакль целиком.

— У меня вопрос!

— Самое время.

— Вы всё это показали «Яндекс.Еде», и что она?

А по поводу всего остального: я предупреждал о своем фетише в самом начале. — Она взяла знак, чему я очень рад. Так вот это случай, когда меня никто об этом не просил — это важно помнить.

Когда им на голову падает другое приложение поперек всех планов — наивно полагать, что его так просто возьмут в работу. Второе: у ребят уже есть летящее приложение, которое было Foodfox. Я не знаю, как бы я поступил на их месте. Возможно, когда-нибудь что-нибудь.

— А в чем вы делали прототипы?

— Flinto.

— А блок-схемы?

— MindNode

Dave Harrington DJ set Live CMKY Festival 2013 by DaveHarrington

Listen to Dave Harrington DJ set Live CMKY Festival 2013 by DaveHarrington #np on #SoundCloud

soundcloud.com

Образы для «Такси»

Откуда этот мем про желтое такси? Сначала давайте разберемся с желтым. В Европе желтого такси не больше, чем черного или белого; а то желтое, что есть, выглядит невыразительно: оно то лимонное, то грязное, то с зеленоватым отливом. Из США, точнее, из Нью-Йорка.

Статистика подтверждает эти ощущения: существует корпорация PPG, один из мировых лидеров по производству красок и эмалей для всех видов транспорта; у ребят есть открытые данные, кто, когда и какую краску заказывает.

Это не я, это снова Тарас — у этого человека много неожиданной информации в голове вроде той, как грамотно себя вести, если начнется зомби-апокалипсис. Откуда я все это знаю?

Думаю, из-за бума урбанистики и социологии как способов борьбы с накопившимися проблемами мегаполисов; и я, кстати, рад наблюдать подобный процесс сегодня в Москве. Американцы годов с 1970-х полюбили стандартизацию всего на свете.

Гельветика в Нью-Йорке тоже мем

Насколько я понял, в 1967 году ребята выбрали для такси bold yellow (или цвет очень на него похожий) и красят им до сих пор.

Верхний левый квадрат (то есть самый популярный) из картинки про статистику выше

Безумно сложный и красивый. Этот цвет в лучах солнца можно поразглядывать на фотках все той же статьи.

За красотой, конечно же, стоит расчет видимости в сумерках. Но кого это волнует?

Воспроизвести это в интерфейсе не так-то просто: реальный цвет нестабилен, и наша память хранит богатый собирательный образ, а не #FFB000.

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

Мы назвали их Amber и Yellow и из каждого достроили цветовой ряд.

О цветовых рядах в палитре я подробно расскажу в разделе про модели, но вообще, это явление обычное для дизайн-фреймворков: те же Material design colors (они, кстати, тоже отличают yellow, amber и orange).

Вот как этот сложный желтый прорастает в интерфейсе «Таксометра»:

Три желтых на одном экране — кошмар дизайнера-отличника

У Amber есть особое свойство — держать форму на мелком масштабе, тогда как обычный желтый не выдерживает никакой критики.

На больших площадях (кнопки, плашки) цвета меняются местами: Amber становится слишком тяжелым, и на помощь приходит Yellow.

Эта цветовая пара может смело применяться и дальше, например, в значке «Такси».

«Таксометр»

Инструмент со сложной судьбой: Это инструмент для водителей такси.

А мы решили все-таки начать меняться. Если вы когда-нибудь сталкивались с b2b-продуктами или внутренними инструментами, то должны были привыкнуть к такой подаче. Но зачем трогать работающий механизм:

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

А я, как и все люди на планете, отдал GTA V Online минимум год своей жизни — и пока слушал просьбы ребят, в голове мелькали все эти картинки. Предстояло найти эстетику современного дружелюбного рабочего инструмента.

Уже один этот образ онлайн-игры рождает лавину «а можно же…»

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

Мне можно возразить, мол, а как же мобильные платформы.

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

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

Как? Что можно рассмотреть на этих примерах: всё как будто просто служит функции, обосновано исключительно функцией, но отовсюду сочится эмоция. Тут я хочу, чтобы у вас появилась своя версия, и с ней вы продолжили чтение.

02 daftside - within by DARKSIDE (USA)

Together, they… Darkside is an electronic ambient music duo featuring Nicolas Jaar and Dave Harrington.

soundcloud.com

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

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

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

Так это начало прорастать в интерфейсе «Таксометра».

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

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

С иллюстрациями вообще странная история: многие заказчики никак не вырастут из почерка Пикассо.

По-моему, на этом поле уже не осталось эмоций

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

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

Иллюстрации Марины Новиковой по моему заказу

Так, с Олей Барановой мы начали рисовать первые картинки для «Таксометра». И для интерфейса, и для фотографии, и для иллюстрации нужна история, нужны отсылки и образы — только так получится сформулировать исполнителю внятный заказ. Я рассуждал так: С чего начать?

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

Пока что вырисовывались такие вот скетчи из учебника по ОБЖ:

Но жизни пока нет. Требованиям соответствует и с темой обучения и инструкции прекрасно рифмуется. Я вспомнил про своего друга детства, а Оля докинула примеров.

Так у нас нарисовался свой vault guy. Захотелось живого персонажа с неровной прической, эмоцией на лице и чуть менее формальным подходом к цвету.

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

А чуть позже эстафету принял иллюстратор Женя Семиряков.

Made To Stray (DJ Koze Remix) by Mount Kimbie

EU TOUR DATES 2017: All Tour Tickets - www.mountkimbie.com/live 27/10: Liverpool Music Week, Liverpool…

soundcloud.com

Образы инструментов для бизнеса

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

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

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

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

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

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

  • Родительский бренд (если есть).
  • Отличительные черты их бизнеса, уникальная терминология.
  • Внутренние ценности компании.

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

Этот случай еще был удобен тем, что заказчик намеревался распространять решение — поэтому какой-то характер был нужен. Куда приводит терминология: мы с Тарасом работали над логистическим продуктом DMS (delivery management system) — бренда-родителя у него не было, культурного слоя тоже; полезли искать зацепки в самом бизнесе. Я делал интерфейсную часть, Тарас возился с брендом и графикой.

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

Их тоже вытаскиваем на холст. У ребят был еще один внутренний термин — матрица тарификации 3×3 (три типа грузов, три типа сроков).

Мелкий белый текст — комментарии Тараса

Если соединить геотарифные зоны и матрицу, можно получить такой набор форм:

Привет, Швейцария

— Кажется, вы замешиваете все подряд до появления ощущения смысла.

— Когда предпосылок нет вообще никаких, их надо создавать.

— Почему бы тогда не взять что-то с потолка?

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

Вообще так себе название на первый взгляд: три буквы, которые могут значить все что угодно. Следом под микроскоп попало название. Обсуждали даже его замену, ничего внятного не родили, потом вспомнили про MTC, SMS, IBM — и как-то успокоились.

Интересные заметки на полях про круглые формы

Осталось сложить первое, второе и третье.

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

Eden by Gent Mason

12" from Aesop: http://aesoplabel.com/gent-mason-eden/gent-mason/eden Eden on…

soundcloud.com

Есть такие ребята — Emex. Теперь попробуем вырастить образы из внутренних ценностей бизнеса. И дело не в этом: Ничего особенного на первый взгляд, однако это одна из основных торговых площадок автозапчастями в России.

А в этом:

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

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

Так мы увидели, что магазин Emex собран из металлоконструкций, коробок, желтых лент и дотошного учета.

На это же намекал их первый сайт

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

Она какая? Попробуем представить кнопку для таких прагматичных ребят. Круглая или прямоугольная? Теплая или холодная? Высокая или приплюснутая?

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

Металлически спокойный

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

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

Как о них узнают ваши коллеги? — А в каком виде вы храните все эти рассуждения?

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

Не теряются ли объяснения в чатах? — Информация при пересказах не искажается?

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

Кстати, недавно чистил диск и нашел видео, где этот процесс запечатлен (2016 год, золотой состав команды «Яндекс.Поиска», ах). По-моему, полезно проговаривать её снова и снова, каждый раз чуть иначе, с новыми подробностями, слышать от собеседника неожиданные вопросы и глубже понимать сами образы.

Nicolas Jaar - Harcore Ambient by OTHER PEOPLE

It has featured work by Lucrecia Dalt, Vaghe Stelle… Other People was founded in 2013 by Nicolas Jaar.

soundcloud.com

Модели

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

Естественный — значит органичный разуму: и насколько сложно удерживать в уме сложноподчиненную систему, настолько же сложно фиксировать ее на этом языке (смотри любой юридический договор). Свой рассказ я пишу на естественном языке.

Они антагонисты естественных, имплантаты для нашего разума, позволяющие преодолеть его ограниченность в конструировании систем. Формальные языки — искусственные языки, характеризуются точными правилами построения выражений и их понимания. Далее переносим мышление в формальную плоскость. Примеры таких языков: математика, программный код, чертежи и схемы.

Модель — это описание в пространстве формального языка.

Качество дизайна — это качество модели. Конечный продукт дизайна — модель, которая передается технологии для реализации. Что определяет качество модели:

  • Имеет ли модель связь с образом.
  • Описана ли модель на формальном языке (соответствует ли модель определению, которое я дал выше).

Извините, но качество дизайна определяется только тем, решает ли он задачу. — Ой, ну нет. Остальное вторично.

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

А я вот не согласен. — В этих диалогах последнее слово всегда за вами.

Отсюда следуют две основные причины плохого дизайна (весь рассказ я борюсь именно с ними): дизайн выдает за конечный результат бессвязные формальные конструкции или противоречивые смыслы естественного языка (пускай и в обертке спецификаций).

С самого начала я объясняю, насколько важную роль играют образы: они определяют систему координат для принятия решений, формируют характер продукта и закладывают фундамент для моделей. Что значит «бессвязные формальные конструкции». Дизайнеры не могут внятно объяснить ни свои решения, ни решения коллег. Модели вне образных предпосылок не выражают характера, не сочетаются друг с другом и разрабатываются дольше.

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

Я отмечал, что естественный язык не годится для фиксирования сложноподчиненных систем; продукт — это сложноподчиненная система. К чему приводят модели, созданные на естественном языке. Создание и поддержка продукта в пространстве естественного языка — это затратная и изматывающая процедура с неприлично низким КПД.

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

Второй язык

Новый термин: Будем разбираться, как подступиться к формальному описанию дизайн-моделей.

Компонент — изолированные знания об интерфейсной модели.

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

А раньше говорили «элементы интерфейса» — так в чем разница? Сегодня говорят о компонентах интерфейса, о компонентных фреймворках. Понятие компонента включает понятие элемента (графического воплощения) и дополняет его.

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

Технология добавляет свои ветки.

Отмечу также, что знания о типографике, цвете и размере ссылаются на структуры констант.

И вот оно, сложноподчиненное воплощение компонента кнопки.

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

Sketch-библиотека для DMS

Но ещё недавно в корне библиотеки могли лежать платформы, темы или технологии (CSS, JavaScript), что размазывало знания о компоненте и не позволяло ему сохранять целостность — он фиксировался лишь в уме, в пространстве естественного языка. Если вам сегодня кажется такая организация очевидной — прекрасно.

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

Абстрактные компоненты

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

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

Интерфейсы разных продуктов на 90% состоят из одних и тех же абстрактных компонентов. Давайте назовем компонент без доопределений бренда — абстрактным. И это позволяет качественно ускориться: Это сложно не увидеть, когда ведешь несколько проектов параллельно.

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

Например, вот матрица состояний, описывающая кнопку для Emex.

А вот ее производная матрица, кнопка для DMS.

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

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

Диалоговые окна в «Таксометре»

Словарь абстрактных компонентов

Я снова буду вынужден показывать не абстрактную, а конкретную графику — давайте DMS. Поговорим о тех 90%, которые сквозят между всеми моими проектами. А начнем с самых базовых компонентов, с контролов.

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

Кстати, помимо всех состояний, я сразу продумываю обе платформы.

И обе темы, если они предусмотрены в продукте (например, в «Таксометре»).

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

Я уже сейчас, глядя на контролы, вижу много общего. — А не получится ли в итоге так, что все продукты будут слишком похожи друг на друга?

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

Крупная типографика, менее строгие шрифты, неправильные формы и так далее. — А вы пробовали ходить совсем в другую сторону?

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

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

Но эти вещи не бесплатны: не каждое слово и не каждое состояние элемента или их комбинация будут хорошо смотреться.

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

— И куда же девать все эти модные ходы?

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

Для наглядности я сращиваю на картинке образ и модель

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

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

Вот другие ребята тоже работают в зрелищном жанре. С этим столкнулись не одни мы.

Приемы которого ломаются в тех же местах.

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать

Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть