Эффект дымчатого перехода: начало нового тренда?
Как правило, домашняя страница сайта состоит из элементов брендинга, иконок или иллюстраций. Но недавно дизайнеры при создании сайта стали добавлять туда анимацию или применять различные варианты интерактивного дизайна. Эти нововведения не только изменили всю индустрию веб дизайна и завоевали многочисленные награды, но и полюбились пользователям. В итоге сейчас многие сайты уже включили анимацию различного рода в свой дизайн, но сегодня мы можем быть свидетелями возникновения новой интересной тенденции необычного перехода между элементами дизайна, которая наиболее выигрышно смотрится вкупе с анимацией, а именно эффекта дымчатого перехода.
Сайт компании Sevenhills Wholefoods
Sevenhills Wholefoods – это рынок фермерских продуктов питания, который предлагает своим клиентам изменить пищевые привычки и перейти на здоровое питание. И в качестве самого лучшего варианта презентации своего продукта они выбрали формат рассказа истории. Они создали серию рассказов о продуктах, которые наглядно демонстрируют, как покупатель сможет приготовить каждый продукт. Но нас привлекло то, как они реализовали свою задумку. Каждый раз, когда вы переходите на ссылку «Начать путешествие», включается эффект дымчатого перехода, который запускает два варианта рассказа истории на ваш выбор.
Какие тренды в ходу в 2019 году? Читайте свежую статью про тенденции в графическом дизайне 2019.
Создатели сайта выиграли награду Сайт Дня (Site of the Day) и награду Разработчикам (Developer Award) от Awwwards.com, награды Сайт Дня (Site of the Day) от theFWA.com и Сайт Дня (Site of the Day) от cssdesignawards.com.
Робин Мастромарино
Robin Mastromarino – это UX/UI-дизайнер из Франции, у которого просто отличный сайт, презентующий его работы. Это наш любимый сайт не только потому, что у него очень целенаправленный дизайн, но и потому, что он доказал одну вещь: эффект дымчатого перехода просто отличная находка в дизайне, и Робин профессионал в его применении.
Робин Мастромарино выиграл награды Сайт Дня (Site of the Day) от awwwards.com, Мобильный сайт недели (Mobile of the Day) от theFWA.com, Сайт Дня (Site of the Day) от cssdesignawards.com, Сайт Дня (Site of the Day) от cssawds.com.
Trainrobber
Можно сказать, что здесь использованы «дымчатые переходы на стероидах»: параллакс-навигация и много-много дыма.
Создатели сайта выиграли награды Сайт Дня (Site of the Day) от awwwards.com и Сайт Дня (Site of the Day) от theFWA.com.
Cavalier
Cavalier – это игра, созданная командой yourmajesty.co с целью протестировать последние технологии в веб-дизайне. В числе других, на сайте можно найти и эффект дымчатого перехода.
Для особо интересующихся, приводим список того, что они использовали для создания этого эффекта: HTML5, CSS3, WebGL, Pixi, JavaScript, three.js, SVG animation, bodymovin.js, howler.js, 3D audio, WebAudio, GSAP.
Они обладатели премий Сайт Дня (Site of the Day) от awwwards.com, Сайт Дня (Site of the Day) от theFWA.com и Сайт Дня (Site of the Day) от cssdesignawards.com.
National Geographic
National Geographic написали статью на тему, каково быть медведем в парке Йеллоустон. Нам не очень интересны медведи. Нам гораздо интереснее то, как им удалось создать такую потрясающую историю. Они смешали несколько отличных техник и использовали эффект дымчатого перехода, чтобы показать фотографии медведей. Это отличный пример того, как за счет использования перехода с эффектом дыма можно получить отличный результат и создать запоминающуюся веб-историю.
И что же объединяет все веб-сайты, которые мы перечислили? Правильно! Все они выиграли кучу наград.
Понравилась наша статья, поделитесь с друзьями!
Удачи в бизнесе, ваш mindrepublic.ru
