Все знают про плоский дизайн. Мобайлгеддон Google подсказывает, что важно создавать адаптивные сайты. Рассмотрим тенденции веб-дизайна, чтобы вы знали, из чего выбирать.
1. Шаблоны
Сценарии взаимодействия с вебом изменились, поэтому сайты стали похожи друг на друга. Не нужно изобретать колесо: формы входа работают одинаково, то же со страницами заказа. Шаблоны упрощают нам взаимодействие с сайтами.
Шаблоны, которые полезно знать и использовать:
Бургерное меню. Хотя его критикуют, узнаваемый элемент.
Форма регистрации. Это набор полей, которые заполняют, или кнопки социальных сетей. Многошаговая форма также эффективна, так как разбивает процесс на этапы и помогает людям быстрее расправиться с регистрацией.
Бесконечный скроллинг. Все привыкли много скроллить благодаря мобильным устройствам.
Карточки. Представляют информацию в отдельных «контейнерах». Прямоугольная форма помогает перемещать их в зависимости от размера экрана.
Большие изображения. Лучше один раз увидеть, поэтому крупные HD изображения привлекают внимание. Частый шаблон – крупное изображение в первом экране, сопровождаемое карточками.
2. Анимация.
Анимации добавляют взаимодействию с сайтом интерактивности и развлекательности. Крупные анимации – всплывающие оповещения и паралакс. Мелкие анимации – ховер, индикаторы загрузки и т.д.
Элементы и события, которые анимируют:
Загрузка. Развлекает во время скучного процесса.
Навигация и меню. Сохраняет пространство экрана.
Наведение (ховер). Когда пользователь не уверен в функционале, он наводит курсор на элементы, чтобы получить визуальную обратную связь.
Галереи и слайд-шоу. Хороший способ показать множество изображений, не перегружая внимание посетителя.
Движение. Мы естественно замечаем движущиеся объекты, поэтому анимация привлечет внимание к форме, CTA-кнопкам и элементам меню.
Скроллинг. Анимированная прокрутка страницы передает контроль в руки пользователя.
Ближе к 2017 стали чаще использовать SVG графику, которая в отличии от растровой хорошо себя чувствует на мониторах с высокой плотностью пикселей и без проблем встраивается в HTML документ.
Брендинговое агентство [censored]