юай

814 подписчиков
5 постов
Посты
Мелочи и детали ✨
Обратили внимание на то, как круто проработаны взаимодействия с элементом навигации из прошлого референса? В этом году хочу сделать особый акцент на микровзамодействиях. Помню как будучи мидл-дизайнером где-то в 2018 году, четко определил для себя, что моей киллер-фичей как специалиста всегда будет исключительная проработка мельчайших деталей в проектах, и особенно при работе над анимациями интерфейсов. Я всегда обращаю особое внимание на кнопки, загрузчики, элементы навигации и прочие интерактивные штуки. И то с какой любовью и страстью могут быть сделаны те или иные микровзаимодействия и микроанимации в работах различных дизайнеров всегда заряжает идеями и вдохновением. Для меня это всегда было чем-то особенным, тайным и сокровенным, но пришло время начать делиться с вами. @uimotion
Video is not supported
Сегодня хочу поделиться с вами сайтом фотографа — https://www.ottografie.nl/">OTTO VAN DEN TOORN.
Проект выделяется нестандартным подходом к навигации: привычное меню здесь отсутствует, а управление осуществляется через нижнюю панель, которая динамически меняется в зависимости от контекста. Главная страница представляет собой бесконечный скролл с фотографиями, распределёнными по категориям. С помощью панели навигации можно быстро переключаться между категориями. При переходе на страницу проекта панель адаптируется: позволяет листать проекты и сбрасывать текущий выбор. По клику на любое изображение из проекта, пользователь попадает в режим галереи, где панель становится элементом управления масштабом. Ну а на странице About этот элемент подсказывает, на каком блоке вы находитесь. В результате мы имеем приятный сайт с интересной механикой, где отсутствие привычного меню компенсируется свежим и понятным решением. Подобные проекты предоставляют пространство для экспериментов, и здорово, что есть дизайнеры, которые этим пользуются. https://www.ottografie.nl/">https://www.ottografie.nl/ @uimotion
Video is not supported
Сегодня хочу поделиться с вами сайтом студии художников и аниматоров — https://thelinestudio.com/">THE LINE STUDIO.
В продолжение темы транзишенов и лоадеров из прошлых постов, этот проект является еще одним отличным примером их реализации. Сайт впечатляет в первую очередь своими переходами «под углом», которые используются как между блоками, так и между целыми страницами. Точно такой же транзишен между блоками по скроллу на главной странице создает эффект наслоения, что напрямую отсылает к процессу создания анимационных роликов (основное направление студии), где различные детали и эффекты также накладываются друг на друга, формируя финальную сцену. Если оценивать дизайн проекта в целом, то все страницы выглядят стильно и гармонично. Лично мне подобная верстка контента напомнила прошлую версию сайта студии Kurppa Hosk, будто ребята подцепили их стилек и чуток адаптировали под себя. Ну и конечно приятно, что все идеи по анимациям сохранены в рамках разных разрешений экранов. На мобильных устройствах вы можете получить тот же самый опыт, что и на десктопе, что, конечно же, должно быть стандартом для подобных проектов. https://thelinestudio.com/">https://thelinestudio.com/ @uimotion
Video is not supported
Лоадеры и транзишены
В этой серии постов поговорим про использование лоадеров (начальная загрузка) и транзишенов (переходы между разделами) при работе над сайтами, а также рассмотрим ряд примеров их реализации. ✦ Для чего нужны лоадеры? 1) Техническая необходимость – предоставить достаточно времени на подгрузку данных (чтобы не видеть этого в процессе эксплоринга); 2) Визуальная коммуникация – задать необходимое настроение и стиль проекта еще до того, как ушли в изучение содержания; 3) Информирование – передать какой-то месседж сразу или заонбордить на взаимодействия. ✦ Так, а для чего нужны транзишены? 1) Бесшовность – создать плавный переход с одной страницы на другую; 2) Изменение лейаута – аккуратно поменять принципы построения контента и верстку (с главной страницы на внутряк – они могут сильно отличаться); 3) Техническая возможность – подгрузить доп информацию в процессе перехода с одной страницы на другую, убрав часть нагрузки с лоадера, а также скрыть внутреннюю кухню перехода между страницами. Лоадеры и транзишены – важная часть дизайна взаимодействий, и они должны учитываться при разработке дизайна всего проекта. При неправильной реализации можно значительно испортить общее впечатление от проекта и потерять пользовательское внимание. *** В закрепе пример разных вариантов лоадера для сайта Boba x Ice Cream @uimotion
Video is not supported
Сегодня хочу поделиться с вами любопытным, но немного противоречивым проектом — сайтом студии XENOS Printing House.
Это портфолио агентства, специализирующегося на полиграфии и печатном дизайне, где все сделано будто специально не так, как ожидаешь. На первый взгляд, видишь элемент и сразу понимаешь, как он должен работать, опираясь на свой опыт и визуальные подсказки. Но затем выясняется, что все немного иначе. Из подобных ситуаций на сайте: ✦ После перезагрузки сайта или при возврате на главную можно увидеть залитый цветом прямоугольник, который нужно стереть, перемещая курсор, чтобы прочитать текст. ✦ Логотип по мере скролла сворачивается в букву «Е», напоминающую бургер, что вызывает ощущение, будто это и есть меню сайта. Но нет — меню находится всегда справа, вот и живите с этим. ✦ Слайдер, элементы которого перемещаются поверх выбранного изображения с помощью Drag, намекает на это, но при этом не сообщает, что для переключения между слайдами нужно кликнуть на элемент (никакой отдачи нет). И таких моментов довольно много. Что интересно, они оставляют довольно странное впечатление. В итоге, с одной стороны, кажется, что некоторые решения сделаны неумело или спорно. Но с другой, этот сайт вызывает эмоции, будто ты видишь что-то другое, что-то выбивающиеся из общей картины проектов. Видно, что это сделано специально, что это не ошибка, а набор конкретных решений, которые как раз и задают то самое ощущение необычности и самобытности, выводящие из зоны комфорта. И это круто. https://www.xenosprint.gr/ @uimotion
Video is not supported