SL

Где я пропадаю почти фулл тайм 2 часть

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

Так и появился он, Тайлер Дёрден SILT.

Это полностью выдуманный магазин электронных сигарет. Дизайн создавался чисто для портфолио.

Почему вообще электронки?

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

Сначала появились три основных устройства - SILT ONE, SILT AIR и SILT CORE. Под каждое я попытался сделать свою визуальную подачу.

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

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

Сколько бы правок я не вносил, какого контекста они бы не были - мне все равно максимально не нравилось то, что получается. Поэтому я порыскал и нашел этот скилл - UI Animation. Он чем то похож на Emil Design Engineering (который упоминал в прошлом посте). Но слегка отличается в том, что он разбирает дерганные анимации, резкие переходы, непрерывность движения и обратные состояния.

Что использовалось из интересного при создании:

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

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

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

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

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

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

Сейчас хочу еще сильнее в это погрузиться, потому что доставляет невероятное удовольствие (осталось только придумать, как это можно монетизировать).

Сейчас активно готовлю хороший видеоролик на ютуб, выйдет уже в течение недели. Еще увидимся!

Знакомься - это Леха, или как там по модному «Pet»

Мой друг интроверт, который в несколько раз умнее меня. Он ненавидит мой курсор и в целом избегает меня.

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

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

Леха почти полностью черный. У него нет лица, ног и каких либо признаков того, что он настоящий.

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

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

Я решил объединить две идеи и создать нарисованного, но при этом объемного кента.

А че по анимациям то? На видео показы почти все, но расписать нужно.

В спокойном состоянии Леха едва заметно покачивается в воздухе. Его края постоянно шевелятся, иногда он моргает показывая что все еще жив.

Когда Codex работает над чем то - Леха переходит в более активное состояние. Его тело сильнее колышется, но сферу при этом он все равно не показывает.

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

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

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

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

Где я пропадаю почти фулл тайм

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

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

Купил я как обычно подписку Plus 13 числа и закончилась она у меня за 2 дня, хотя в основном сидел на Terra модели. И меня это так сильно затянуло, что 15 августа я уже был с Pro на x5 (пока что хватает). Пересел на Sol и до сих пор в ахуе насколько просто там все делать.

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

Могу кратким списком поделиться чем пользуюсь и для чего:

— Scroll Scrubbed Visual Sequence - скилл помогает создавать сцены, которыми пользователь управляет через скролл. Анимация может идти вперед и назад, карточка может раскрываться во весь экран и тд.

— Emil Design Engineering - качественные интерфейсные анимации. Помогает подобрать нормальную скорость, плавность, появление элементов и убрать или подправить дерганые переходы.

— Visual Verdict - скилл для сравнения готового сайта с референсом по скриншотам. Он ищет различия в расположении элементов, шрифтах, цветах и отступах.

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

Быстрый вопрос к вам - хочу получить фидбек. Сайт прикрепленный к посту в видео, скажите: что доработать, улучшить или же все заебись.

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

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