Генеративный UI-кит
Задача: создать ui-кит, который будет генерироваться из js-кода. Использована библиотека react-sketchapp.
Получился управляемый через скрипт макет. Исправил в одном месте — везде обновилось. При изменении высоты элементов, макет перестраивается автоматически по модели флекс-бокс, исключая нахлесты блоков друг на друга.
Волшебство: код при сохранении рендерится в Скетч.
Реализована модель дизайн-системы. Для задания параметров используются значения синхронизированные с компонентами для прода.
Типографика
Типографика представлена компонентами и поддержана текстовыми стилями. Типографические компоненты имеют свои габариты и учитывают отступы.
Заголовки и параграфы — это компоненты, которые стыкуются на макете.
Трафареты
Трафареты позволяют пользователю ui-кита, легко разместить элемент по правилам позиционирования. Трафареты включается/выключается по шорткату с помощью плагина Sketch bounding boxer.
Трафарет подсвечивает гарабритные размеры элементов и внутренние отступы.
Контролы и символы
Контролы показаны во всех нужных состояниях и всех нужных размерах. Все контролы максимально символизированы.
Три размера контролов:
Все состояния одного размера на примере компонента чекбокса:
Количество автоматически созданных символов более 300:
Составные структры
Кит четко прописывает механику построения большого из малого. Все формы строятся из типовых блоков — филдсетов. На каждый тип филдсета есть свой трафарет.
Общий вид всего кита:
Ревизия снипетов объявлений
На Авито в разных категориях у объявлений разные описания. Есть разные форматы и контексты отображения: список, плитка, vip, XL и т.п.. В сочетании существует больше 30 вариантов снипетов. Большинство из них сложились исторически и выглядят разнородно. Задача состояла в анализе и систематизации имеющихся вариантов.
Целью было создание на генераторе графики модели выделенных шаблонов сниппетов, а так же построение тестовых списков с реалистичными данными. Эксперементируя с шаблоном, мы видим как снипеты в списках перестраиваются автоматически.
Поиск системы в дебрях вариантов:
Реализованые шаблоны as-is. Реалистичные данные вынесены в json. Вывод строится автоматически:
Карточка объявления Авито 2016
Задача. Обновить макет карточки предложения. Упорядочить блоки из которых состоит карточка, учесть новые потребности вывода данных разных категорий. Повысить акцент кнопок действий.
👉 Результат предcтавлен в виде свёрстанного прототипа с вариантами для разных категорий
Карточка на примере авто:
Макет имеет разную структуру для разных категорий:
Блоки карточки имеют сложное поведение:
Карточка состоит из множества блоков с множеством состояний:
Отдельно показаны варианты попапа с картинкой для разных размеров:
Каталог компонент «Факт»
Задача. Сделать интерфейс каталога реакт-компонент. Система позволяет иметь доступ к компонентам нескольких пакетов. Компоненты имеют описание и плейграунд, где можно менять параметры. Логотип «Факта» придумал Сергей Плащинский
Главная страница. Представлен перечень имеющихся пакетов.
Перечень компонент пакета.
Карточка компонента. Вкладка с примером кода и таблицей параметров. По каждому параметру указан его тип, возможные значения. Так же есть возможность изменить значение параметра.
На карточке компонента есть возможность поиграться значениями параметров.
Общий вид страниц проекта:
Спецификация всех блоков:
3D-навигация по офису
Компания имеет большой офис на нескольких этажах. Саша Амосов создал реализацию навигатора по офису. Моя задача: спроектировать и оформить интерфейс.
Основная функция системы — найти место сотрудника по его имени. Вбил в поиск, получил метку на карте и карточку с описанием.
Поиск рабочего места сотрудника.
Так же удобно осуществляется поиск переговорок.
Схема вращается в пространстве с помощью мыши:
Подробно описана механика поиска:
Общий вид эскизов проекта:
Админка для модерации обращений
Задача. Сделать интерфейс админки для модерации обращений в службу поддержки. Все обращения попадают в единый бесконечный список. Список можно фильтровать по параметрам или по специальной очереди. Модераторы выбирают из списка обращение для работы с ним.
👉 Результат представлен в виде свёрстанного прототипа
Список тикектов.
Страница обращения. Вся переписка по обращению идет на этой странице. Обращение переходит по жизненному циклу через несколько статусов.
Карточка обращения с перепиской по тикету.