3 заметки с тегом

Туннельтех

Туннельтех на китайском

Во время основной работы над сайтом Туннельтеха часа два обсуждали, как устроить языковые версии: отдельные текстовые файлы, чтобы переводчикам было удобнее или хранение всех языков в теле документа и выгрузка в таблицу для переводчиков. Я боялся, что работать с файлами, которые внутри хранят текст на всех языках, будет неудобно. А Толя объяснял, что так проще найти и исправить ошибку, а неудобно работать с длинным файлом будет единоразовым. В итоге он придумал теги, с помощью которых шаблонизатор на Питоне собирал отдельные языковые страницы из одного ХТМЛ-родителя. Шаблонизатор позволяет хранить внутри тегов не только текст, но и ХТМЛ. Этим пользуемся, когда для разных языков нужна разная вёрстка. В английской версии метры и футы, в остальных — только метры:

Правила у тегов простые:

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

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

Скриншоты двух страниц, если лень идти на сайт:

28 декабря   код   сайт   Туннельтех   язык

Тюнинг логотипа Туннельтеха

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

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

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

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

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

  1. Увеличились просветы между перьями. На самом деле это поворотные лопатки, профиль которых — ноу-хау компании. С большими просветами перья лучше различимы в мелких размерах.
  1. Изменил контрформу с эллипса на более дружелюбную к Т внутри. Попутно эта контрформа стала динамичнее, а для логотипов с крыльями динамики много не бывает. Для меня ещё важно, что теперь это форма ещё дальше от круга. Дело в том, что наши полётные камеры «идеально круглые в сечении», и когда логотип собран с отсылкой к частям трубы, эллипс уж очень близок к круглому сечению. Чуть-чуть, но не совсем, как говорится. Честный круг вставал отвратительно, поэтому уводил форму дальше от него.
  1. Внутренняя Т отсылает к воздушным потокам, которые расходятся по двум контурам трубы. Исходно они тоже залипали в мелком размере. Плюс там были невнятные пропорции элементов и просветов и лишняя длина у горизонтальных плоскостей. Просто поправил.
  1. И самое ценное — пропорции всего логотипа. Когда у логотипа простое соотношение сторон, его удобнее масштабировать. И проверять, не помялся ли он по дороге. Исходная пропорция 61:35 уступила 3:2.
2018   логотип   мы сделали   Туннельтех

Сайт Туннельтеха

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2018   мы сделали   сайт   Туннельтех