Состояния связаны.
Микроанимация показывает, что изменилось после действия: элемент добавился, панель раскрылась, процесс завершился. Темп и направление помогают сохранить контекст.
Дизайн.Сайты и цифровые продукты
Смысл, который работает.
Форма, которую помнят.
От исследования задачи и прототипа — до выразительной концепции, сложного интерфейса и рабочей системы.
F / 01
FORM & LOGIC
FORM & LOGIC
Одна форма. Два взгляда на дизайн.
ИССЛЕДОВАТЬ. СПРОЕКТИРОВАТЬ. ВЫРАЗИТЬ.8 направлений — один продукт
02 / КАРТА КОМПЕТЕНЦИЙ
От вопроса «зачем»
до последнего пикселя.
Восемь дисциплин работают вместе. Выберите направление: покажем, какую задачу оно решает и что получает команда.
Узнать, что действительно нужно.
Продукт, аудитория, ограничения и причины выбора. Сопоставляем интервью, обращения в продажи и доступную аналитику; отделяем наблюдения от предположений.
НА ВЫХОДЕПриоритеты, гипотезы и критерии проверки.
Рассмотреть примерПостроить понятный путь.
Структура, навигация, сценарии и интерактивный прототип. Проверяем, может ли человек выбрать товар, оставить заявку или завершить рабочую операцию.
НА ВЫХОДЕКарта сценариев и прототип ключевых действий.
Рассмотреть примерСделать действие очевидным.
Иерархия, таблицы, формы, меню и состояния. Проектируем не только удачный экран, но и длинный текст, пустой список, ошибку и маленький телефон.
НА ВЫХОДЕМакеты, адаптивные правила и состояния.
Рассмотреть примерНайти собственный визуальный голос.
Связываем позиционирование с композицией, типографикой и цветом. Концепцию показываем на реальном содержании и объясняем каждое ключевое решение.
НА ВЫХОДЕВизуальная концепция и правила её развития.
Рассмотреть примерОбъяснить продукт изображением.
Арт-дирекция съёмки, иллюстрации, иконки, схемы и обработка изображений. Для нейросетевых материалов отдельно согласуем применение и проверяем пригодность результата.
НА ВЫХОДЕНабор согласованных материалов для сайта.
Рассмотреть примерПоказать то, что теряется в статике.
Движение интерфейса, объёмные объекты и WebGL-сцены. Учитываем загрузку, мобильное управление и возможность выключить движение.
НА ВЫХОДЕСценарий движения, графика и рабочие прототипы.
Рассмотреть примерСохранить качество при росте.
Токены, компоненты, варианты и правила использования. Одно изменение должно последовательно отражаться во всём продукте, а не исправляться на десятках экранов.
НА ВЫХОДЕБиблиотека компонентов и документация.
Рассмотреть примерДовести замысел до браузера.
Готовим ассеты и спецификацию поведения, обсуждаем решения с разработчиками и проводим дизайн-проверку реализации. Разработку можно включить в проект.
НА ВЫХОДЕМатериалы для разработки и список проверок.
Рассмотреть пример03 / ИССЛЕДОВАНИЯ И СТРАТЕГИЯ
Сначала разобраться.
Потом проектировать.
Красивый каталог бесполезен, если закупщик не может найти совместимую деталь. Исследование помогает увидеть задачу глазами человека, который будет пользоваться продуктом.
Начинаем с продукта, аудитории и целей бизнеса. Разбираем конкурентов, существующую аналитику и вопросы клиентов. Интервью и тесты включаем в программу там, где нужно проверить гипотезу, а не угадать ответ.
JTBD помогает сформулировать задачу человека. CJM — увидеть весь путь и затруднения. Информационная архитектура превращает выводы в структуру разделов, навигацию и требования к контенту.
НА ВЫХОДЕКарта задач, приоритеты, структура и список гипотез для проверки.
B2B / ПРИМЕР КАРТЫ РЕШЕНИЙ
- 01 / ВОПРОС
- Есть ли аналог с нужным допуском и сроком поставки?
- 02 / ПРЕПЯТСТВИЕ
- Данные приходится собирать из нескольких PDF и уточнять по телефону.
- 03 / РЕШЕНИЕ ДЛЯ ПРОВЕРКИ
- Вывести совместимость, наличие и документы в карточку. Дать сравнить позиции и запросить предложение из списка.
Задача → Подбор → Сравнение → Запрос КП
B2B / ПРИМЕР КАРТЫ РЕШЕНИЙ
- 01 / ВОПРОС
- Подойдёт ли материал для условий моего проекта?
- 02 / ПРЕПЯТСТВИЕ
- Маркетинговое описание не отвечает на технический вопрос.
- 03 / РЕШЕНИЕ ДЛЯ ПРОВЕРКИ
- Разделить обзор и характеристики, добавить фильтр по применению, технический файл и пример использования.
Условия → Характеристики → Документы → Консультация
Демонстрация метода. Это пример гипотезы, а не результаты клиентского исследования.
04 / UX И ПРОЕКТИРОВАНИЕ
Удобство можно
проверить действием.
Один сценарий — на уровне схемы, интерфейса и ошибки. Переключите режим, измените размер экрана и попробуйте пройти следующий шаг.
01 / КОНТАКТЫ 02 / ПОДТВЕРЖДЕНИЕ
Всё готово
к следующему шагу.
Состав заказа и стоимость остаются перед глазами. Ошибку исправляем рядом с полем, а введённые данные сохраняем.
Используйте пример, не вводите личные данные.
Сценарий пройден. Ничего не отправлено и не заказано.
01 / СтруктураПроверяем порядок действий до детальной отрисовки.
02 / ИнтерфейсВыстраиваем иерархию, читаемость и понятное действие.
03 / СостоянияПроектируем ошибки, загрузку и подтверждение наравне с основным экраном.
05 / КОНЦЕПЦИЯ И АРТ-ДИРЕКШН
Значение одно.
Характер разный.
Композиция, типографика, цвет и графика меняют тон сообщения. Здесь у вымышленного бренда FORMA три направления — с одним содержанием и разной логикой подачи.
FORMA®OBJECTS / SPACES / IDEAS01—03
КОЛЛЕКЦИЯ НОВЫХ ВОЗМОЖНОСТЕЙ
Новые формы
привычных вещей.
Предметы, которые меняют пространство вокруг нас.
Исследовать коллекциюFORM STUDY / BIG FISHДЕМОНСТРАЦИЯ АРТ-ДИРЕКШНА
01 / 03
Спокойствие и внимание к предмету.
Тёплая палитра, антиква и свободное пространство. Изображение можно рассмотреть, а текст читать в собственном темпе. Такой подход подходит для истории о материале, качестве и деталях.
02 / 03
Контраст и энергия сообщения.
Плотный набор, контрастный цвет и активный масштаб. Композиция быстрее захватывает внимание; содержание должно выдерживать такую громкость. Это язык запуска, события или сильного брендового заявления.
03 / 03
Точность и открытая структура.
Модульная сетка, технические подписи и прохладная палитра. Читатель видит порядок, параметры и логику. Направление уместно для технологического продукта с содержательными характеристиками.
Концепцию развиваем в систему: фотостиль, иллюстрации, иконки, схемы, ключевые экраны и правила анимации. Инструменты, включая ИИ, подбираем под задачу; окончательный выбор и качество остаются ответственностью дизайнера.
НА ВЫХОДЕКлючевые экраны, визуальные правила и согласованный набор графики.
06 / СЛОЖНЫЕ ИНТЕРФЕЙСЫ
Сложность остаётся
внутри продукта.
CRM, каталоги, личные кабинеты и B2B-сервисы. Организуем данные вокруг рабочих действий: найти, сравнить, изменить, проверить. Учитываем роли, права и исключения.
F / WORKWORKSPACEПроектыДокументыКомандаДемонстрационные
данные
данные
ОБЗОР РАБОТЫ
Проекты4
| Проект | Этап | Следующий шаг |
|---|---|---|
| Корпоративный сайт | Концепция | Обсудить направление |
| Каталог продукции | Проектирование | Проверить фильтры |
| Кабинет дилера | Дизайн | Согласовать состояния |
| Сервис заявок | Передача | Проверить адаптивы |
Ничего не найдено. Измените запрос или очистите поиск.
Здесь появятся проекты
Объясняем, что это за раздел и какое действие поможет начать.
Загружаем список. Сохраняем геометрию, чтобы интерфейс не прыгал.
!
Список не загрузился
Сохранённые данные не потеряны. Можно повторить попытку.
Можно искать проект и переключать состояния. Данные никуда не отправляются.
Данные и приоритетыВыносим важное в обзор, детали открываем по необходимости.
Роли и праваНаблюдатель видит данные, но не получает недоступные действия.
АдаптивностьПорядок информации сохраняет смысл на узком экране.
07 / MOTION / 3D / WEBGL
Движение
объясняет.
Показываем объём, материал, смену состояния и связь между действиями. Эффект получает задачу: показать продукт, направить внимание или сделать переход понятным.
F / 02
MATERIAL STUDY
MATERIAL STUDY
Процедурная 3D-форма / интерактив
Продукт можно рассмотреть.
3D-сцена показывает форму, ракурс и материал. Для веба готовим геометрию, текстуры, свет и управление; предусматриваем статичную замену.
Впечатление не мешает задаче.
Загружаем тяжёлое по необходимости, останавливаем невидимые сцены и учитываем настройку уменьшенного движения. Основной контент доступен без WebGL.
ЛАБОРАТОРНЫЕ ПРОТОТИПЫ BIG FISH
SuardonПредметная презентация / 3D-экспериментRedfish / BFD LabИнтерактивные сцены и эксперименты08 / ДИЗАЙН-СИСТЕМЫ И ПРОИЗВОДСТВО
Один принцип.
Много экранов.
В Figma — компоненты, варианты и Auto Layout. В коде — те же правила цвета, типографики, отступов и состояний. Система помогает продукту расти последовательно.
TYPE / SPACE / COLOUR
Иерархия, которую видно.
Правила, которыми пользуются.
Display / 64Heading / 32Body / 16Caption / 12
НА ВЫХОДЕБиблиотека компонентов, токены, правила адаптации и спецификация поведения.
colour.accent
colour.surface
colour.text
colour.surface
colour.text
COMPONENT / CARD
Изменение в одном месте.
Тема и плотность меняются сразу у всех компонентов этого примера.
Фокус доступен с клавиатуры. Изменения — только внутри демо.
Макеты
Страницы и сценарии на согласованных размерах экранов.
Компоненты
Варианты, состояния, ограничения и правила переиспользования.
Спецификация
Поведение, адаптация, экспорт графики и требования к контенту.
Дизайн-контроль
Проверка реализации в браузере и список расхождений для исправления.
09 / ПРОЕКТЫ И КОНЦЕПЦИИ
Решения.
В реальном контексте.
Из опубликованного портфолио: задачи, экраны и визуальные решения. Клиентские проекты и авторская концепция представлены с отдельными подписями.
Помочь выбрать защитное снаряжение.
Крупная предметная подача сочетается с каталогом, подбором продукции и оформлением заказа.
Передать масштаб архитектуры.
Изображения, пространство и типографика связывают выразительность фасадов с техническим содержанием.
Представить другой образ жизни.
Визуальная концепция о жизни на воде. Авторство на исходной презентации: Vitali Zaharchenko / Uprock agency. Сохранена в опубликованном портфолио.
Связать материал и его применение.
Архитектурная подача, информация о стекле и технологиях. В проект включена английская локализация.
10 / КАК МЫ РАБОТАЕМ
Понятный процесс.
Проверяемый результат.
Состав работ зависит от задачи. До старта фиксируем объём, этапы и точки согласования. На каждом этапе показываем материал, по которому можно принять решение.
01Исследование и рамка задачи
Понимаем продукт, пользователей, ограничения и критерии успеха. Согласуем, что проверяем и какие материалы нужны.
НА ВЫХОДЕБриф, карта задач, исследовательские выводы и границы проекта.
02Структура и прототип
Собираем информационную архитектуру и ключевые сценарии. Проходим их вместе с командой; по программе проекта — с пользователями.
НА ВЫХОДЕКарта разделов, User Flow и кликабельный прототип.
03Визуальная концепция
Определяем направление и показываем его на ключевых экранах с настоящим содержанием. Обсуждаем причины выбора, а не только вкусовое предпочтение.
НА ВЫХОДЕКонцепция, аргументация и согласованные визуальные правила.
04Экраны, графика и система
Развиваем концепцию на согласованный объём: страницы, адаптивы, графику, состояния и компоненты.
НА ВЫХОДЕМакеты в Figma, библиотека и подготовленные ассеты.
05Проверка и уточнение
Проверяем сценарии, длинный контент, ошибки, клавиатуру и маленькие экраны. Исправляем обнаруженные расхождения.
НА ВЫХОДЕПроверенные состояния и список принятых решений.
06Передача и дизайн-контроль
Передаём исходники и спецификации, обсуждаем реализацию. При включённом сопровождении проверяем результат в браузере.
НА ВЫХОДЕКомплект для разработки и результаты дизайн-проверки.
11 / СОСТАВ РАБОТ И СЛЕДУЮЩИЙ ШАГ
Что создадим
для вас?
Можно прийти с новым продуктом, работающим сайтом или конкретным сценарием, который требует пересмотра. Начнём с задачи и предложим подходящий состав работ.
Исследование, прототипы, концепция, макеты и материалы для вашей команды разработки. Состав и глубину каждого этапа согласуем.
Одна команда отвечает за проектирование, визуальный язык и реализацию. Согласуем CMS или технологический стек, интеграции и критерии приёмки.
Разбираем текущий продукт, сохраняем полезное и пересматриваем слабые сценарии. Планируем перенос контента и последовательный переход.
Новые сценарии, страницы и компоненты в существующей системе. Начинаем с приоритетов и работаем согласованными итерациями.
Выбранный формат перенесём в заявку. Стоимость и сроки определим по объёму, контенту и сложности.
Что именно мы получим?
Зафиксированный в договорённостях комплект: исходники макетов в Figma, необходимые адаптивы, компоненты и состояния, графику и описание поведения. Разработка и дизайн-сопровождение включаются в состав отдельно.
Как определяются стоимость и сроки?
По числу сценариев и уникальных экранов, сложности графики и интерактива, готовности контента и объёму проверок. После знакомства с задачей фиксируем этапы, результаты и график согласований.
Можно начать с части продукта?
Да. Можно начать с исследования, концепции, ключевого сценария или набора проблемных экранов. Важно заранее определить, что этот этап должен проверить и как его результаты будут использованы дальше.
Кто готовит тексты и изображения?
Распределяем ответственность до старта. Используем ваши материалы или включаем подготовку контента в проект. Для съёмки, иллюстраций, 3D и лицензируемых материалов отдельно согласуем производство и права использования.