Тренды дизайна веб-сайтов в 2015 году

Актуально, свежо, удобно

На основе анализа новых техник, а так же нашего субъективного мнения мы составили подборку трендов цифрового дизайна, которые будут актуальны и популярны в 2015 году.

В истории веб-дизайна были случаи, когда тенденции оказались действительно полезными и удобными. Такие техники прижились и стали стандартом. Например, когда то предложенная идея - «клик по логотипу ведет на главную страницу» — стала твердым стандартом веб-разработки.

Но были и случаи, когда тенденции существовали только потому, что этому способствовало развитие технологий или дизайнерской мысли. Например, очень в 2000-ых «стеклянные» кнопки в стиле оси windows vista или metro дизайн в 2013. Такие тенденции умирают быстро и тихо, так как не несут функционального значения.

Актуальные тренды 2015 года

1. Материальный дизайн от Google Плоский дизайн, находившейся в пике популярности в конце 13 и начале 14 года, обретает новую форму. Даная тенденция является совмещением flat и многоуровневой системы сайтов. Проще говоря – множество плоскостных измерений ждут вас на сайтах в 2015 году. Различая в уровнях Гугл предлагает презентовать посредством стандартных академических материалов, принятых в классическом ремесле художников и дизигнеров: цвет, форма, объем. Можно сказать, плоский дизайн получил новое дыхание, но теперь он взрослее, серьезнее, динамичнее. Кстати о динамичности, именно она является в материальном дизайне особой фигурой. Взаимодействия пользователя с интерфейсом теперь еще продуманнее, логичнее и имеет множество анимированных объектов. Например, при клике, иконка «меню» трансформируется в стрелочку «назад» или расплываются волны на кнопке при совершении целевого действия. Взаимодействию с пользователем уделено особое внимание.

2. Эффекты «объема» в плоском дизайне. Внешний вид большинства элементов останется «плоским», будет сделан упор на их реалистичной анимации. Выдвигающиеся буквы, открывающиеся объекты – отличный ход для промо сайтов и страниц.

3. Морфинг Один из главных героев нового года. Изменение формы/цвета/размера элементов сайта, таких как кнопки, инпуты и т.д. в зависимости от изменения их функциональной роли. Один из самых первых примеров — кнопка загрузки iTinse становится прогресс-баром, а потом — кнопкой запуска.

4. одно действие — одно взаимодействие. Опять таки призвано улучшить/упростить взаимодействие с сайтом. К такому взаимодействию можно отнести к примеру: навигация по сайту или запуск анимации колесиком мыши. Принципу соответствует и прием с морфингом (см. выше.) — пользователь по сути кликает в одно и то же место, но получает разные эффекты.

5. Встроенные 3D объекты

6. Расширение пользовательского взаимодействия. Анимированные иконки, анимация при ховере и клике, больше внимания к мелочам – больше взаимодействий – больше любви!

7. Акцент на типографику. В наступившем году ожидается улучшение обстановки в веб с типографикой на сайте. Тенденция такова, что теперь сайты будут проще для навигации по контенту, содержательнее, понятнее и визуальнее.

8. SVG и Canvas.

9. Большие фоновые фотографии. Красиво, четко, понятно. Главное, чтобы не мешало основной цели.

10. Всеобщая мобилизация. Хотя тенденция начала свое развитие в России еще в 2011 году, технологии адаптивных сайтов, а так же мобильные версии продолжают набирать популярность.

11. Настраиваемая адаптивность.

12. Минутные видео-презентации.

13. Минимализм. Когда каждая мелочь стоит на своем месте, когда цвет не отвлекает а помогает восприятию – вот оно, истиное блаженство.

14. Перенос опыта мобильных устройств на десктопные сайты. Например, вы можете встретить слайдер, который листается действием «зажать слайд кнопкой мыши и потянуть в лево/в право». Действие, типичное для пользователей сенсорных экранов. Уже в конце 14 года началось использование подобных технологий на дескопных версиях сайтов, а в 15 году направление получит дальнейшее развитие и всеобщую любовь.

15. Персонализированные интерфейсы сайтов. Например, для магазина игрушек могут выдаваться разные оболочки, в зависимости от того, какие товары ищет пользователь. Для девочек – одни, для мальчиков – другая оболочка и т.д.

16. Боковое меню с иконками. Линейный дизайн станет еще более привлекательным благодаря наглядной навигации с использованием интуитивно понятных иконок.