Дизайн мобильного приложения и веб-версии для компании Fulled

Старый дизайн ПК

Поиск стиля

Клиент чётко обозначил — ищем что-то похожее на ivi или okko. Значит фиолетовые цвета и похожие акценты.

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

Вставки в рабочих столах

В экране с рабочими столами была проблема — их сложно отличить. 15 одинаковых плиток и среди них нужно найти тот, который нужен сейчас — такое себе удовольствие.

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

Самое простое, что пришло в голову — номера.

Fulled, экран приложения с рабочими столами, 1 версия
Номера лекций

Но потом пришла идея добавить иконки для каждого рабочего стола. Я думал это будет круто. Лекция по биологии — иконка молекулы, математика — иконка калькулятора. Задумано — сделано.

Fulled, экран приложения с рабочими столами, 2 версия
Иконки

Но вылезла пара вопросов. Кто будет загружать и подбирать иконки? Что, если лекций по математике будет 10? В них снова можно потеряться.

В итоге пришёл к начальному варианту с цифрами.

Fulled, экран приложения с рабочими столами, 3 версия
Первоначальный вариант

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

Страница настроек

Со страницей настроек пришлось повозится 🙂 Изначально она выглядела вот так.

Страница настроек старой версии дизайна ПК, fulled
Страница настроек

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

Если мы знаем заранее, в каком размере должен быть дорожный знак — зачем нам бегунки? Мы же можем ввести точные значения ширины и высоты.

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

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

Первые версии мне не нравились. Я нащупывал стиль.

В этих вариантах не было баланса. Лишь с последующими версиями начало приходить понимание как выстроить его.

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

Последующие версии

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

Страница настроек в новой версии дизайна ПК, fulled

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

Дизайн мобильного приложения и веб-версии для компании Fulled 22

Меню

Изначально шапка была разработана с минимальным количеством элементов: ссылка на скачивание, профиль и иконка меню.

Меню было разработано всплывающим окном.

Дизайн мобильного приложения и веб-версии для компании Fulled 23
Меню

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

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

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

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

Дизайн мобильного приложения и веб-версии для компании Fulled 24

Скрытие и полноэкранность виджетов

У виджетов была пара особенностей — их можно было показывать/скрывать и раскрывать/скрывать на весь экран.

Это нужно было показать в интерфейсе. Первый вариант был такой. Кнопки были мелкими и неприметными.

Дизайн мобильного приложения и веб-версии для компании Fulled 25

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

Дизайн мобильного приложения и веб-версии для компании Fulled 26

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

Дизайн мобильного приложения и веб-версии для компании Fulled 27

Хочешь такой же результат?
Имя
Контакт для связи
Подробнее о проекте

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