Генеральный директор «Бюро Пирогова» Евгений Чернов написал для материал о трендах веб-дизайна, которые получат активное развитие в 2015 году
Фото: Вадим Францев
Мобилизация, развитие и распространение технологий, растущая конкуренция в интернете, глобальная экономика. Тренды веб-дизайна отражают внешние события и процессы. Они стремительно развиваются и непрерывно эволюционируют. Одни мимолетны, другие закрепляются надолго, становясь стандартами отрасли.
Мы выявили три основных направления в веб-дизайне, которые будут продолжать активное развитие в 2015 году:
- мобилизация и «минимализация» интерфейсов;
- wow-дизайн;
- функциональность и технологизация.
Мобилизация и «минимализация» интерфейса
С переходом все большего числа пользователей на смартфоны, тренд Mobile First не теряет актуальности. Мобильные паттерны оказывают влияние на типографику, структуру и подачу контента не только на мобильных, но и на десктопных сайтах.
Интерфейсы упрощаются, становятся минималистичнее и «незаметнее». При этом им приходится «умнеть», чтобы помогать вечно бегущему пользователю решать задачи «на ходу». Контент сокращается до минимума, выражающего суть.
Креативная типографика
Нечитабельный — маленький, плотный, неструктурированный — текст — главный кошмар сайтов, не адаптированных под мобильные устройства. «Дизайнерская», или «креативная», типографика становится важным инструментом передачи с помощью текста не только смысла, но и настроения.
Гротескные, с различными узорами, текстурами и бэкграундами шрифты, разные иногда в пределах одного слова, они вызывают соответствующие тематике сайта ассоциации и эмоции, помогая в этом визуальным элементам.
Модульная структура
Блочная организация пространства на экране в стиле Windows 8 уже третий год остается в тренде. А сегодня
Material Design от Google становится драйвером дальнейшей мощной эволюции тренда.
Что неудивительно, ведь модульные конструкции — оптимальный способ компактно организовать пространство на экране. И адаптировать блоки к различным типам и размерам устройств проще, чем организованный иным способом контент.
Будучи крайне ограниченными в объеме вмещаемой на экран информации, сегодня разработчики стараются уместить максимум в одну единицу дизайна. Блоки становятся активными и «умнеют». Они меняются при наведении мыши или прикосновении, в зависимости от ситуации предлагают пользователю разный контент.
Ghost Buttons
Структура и фунциональные элементы десктопных интерфейсов давно «подражают» элементам дизайна смартфонов: «выскакивающее» по клику боковое меню, крупные кнопки со сглаженными углами, имитирующие сенсорные.
Новый тренд — «
призрачные» кнопки, которые незаметно и гармонично вписываются в любой дизайн сайта.
Сочетание горизонтального и вертикального скроллинга
Развитие сенсорных устройств, освоение пользователями свайпинга, а также необходимость структурировать простанство с целью вместить больше, спровоцировало новый взлет популярности горизонтального скроллинга.
Разработчики все чаще совмещают вертикальный и горизонтальный скроллинг, используя первый в основной навигации, а второй — как способ раскрыть информацию более подробно без перехода на внутренние страницы.
Wow-дизайн
С 2008 года тренд в визуальном оформлении интерфейсов задавали принципы юзабилити. Кризис, отсутствие устоявшихся паттернов, тяжелые сайты на flash надолго сделали непопулярными визуально эффектные сайты.
Снова кризис. Однако с 2008 года многое изменилось. Сформировался рынок разработки и стандарты отрасли в области проектирования. И сегодня делать удобные сайты на основе аналитики и пользовательского опыта стало естественным. Ну или приближается к этому.
Клиенты и веб-разработчики соскучились по яркому, эффектному дизайну. Возрождению тренда способствует и растущая конкуренция в интернете, и развитие технологий. Ведь графика-то остается простой, а все самое интересное обеспечивает код.
Сторителлинг
Ничто так не вызывает желание узнать, что же произойдет дальше, как интрига в начале повествования. Визуальная концепция на сайте превращается в историю, с помощью графики и текста рассказываемую пользователю.
Атмосферный бэкграунд
Имиджевые широкоформатные фотографии в фоне эффектны и задают общее настроение сайту, при этом не мешая контенту, который накладывается «сверху».
Дизайнеры идут дальше и делают фотографию фона подвижной, реагирующей на движения мыши или скроллинг. Или используют видео в качестве бэкграунда.
Longshadow
Плоский дизайн по-прежнему актуален, однако у абсолютно плоской фигуры наблюдается появление схематично обрисованного объема в виде стилизованных теней и градиентов. В моде ‘longshadow’. Длинные тени, впрочем, не добавляют реалистичности объекту, настолько они схематичны.
kidburg.ru
Анимация и интерактив
Инфографика и визуализация контента остаются в тренде, но становятся ярче и интереснее, благодаря анимации. Интерактивные элементы позволяют пользователю физически взаимодействовать с информацией. И делают ее восприятие еще проще.
Нестандартная геометрия
Прямоугольники и круги традиционно оформляли границы смысловых областей в веб-дизайне. Сегодня все больше сайтов, на которых дизайнеры умело используют треугольники, ромбы и даже шестиугольники, а горизонтальные блоки располагаются по диагонали.
Помимо структуры сайта, полигональная графика активно
используется в деталях.
Параллакс
Параллакс в вебе — прием, создающий эффект трехмерного изображения. Возникает он при пролистывании страницы сайта, когда фон и объект двигаются с разной скоростью.
Простые реализации параллакс-скроллинга уступают место более креативным и фантастическим решениям: например, когда на заднем плане оживают фигуры, падает снег или летит комета.
Эффект залипания: дьявол кроется в деталях
В стремлении запомниться и дольше удержать посетителей на своем сайте, разработчики придумывают нестандартные “фишки”, “ловушки” для пользователя, которые провоцируют его начать взаимодействовать и вызывают «эффект залипания».
Например, «оживающие» сотрудники.
transitplus.ru
About the author
