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

Россия+7 (495) 960-65-87
Шрифт:
1 14008

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

1. Шаблоны

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

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

  • Бургерное меню. Хотя его критикуют, узнаваемый элемент.

  • Форма регистрации. Это набор полей, которые заполняют, или кнопки социальных сетей. Многошаговая форма также эффективна, так как разбивает процесс на этапы и помогает людям быстрее расправиться с регистрацией.

  • Бесконечный скроллинг. Все привыкли много скроллить благодаря мобильным устройствам.

  • Карточки. Представляют информацию в отдельных «контейнерах». Прямоугольная форма помогает перемещать их в зависимости от размера экрана.

  • Большие изображения. Лучше один раз увидеть, поэтому крупные HD изображения привлекают внимание. Частый шаблон – крупное изображение в первом экране, сопровождаемое карточками.
     

2. Анимация.

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

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

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


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

    nav.gif

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


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


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


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


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

     

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

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

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


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

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

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

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

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

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

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

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

Responsive-Design-WM.jpg

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

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

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


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

(Нет голосов)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


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

    -
    -3
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Тест: Кто как пробежал, или Итоги клиентского рейтинга SEOnews 2018
Анна Макарова
337
комментариев
0
читателей
Полный профиль
Анна Макарова - Друзья, спасибо всем за участие! Мы определили победителей. Кто ими стал - вы найдете по ссылке: www.seonews.ru/events/darim-knigi-ot-mif-pobediteli-opredeleny/ Если вы стали одним из победителей, обязательно свяжитесь с нами по указанной в новости (по ссылке выше) почте. Всем хороших выходных! =)
SEO глазами клиентов 2018
Артур Якушев
1
комментарий
0
читателей
Полный профиль
Артур Якушев - >сейчас же сложно найти агентства, которые специализируются только на SEO Не так и сложно найти нас www.msk.lapkinlab.ru
Комплексный аудит интернет-магазина от «Ашманов и партнеры». Часть 1
Александр Сова
1
комментарий
0
читателей
Полный профиль
Александр Сова - А вот и сеошники подъехали, покидать на вентилятор :D
Кейс: вывод лендинга по изготовлению флагов на заказ в ТОП 1 по Санкт-Петербургу
utka21
4
комментария
0
читателей
Полный профиль
utka21 - Кейс как кейс. Для некоторых станет вполне возможно полезным. ( Для конкурентов точно) . А вот с комментариями , что то пошло не так )
Не очень удачный кейс продвижения сайта по услуге «Трезвый водитель» в Москве
Кирилл Щербаков
3
комментария
0
читателей
Полный профиль
Кирилл Щербаков - "даже пришлось подключить отслеживание звонков с сайта" "Даже" - как будто это что-то нереальное
Как использовать Python для LSI-копирайтинга
Evgeny Montana
6
комментариев
0
читателей
Полный профиль
Evgeny Montana - спасибо)
Стартовал сбор заявок на участие в рейтинге «Известность бренда SEO-компаний 2018»
Артем Первухин
1
комментарий
0
читателей
Полный профиль
Артем Первухин - Make KINETICA Great Again!
Эксперимент: как уникальность контента влияет на продвижение сайта
Ilia Nazmutdinov
2
комментария
0
читателей
Полный профиль
Ilia Nazmutdinov - Кстати, ПФ не работают на нулевом трафике. Пока на сайт не льются тысячи показов по одним и тем же запросам влияние оказывает ток ссылочное\внешнее и внутреннее\ и внутренняя оптимизация.
BDD 2018: Как загнать сайт под фильтр без ПФ и ссылочного. Конкуренция в сложных нишах и методы защиты
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Какой там год) судя по этому "кейсу", чувак либо вообще не в теме, либо это делал кто то вместо него, но делал очень коряво
Прощай, тИЦ! Яндекс переходит на новый показатель качества
Дмитрий Кондратенко
3
комментария
0
читателей
Полный профиль
Дмитрий Кондратенко - PR уже год как отменили, ТИЦ пол года не обновляется... Вы или "не те книги читали", или Вас кинули ушлые СЕОшники... www.internet-reklama.pp.ua
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
337
Комментариев
262
Комментариев
241
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
91
Комментариев
80
Комментариев
67
Комментариев
61
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55
Комментариев
54

Отправьте отзыв!
Отправьте отзыв!