Тимур Ландекар

Образ — образовательная платформа

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

• Задача Показать человеку область, в которой он ещё не ориентируется, так, чтобы он не утонул. Семь отделов, 254 профессии, 114 областей знания и связи между ними — это объём, который обычным меню не берётся.
• Граф вместо каталога Компетенции показаны связанным полем, а не списком: видно не только «что есть», но и «что к чему ведёт». Раскладка считается на клиенте, поэтому поле живое — его можно тянуть и рассматривать.
• Две зоны с разной плотностью Витрина рассчитана на человека, который зашёл на минуту: крупный шаг, много воздуха, один призыв на экран. Студия за входом — на того, кто работает час: плотная раскладка, панели, рабочие инструменты. Общий язык, разный ритм.
• Тема без вспышки Светлая, тёмная и системная. Выбор ставится скриптом до первой отрисовки, поэтому страница не вспыхивает белым у того, кто выбрал тёмную.
• Собственная дизайн-система Пакет токенов: палитра, шкала прозрачностей чернил, три ступени тени, самохостящиеся Manrope и Poppins. Из неё потом выросли визуальные языки остальных проектов.

Открыть Образ

DRIFT — один интерфейс на трёх платформах и шестнадцати языках

Инструмент, который замедляет запись и добавляет реверб, плёнку и лоу-фай. Всё считается на устройстве человека: файл никуда не загружается. Живёт в браузере, ставится приложением на Windows и собран под Android.

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

Открыть DRIFTВитрина продукта

Словарь визуального языка КОНСТРУКТа

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

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

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

Audioviz — лаборатория музыкальных инструментов

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

• Общий слой вместо копий Тембры, воспроизведение, цвет ноты, перетаскивание и настройки вынесены в общий слой. Новый инструмент получает язык интерфейса готовым и отличается только сутью.
• Интерфейс переделан десятки раз У одного инструмента сохранены двадцать восемь кадров итераций. По ним видно, как раскладка уплотнялась, как подписи уходили внутрь элементов и как исчезали лишние состояния.
• Audioshred Редактор табулатуры: шесть струн, сетка шестнадцатых, ввод ладов с клавиатуры, нотация со штилями, рёбрами и паузами, живые записанные сэмплы вместо синтеза, выгрузка в MIDI и WAV.
• Stemma Мультитрековый редактор: дорожки, доли и тики как модель документа, один плейхед на композицию, полоса инструментов слева. Собран, наружу пока не отдан — показываю в работе.
• One True Piano Восемьдесят восемь клавиш, настоящая спектрограмма, рельеф линиями — и ничего больше. Упражнение в том, чтобы убрать всё, кроме сути. Тоже готовится к публикации.

ЛабораторияAudioshredУгадать тональность

ТЕРРИТОРИЯ — геоквест по регионам России

Угадать край по виду, по архитектуре и по людям. Восемьдесят семь субъектов, больше ста девяноста народов, четырнадцать стран-соседей.

• Задача Справочные данные о регионах обычно подаются таблицей, которую никто не читает. Здесь они поданы догадкой: человек сначала смотрит и предполагает, и только потом узнаёт.
• Карта как основной элемент Ответ даётся по карте, а не выбором из списка. Промах тоже несёт знание: видно, куда именно человек показал и где находится верное место.
• Готовность к ссылке Страница размечена под репост: своя карточка при вставке в мессенджер, описание, разметка приложения для поисковых систем. Игру отправляют друг другу — значит, вид ссылки такая же часть интерфейса, как экран.

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

Арт-дирекшен: «Долгая Серь» и ENDLESS

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

• «Долгая Серь» Медитативный проход на север. Геометрия собрана в Blender, сцена — в Godot, свет и вода держатся собственными шейдерами. Палитра монохромная: цвет появляется только там, где он несёт смысл.
• ENDLESS Бесконечный пролёт над местностью, которой не существует: рельеф считается, а не рисуется. Низкое внутреннее разрешение, снап вершин, свет, запечённый в грань, террасированный рельеф — картинка не повторяется и при этом остаётся одной и той же по характеру.
• Зачем это дизайнеру интерфейсов Здесь вырабатывается то, что потом применяется к экранам: как держать настроение одним приёмом, как обойтись без цвета и как описать визуальный язык словами, чтобы его можно было повторить.

Как я работаю

• ИИ как основной инструмент Не подспорье для картинок, а способ производства: от разбора задачи и вариантов раскладки до сборки рабочего интерфейса. Все продукты выше сделаны этим путём. Я отвечаю за постановку, отбор и приёмку — и объясняю, почему принят именно этот вариант.
• Figma и макет Макеты по техническому заданию и по референсам, правки по итогам согласования, передача в разработку. Понимаю, что происходит с макетом дальше, потому что сам довожу свои продукты до выпуска.
• Система прежде экрана Токены, компоненты, состояния, светлая и тёмная тема, поведение на узком экране. Решение записывается вместе с причиной — иначе через месяц его отменят, не поняв.
• Доступность не в последнюю очередь Контраст, видимый фокус, проход клавиатурой, ссылка в обход навигации, запасной слой для случая, когда скрипты не отработали.
• Выпуск Доменная архитектура, витрины продуктов, правовой раздел, подготовка материалов для магазина приложений. Работа заканчивается не отдачей макета, а тем, что продуктом пользуются.

Ещё в работе

• Конструктор Генератор изображений, который отдаёт результат разобранным на слои — PSD и прозрачные PNG. Каталог построен не по стилям, а по конечному носителю: спрайт в игру, иконка в приложение, мокап в презентацию.
• Vibe FM Синхронное эмбиент-радио: общий эфир для всех слушателей, чат, закрытая авторская студия с публикацией релизов.
• Nota Музыкальный блокнот для Windows. Запись начинается с первой ноты — кнопки «Запись» нет вовсе.
• Диктор Голосовая диктовка в любое окно Windows, целиком на своей машине и без сети.
• Тембр Каталог звуков, разложенный по тому, чем звук является, а не чем он сделан. Пример переносит собственную фразу пользователя в выбранный тембр.
• Pocket MP3 Настольный инструмент: ссылка, формат, папка — и файл готов. Ничего не уходит на сторонний сайт.
• Игры «Тартария» — платформер про смолу с каноном персонажа на десяти пикселях; «Синкатрон» — изометрическая стратегия; JUST A BLOCK — игра о чистом геометрическом выживании с подробно описанным каноном движения.

Связь

Почта: landekar03@gmail.com. Отвечаю в тот же день.