Россия+7 (495) 960-65-87

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

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

Все знают про плоский дизайн. Мобайлгеддон 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
Рейтинг Известности 2018: старт народного голосования
Михаил Р
1
комментарий
0
читателей
Полный профиль
Михаил Р - 1. Demis 2. кокс 3. Ашманов 4. Скобеев 5. Digital Strategy
Тест: Кто как пробежал, или Итоги клиентского рейтинга SEOnews 2018
Анна Макарова
339
комментариев
0
читателей
Полный профиль
Анна Макарова - Друзья, спасибо всем за участие! Мы определили победителей. Кто ими стал - вы найдете по ссылке: www.seonews.ru/events/darim-knigi-ot-mif-pobediteli-opredeleny/ Если вы стали одним из победителей, обязательно свяжитесь с нами по указанной в новости (по ссылке выше) почте. Всем хороших выходных! =)
Рейтинг Известности 2018: второй этап народного голосования
Константин Сокол
3
комментария
0
читателей
Полный профиль
Константин Сокол - Кто был ответственный за дизайн таблицы голосования? Копирайтер?
Комплексный аудит интернет-магазина от «Ашманов и партнеры». Часть 1
Александр Сова
1
комментарий
0
читателей
Полный профиль
Александр Сова - А вот и сеошники подъехали, покидать на вентилятор :D
Кейс: вывод лендинга по изготовлению флагов на заказ в ТОП 1 по Санкт-Петербургу
utka21
5
комментариев
0
читателей
Полный профиль
utka21 - Кейс как кейс. Для некоторых станет вполне возможно полезным. ( Для конкурентов точно) . А вот с комментариями , что то пошло не так )
Как использовать Python для LSI-копирайтинга
Evgeny Montana
6
комментариев
0
читателей
Полный профиль
Evgeny Montana - спасибо)
Стартовал сбор заявок на участие в рейтинге «Известность бренда SEO-компаний 2018»
Артем Первухин
1
комментарий
0
читателей
Полный профиль
Артем Первухин - Make KINETICA Great Again!
BDD 2018: Как загнать сайт под фильтр без ПФ и ссылочного. Конкуренция в сложных нишах и методы защиты
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Какой там год) судя по этому "кейсу", чувак либо вообще не в теме, либо это делал кто то вместо него, но делал очень коряво
Прощай, тИЦ! Яндекс переходит на новый показатель качества
Дмитрий Кондратенко
3
комментария
0
читателей
Полный профиль
Дмитрий Кондратенко - PR уже год как отменили, ТИЦ пол года не обновляется... Вы или "не те книги читали", или Вас кинули ушлые СЕОшники... www.internet-reklama.pp.ua
Аудит структуры интернет-магазина мебели от «Ашманов и партнеры»
Дмитрий
7
комментариев
0
читателей
Полный профиль
Дмитрий - Сергей, а вы допускаете, что вся ваша жизнь - seo-миф?
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
339
Комментариев
262
Комментариев
243
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
99
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
67
Комментариев
62
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55
Комментариев
54

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