Войти при помощи:
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
лайкни нас в социальных сетях
Сегодня 12 лайков
222 512
Всего лайков на сайте

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

6 ноября 2015, 15:05 |  Юлия Пугачева

Все знают про плоский дизайн. Мобайлгеддон 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

Комментарии
1 комментарий
Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Digital Гуру
    больше года назад
    Ближе к 2017 стали чаще использовать SVG графику, которая в отличии от растровой хорошо себя чувствует на мониторах с высокой плотностью пикселей и без проблем встраивается в HTML документ.

    Брендинговое агентство [censored]
    +
    0
    -
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА ЛАЙКНИ
25 Telegram-каналов по SEO и SMM
Татьяна Половиченко
1
комментарий
0
читателей
Полный профиль
Татьяна Половиченко - Практика интернет-маркетинга - https://t.me/praima Канал агентства "Ашманов и партнеры". В основном пишут про SEO, но бывают полезные материалы про контекст, юзабилити и управление репутацией.
В помощь SMM-щику: как автоматизировать работу
Иван Серышев
9
комментариев
0
читателей
Полный профиль
Иван Серышев - Что кошачий бокс сдулся не ответил. Что администрация сайта..утратила доверие))) "Раскрути! Как? накрути)))"
4 причины, почему аналитика не нужна вашему бизнесу
Михаил Кирилин
1
комментарий
0
читателей
Полный профиль
Михаил Кирилин - Соглашусь с вашим комментарием - сравнение очень показательное. На самом деле, планируем серию материалов о работе нашего отдела аналитики, в которых будем более детально углубляться в процессы и компетенции.
Практическое руководство для сержантов digital-агентств: 14 правил
Ivan Tyuhov
2
комментария
0
читателей
Полный профиль
Ivan Tyuhov - Всегда пожалуйста :) Проблемы действительно у всех повторяются. Решишь одни - упрешься в другие. Самое классное - когда доходишь до проблем, которые другие не понимают :) Хороший показатель роста.
Музыка во ВКонтакте: бесплатно только 30 минут в сутки
Мария - Как ни странно, посещаемость не изменилась.
Роскомнадзор грозит заблокировать YouTube через сутки
Stanislav Sikorskij
1
комментарий
0
читателей
Полный профиль
Stanislav Sikorskij - не нормальные люди что тут сказать, блокируют сайты каторые нужны людям , и чем ети сайты им мешают ума не приложу, вы бы лучше на улицах порядки навели, где реально угроза есть человечеству ето на улице где убиваю людей сотнями, вот куда свой силы лучше направте, а не на сайты безобидные, фу стыд и ужас
Как сделать почтовые рассылки полезными: тренды email-маркетинга 2017 года
Aliccher
1
комментарий
0
читателей
Полный профиль
Aliccher - Совсем так не думаю, до сих пор в предпочтении почта в работе, нежели получать в личный мессенджер сообщения о сотрудничестве и о чём-либо. Тогда почему сейчас сервисы лидогенерации процветают, как например snov.io - верифицируя те же имейлы... Тут дело личное, кому как, но до сих пор юзаю почту и шлю предложения по работе на почту
Два новых хардфорка – Bitcoin Candy и World Bitcoin
Елизавета Лосева
33
комментария
0
читателей
Полный профиль
Елизавета Лосева - Спасибо за внимательность, поправили!)
Геймеры объединятся в рамках блокчейн-проекта
маша гамуля
1
комментарий
0
читателей
Полный профиль
маша гамуля - Еще больше новостей про блокчейн можно найти тут https://t.me/blockchainmagazine
Полезный функционал мессенджеров глазами email-маркетолога
Жаксылык Исмаилов
1
комментарий
0
читателей
Полный профиль
Жаксылык Исмаилов - В телеграм группах уже 30 000 человек можно собирать
ТОП КОММЕНТАТОРОВ
Комментариев
152
Комментариев
139
Комментариев
126
Комментариев
109
Комментариев
88
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
60
Комментариев
52
Комментариев
45
Комментариев
41
Комментариев
40
Комментариев
39
Комментариев
38
Комментариев
32
Комментариев
25
Комментариев
23
Комментариев
19
Комментариев
19
Комментариев
18
Комментариев
18
Комментариев
18
Комментариев
17
Комментариев
17

Отправьте отзыв!
Реклама
Facebook
ВКонтакте
Партнеры проекта [Уи лав ю соу мач!]
Наверх