Войти при помощи:
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
Акива рекламные кампании для вашего бизнеса
лайкни нас в социальных сетях
Сегодня 7 лайков
166 903
Всего лайков на сайте

Тенденции веб-дизайна 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

Комментарии
0 комментариев
Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Поделиться 
Поделиться дискуссией:
Отправить отзыв
Войти
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА ЛАЙКНИ
5 революционных интернет-стартапов 2016 года
Гость - они ни как друг другу не относятся
Facebook запускает таргетинг на посетителей страницы
Гость - И как эти тупицы, которые не знают значений слов, смеют предлагать контент маркетологам и PR-специалистам, которые заведомо на 7 голов умнее этих тупых авторов сайта???
SEO Conference 2016: Не котиками едиными жив SMM
Vasileva К.
1
комментарий
0
читателей
Полный профиль
Vasileva К. - спасибо, возьму на заметку! нужно больше аналогичных статей – так значительно проще в тонкостях SMM разбираться! мне еще вот здесь статьи нравятся положила себе в закладки!
В России появился аналог LinkedIn
Данил Витальевич - Мы на похожем сайте эскорт выбирали, что как говорится было не скучно. Интерфейс тот же самый.
Как оптимизировать проведение конкурсов в Instagram?
Гость - Если вы обратите внимание на охват в статистике конкурса, то станет более понятно, что подписчики - это только одна из целей. В данном примере прирост всего 70 человек - не густо, учитывая затраты на проведение конкурса. А вот кол-во охваченных пользователей (тех, кто видел рекламный пост с проведением конкурса норм:)
ВКонтакте запускает обложки для сообществ
Юлия Швед
1
комментарий
0
читателей
Полный профиль
Юлия Швед - Зайдите в Управление сообществом и в блоке Основная информация выберите "Загрузить обложку")
SMM-октябрь: главные новости прошедшего месяца
Жанна Рожкова
608
комментариев
0
читателей
Полный профиль
Жанна Рожкова - Анна, подробная инструкция по установке виджета и его использованию https://vk.com/dev/AllowMessagesFromCommunity
ВК запускает денежные переводы на Украину
Жанна Рожкова
608
комментариев
0
читателей
Полный профиль
Жанна Рожкова - По правилам русского языка "на"
Реклама ВКонтакте обзавелась кнопками призыва к действию
Настасья Трочук
84
комментария
0
читателей
Полный профиль
Настасья Трочук - Официальную дату запуска, к сожалению, ВК не указал пока.
В Одноклассниках теперь можно продвигать посты за «ОКи»
Настасья Трочук
84
комментария
0
читателей
Полный профиль
Настасья Трочук - "Функция будет доступна для всех в ближайшее время" В этой фразе текста, как мне кажется, заключается то, что функция пока ещё не введена и не доступна для всех пользователей :)
ТОП КОММЕНТАТОРОВ
Комментариев
152
Комментариев
139
Комментариев
126
Комментариев
109
Комментариев
88
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
60
Комментариев
52
Комментариев
45
Комментариев
41
Комментариев
40
Комментариев
39
Комментариев
38
Комментариев
32
Комментариев
25
Комментариев
23
Комментариев
19
Комментариев
19
Комментариев
18
Комментариев
18
Комментариев
17
Комментариев
17
Комментариев
17

Отправьте отзыв!
Будь в курсе




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