Редизайн 10 страниц веб-сервиса
Процесс
Поиск стиля
Клиент чётко обозначил — ищем что-то похожее на ivi или okko. Значит фиолетовые цвета и похожие акценты.
Первая версия была в фиолетовом цвете и она была скучной, но зато послужила базой для последующих доработок.
Вставки в рабочих столах
В экране с рабочими столами была проблема — их сложно отличить. 15 одинаковых плиток и среди них нужно найти тот, который нужен сейчас — такое себе удовольствие.
Поэтому принял решение добавить обозначений, которые помогут быстро сориентироваться в списке лекций.
Самое простое, что пришло в голову — номера.
Но потом пришла идея добавить иконки для каждого рабочего стола. Я думал это будет круто. Лекция по биологии — иконка молекулы, математика — иконка калькулятора. Задумано — сделано.
Но вылезла пара вопросов. Кто будет загружать и подбирать иконки? Что, если лекций по математике будет 10? В них снова можно потеряться.
В итоге пришёл к начальному варианту с цифрами.
Да, сейчас не совсем понятно, к какой теме относится. Зато можно быстро найти лекцию по уникальному номеру и не заморачиваться с подбором иконок.
Страница настроек
Со страницей настроек пришлось повозится 🙂 Изначально она выглядела вот так.
Про оформлением помолчим. А по структуре все вроде бы выглядит хорошо. Но есть пара лишних элементов, один из них — слайдеры размеров.
Если мы знаем заранее, в каком размере должен быть дорожный знак — зачем нам бегунки? Мы же можем ввести точные значения ширины и высоты.
С другой стороны. Представим что я хочу бегунками настроить размер. Для того, чтобы бы это было круто, нужно показывать изменение в реальном времени и обновлять настройки без перезагрузки.
Клиент сказал, что мне не сможем этого сделать, поэтому я не стал разрабатывать этот дизайн.
Первые версии мне не нравились. Я нащупывал стиль.
В этих вариантах не было баланса. Лишь с последующими версиями начало приходить понимание как выстроить его.
Здесь рушится миф начинающих дизайнеров о том, что опытный дизайнер садится и за раз делает конфетку. Нет, не за раз.
Последующие версии
В предпоследней версии все элементы встали как надо, но что-то не давало мне покоя.
Мне не давало покоя отсутствие разделения настроек. В итоговой версии убрал лишние заголовки у отображения и разделил линиями блоки настроек, чтобы из-за колонок не создавалось визуальной связи настроек из разных блоков.
Меню
Изначально шапка была разработана с минимальным количеством элементов: ссылка на скачивание, профиль и иконка меню.
Меню было разработано всплывающим окном.
В дальнейшем я переработал меню, так как обдумал пользовательский опыт.
Если я захочу с изображений перейти в устройства, мне нужно будет сделать 2 клика и потратить время на ожидание открытия меню.
Если это будет повторяться часто — пользователь устанет. Поэтому принял решение вытащить навигацию в шапку, а скачивание и профиль сократить до иконок.
В итоге все действия пользователя в шапке сосредоточены в правом углу. Это создаёт привычку. На уровне подсознания будет понятно, где скачивать, переходить в профиль и по страницам.
Скрытие и полноэкранность виджетов
У виджетов была пара особенностей — их можно было показывать/скрывать и раскрывать/скрывать на весь экран.
Это нужно было показать в интерфейсе. Первый вариант был такой. Кнопки были мелкими и неприметными.
Была версия с выбором множества виджетов, но она провалилась из-за того, что все виджеты можно было раскрыть и требования были такими, чтобы все действия выполнялись только над одним виджетом.
В дальнейшем увеличил иконки, так как протестировал и понял, что попасть пальцем по ним будет невозможно.
