юай
юай
@uimotion
814 подписчиков
8 постов
Посты
Ну что, отошли от майских праздников? Пора за работу!
Последние несколько месяцев выдались плотными по задачам, и времени на канал почти не остается. Но контент тем временем всё равно создаётся — пока в черновиках. Просто не успеваю собрать и оформить его в полноценные посты. Но всё обязательно будет — stay tuned, как говорится! Есть пара безумно крутых идей, и я очень надеюсь поделиться ими с вами этим летом.
Кстати! В конце марта я начал в бете проводить регулярные практики по UI-анимации в After Effects — каждую пятницу утром. Начали с самого нуля, для тех, кто вообще не работал в AE: погружаемся в детали, изучаем инструменты, скрипты, эффекты, работу с композициями, масками и правильную организацию проекта.
Ребята фигачат — и, кстати, у них все отлично получается! Изучают то, что просто так не нагуглишь: базу UI-анимации, которую я собрал за годы практики, ошибок и личного опыта. А я в процессе всё глубже погружаюсь в образовательную часть — ищу, как оптимальнее донести всю эту информацию.
@uimotion
Anton Pecheritsa
@pecherits4
Moscow, Russia • Russian, English
#WebDesign #Creative #Motion
● Career
— Art Director at beta
— Ex-Digital Designer at Geex Arts
— Ex-Product Designer at Jet Admin
● Achivements
— 8+ years of multidisciplinary design experience
— Awwwards Jury from 2020
— x1 Site of the Month and x2 SOTD on CSSDA, x1 SOTD on Awwwards and dozens of other awards
— Author of a telegram channel about animation and interface interactions (https://t.me/uimotion)
● Open to
— Art Direction and Design Review sessions
— Public speaking, interviews and podcasts
— Collaborations (Creative projects, UI animations)
— Mentoring and consultations
— Talking and coffee
● Links
→ Portfolio on Dribbble
→ Networking on LinkedIn
→ Blog on https://t.me/uimotion">Telegram channel
→ Chat in Telegram
→ Email to info@uxdesigner.im
Мелочи и детали ✨
Обратили внимание на то, как круто проработаны взаимодействия с элементом навигации из прошлого референса?
В этом году хочу сделать особый акцент на микровзамодействиях. Помню как будучи мидл-дизайнером где-то в 2018 году, четко определил для себя, что моей киллер-фичей как специалиста всегда будет исключительная проработка мельчайших деталей в проектах, и особенно при работе над анимациями интерфейсов.
Я всегда обращаю особое внимание на кнопки, загрузчики, элементы навигации и прочие интерактивные штуки. И то с какой любовью и страстью могут быть сделаны те или иные микровзаимодействия и микроанимации в работах различных дизайнеров всегда заряжает идеями и вдохновением.
Для меня это всегда было чем-то особенным, тайным и сокровенным, но пришло время начать делиться с вами.
@uimotion
Сегодня хочу поделиться с вами сайтом фотографа — https://www.ottografie.nl/">OTTO VAN DEN TOORN.
Проект выделяется нестандартным подходом к навигации: привычное меню здесь отсутствует, а управление осуществляется через нижнюю панель, которая динамически меняется в зависимости от контекста.
Главная страница представляет собой бесконечный скролл с фотографиями, распределёнными по категориям. С помощью панели навигации можно быстро переключаться между категориями. При переходе на страницу проекта панель адаптируется: позволяет листать проекты и сбрасывать текущий выбор.
По клику на любое изображение из проекта, пользователь попадает в режим галереи, где панель становится элементом управления масштабом. Ну а на странице About этот элемент подсказывает, на каком блоке вы находитесь.
В результате мы имеем приятный сайт с интересной механикой, где отсутствие привычного меню компенсируется свежим и понятным решением. Подобные проекты предоставляют пространство для экспериментов, и здорово, что есть дизайнеры, которые этим пользуются.
https://www.ottografie.nl/">https://www.ottografie.nl/
@uimotion
Сегодня хочу поделиться с вами сайтом студии художников и аниматоров — https://thelinestudio.com/">THE LINE STUDIO.
В продолжение темы транзишенов и лоадеров из прошлых постов, этот проект является еще одним отличным примером их реализации. Сайт впечатляет в первую очередь своими переходами «под углом», которые используются как между блоками, так и между целыми страницами.
Точно такой же транзишен между блоками по скроллу на главной странице создает эффект наслоения, что напрямую отсылает к процессу создания анимационных роликов (основное направление студии), где различные детали и эффекты также накладываются друг на друга, формируя финальную сцену.
Если оценивать дизайн проекта в целом, то все страницы выглядят стильно и гармонично. Лично мне подобная верстка контента напомнила прошлую версию сайта студии Kurppa Hosk, будто ребята подцепили их стилек и чуток адаптировали под себя.
Ну и конечно приятно, что все идеи по анимациям сохранены в рамках разных разрешений экранов. На мобильных устройствах вы можете получить тот же самый опыт, что и на десктопе, что, конечно же, должно быть стандартом для подобных проектов.
https://thelinestudio.com/">https://thelinestudio.com/
@uimotion
Лоадеры и транзишены
В этой серии постов поговорим про использование лоадеров (начальная загрузка) и транзишенов (переходы между разделами) при работе над сайтами, а также рассмотрим ряд примеров их реализации.
✦ Для чего нужны лоадеры?
1) Техническая необходимость – предоставить достаточно времени на подгрузку данных (чтобы не видеть этого в процессе эксплоринга);
2) Визуальная коммуникация – задать необходимое настроение и стиль проекта еще до того, как ушли в изучение содержания;
3) Информирование – передать какой-то месседж сразу или заонбордить на взаимодействия.
✦ Так, а для чего нужны транзишены?
1) Бесшовность – создать плавный переход с одной страницы на другую;
2) Изменение лейаута – аккуратно поменять принципы построения контента и верстку (с главной страницы на внутряк – они могут сильно отличаться);
3) Техническая возможность – подгрузить доп информацию в процессе перехода с одной страницы на другую, убрав часть нагрузки с лоадера, а также скрыть внутреннюю кухню перехода между страницами.
Лоадеры и транзишены – важная часть дизайна взаимодействий, и они должны учитываться при разработке дизайна всего проекта. При неправильной реализации можно значительно испортить общее впечатление от проекта и потерять пользовательское внимание.
***
В закрепе пример разных вариантов лоадера для сайта Boba x Ice Cream
@uimotion
Сегодня хочу поделиться с вами любопытным, но немного противоречивым проектом — сайтом студии XENOS Printing House.
Это портфолио агентства, специализирующегося на полиграфии и печатном дизайне, где все сделано будто специально не так, как ожидаешь.
На первый взгляд, видишь элемент и сразу понимаешь, как он должен работать, опираясь на свой опыт и визуальные подсказки. Но затем выясняется, что все немного иначе.
Из подобных ситуаций на сайте:
✦ После перезагрузки сайта или при возврате на главную можно увидеть залитый цветом прямоугольник, который нужно стереть, перемещая курсор, чтобы прочитать текст.
✦ Логотип по мере скролла сворачивается в букву «Е», напоминающую бургер, что вызывает ощущение, будто это и есть меню сайта. Но нет — меню находится всегда справа, вот и живите с этим.
✦ Слайдер, элементы которого перемещаются поверх выбранного изображения с помощью Drag, намекает на это, но при этом не сообщает, что для переключения между слайдами нужно кликнуть на элемент (никакой отдачи нет).
И таких моментов довольно много. Что интересно, они оставляют довольно странное впечатление.
В итоге, с одной стороны, кажется, что некоторые решения сделаны неумело или спорно. Но с другой, этот сайт вызывает эмоции, будто ты видишь что-то другое, что-то выбивающиеся из общей картины проектов. Видно, что это сделано специально, что это не ошибка, а набор конкретных решений, которые как раз и задают то самое ощущение необычности и самобытности, выводящие из зоны комфорта. И это круто.
https://www.xenosprint.gr/
@uimotion