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

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

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

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

Изменения лёгкие, но дали немало:

1. Увеличились просветы между перьями. На самом деле это поворотные лопатки, профиль которых — ноу-хау компании. С большими просветами перья лучше различимы в мелких размерах.

2. Изменил контрформу с эллипса на более дружелюбную к Т внутри. Попутно эта контрформа стала динамичнее, а для логотипов с крыльями динамики много не бывает. Для меня ещё важно, что теперь это форма ещё дальше от круга. Дело в том, что наши полётные камеры «идеально круглые в сечении», и когда логотип собран с отсылкой к частям трубы, эллипс уж очень близок к круглому сечению. Чуть-чуть, но не совсем, как говорится. Честный круг вставал отвратительно, поэтому уводил форму дальше от него.

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

4. И самое ценное — пропорции всего логотипа. Когда у логотипа простое соотношение сторон, его удобнее масштабировать. И проверять, не помялся ли он по дороге. Исходная пропорция 61:35 уступила 3:2.

Расскажу свежий пример о выходе в надсистему, о котором писал Альтшуллер, и вслед за ним рассказывают в бюро.

Делали экраны для полётной камеры. Полётной камерой в аэротрубе называют то, что посетители считают собственно аэротрубой — стеклянный стакан, в котором летают люди. На деле аэротруба — это махина в 10 этажей.

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

Экраны дизайнят по-разному. Вот прошлая версия нашего экрана ещё без информации о летающем:

А вот какой-то дифолтный экран из трубы в Мюнхене:

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

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

Экраны ещё внедряют, поэтому покажу макеты с абстрактными данными. Экран сессии:

Когда время заканчивается, экран становится синим. Ещё тут сессия стоит на паузе и видна фотозаглушки. Если клиент ещё нет фото, мы показываем одну из восемнадцати птиц:

Экран телеметрии:

P. S. Ищем фронтенд-разработчика в Туннльтех.

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

Чтобы рассказать клиентам, как всё работает, вник в технологии и экономику компании. Без предшествующих 3,5 месяцев работы над интерфейсами, рассказ вышел бы не таким глубоким, а времени на разработку сайта ушло больше.

Только мы наглядно объясняем разницы одно- и двухконтурной трубы:

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

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

Собрали таблицу с этапами запуска трубы, объяснив, кто что делает:

Хотели шаблонизировать вёрстку, чтобы новые материалы требовали минимум усилий. Ещё хотели донести кучи информации, часто технической, на больших и малых устройствах и найти технологичный и в меру модный характер. Как решение — сухая, местами топорная вёрстка, без ярких деталей, которая даёт иллюстрациям и прочей графике работать. Текущая аскетичность оставляет простор для новых форматов и выделений. Когда вёрстка была готова, пересобирал 3-4 этажа по мере получения материалов, не отвлекаясь на графредактор и не отвлекая разработчиков. Так убедился, что шаблоны работают.

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

Кайф из описания флагманской трубы:

На странице о моделях сразу даём сравнительную таблицу:

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

Идея ссылаться на что-то внутри страницы прекрасная, но иконка выглядит недорешением. Почему не менять УРЛ страницы динамически, чтобы пользователь всегда копировал путь к текущему этажу? Ссылаться на всю страницу нужно куда реже, чем на её части. Так и сделали. Теперь сайт будет и витриной, и внутренним инструментом — на его части будут ссылаться при объяснении деталей клиенту.

В этом проекте я побыл продуктовым дизайнером. Придумывал, проектировал, иллюстрировал, утверждал у артдира, писал черновики, редактировал немного, помогал менеджеру и разработчику, курировал съёмку фотографий и разработку 3Д-визуализаций, писал и переписывал код.

Планировали сделать за 3 месяца без мобильной версии, получилось за 6 с мобильной.

Спасибо Анатолию, Ксении, Самату, Роману и Ивану!