Основные тенденции в вэб-дизайне 2016 года
Стремительно развивающая индустрия Интернет-технологий каждый год рождает новые тенденции, и в сфере вэб-дизайна - в особенности.
Сегодня есть огромный выбор среди дизайнерских решений, которые можно реализовать, но прежде надо понять, что именно сделает сайт успешным.
Для этого я собрала 17 тенденций в индустрии вэб-дизайна, которые помогут вам узнать что-то новое.
1. Одноцветные схемы
Насыщенные цветовые палитры и сайты, выделяющиеся одним цветом, станут трендом 2016 года.
Пример - тема, разработанная для CMS движка Wordpress:
http://themeforest.net/item/soda-clean-responsive-blog-wordpress-theme/full_screen_preview/11055854
Мятный фон красиво выделяет фотографии и текст.
2. Контраст
Контрастные цвета - тоже один из трендов сезона.
Нельзя бояться, что такой смелый шаг в дизайне сочтут за безвкусие. Главное правило в этом тренде: не сочетать более двух ярких цветов, иначе получится сумятица.
Например, этот сайт использует насыщенные контрастные цвета и привлекает к себе внимание:
http://dibiconference.com
3. Эффекты при наведении
Все больше сайтов пользуются эффектом при наведении на блоки. С hover-эффектом блоки меняют свой вид и цвет, выделяясь на фоне. Такие блоки создают макет, который подталкивает посетителя к взаимодействию с сайтом, а также выглядят стильно.
Например, это сделано на сайте.
http://demo.evatheme.com/wp/cook-traveler/
4. Текстура
Обычно она используется на нейтральном фоне и очень выигрышно смотрится, добавляя сайту некую глубину и пространство. Такой прием можно видеть на сайтах ресторанов или автосалонов.
Как пример:
http://www.drmorse.com.au
5. Выделяющийся цветом текст
Текст, призывающий к действию, модно выделять другим ярким цветом для привлечения внимания посетителя. Такой прием влияет на восприятие и хорошо передает сообщение.
На этом сайте слова «агентство цифровых коммуникаций» выделены другим цветом. Это - одна из фишек сайта, где активно используется 2 цвета текста.
http://www.details.ch/
6. Кнопки и UI элементы
Как и со словами, яркие цвета могут выделить кнопки или другие UI элементы. Это привлекает внимание и упрощает юзабилити.
http://thepopupflea.com/
7. Дизайн блоками с разным наполнением
Если высказывание не одно, то есть смысл поделить страницу на несколько больших блоков - это по-прежнему актуально. Блоки должны быть не такими, как в Пинтересте, а широкими - на весь экран. Обращаю ваше внимание на то, что каждый блок может быть оформлен в своем стиле. Это дает дизайнерам большую свободу - можно не беспокоиться о визуальной иерархии.
http://mayorschallenge.bloomberg.org
8. Анимация
CSS, HTML5 и jQuery уже позволяют создавать полноценные анимационные эффекты - не хуже, чем во Flash. Пока не все дизайнеры научились использовать анимацию в интерфейсах - так, чтобы она не мешала пользовательскому опыту.
Однако в 2016 году должно появиться больше удачных примеров в использовании анимационных эффектов.
https://snipcart.com
9. Scrolljacking
Scrolljacking - прием, когда контент изменяется по мере движения скрола мыши.
Однако, по мнению многих дизайнеров, этот прием не всегда удобен для пользователей, так как контент изменяется не синхронно движению скрола мыши. Из-за этого в использовании интерфейса может возникать дискомфорт.
www.avangard-direct.ru
http://spb.beeline.ru/customers/products/mobile/mobilniy-internet-promo/shared-data-bundle/promo/
10. Всплывающие окна
И в этом году, к сожалению, не выйдут из моды всплывающие окна, навязанные нам маркетологами.
Что ж, придется жить с этим.
http://365psd.com/
11. Переход на вкладки
Теперь модно делать так, как в мобильных приложениях. Сейчас отказываются от многострочных меню в пользу вкладок.
http://www.studiolovelock.com
12. Большие фото
Да, это всегда актуально. Визуальный призыв всегда работает, особенно если фотография качественная и красивая.
http://mikynapoint.cz/en/
http://twinontour.com
13. Плоский дизайн
Продолжается развитие в этом направлении. Теперь любой дизайнер знает это выражение и старается показать, насколько он продвинутый, но только настоящие профессионалы умеют с умом использовать такие интерфейсы.
http://lucysaysido.com
14. Эмоциональный контент
Как мы все понимаем, дизайнеру надо зацепить посетителя сайта. Для этого есть много приемов, которые мы уже перечислили, но немаловажную роль в жизни каждого человека играют эмоции. Представьте себе, как можно привлечь клиента, если воздействовать на его чувства? Так вот, в этом году крайне актуально вызывать посетителя на эмоциональный контакт - это подвигнет его на действия.
http://justactions.org
15. Оригинальная типографика
Как же еще привлечь посетителя сайта? У нас есть такой немаловажный компонент наполнения, как текст, и с помощью него тоже можно передать посыл.
Еще больше изюминки сайту добавит авторская типографика - вы сразу будете выигрышно отличаться от конкурентов.
http://hawkandhen.com
16. Иллюстрирование вручную
Раз уж мы заговорили об оригинальности, то что может быть оригинальнее, чем иллюстрации, нарисованные на вашу тему и индивидуально под вас? В Интернете все больше сайтов с авторской графикой. Они смотрятся стильно, интересно, и хочется их тщательно рассматривать. Нам же нужно, чтобы посетитель задержался и запомнил нас?
www.4stihii.com
17. Видео на заставке
Коронный прием на все времена. Видео на заставке - это мощный визуальный призыв. Посмотрев видео, посетитель окунается в атмосферу сайта и компании с головой. Это сочетания тренда на эмоциональный контент и на большие фотографии.
http://onirim.com/
Конечно, можно перечислить еще много тенденций, но мне кажется, что надо уметь делать акцент на чем-то одном, потому что если все совместить, получится безвкусица.
Желаю удачи в начинаниях!)
Сегодня есть огромный выбор среди дизайнерских решений, которые можно реализовать, но прежде надо понять, что именно сделает сайт успешным.
Для этого я собрала 17 тенденций в индустрии вэб-дизайна, которые помогут вам узнать что-то новое.
1. Одноцветные схемы
Насыщенные цветовые палитры и сайты, выделяющиеся одним цветом, станут трендом 2016 года.
Пример - тема, разработанная для CMS движка Wordpress:
http://themeforest.net/item/soda-clean-responsive-blog-wordpress-theme/full_screen_preview/11055854
Мятный фон красиво выделяет фотографии и текст.
2. Контраст
Контрастные цвета - тоже один из трендов сезона.
Нельзя бояться, что такой смелый шаг в дизайне сочтут за безвкусие. Главное правило в этом тренде: не сочетать более двух ярких цветов, иначе получится сумятица.
Например, этот сайт использует насыщенные контрастные цвета и привлекает к себе внимание:
http://dibiconference.com
3. Эффекты при наведении
Все больше сайтов пользуются эффектом при наведении на блоки. С hover-эффектом блоки меняют свой вид и цвет, выделяясь на фоне. Такие блоки создают макет, который подталкивает посетителя к взаимодействию с сайтом, а также выглядят стильно.
Например, это сделано на сайте.
http://demo.evatheme.com/wp/cook-traveler/
4. Текстура
Обычно она используется на нейтральном фоне и очень выигрышно смотрится, добавляя сайту некую глубину и пространство. Такой прием можно видеть на сайтах ресторанов или автосалонов.
Как пример:
http://www.drmorse.com.au
5. Выделяющийся цветом текст
Текст, призывающий к действию, модно выделять другим ярким цветом для привлечения внимания посетителя. Такой прием влияет на восприятие и хорошо передает сообщение.
На этом сайте слова «агентство цифровых коммуникаций» выделены другим цветом. Это - одна из фишек сайта, где активно используется 2 цвета текста.
http://www.details.ch/
6. Кнопки и UI элементы
Как и со словами, яркие цвета могут выделить кнопки или другие UI элементы. Это привлекает внимание и упрощает юзабилити.
http://thepopupflea.com/
7. Дизайн блоками с разным наполнением
Если высказывание не одно, то есть смысл поделить страницу на несколько больших блоков - это по-прежнему актуально. Блоки должны быть не такими, как в Пинтересте, а широкими - на весь экран. Обращаю ваше внимание на то, что каждый блок может быть оформлен в своем стиле. Это дает дизайнерам большую свободу - можно не беспокоиться о визуальной иерархии.
http://mayorschallenge.bloomberg.org
8. Анимация
CSS, HTML5 и jQuery уже позволяют создавать полноценные анимационные эффекты - не хуже, чем во Flash. Пока не все дизайнеры научились использовать анимацию в интерфейсах - так, чтобы она не мешала пользовательскому опыту.
Однако в 2016 году должно появиться больше удачных примеров в использовании анимационных эффектов.
https://snipcart.com
9. Scrolljacking
Scrolljacking - прием, когда контент изменяется по мере движения скрола мыши.
Однако, по мнению многих дизайнеров, этот прием не всегда удобен для пользователей, так как контент изменяется не синхронно движению скрола мыши. Из-за этого в использовании интерфейса может возникать дискомфорт.
www.avangard-direct.ru
http://spb.beeline.ru/customers/products/mobile/mobilniy-internet-promo/shared-data-bundle/promo/
10. Всплывающие окна
И в этом году, к сожалению, не выйдут из моды всплывающие окна, навязанные нам маркетологами.
Что ж, придется жить с этим.
http://365psd.com/
11. Переход на вкладки
Теперь модно делать так, как в мобильных приложениях. Сейчас отказываются от многострочных меню в пользу вкладок.
http://www.studiolovelock.com
12. Большие фото
Да, это всегда актуально. Визуальный призыв всегда работает, особенно если фотография качественная и красивая.
http://mikynapoint.cz/en/
http://twinontour.com
13. Плоский дизайн
Продолжается развитие в этом направлении. Теперь любой дизайнер знает это выражение и старается показать, насколько он продвинутый, но только настоящие профессионалы умеют с умом использовать такие интерфейсы.
http://lucysaysido.com
14. Эмоциональный контент
Как мы все понимаем, дизайнеру надо зацепить посетителя сайта. Для этого есть много приемов, которые мы уже перечислили, но немаловажную роль в жизни каждого человека играют эмоции. Представьте себе, как можно привлечь клиента, если воздействовать на его чувства? Так вот, в этом году крайне актуально вызывать посетителя на эмоциональный контакт - это подвигнет его на действия.
http://justactions.org
15. Оригинальная типографика
Как же еще привлечь посетителя сайта? У нас есть такой немаловажный компонент наполнения, как текст, и с помощью него тоже можно передать посыл.
Еще больше изюминки сайту добавит авторская типографика - вы сразу будете выигрышно отличаться от конкурентов.
http://hawkandhen.com
16. Иллюстрирование вручную
Раз уж мы заговорили об оригинальности, то что может быть оригинальнее, чем иллюстрации, нарисованные на вашу тему и индивидуально под вас? В Интернете все больше сайтов с авторской графикой. Они смотрятся стильно, интересно, и хочется их тщательно рассматривать. Нам же нужно, чтобы посетитель задержался и запомнил нас?
www.4stihii.com
17. Видео на заставке
Коронный прием на все времена. Видео на заставке - это мощный визуальный призыв. Посмотрев видео, посетитель окунается в атмосферу сайта и компании с головой. Это сочетания тренда на эмоциональный контент и на большие фотографии.
http://onirim.com/
Конечно, можно перечислить еще много тенденций, но мне кажется, что надо уметь делать акцент на чем-то одном, потому что если все совместить, получится безвкусица.
Желаю удачи в начинаниях!)