Не важно какой сервис я сделал — секрет. Скажу только, что это веб сервис по страхованию здоровья и жизни. Не важно каким вышел сам дизайн (он под nda)

Компоненты

Раскладываю все как у взрослых дизайн-систем с wrappers и тп. как у ростелеком.

Токены

Могу делать самую подробную документацию для разработчиков и все описывать.

Тулзы сеньора

Я знаю что есть плагины для палитр, но этот тул использовали дизайнеры Яндекс при построении палитр своей дизайн-системы. Так что шарю и слежу за топами.

Статья включает

• Исследование трендов
• Примеры 3D-визуалов и почему это не может ИИ
• Исследование возможностей ИИ как инструмента

Дизайн без актуальной визуальной коммуникации не конкурентен, крупный бизнес это знает и постоянно завышает планку с уровнем нормы пользователей. Если не соответствуете, то вы проиграете.

Уберите из дизайна 3d-иллюстрации, увидите просто прямоугольники с текстом. Обычный ux/ui дизайнер не умеет и не должен обогащать компоненты визуалом, поскольку это не его специализация.

Пример hi-end визуальной коммуникации после ребрендинга МТС.

Качество детализации, которое пока не может сделать ИИ

Возможности ИИ нейрографии для улучшения или создания визуальной коммуникации

Генерация

Можно сгенерировать любой элемент иллюстрации или визуал целиком, если он семантически простой (состоит не более чем из 2 элементов).

Улучшение

После генерации изображение можно улучшить или детализировать

Создавать можно уникальные svg иконки, 3d-объекты на основе текста (например цифры для FinTech), стилизованные и фото-реалистичные иллюстрации (FoodTech).

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

Ссылки

• yandex.ru/yaintern — графика в стиле pixel art
• sbermobile.ru — очевидное применение ИИ
• yandex.ru/youngcon — ИИ Deep Fake и Lora для людей-супергероев

• Альберт Оленин — МТС
• Дмитрий Еремеев — ТБанк
• Екатерина Тарасенко — Ozon
• Никита Шульгович — Ozon
• Pragmatica — топовый уровень коммуникации
• Команда 2 — Ozon
• Команда 3 — ВТБ

• Сравнительный анализ (бенчмаркинг) сервисов по работе с нейрографией
• Примеры моей работы в инструментах в подтверждение моих знаний
• Выводы (какие тулзы наилучшие для тех или иных целей)

Сервисы

Все сервисы представляют из себя UI оболочки с интеграцией API нейросетей для каждой из которой есть выбор разных языковых моделей, например: OpenAI, FLUX, Recraft, Stable Diffusion и др.). Важно понимать, что работа нейронок не зависит от оболочки (веб сервиса) с которым работает пользователь и действует независимо, поэтому выбор оболочки это дело вкуса, удобства и цены. Результат генерации от выбранного сервиса не зависит. Оценка цены будет на примере модели FLUX dev.

GPT tunnel

Комбайн, где есть все нейронки со всеми нейронками и их языковыми моделями. По галерее видно что сделано для народа, нежели для профессионалов. Цена за ген по FD 5р (1 img). Нет бесплатного периода, баллов для бесплатных генераций.

Leonardo

Любительский сервис: яркий UI, некомфортно работать и мало языковых моделей. Абонентская модель оплаты $30/мес.

Piclumen

Лучше чем Leonardo, но тоже любительский. Есть бесплатные токены для тестов и полезные стили (Lineart — скетч). Генерит хорошо простые имиджи (прим. рыба) и цветочные паттерны. Полезен для быстрых тестов промптов и концепций.

Krea

Полу-проф оболочка, есть собственная языковая модель Krea 1, а также FLUX dev, есть большой выбор стилей и возможность тренировать свои стили при подписке. Есть фича image prompt.

Средняя стоимость подписки $10-28/мес на 1000-5000 images в яз. модели FLUX.

Fal

Нет бесплатных тестов, галереи и сообщества. Проф-тул, который я не тестировал. Выгоден по цене в масштабе, языковые модели SDXL (Stable Diffusion), Flux, Redux.

Mistral

UX/UI chat gpt, удобство сомнительное в потоковой работе, не тестировал глубоко. Возможно имеет плюсы по цене при подписке, но не думаю, что он лучше chat gpt.

Chatgpt

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

Replicate

Продвинутый, профессиональный инструмент с авторизацией через GitHub. Самый большой выбор языковых моделей и стилей из всего вышеперечисленного.

Recraft

Наиболее популярный и удобный инструмент для дизайнеров UI и коммуникаций. VPN dependent. Есть бесплатные токены, судя по отзывам самый удобный сервис.

Плюсы

• UI близкий к Figma, есть фреймы и группы (аналог sections), удобный workflow
• Есть много стилей, особенно удобен при генерации «векторных иллюстраций»
• Умеет векторные иконки и иллюстрации в любом стиле c экспортом svg, lottie
• Есть prompt to vector, image to vector, vector to image и тд. — любые операции
• Есть функция генерации заднего фона для прозрачных png images

Pixelcut

Отлично удаляет фон, апскейлит и редактирует изображения (условно бесплатный) High-end upsacaler-ом считается Topazlabs, не тестировал, но экспертам доверяю.

Flora

High-end инструмент с безграничным функционалом, благодаря системе нодов. UI самый комфортный, благодаря нодам и темной теме. Есть все языковые модели и стили. Контроль на каждом этапе — максимальная гибкость и масштабируемость.

Прочие

Более продвинутые: comfy, depthify

Их я не тестировал, тк это требует в первом случае своей графической карты RTX, сложной установки python и вроде работает только с Win (примеры галереи comfy) во втором случае нужен процессор Apple Silicon и плагин, подключаемый к Figma.

Выводы

Выделю топ 3 сервисов, с чем можно быстро и удобно делать изображения

• chatgpt — незаменим для быстрых тестов и рутины
• recraft — стандартынй инструмент для дизайнеров (для базовых задач)
• flora — лучший сервис для тестов, экспериментов, сложных и составных изображений и развития экспертизы до pro уровня.

Бизнес ценность

Сделать удобный дизайн интерфейса программы с ограничением экрана 1280x720. Отдать в разработку и провести дизайн-ревью и юзабилити-тесты.

Я сделал данный UX/UI всего за 1 месяц, тем самым, с учетом срока на разработку (2 месяца) компанией rustiming.com было заработано 20 млн руб.

Что сделал

• Интервью с пользователями (инспекторы)
• Расписал срок дизайн-процесса, сообщив команде
• Собрал JTBD, CJM
• Вывел правила построения согласно CustDev
• Userflow и Wireframe, а после Wireflow
• Генерировал гипотезы и показывал варианты решений на демо
• Глубинные интервью с пользователями на предмет петли улучшений
• Подготовил дизайн и компоненты, а после проводил дизайн-ревью

Решение

Покажу только простой UX сценарий, остальное под NDA

Перед началом матча кнопки в состоянии disabled, кроме «Start» — начало матча. Два таймера показывают время периода и время матча. Это привычно инспектору.

После старта матча кнопки становятся активными, а некоторые цвето-кодированы.

При тапе на игрока, кнопки личных событий становятся active а другие disabled, пользователь может выбрать тип события, которое совершил игрок (вброс, аут, содействие, буллит промах, буллит гол, фол, дисквалификация и пр.) Нажав на простое событие, например «Goal» в ленте событий будет зафиксирован гол.

Событие «Goal» зафиксировано, что отображается на табло счета и в ленте личных событий (время, номер игрока, команда игрока, событие). В компоненте «игрок» в правом-верхнем углу появляется индикатор количества голов за матч.

Игрок номер 60 нарушил правила, тап компонента игрока и выбор категории фола «Big foul». Появляется организм drawer с выбором типа фола, а кнопка «Big foul» в состоянии pressed до тех пор пока пользователь не выбрал тип фола из вариантов.

При тапе на тип фола категории «Big foul» кнопка становится белой для лучшей индикации триггера нажатия и понимания пользователем, что он зафиксировал. Типы фола расположены в той последовательности, которая удобна инспектору согласно статистически проверенным данным по частоте типа фола.

Событие «Big foul» зафиксировано в ленте событий

Прошло время, обоими командами заброшено 5 шайб и сделано 5 фолов.

Сеньор level hard skills

Немного хард-скиллов в Figma. Узнать о проекте больше можно на тех. интервью.

Задача

Сделать новый дизайн главной посадочной страницы (Landing) и личного кабинета. Улучшить UX механику выбора сервиса и страны, а также UX пополнения баланса. Выделиться среди конкурентов через премиум стиль и темную UI тему. Улучшить пользовательский опыт, Look and Feel, что со временем приведет к росту KPI/DEU.

Сделал

• Юзабилити-тестирование старого UX (протестировал UX сценарии)
• Конкурентный анализ (взял best practices и исследовал UI тренды)
• Проектировал wireframe и wireflow
• Концепция: поисковые решения, подбор цветов, шрифтовой пары, лого
• UX-тексты — улучшил все тексты согласно книге «Пиши, сокращай»
• UI (компоненты и переменные-токены (стили, цвета, отступы и прочее)

Посадочная страница

Быстро рассказывает о сути сервиса, вызывает доверие и показавает механику работы с сервисом. После авторизации/регистрации откроется личный кабинет.

Личный кабинет

В каком бы разделе кабинета пользователь не был, слева всегда будет виджет с выбором сервиса и страны для аренды номера. В данном случае пользователь новый и еще не пополнил баланс, по дефолту это страница topup. Для покупки номера в аренду пользователю нужно 5 кликов (или 7-9 при поиске сервиса или страны из списка). Доступ ко страницам кабинета через dropdown навигацию по нажатию иконки профиля. В этой части сценария пользователь выбирает сервис.

Пользователь выбрал сервис (нажатие на кнопку close возвращает его к выбору). Он выбирает страну у мобильных операторов которой будет арендован номер и это влияет на стоимость.

Сервис и страна выбраны. Метод оплаты и сумма депозита выбраны по умолчанию первые в списке, чтобы сделать лучшую интуитивность. После нажатия кнопки Pay переход на third party pay, пополнение баланса и покупка временного номера, что будет понятно пользователю после возврата, на странице «арендованные номера» где он может скопировать номер в буфер, вставить его при регистрации, получить смс код и выполнить свое целевое действие — зарегистрироваться где пожелает.

Другие страницы ЛК показаны не будут, этого достаточно для оценки моего UX/UI.

Кухня

Style Guide

Типографика, палитра, иконки и изображения. Использован один брендовый цвет для сохранения простоты и минимализма т.к. проект большего не требовал. White цвет является основным акцентным, его тон подобран чтобы снизить нагрузку на зрение в рамках Accessibility после коридорного тестирования.

Components

Молекулы, организмы и шаблоны (шапка, подвал). Все компоненты кликабельны.

UI Variables

Переменные — мой обязательный инструмент.

Какой была первая версия дизайна

Светлая тема не выделялась среди конкурентов, была перегрузка изображениями и лишними текстами и инфо-блоками, ее делал Middle дизайнер. Решение не было принято руководством и Senior дизайнером в моем лице.

Список конкурентов

Чтобы оценить качество моей работы достаточно посмотреть на них:

• sms-activate.io
• quackr.io
• avoxi.com
• onlinesim.io
• gogetsms.com
• esimplus.me
• sms.online — единственный достойный конкурент по дизайну

Это не привилегированная работа в Ростелеком, Газпром на позиции senior/lead, а вынужденная мера чтобы иметь заработок и отсутствие других возможностей заработать в этот временной период. Ответы на вопросы: Кому делал систему? — юрлицо, он же предприниматель и java-разработчик из россии которому надо иметь свою дизайн-систему, чтобы разрабатывать свои стартапы или продавать систему как продукт. Почему она такая визуально? — на личный вкус заказчика. Почему сделана на половину? — просто не сошлись по деньгам и требованиям.

Задача

Построить систему согласно требованиям: поэтапность работы согласно тех. заданию, создание палитры и переменных с определенной структурой данных и неймингом через аббревиатурный метод (слои, группы, коллекции, переменные). Работать в общем аккаунте Figma Pro и утверждать все с заказчиком на митах.

Что делал

• Анализ требований технического задания и расчет сроков каждого этапа
• Исследование актуальных дизайн-систем и методологии их построения
• Создание палитр цветов в colorbox по методологии специалистов Яндекс, создание примитивных и функциональных коллекций переменных
• Создание переменных, групп (токенов) для всех атомов дизайн-системы
• Темизация (создания светлой и dark палитр и их привязка к переменным)
• Создание текстовых стилей, переменных системы отступов и радиусов
• Создание компонентов в трех разных размерностях и их колористика с учетом темизации и нюансов отличий светлого UI от темного
• Структуризация всего файла «до безупречности» (это касается названий слоев, фреймов, таблиц и верстки каждого элемента на autolayouts

Решение

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

Процесс

Расписывать все не буду. Работа была разделена на этапы, каждый этап проходил стадии правок и согласований с вербальным общением в телеграм и совместным доступом к Figma проекту. То, что сделано согласовано и утверждено заказчиком.

Палитра прпмитивов

Я против неадекватного кол-ва оттенков, достаточно не более 10, но разработчик настоял, что ему «может не хватить» — оставим это на его совести и невежестве. Дизайн система должна быть удобна прежде всего дизайнеру, это инструмент и если он неудобен в использовании, это сказывается на эффективности, скорости.

Палитры составлялись в ручную без использования плагинов (они не потянут эту задачу) в инструменте colorbox.io по определенным алгоритмам, а не как попало. Помимо имени и HEX кода цвета имеют RGBA данные цветовой модели.

Атомы и стили

Значений может быть больше, в данном случае разработчику было достаточно.

Организация слоев и нейминг

Нет, просто вариативных компонентов недостаточно, разработчику нужно, чтобы все объекты в компоненте находились в последовательности как слои от левого-верхнего к правому нижнему углу в компоненте (сверху-вниз, как слои). Сделать это несложно, или через плагин или «ручками» через shift+arrow up/down хоткеи.

Компонент: Button, ButtonIcon

Разделение на 3 вариативных компонента по размерностям было удобно разработчику, аналогично с разделением обычных кнопок и кнопок Icon.

Тенденция, которую я наблюдаю у американский коллег в том, что совмещают кнопки и кнопки-иконки в едином компоненте (прим. Align UI). Разделение же большого компонента на мелкие практикуют в дизайн-системе Ozon согласно статье на habr Виктора Теплова «Автостопом по дизайн системе». Я работаю исходя из погружения в задачи и требований, ситуации. Умею по-разному.

Компоненты: Checkbox, Radio, Toggle

Спрашивать по визуальной составляющей с разработчика, это его личный выбор.

Не будет лишним сказать, что разработчик влезал в figma и переназначал цвета? Пост оплата дело такое: «не нравится — иди гуляй, я хочу так, как мне видится». Я старался следить за коэффициентом контрастности, по мере возможного.

Компонент: поле ввода

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

Переменные (визуально в таблице)

Не забываем, что цвета в светлой и темной темах разные (не просто инверсия черного в белый а подбор оттенка с соблюдением contrast ratio и виде в целом, перемножаем и получаем более 1000 переменных с которыми не удобно работать.

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

Также были тесты поверхностей (surface) но перегружать вас не вижу смысла, есть файлик (дубликат уже без переменных, все они тянутся из оригинального)

Темная тема, светлая тема как дубликат, если нет возможности переключить в режиме просмотра

Опыт получен и навык закреплен, знания освежены и углублены, как минимум я знаю как делать не надо и знаю, как делают топы.

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

В сервисе и развитии дизайн-системы может работать любой middle и даже junior дизайнер. Однако собрать дизайн-систему с нуля может только Senior дизайнер и то не один. Считаю, что данный опыт меня поднял до Middle+ хоть и не в команде.

Задача

Собрать сложный интерфейс с нуля, который продемонстрирует мою крутость. Похуй, что это не реальный проект, сделайте также по уровню сложности дома, потом поговорим. (на самом деле это давн не сложно, но тогда было сложно...)

Решение

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

Что сделал

• Юзабилити-тестирование сайта booking.com на боли, барьеры и точки сопротивления (поиск отеля, сравнения отелей, выбор отеля и номера)
• Вторичное исследование: desk, competitive, trend иных букинг платформ
• wireframes и wireflow mvp
• Юзабилити тест интерфейса через кликабельный прототип wireflow
• Создал атомарную систему

• Петли улучшений на этапе финализации дизайна

Кратко: я наивно думал, что делаю UI для планшетного приложения, не понимая ничего в особенностях разработки, ограничениях и правилах. Гайдлайны только читал, но опыта применения на практике не имел (iPadOS гайдлайн пригодилися только в выборе типографической системы, размерах всех кнопок и именовании компонентов, но по факту я сделал не нативный «франкинштейн» с иконками из библиотеки Material Symbols. Как говорится, ежик плакал но кушал кактус. Это показывает каким глупым, невежественным и далеким от разработчиков я был. Студенту простительно, я только учился и нарабатывал опыт на своих граблях, кроме того меня никто не учил, я не мог просто пойти к ментор и все узнать за неимением средств на образование в тот период.

Атомы

Иерархия и типографическая система соответствует Human Interface Guidelines, однако и тут бардак, ставил интерлиньяж кратный 4dp для работы в grid system после мастер-класса Дениса Ланина про интерлиньяж, не понимая что делаю.

Про цвета показать нечего: нейтральная палитра серого, парочка бренд-цветов booking.com выполняющих роль акцентных для минимального сходства, однако целью сделать интерфейс похожим на сайт не ставил или не мог понять, как их использовать если честно. В целом, палитра booking объективно устаревшая и лично мне не понятна. Я их выбрал, чтобы взять оттуда контент, не более того.

Отступы и радиусы стандартные для 4dp grid system, добавлены в переменные.

Молекулы и организмы

Элементы разложены по секциям для удобства, если присутствует организм, сбоку от него или под ним всегда есть молекула с неймингом Elements / Имя.

Применение атомарного дизайна на примерах

Это краткое разъяснение, погрузиться еще глубже вы можете на тех. интервью

Кейс можно рассмотреть в двух сценариях

• Работал в компании 6 мес и улучшил дизайн старого аппа таким образом, что увеличилось количество скачиваний и DAU на 500%. Все гордые и успешные.
• Работал в компании 6 мес и уволили, потому что не понимали мой потенциал, используя лишь как руки пожеланий PM, но после, уже дома я сделал дизайн.

Задача

Сделать адекватный дизайн, чтобы привлечь внимание топ-компаний: Альфабанк, Т-банк, Билайн, а не рефлексировать, как про-бал 6 мес в компании и был уволен. Задача была выполнена и меня серьезно рассматривали все из перечисленных в послековидное время, когда на рынке еще не было 10К «девчонок» после курсов.

Сделал

Не буду перечислять всю х-ню (Discovery, CJM, JTBD, Task/User/Wire-flow, UI kit) ведь тебе п-хуй и сегодня это умеют все, окончившие курсы Яндекс.Практикум. Надо будет, покажу на тех интервью.

Глубинное интервью

Гипотетически провел интервью с 5 респондентами и понял что дизайн ху-вый. Можно было выявить это еще на этапе wireframes, но так выходит объективнее.

Инсайт

Делать дизайн в темной теме и работать в design-centered компаниях по CustDev. Юзеры знаю как лучше и удобнее, а PM просто отрабатывает ипотеку и нехуй его слушать. Он мониторит метрики и пусть себе мониторит, это талантов не требует.

Постскриптум

Компании я благодарен, поскольку смог пойти учиться на права и работал в офисе с холодильником, вином и тимбилдингами (настольный теннис и баскетбол в зале). Однако обучение в автошколе пришлось бросить ввиду увольнения и сокращения мобильной команды в целом. Но лучше я пойду дальше, чем буду делать д-рьмо в комфортных условиях, а что не делается, то к лучшему.