Геометрия — это тенденция дизайна, которая остается популярной уже несколько лет. Геометрия с анимацией — это актуальный тренд в веб-дизайне, который поможет сделать ваш сайт более эффектным и привлекательным с точки зрения визуала.
Совместное использование гео-фигур и анимации — это универсальный вариант, который хорошо работает с различным типом контента. В этой статье мы подробнее разберем несколько направлений в этой тенденции на примере нескольких компаний.
На сайте компании Оceanstart отлично реализован анимированный фон. Геометрические фигуры на фоне, благодаря анимации, превращаются в изящную волну.
Дизайнеры делают акцент на заголовке и выделяют его жирным шрифтом, при этом сохраняют удобочитаемость. Призыв к действию слева в углу также привлекает внимание — он представлен в ярко синем цвете.
Комбинация геометрических форм и плавная анимации отлично работают вместе и создают актуальный фоновый рисунок.
Вы можете оживить свои геометрические формы с помощью 3D-анимации. Beans Agency делает это с помощью сочетания однотонной заливки фона, геометрических фигур и 3D-изображений бобов.
Такой дизайн выглядит необычно и привлекательно. Геометрические фигуры в нем помогают сделать персонажей более реалистичными.
С помощью этой тенденции в веб-дизайне вы можете разработать эффектный фоновый рисунок и удивлять своих пользователей ожившими элементами.
В каждой фигуре в сетке домашней страницы Lucky Beard присутствует легкое движение. Геометрические фигуры наклоняются и двигаются по оси вперед и назад, крутятся и даже сталкиваются друг с другом.
Кажется, что каждая гео-форма сама по себе создает небольшую историю. Все движения основаны на тактильной анимации — это создает ощущение движения реальных фигур, до которых мы можем дотронуться.
Вы можете использовать анимированную версию вашего логотипа в качестве анимации загрузки — это выглядит очень эффектно. Также вы можете добавить анимацию геометрического логотипа в другие части дизайна, например, на прокрутке.
Используйте эту тенденцию только в том случае, если вам действительно нравятся геометрические формы и вы планируете использовать их долгосрочно.
Еще один способ включить анимированные геометрические формы в дизайн вашего сайта — это параллакс-прокрутка. Такой тип анимации поможет создать эффектный элемент движения для геометрического фона и слоев переднего плана.
Слои, которые перемещаются слишком быстро или имеют агрессивную анимацию, могут вызывать у пользователей неприятные ощущения. Поэтому будьте осторожны с анимацией — используйте только легкие и плавные движение.
В приведенном выше примере компания Isiglobal использует параллакс-прокрутку с линиями и фигурами, которые заполняются и двигаются во время скроллинга. Isiglobal использует легкие движения и спокойную анимацию.
Определение подходящей скорости движения для анимации — это сложный этап. То, что слишком быстро для одних пользователей, может оказаться медленным для других.
Когда вы добавляете на сайт анимацию при наведении и движении курсора, то вы словно даете каждому пользователю полный контроль над движением в дизайне вашего сайта. Поэтому важно ответственно подойти к разработке такой анимации и не допустить технических ошибок.
KDCAP отлично использует эту тенденцию на своей домашней странице — в нее дизайнеры добавили несколько уровней анимации при наведении. Также на странице можно увидеть, как «взрывается» курсор при приближении к элементу, по которому можно щелкнуть.
Вы можете преобразовать в геометрическую фигуру практически любой элемент. Например, Delassus Group использует геометрические фрукты и другие символы на своей домашней странице. Здесь вы также можете увидеть визуальные дисплеи, каждый элемент в которых имеет дополнительные объекты, которые преобразованы в геометрические элементы.
Анимация в Delassus Group состоит из двух частей:
Эффектный способ использовать геометрические формы — это создать анимацию временной шкалы с помощью гео-фигур в качестве фокусной точки.
Вы можете комбинировать формы и цветовые элементы, а также создавать визуальные образы для проектов с другими элементами, например, фотографиями или видео.
По мотивам статьи: designshack.net
Я даю согласие OOO «ЭсБилдер» (далее «BINN») на обработку моих персональных данных в соответствии со статьями 6, 9, 10, 18 Федерального закона от 27 июля 2006 года № 152-ФЗ «О персональных данных», указанных в онлайн-форме и/или предоставленных мною с целью:
Способы обработки персональных данных могут быть любыми, включая сбор, систематизацию, накопление, хранение, уточнение, обновление, изменение, воспроизведение, обезличивание, блокирование и уничтожение.
Настоящее согласие применяется в отношении обработки следующих данных: имя, номер телефона, адрес электронной почты (E-mail).
Настоящее согласие предоставляется сроком на пять лет. По истечении указанного срока действие согласия считается продленным на каждые следующие пять лет при отсутствии сведений о его отзыве.
Согласие может быть отозвано мною в любой момент путем направления в BINN подписанного мною письменного заявления.