Войти при помощи:
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
лайкни нас в социальных сетях
Сегодня 13 лайков
198 809
Всего лайков на сайте
Бесплатная SMM-стратегия для вашего бизнеса

Тенденции веб-дизайна 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 Гуру
    6 месяцев назад
    Ближе к 2017 стали чаще использовать SVG графику, которая в отличии от растровой хорошо себя чувствует на мониторах с высокой плотностью пикселей и без проблем встраивается в HTML документ.

    Брендинговое агентство [censored]
    +
    0
    -
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА ЛАЙКНИ
Nimses: тест-драйв SMM-агентства
Mihail Paramonov
1
комментарий
0
читателей
Полный профиль
Mihail Paramonov - На ваш взгляд какое вообще будущее ждет Nimses? После такого хайпа с продвижением... В какой то момент казалось что весь инстаграм рекламирует нимсес. Что скажете по поводу этого мнения? http://nimses.wiki/faq/4-k-chemu-privedet-prilozhenie-nimses.html
Конференция про новый маркетинг. Performance 360
Мария Романова
19
комментариев
0
читателей
Полный профиль
Мария Романова - Дамир, поправили, спасибо!
Тест: Проверьте свои знания по рекламе в соцсетях
Валерий Хусаинов
4
комментария
0
читателей
Полный профиль
Валерий Хусаинов - Забавный тест, но, похоже, он заточен на MyTarget и ВК, я лично практически не делаю рекламу там, все на Фб и Итг, соответственно и результат))
7 советов по рекламе интернет-магазина в Facebook
Анна Макарова
243
комментария
0
читателей
Полный профиль
Анна Макарова - Игорь, добрый день! Спасибо, опечатку исправили.
Facebook позволил связывать страницы и группы
Гость - Мария Мирабелла мне тоже не до конца понятно нововведение...теперь можно писаnь личные сообщения от лица группы? можно добавлять друзей от лица группы? И не понятно, как связать существующую группу со страницей ее создателя и администратора. Также буду очень благодарна за любые комменты от тех, кто понял всю суть новшества
Influence-маркетинг: 5 способов бюджетно влиять на аудиторию
Sergio Silvi
9
комментариев
0
читателей
Полный профиль
Sergio Silvi - В Livedune никогда не было рейтинга пользователей FAcebook пока эта функция только планируется. на данный момент есть Instagram, VK, ЖЖ, Youtube
Как мы получили 7000 целевых действий с помощью ремаркетинга myTarget
Cookie Cookie
1
комментарий
0
читателей
Полный профиль
Cookie Cookie - Евгений, формат "карусели" в mytarget позволяет размещать в рамках одного объявления сразу несколько изображений с товарами. Так пользователю напоминают о просмотренных ранее товарах (динамический ремаркетинг) или о товарах, на которые сейчас скидка (классический ремаркетинг)
Email-воронка и CPC: концепт digital-стратегии для сети пиццерий
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - Игорь, добрый день! Спасибо за мнение. Некоторые ваши уточнения справедливы, некоторые, видимо, стоит прояснить. Вы правы: разделять, дополнять и уточнять, можно много чего. Ведь это концепт, цель – показать, как автоматические воронки продаж могут решать конкретную задачу. Точнее, здесь их две: запуск пиццерий и поиск партнёров. Если кому-то поможет, значит что-то полезное, да сделали:) Для кого говорим – владельцам франшиз, например. И здесь же кроется ответ на вопрос о дороговизне системы. В данном случае фишка в том, что решение создается на уровне франшизы. То есть техническая реализация воронок для пиццерий выходит копеечная, не нужно каждый раз строить новую систему. В этом вся суть франшизы Додо. А рекламные бюджеты - сами написали, все зависит от того, куда выходим. Насчет предзапуска – в Додо есть его отголоски на уровне соц. сетей. И это работает. Про бюджеты и траты пападжонс – скорее всего, тут у нас с вами просто недопонимание случилось. Мы это не из головы взяли, об этом Додо сами пишут. Это их цель, вырасти до масштабов крупных игроков на нашем, российском рынке. Кто-то тратит миллиарды, кто-то миллионы, кто-то сотни тысяч. Если Додо ставит перед собой большие задачи, где многие крутят пальцем у виска – они уже молодцы. Нам интересно с такими людьми работать, которые ломают голову, когти и зубы, а идут вперед, и у них рано или поздно получается. Не про Додо, а про малый и средний бизнес в принципе.
Facebook объявил о запуске двух новых инструментов для таргетинга
Михаил Афанасьев
1
комментарий
0
читателей
Полный профиль
Михаил Афанасьев - Огонь! Но, что делать если не ведешь клиента на сайт, а весь цикл в социальных сетях?
Павел Дуров согласился внести данные Telegram в реестр Роскомнадзора
Блокнот вебмастера
1
комментарий
0
читателей
Полный профиль
Блокнот вебмастера - Все равно заблокируют, мог бы и не делать этот шаг.
ТОП КОММЕНТАТОРОВ
Комментариев
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
ВКонтакте
Партнеры проекта [Уи лав ю соу мач!]
Наверх