Тенденции веб-дизайна 2016

06 ноября 2015
Подпишитесь на нас в Telegram

Все знают про плоский дизайн. Мобайлгеддон Google подсказывает, что важно создавать адаптивные сайты. Рассмотрим тенденции веб-дизайна, чтобы вы знали, из чего выбирать.

1. Шаблоны

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

Шаблоны, которые полезно знать и использовать:

  • Бургерное меню. Хотя его критикуют, узнаваемый элемент.
    burg.png
  • Форма регистрации. Это набор полей, которые заполняют, или кнопки социальных сетей. Многошаговая форма также эффективна, так как разбивает процесс на этапы и помогает людям быстрее расправиться с регистрацией.
    reg.png
  • Бесконечный скроллинг. Все привыкли много скроллить благодаря мобильным устройствам.
  • scroll.png
  • Карточки. Представляют информацию в отдельных «контейнерах». Прямоугольная форма помогает перемещать их в зависимости от размера экрана.
    card.png
  • Большие изображения. Лучше один раз увидеть, поэтому крупные HD изображения привлекают внимание. Частый шаблон – крупное изображение в первом экране, сопровождаемое карточками.
    img.png

2. Анимация.

Анимации добавляют взаимодействию с сайтом интерактивности и развлекательности. Крупные анимации – всплывающие оповещения и паралакс. Мелкие анимации – ховер, индикаторы загрузки и т.д.

Элементы и события, которые анимируют:

  • Загрузка. Развлекает во время скучного процесса.

    load.gif

  • Навигация и меню. Сохраняет пространство экрана.

    menu.gif

  • Наведение (ховер). Когда пользователь не уверен в функционале, он наводит курсор на элементы, чтобы получить визуальную обратную связь.

    hover.jpg

  • Галереи и слайд-шоу. Хороший способ показать множество изображений, не перегружая внимание посетителя.

    slide.gif

  • Движение. Мы естественно замечаем движущиеся объекты, поэтому анимация привлечет внимание к форме, CTA-кнопкам и элементам меню.

    motion.gif

  • Скроллинг. Анимированная прокрутка страницы передает контроль в руки пользователя.

    scroll2.gif

  • Фоновая анимация / видео. Добавит сайту привлекательности.

    back.jpg

3. Микровзаимодействия.

Микровзаимодействия происходят постоянно и незаметно: выключить будильник на мобильном, лайкнуть фото кота в ВК. Это важная часть приложений.

Бывают активными – ввести пароль, нажать Like, пассивными – сигнал о новом сообщении.

micro.png

Цели – сообщить об изменении статуса, дать обратную связь:

1) завершение действия – опубликовать статус, отправить письмо;

2) изменение настроек – громкость;

3) изменение состояния – переход в спящий режим.

4. Материальный дизайн.

Разработка Google. Используйте тени, движение и глубину, чтобы сделать дизайн реалистичнее.

material.png

5. Адаптивный дизайн.

Переходит из разряда тенденций в стандарты.

response.jpg

Сочетается с карточками, так как они перестраиваются в соответствии с размером экрана.

6. Плоский дизайн никто не отменял.

Что важно: длинные тени, яркие цвета, простые шрифты, прозрачные кнопки, минимализм.

flat.png

По материалам UXPin

Друзья, теперь вы можете поддержать Лайкни https://pay.cloudtips.ru/p/8828f748
Ваши донаты помогут нам и дальше радовать вас полезным контентом.

Нас удобно читать в соцсетях. Подписывайся!

Кое-что интересное:

Комментарии

1 комментарий
Чтобы оставить комментарий, войдите на сайт через:
Digital Гуру 17.12.2016 15:58
Ближе к 2017 стали чаще использовать SVG графику, которая в отличии от растровой хорошо себя чувствует на мониторах с высокой плотностью пикселей и без проблем встраивается в HTML документ. Брендинговое агентство [censored]

Будь в курсе

Главные новости, кейсы и статьи за месяц – у вас в почте:

Отправляя форму, вы принимаете условия обработки персональных данных