{"id":10556,"title":"\u0427\u0442\u043e \u0437\u0430\u0449\u0438\u0449\u0430\u043b\u0438 \u043f\u0430\u0440\u043e\u043b\u044f\u043c\u0438 \u0434\u0440\u0435\u0432\u043d\u0438\u0435 \u043b\u044e\u0434\u0438 ","url":"\/redirect?component=advertising&id=10556&url=https:\/\/vc.ru\/promo\/341444-istoriya-loginov-i-paroley&placeBit=1&hash=4378c7882a031e776dfd38e6a8e054710d9d42ecd8bac882e0a8f464b1c772cc","isPaidAndBannersEnabled":false}
Дизайн
Roman Kamushken

Зачем покупать UI кит: редизайна кейс для GTrendz

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

Очередное письмо пришло от недавнего клиента — дизайнера-фрилансера из Индии, Нарендры Рама. При помощи нашего UI кита Material-X, он добился качественного и профессионального редизайна личного кабинета интернет-магазина GTrendz.

Вариации компонентов App bar из Material X

Чем была хороша данная инвестиция? В чем преимущества UI китов? Всё просто — такие комплекты, как Material-X, позволяют дизайнерам, разработчикам и целым корпорациям создавать удобные, полезные и визуально-цепляющие дизайны приложений и веб-сайтов в короткие сроки. Как результат — вам не нужно тратить время на отрисовку компонентов, ведь у вас уже есть UI кит, позволяющий вам креативить и разрабатывать крутые дизайны из готового.

Нарендра работает дизайнером на фриланс-основе с 2020 года. У него бэкграунд программиста, он также любит писать тексты, у них с другом даже есть своя интернет-компания, которая специализируется на создании веб-продуктов. Но основная его страсть — это дизайн. Реализовывая себя в качестве Full-stack дизайнера, он любит создавать как графические элементы и продавать их онлайн, так и работать внештатно как UX/UI дизайнер.

Детали проекта

Проект, в который был вовлечен Нарендра — веб-сайт мультивендорной e-commerce платформы GTrendz. Это самый большой интернет-магазин обувной продукции и аксессуаров в Индии.

Главная страница и страницы товаров выглядели хорошо, но панель управления продавца оставляла желать лучшего. Дизайну пользовательского интерфейса не хватало эстетики и юзабилити. Требование заказчика - сделать UI личного кабинета более удобным, современным, гармоничным и интуитивно понятным.

"Работать над существующим проектом, когда получаешь “по наследству” чью-то работу — вещь непростая. Редизайн требует от дизайнера ответственности, знаний, исследований и анализа"

Нарендра Рам
Freelance designer

UX этап

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

После сбора отзывов от пользователей / продавцов GTrendz, он подвел итоги и составил affinity-диаграмму. Затем были созданы lo-fi вайрфреймы будущих экранов.

UI этап

У Нарендры уже был опыт создания дашбордов, но это отнимало много времени.

"Я не знал про существование UI китов. Пролистывая Dribbble, я обнаружил UI кит Material-X от Setproduct. Компоненты были эстетически приятными. Они были сгруппированы и скомпонованы таким образом, чтобы дизайнер мог использовать их легко и непринужденно. Думать долго не пришлось, я сразу же приобрел его"

Нарендра Рам
Freelance designer
Вариации бокового меню из Material X

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

Нарендра разработал 10 экранов различной функциональности:

  • Лендинг страницы продавца
  • Панель управления
  • Заказы
  • Продукты
  • Инвентарь
  • Заработок
  • Доставка
  • Отчеты
  • Возвраты
  • Страница профиля

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

Заказчик тоже остался доволен новым видом панели управления продавца. Общий стиль, решения для кнопок и иконок (которые были уже предварительно разработаны), паттерны и другие детали были высоко оценены руководством GTrendz.

Результаты редизайна

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

Давайте разбирать:

Экран “Панель управления”

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

Здесь были применены готовые компоненты “Metrics” и “Cards”, которые лишь слегка были переделаны под нужды проекта.

Экран “Заказы”

Идентификатор заказа оптимизирован. Благодаря компоненту “Segments” можно легко переключаться между подкатегориями заказов (Новые, Заказанные, Доставленные и Отмененные). Также применены компоненты “Cards”, “Buttons” (в разных вариациях) и выпадающие меню - благодаря им контент не переполняет экран и его легче воспринимать. А такие кнопки, как “Распечатать счет-фактуру” и “Распечатать ярлык доставки”, сгруппированы в кнопке “Настройки”.

Экран “Продукты”

В категории продуктов такие элементы как инпуты, кнопки, тумблер и т.д. были заменены на компоненты из Material-X (плюс добавлена таблица Datagrid, которая позволяет просматривать и фильтровать продукцию). Благодаря им, процесс создания форм, таких как “Size Variants” или “Drag & Drop Images” был упрощен в разы. Также отличным решением дизайнера было уменьшение количества цветов (первоначально кнопки на экране имели 5 разных цветовых вариаций).

Экран “Заработок”

Этот экран был оживлен за счет таких компонентов, как “Cards”, “Stats Bars”, “Segments” (можно переключаться на Выплаты и Заработок), иконок и кнопок. Также добавлена очень гибкая таблица “Datagrid”, где теперь отображается разного рода информация (дата, способ оплаты, ID транзакции, баланс и другое).

Экран “Профиль”

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

Экран “Отчеты”

Таблица категории “Отчеты” обновлена с помощью выпадающих элементов и компонента Datagrid. Посредством обновленной таблицы, автор добавил еще несколько категорий, а в выпадающих меню можно найти более подробную информацию по товару. Также UI был улучшен благодаря изображениям обуви и добавлением пространства - это придало элегантности пользовательскому интерфейсу.

Экран “Инвентарь”

Данный экран оснащен следующими элементами из Material-X: Datagrid, счетчики, кнопки и др. Таблица инвентаря обновлена и выглядит органичнее за счет более грамотной структуризации элементов. Все данные по конкретному товару теперь в отдельном оверлей-окне, где и пригодились счетчики и кнопки.

Прототипирование и разработка

Нарендра соединил все основные функции экранов, создав минимальный прототип.

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

Основные выводы от дизайнера

Нарендра отмечает, что в Material-X есть все, что нужно любому дизайнеру.

Он создавал свои собственные компоненты, выбирая несколько различных элементов, разбирая их, а затем создавая новые компоненты, необходимые для проекта.

Скрытые UI-элементы внутри компонента оказались очень полезными и удобными. Благодаря этой фишке, компонент трансформировался в другой вариант с новой функцией/опцией. Такие тонкости и продуманность пришлись парню по душе.

"Material-X" - это первый UI кит, который я когда-либо покупал. И это стоило того! Он масштабируемый, трансформируемый и эстетически приятный. Количество компонентов просто огромно. Видно, как в Setproduct продумали все возможные требования и сценарии. Что еще нужно дизайнеру?"

Нарендра Рам
Freelance designer

Заключение

Это был очень интересный проект для Нарендры. Он не только выполнил работу за короткое время, но и получил бесценный опыт, которым можно похвастать в своем портфолио. Кстати, его презентацию по данному проекту можно оценить на его странице в Behance.

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

Не тупи — UI кит купи 😉

0
6 комментариев
Популярные
По порядку
Написать комментарий...
Anton Leonov

Статья-реклама UI-кита, это понятно. Вы уже если рекламируете, то показывайте не результат, а процесс создания макетов.

Опять же макеты макетами, а что реально стало лучше и зачем нужны были изменения? Ничего про это не сказано. Стало красивше? Ну наверное. Стало лучше? Если да, то скажите конкретно чем. Что в работе проделано такого, что сделало интерфейс более интуитивно понятным? 

Ответить
3
Развернуть ветку
alex Gour

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

А так, движение ради картинки и не факт, что стало удобнее

Ответить
1
Развернуть ветку
Maxim

Всё классно, но как только начинаешь использовать кириллицу вся привлекательность испаряется. Когда будет кит с русским языком?

Ответить
2
Развернуть ветку
Roman Kamushken

шрифт Manrope, который идёт основным к киту без проблем поддерживает русификацию.

Ответить
0
Развернуть ветку
Maxim

А на демке IBM PLEX что-то..

Ответить
0
Развернуть ветку
Pixel Lens

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

Ответить
0
Развернуть ветку
Читать все 6 комментариев
#20вопросов Сергею Иванову, соучредителю и генеральному директору ООО "ЭКО ПРОДУКТ"

Ну что, мы вернулись! Welcome в 2022 год, который обещает быть очень интересным и не менее продуктивным чем 2021. Героев для нашей рубрики #20вопросов мы выбираем тщательно, стараясь приглашать спикеров, которые могут осветить важные и насущные темы.

Обзор трёх месяцев суда над Элизабет Холмс: что нового рассказали инвесторы, партнёры и работники о ней самой и Theranos Статьи редакции

Экс-сотрудники говорили о преследованиях и давлении, совет директоров не разбирался в деталях, а Холмс рассказывала про тяжёлое прошлое и влияние бывшего партнёра на неё.

Для чего «Знаем лично» запускает отдельные аккаунты Instagram в разных городах

В конце ноября такой журнал появился в Казани и стал четвертым аккаунтом проекта вслед за Москвой, Санкт-Петербургом и Краснодаром. В чем ценность аккаунтов для локального бизнеса, рассказали контент-продюсер, SMM-менеджер и продакт проекта МТС Знаем лично.

«Яндекс» договорился о мировом соглашении с Avito, Profi.ru и другими по делу о «колдунщиках» — «Интерфакс» Статьи редакции

Компания должна выплатить 1,5 млрд рублей «Российскому фонду развития информационных технологий», сообщают источники издания.

«Кинопоиск» стал лидером по количеству подписчиков среди онлайн-кинотеатров в 2021 году — GfK Статьи редакции

Пользователи больше всего слышали про «Кинопоиск», ivi и Okko.

Acer выпустила первый ноутбук из переработанного пластика

Теперь он продаётся в России.

Бренд и лояльность клиентов ценнее финансов: история любимой покупки Баффета — кондитерской See’s Candys Статьи редакции

В 1972 году инвестор сделал нехарактерное для себя вложение — купил небольшое производство шоколадных конфет. Баффет не стал расширять компанию, а сохранил её небольшой, сделав ставку на качество. Благодаря этому она хоть и медленно, но стабильно росла, а на заработанные деньги Баффет в 1980 годах купил акции Coca-Cola.

Магазин See’s Candies
Сбермегамаркет не возвращает поддельный товар. Ни одного сообщения от компании по открытому обращению уже больше месяца
Искусственная жизнь и метавселенная: рост патентной активности в сфере ИИ

Крупнейший агрегатор патентных данных IFI Claims проанализировал, какие страны и компании наиболее активно регистрируют права на изобретения в области компьютерных систем, основанных на биологических моделях, иными словами – нейросетях.

Как чат-боты помогают МФО: скоринг, оформление займов и проверка документов в боте

Идея с оформлением микрозаймов через чат-бота в мессенджере упрощает взаимодействие заемщика и МФО и позволяет эффективнее оценивать кредитоспособность клиентов. Стоит ли интегрировать чат-ботов в свои внутренние процессы? Насколько они полезны для владельцев бизнеса? Какие обязанности можно и нужно делегировать чат-ботам для выдачи кредитов? В…

В Великобритании отменят сбор с владельцев телевизоров в пользу BBC — это около 75% выручки компании Статьи редакции

Сбор действует в стране с 1946 года.

null