9 сайтов с анимацией, которые вдохновляют нас как веб-авторов

Создатели веб-сайтов находятся в бесконечном стремлении обновить свои веб-сайты с помощью самых передовых, модных дизайнерских эффектов, которые отражают истинную ценность их продукта или услуги. Но между цветовыми палитрами, типографикой, отзывчивостью, стратегией контента и многим другим мысль о продвинутых методах дизайна может быть несколько пугающей. Один из лучших способов создать веб-сайт, дизайн которого стоит их соли, - это искать вдохновения у коллег. Спросить себя, что вам нравится в их дизайне, как это может иметь отношение к вашему дизайну и как вы хотите изменить его для своих нужд, на самом деле может быть очень просто.

Давайте посмотрим на эти девять примеров творческой анимации веб-сайтов и начнем учиться у профессионалов.

Техники анимации, которые Handwrytten использует в разделе героев своей домашней страницы, представляют собой яркое представление самого продукта: сочетание пера и чернил. Одна из ключевых ценностей этого дизайна (среди прочего) заключается в том, что посетитель веб-сайта сразу понимает преимущества, которые предлагает продукт, и то, что он получит, используя его.

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

Crisp добавляет к своим векторным иллюстрациям незначительные анимационные эффекты, которые передают резонансную информацию о бренде, несмотря на небольшой размер иллюстраций. Сдержанная анимация каждой векторной иллюстрации действительно добавляет человечности в образ бренда crisp. Нам особенно нравится анимированный костер в разделе, посвященном поддержке клиентов. Он добавляет жизни минималистскому плоскому дизайну, который элегантно используется на всей домашней странице. Это идеальный способ использовать эти модные методы плоского дизайна, добавляя при этом жизнерадостности, необходимой для увлекательного взаимодействия с пользователем.

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

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

Best Day Ever использует технику зацикленной анимации, чтобы их иллюстрации с животными не полагались на триггеры для продолжения движения. Какая бы иллюстрация ни видела посетитель веб-сайта, она постоянно перемещается, пока ее можно увидеть на экране.

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

Веб-сайт Best Day Ever является ярким примером того, как вы можете взять одну идею и принцип дизайна (в данном случае тема сочетания энергичной свежести с утонченностью) и последовательно представить их через вашу цветовую схему, вашу контент-стратегию и ваши продвинутые дизайнерские эффекты.

Кому не нравится классическая яма для мячей? Используя свои классические фирменные цвета на белом фоне, Google снова поражает золотом.

С помощью одного единственного эффекта отслеживания мыши Google удается добиться такого взаимодействия с пользователем, которое заставляет посетителя веб-сайта чувствовать, что он на самом деле находится внутри ямы для мячей! И когда вы прокручиваете страницу вниз, все, что происходит, - это то, что шары становятся больше. Под шарами нет контента, как и в реальной жизни.

Google удается предоставить нам немедленное и сенсационное понимание того, для чего предназначен этот продукт, и они делают это с помощью простого текстового описания заголовка и кнопки CTA.

Мы знаем, что Google собирается помочь нам спланировать наше следующее приключение, которое нас не разочарует. А вы видели эффекты изменения цвета при наведении курсора на кнопку? Это первый раз, когда мы видим кнопку, эффект наведения которой меняется на четыре отдельных цвета, а не с одного цвета на другой.

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

Это именно тот мыслительный процесс, который вы хотите, чтобы посетитель вашего сайта имел. Вы рассказываете ему визуальную историю и хотите, чтобы он перешел на следующую страницу этой истории.

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

Индустрия каннабиса по-прежнему довольно нова и свежа, поэтому для веб-сайта, который продает его, имеет смысл, поскольку продукт должен иметь такой же внешний вид и атмосферу.

Давайте остановимся, чтобы оценить, сколько дизайнерских приемов используется только на домашней странице: фон слайд-шоу за коллекциями анимированных изображений, 3D-эффекты, вращающиеся слова… и все это выглядит красиво.

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

Нам нравится, как когда вы спускаетесь вниз по странице, банка вращается вниз, а объекты на цветном фоне скользят к полям страницы, когда фон становится белым. Такой креативный. Чем ниже вы спускаетесь, тем красивее 3D-объекты сохраняют эффект вертикальной прокрутки вверх.

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

Если вы перейдете на другие страницы, вы увидите, что трехмерные объекты из главного содержимого домашней страницы стали постоянной частью фона, при этом все еще плавая и перемещаясь. Такой выбор преемственности позволяет создать целостное повествование, которое приближает точку зрения к дому: мы - потрясающий продукт.

Это цветовая схема, трехмерный дизайн, заниженное движение изображения или иллюстрация кредитной карты, которая спускается в акробатическом движении, когда мы прокручиваем домашнюю страницу вниз?

Всего понемногу.

Цветовая схема здесь имеет большое значение. Оттенки оранжевого, окруженные большим количеством белого пространства, и простой закругленный шрифт без засечек - все это работает вместе так целостно. Но что действительно привлекает здесь, так это методы анимации, используемые для иллюстрации кредитной карты.

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

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

Слова минималистичный и ультрасовременный - это все, что мы можем здесь придумать. Если изображение говорит тысячу слов, мы бы сказали, что анимированное изображение говорит 5000 или даже больше.

Хорошо, теперь твоя очередь. Перечисленные здесь методы анимации - лишь малая часть того, что могут сделать веб-создатели при добавлении анимированных функций на свои веб-сайты. С каждым днем ​​появляется все больше и больше вдохновения, и есть так много всего, что можно увидеть и узнать. Наш девиз как дизайнеров - начинать с основ, и, поскольку у вас есть простые практики анимации, ваш веб-сайт может показать миру, что значит быть двигателем и встряхивателем.