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

сайт

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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