UX / UI

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

Дизайн, структура и пользовательские сценарии новой версии созданного ранее совместно с Modx-Assist оптового интернет-магазина носков, нижнего белья, галантерейных товаров. Сейчас более 60% заявок поступает со смартфонов, поэтому применён принцип Mobile-First. Учтены все метрики и отзывы клиентов, поведенческие паттерны, унаследованные от маркетплейсов. Минималистичный дизайн и цветовая гамма ориентированы на ЦА с учётом специфики товара. Отрисовано более 150 экранов для мобильной версии и десктопа, проработано более 70 пользовательских сценариев, с учётом всех возможных действий и состояний. Переработана корзина, личный кабинет пользователя, система авторизации, фильтрация контента. Также ранее мною был разработан обновлённый логотип маркетплейса. Готовые Figma-мокапы переданы в вёрстку для дальнейшего переподключения шаблонов.

Иногда приходится создавать лендинг, для того, чтобы рассказать о том, как создаёшь веб-сайты. Именно эту задачу мне поручило РА Колибри из Екатеринбурга: оформить кейс о разработке корпоративного сайта для архитектурного бюро AMG. У меня было: вордовский документ с текстами, которые должны быть на странице, скриншоты результатов работы и непринятых вариантов.

Я придумал, как слепить из этого эмоционально окрашенную историю: 1. Познакомить зрителя с Заказчиком; 2. Продемонстрировать стадию идеации, через буйство метафор и ассоциаций; 3. Выразить азарт процесса проектирования и смелости решений; 4. Спокойно остановиться на выводах.
Так же в векторном редакторе мною был создан небольшой айконсет.

KnowledgeCity - компания из США, разрабатывающая решения для электронного обучения с более чем 15-летним опытом в индустрии. Своим клиентам из США, Европы и стран Ближнего Востока KnowledgeCity предлагает обширную учебную библиотеку, систему управления обучением под ключ (LMS), включая пользовательские учебные порталы.

С командой дизайнеров KC мы разработали Дизайн-систему для пользовательских и внутренних инструментов компании и создали Сторибук. Разработали новую LMS, продумали множество юзер-флоу в том числе для формирования Learning Path. Создали шаблоны для простой кастомизации Клиентских учебных Порталов, разработали новый Admin Tools и Маркетплейс для управления порталами и их контентом.

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

Мы разработали систему информационных блоков и совершенно новую CMS для создания новых тематических промо-лэндингов компании, используя принцип No-Code.

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

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

Посмотрите, как я решил этот кейс, объединив страницу входа / регистрации в сервис с информационными материалами о путях решения проблем.

Так же в CorelDraw были отрисованы персонажи - участники презентации.

В некоей компании сотрудники назначают друг другу встречи — чтобы
обсудить рабочие дела, рассказать о результатах, решить проблему. Встречи проходят в переговорках — небольших комнатах вместимостью от 3 до 10 человек. Они по-разному оборудованы: в переговорке может быть стол, маркерная доска, компьютер и телевизор, к которому можно подключить ноутбук.

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

Смотрите, как я нашёл простое решение данной задачи, исследуя прототип или просмотрев мой пояснительный видеоролик.

Это набросок-пример пользовательского сценария, реализованный в виде прототипа Figma: у моих коллег, занимающихся разработкой мобильных приложений для Управляющих жилищно-коммунальных компаний возник вопрос — как можно реализовать регистрацию нового пользователя в приложении с применением двухфакторной авторизации? Так же новый пользователь должен придумать пароль и указать адрес. Предполагается, что в базе Управляющей Компании уже существует связка телефон+адрес. Таким образом, в предложенном мною сценарии при корректно введённых данных происходит верификация нового пользователя.
Здесь продемонстрирован только вариант с удачным результатом при корректном вводе всей необходимой информации при условии “один пользователь — один адрес”.
Все элементы дизайна - условны и служат лишь демонстрации юзер-флоу.

Это вторая версия сайта. Первый сайт был создан в 2009 году совместно с Redix.
Агентство «Лагуна» расположено в городе Анапа, на побережье Черного моря в России. Агентству уже 25 лет, оно одно из старейших в России. И все это время – нас связывают прочные партнерские отношения.

В дизайне важно было отразить морскую тематику и немного затронуть тему космоса. Владелец агентства раньше работал в космической отрасли.
Поэтому появились волны, плавные линии, брызги. Были придуманы соответствующие уникальные иконки.
Прототипирован и спроектирован в Figma, собран на MODX Revo. Векторные элементы, созданы в Corel Draw.

Для традиционного осеннего похода нашего турклуба по был разработан и собран промо-лэндинг на Tilda с помощью как стандартных 
так и Zero-blokcs.

Для лэндинга была отрисована векторная иллюстрация для обложки в CorelDraw, изображающая сам хребет Нурали и условный маршрут.
Были отсняты и обработаны фотоматериалы, созданы тематические иконки.

Так же были подготовлены промо-материалы 
для анонсирования события в социальных сетях.

Компания Spidermash - российский производитель валковых прессов. Это уже второй, созданный мною сайт компании. Наше сотрудничество началось в 2007 году с разработки логотипа и элементов корпоративной атрибутики. В то же время был создан первый вариант сайта.

Задача проекта была создать сдержанный информативный мультиязычный сайт с каталогом продукции компании. Мною было разработано техническое задание, выполнено прототипирование, подготовлены обучающие материалы по наполнению и управлению контентом. Так же мною были подготовлены и обработаны технические иллюстрации, фотоматериалы, иконки.
Сайт собран на MODX-Revo.

Компания Armacon является российским разработчиком и производителем оружейного тюнинга.

В данном проекте я выступал и как менеджер проекта и как дизайнер. Мною было разработано и подготовлено техническое задание, создан прототип, разработаны и согласованы дизайн-макеты. Под моим управлением была выполнена html-вёрстка и подключение сайта. Мною были подготовлены учебные материалы для Заказчика как управлять своим новым интернет магазином и оказана помощь в его первичном наполнении контентом.

Дизайн и прототипирование выполнено в Figma, сборка на MODX Revo.

Промо лэндинг для нашего турклуба, посвящённый походу на Алтай с восхождением на гору Белуха.
Для этого лэндинга по ранее сделанным мною фотографиям Аккемского озера была создана векторная иллюстрация. В этом же стиле были созданы иконки меню и разделов, иконки социальных сетей, а так же нарисован наш талисман - вязаный Кот Франк.
Ранее мною был создан логотип мероприятия.
Прототип и дизайн лэндинга выполнены в Figma, собран на Zero-блоках Tilda. Векторные элементы, отрисованны в Corel Draw.

Олегри — это российский брэнд предлагающий средства ухода за волосами корейского производства.

Этот промо-лэндинг — создан на замену предыдущей, так же ранее разработанной мною первой версии корпоративного веб-сайта брэнда.

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

Для лэндинга я так же выполнил обработку фотографий, придумал необычные CTA-кнопки, подобрал и доработал тематические иконки.
Лэндинг собран на MODX-Revo.

Еще один промо-лендинг бренда Olegri — предложение уникального продукта — аппликатора, выполненного в виде стёганного одеяла, наполненного шунгитовыми камнями.

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

Лендинг собран на MODX-Revo.

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

Мною разработаны макеты всех страниц сайта, в соответствии с техническим заданием - только их десктопные версии.

Были предложены варианты логотипа и на основе принятого варианта составлен брендбук с элементами корпоративной атрибутики. В основе знака лежат кириллические буквы П и С — начальные слова названия агентства в виде крыши — символа убежища, вписанного в круг, то есть в сферу.