Привет, после этого поста и до сегодняшнего дня я занимался созданием нового дизайна. В этот раз решил, что хочу сделать акцент на продукте.
Так и появился он,
Это полностью выдуманный магазин электронных сигарет. Дизайн создавался чисто для портфолио.
Почему вообще электронки?
По мимо того, что у меня есть вредная привычка. У электронок достаточно простая форма, но сильно отличаются материалы, размеры, экраны и всякие мелкие детали. Поэтому на них удобно учиться показывать разницу между товарами.
Сначала появились три основных устройства - SILT ONE, SILT AIR и SILT CORE. Под каждое я попытался сделать свою визуальную подачу.
Один более простой и минималистичный, второй лёгкий, третий уже с экраном и настройками. Дальше сгенерил и другие модели, которые показы в каталоге.
Кстати, как раз таки на каталог я потратил больше всего времени. Он дергался, слишком сильно лагал и ощущался так, будто он не принадлежит к самому сайту. Но основные проблемы были именно с кривой анимацией.
Сколько бы правок я не вносил, какого контекста они бы не были - мне все равно максимально не нравилось то, что получается. Поэтому я порыскал и нашел этот скилл - UI Animation. Он чем то похож на Emil Design Engineering (который упоминал в прошлом посте). Но слегка отличается в том, что он разбирает дерганные анимации, резкие переходы, непрерывность движения и обратные состояния.
Что использовалось из интересного при создании:
— Первый экран и каталог сделаны через sticky-сцены. Пользователь продолжает листать страницу, но сам блок какое-то время остаётся на месте. Внутри него уже меняются устройства, фон, текст и остальные элементы.
— В каталоге вертикальный скролл превращается в горизонтальное движение. Так можно показать больше устройств и не делать очередную бесконечную сетку из карточек (я ее пиздец хейчу хз почему).
— Ещё я отказался от резкого переключения между готовыми состояниями. У всей сцены есть непрерывный прогресс от 0 до 1, и уже от него рассчитывается положение карточек, их прозрачность и момент перехода к следующему блоку.
— Движения при скролле дополнительно сглаживаются. Также при движении есть небольшая инерция из за которой карточки перестают дергаться.
— Для пользователей с отключёнными анимациями я ещё оставил обычную последовательную версию товаров.
Теперь можно сказать, что это моя некая постоянная рубрика. Я буду показывать вам то, чему научился и что сделал.
Сейчас хочу еще сильнее в это погрузиться, потому что доставляет невероятное удовольствие (осталось только придумать, как это можно монетизировать).
Сейчас активно готовлю хороший видеоролик на ютуб, выйдет уже в течение недели. Еще увидимся!