В такой творческой профессии, как веб-дизайн, вдохновение играет огромную роль. Не всегда легко найти его, поэтому любая подборка необычных примеров помогает дизайнеру обрести себя.
Будь вы фрилансер или часть большой арт-студии, получить утреннюю дозу вдохновения — отличный способ начать свой день. Приглашаем вас пересмотреть подборку анимированных элементов веб-дизайна. Все они, начиная от простых, анимированных SVG логотипов и заканчивая сложными интерактивными повествованиями, несомненно вдохновят как разработчиков, так и заказчиков. Итак, так смотрите и скажите нам, что вы об этом думаете!
Получите удовольствие от этого забавного анимированного Hero изображения!
Kikk — бельгийский коллектив, продвигающий цифровое искусство, творчество и культуру. Они организовывают и продвигают проекты, в которых технологии сочетаются с искусством, и поэтому вполне естественно, что их веб-сайт должен сам быть произведением искусства.
Играя с глубиной, движением и текстурой, Kikk создали интерактивный 3D ландшафт в пышных розовых и золотых тонах, который реагирует на движение курсора. Текст «Fold/Unfold» движется назад, вперед и по кругу, складывая изогнутые листы бумаги. Эта особенность появляется на передней центральной странице «Kikk Festival-2015».
На той же странице, изображения с участием приглашенных ораторов фестиваля применяют аналогичный подход, играя с глубиной и углами, чтобы создать Apple TV эффект парения.
3D тур по острову Hornøya
Маленький остров Hornøya, который каждое лето становится домом для более чем 70 000 перелетных птиц, стал интерактивной экстраординарной моделью для норвежской телекомпании NRK. Hornøya занимает всего около 40 га территории, однако он полон тысяч жилищ птиц – бакланов и чаек, расположенных вдоль одной из его скал.
Приглашая Вас испытать остров самостоятельно, вам предоставлен топографической макет ландшафта, созданный с использованием реальных спутниковых снимков и аэрофотосъемки. При прокрутке экран вращается и фокусируется на основных достопримечательностях острова — маяке, скалах, что дает вам возможность для его дальнейшего изучения. Там даже присутствуют потоковые кадры из некоторых районов гнездования.
Printed By Somerset’s — Кто сказал, что бумага мертва?
Если ваша компания специализируется на бумаге и полиграфии, веб-сайт – не идеальная для вас среда, не так ли? Если, конечно, вы не сделаете его из бумаги!
Это логика кроется за инновационным сайтом Printed By Somerset’s. Веб-версия представляет собой интерактивный рендеринг совершенно реального, физического куска бумаги. Сама бумага имеет мобильный сайт, который отрывается, карту, которую можно увеличивать и переворачивать, и даже рекламу для конкретного типа текстурированной бумаги, и просто пустой квадрат той же самой бумаги наклеенной на поверхности сайта.
Загляни за кулисы — Supple
Австралийское цифровое маркетинговое агентство Supple разработало привлекательную, интерактивную целевую страницу для одного из своих основных сервисов — SEO. Она показывает, как наличие или отсутствия хорошего SEO оказывает влияние на бизнес. Наложение примеров опубликованных веб-сайтов в верхней части слайдера, вы можете увидеть код, который соответственно прячется за оптимизированным и неоптимизированным сайтом.
Разница очевидна! Беспорядочный код, стоящий за неоптимизированными сайтом, приводит к медленной загрузке и плохому просмотру. Опрятный, структурированный код стоит за оптимизированными сайтами. Светящиеся информация в виде горячих точек позволяют взаимодействовать с этими раздвижными изображениями и с дополнительными деталями, показывая, как социальная разметка может привести к улучшению просмотра.
SVG-анимации и информационные горячие точки представляют собой простые, эффективные детали дизайна, которые помогают доставить пользователю ваше сообщение в увлекательной
B&O Play (Воспроизведение с профилированием продукта)
B & O Play представляет собой компанию технологического дизайна, которая специализируется на производстве потрясающего ассортимента наушников и колонок — диапазон, который сцепляет функциональность с модой. Если вы производите товары, которые выглядят так же, как и то, что они могут делать, почему бы не показать это в мельчайших деталях?
Синтез модной фотосессии с дисплеями типичного сайта е-коммерции, позволяет прокручивать вниз страницу с полноразмерными фотопортретами, показывающими сочетание ультрасовременной одежды, косметики и ювелирных изделий (все это, естественно, надето на привлекательных моделях). При прокрутке страницы появляется увеличенная конкретная модель одного из продуктов B&O Play в каждом портрете с дополнительной информацией в виде текста и видео, которые появляются для вашего удобства.
Границы между технологиями, модой и аксессуарами все больше размываются — и лендинг пейдж с продукцией B&O Play является чрезвычайно привлекательным примером веб-дизайна, который демонстрирует этот сдвиг в отрасли.
The (Ice)Cream Of The Crop — Эффективный скроллинг продукт от Homer Hudson!
Имейте в виду, следующий пример дизайна вызовет у вас чувство голода! Homer Hudson – американский производитель мороженого, который нашел изобретательный, интерактивный способ показать диапазон вкусов своей продукции. Закрепленное в центре страницы ведерко с мороженным, может менять цвета и вкусы мороженного с помощью горизонтальной прокрутки. Каждый новый цвет и этикетка легко скользят по статическому ведерку, и в конечном итоге приводят вас к пустому ярлыку с надписью: «Скоро».
В зависимости от ассортимента, который вы прокручиваете на странице, можно щелкнуть на выбранной упаковке, чтобы узнать больше информации о каждом вкусе. Упаковки сами по себе имеют невероятно забавные, красочные этикетки — и это веб-дизайн играет с вами в такой же увлекательной, интерактивной форме!
MarketingTool.io — SVG лого плюс эффекты дыма!
Существует два уровня внимания в следующем примере. Первое — MarketingTool.io — это куча маркетинговых и социальных медиа-инструментов. Все они свободны в использовании и весьма полезны для того, чтобы проверить и улучшить маркетинг собственного сайта.
Второе — сам сайт демонстрирует два больших примера потрясающего веб-дизайна. Прежде всего — это весело анимированный SVG логотип. Использование увеличительного стекла, показывающего как сайт может помочь вам с онлайн поисковой системой, наряду с разложенными по буквам «инструментами»: молотка, отвертки и винтика, этот динамический логотип, который точно символизирует то, что делает MarketingTool.io.
Форма регистрации на сайте помещена на фон с дымовой завесой. Только после того, как вы запускаете курсор, и с его помощью рассеиваете дым, вам показывается статистика по акциям, комментарии на различных социальных медиа-платформах, т.е. именно тот тип статистики, который можно увеличить с помощью этих маркетинговых инструментах.
Такие захватывающие и необычные приемы надежно удерживают посетителя на главной странице — именно то, что должен делать хороший веб-дизайн!
Go With The Flow — анимированное SVG лого The Drain Company
Хороший логотип должен быть не только узнаваемым — в идеале, он должен передавать ощущение того, что представляет собой ваша компания и что вы делаете. Именно поэтому мы влюбились в этот невероятный анимированный SVG логотип компании, сервис которой предоставляет специализированную очистку сливных труб и сантехники.
Анимация начинается с изображения блока трубы, в которую зрительно втекает больше воды, чем вытекает. Затем появляется вставленная внутрь трубы прокладка, одновременно с логотипом компании, проявляющимся жирным шрифтом на поверхности трубы. Эта минималистская анимация, лаконично характеризующая бренд — отличный пример очень умного дизайна логотипа.
Top Of The Klasse – пример отличного смарт дизайн
Это естественно, когда страница портфолио одного из ведущих проектных институтов Германии является примером великолепного дизайна. При наведении курсора мыши на список проектов, веб-страница расщепляется надвое, предлагая вам подсмотреть содержание.
Если же щелкнуть по конкретному проекту, скольжение продолжается до тех пор, пока не откроется все изображение и подробности о проекте, на который вы нажали. Это уникальный подход к веб-дизайну застает вас врасплох и стимулирует изучать страницу дальше.
Есть какие-то мысли, комментарии или вопросы? Дайте нам знать об этом в комментариях ниже!
