Пишу о подаче информации, интерфейсах и жизненной среде. Поддержать...

Дизайнер в компании «Тунель‑технологии». Работал в Лаборатории данных и Бюро, соосновал дизайн-группу «Кипо».

Позднее Ctrl + ↑

Три наблюдения — 3

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

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

3. Рижские остановка, столб с расписанием маршрутов и загадочная соцреклама: «Смелый = безголовый», «Внимание, готовлюсь „парализоваться“ (стать парализованным)».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

25 сентября   мы сделали   сайт   Туннельтех

История о детском доме и байкерах

Наш район — тихий и зеленый с частной застройкой в 1-3 этажа и редким вкраплением многоквартирных домов вроде нашего. С одной стороны, это окраина города, с другой — район считается благополучным, а до центра 25 минут по прямой ветке трамвая.

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

А в пятницу на очередной пробежке наблюдал особенно непривычное для себя мероприятие. Байкеры на крутых мотоциклах катали детей из этого детского дома вокруг квартала. Это было организованное действие. Мотоцикл заезжали на территорию, прокатившийся ребёнок слезал, передавал следующему шлем. Воспитатели помогали. Ехали мотоциклы небыстро, но шумно газовали.

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

Вроде же ничего сложного, но вживую впервые видел.

24 сентября   дети   история

Подсказка основных почтовых доменов

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

Пока реализацию встретил только у Али-экспресса. Отдельно отмечу, что классно знать о локально популярных доменах, как это делает Али:

Выравнивание подписей с длинами сторон прямоугольника

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

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

В СВГ всё задаётся строго по координатам, хорошо масштабируется, но не умеет «адаптироваться» под содержание. Поэтому c СВГ не обойтись без двух шаблонов и надежды, что они выдержат подписи любой длины. Можно усилить СВГ скриптом, но для меня это выглядело суперлишним. Казалось, что справятся ХТМЛ с ЦССом.

Исходный ХТМЛ простейший:

<div>
    <span>22 м</span>
    <div></div>
    <span>14 м</span>
</div>

Первое, что решал: как выравнивать подписи по центру стороны. Понятно, что для верхней подписи нужен «text-align: center», но как ограничить длину подписи, чтобы она равнялась длине прямоугольника, а не всего родительского дива? Можно дублировать width для прямоугольника и подписи, но это не DRY и неудобно в поддержке. Выручило свойство box-sizing, которое говорит, как считать ширину и высоту элемента. Добавил родительскому диву «box-sizing: content-box» — указанные размеры элементы не будут включать падинги и обводки.

.rectangle {
    position: relative;
    box-sizing: content-box;
    padding-top: отступ, подходящий под высоту подписи; 
}

Теперь можно наследовать длину родителя и позиционировать подписи вне его:

.rectangle-width, .rectangle-height {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
}

.rectangle-width {
    width: inherit;
    top: 0;
    text-align: center;
}

Если текст длиннее отведённой длины, то он начинается от левого края и благодаря «white-space: nowrap» не переносится.

.rectangle-height {
    left: calc(100% + отступ от фигуры);
    top: 60%;
    transform: translateY(-40%);
}

Transform и top и выравнивают подпись и фигуру по горизонтали. Если родитель без падинга, сработает «top: 50%; transform: translateY(-50%)». В моём случае разницу в 20% нашёл на глаз.

В конце разбираюсь с прямоугольником. Ширину и высоту он наследует у родителя, а ровно поместиться в отведённые границы помогает свойство «box-sizing: border-box», которое, наоборот, включает падинги и обводку.

.rectangle-figure {
    display: inline-block;
    box-sizing: border-box;
    width: inherit;
    height: inherit;
    border: 1px solid цвет;
}

Итоговый ХТМЛ английской версии (без оформления футов):

<div class="rectangle" style="width: длина; height: высота">
    <span class="rectangle-width">22 m 72.2 ft</span>
    <div class="rectangle-figure"></div>
    <span class="rectangle-height">14 m<br>45.9 ft</span>
</div>

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

10 сентября   вёрстка   СВГ   ХТМЛ   ЦСС
Ранее Ctrl + ↓