От автора: в данной статье мы рассмотрим 10 трендов в веб-дизайне, которые могут появиться в 2016 году. Тенденции в дизайне могут не меняться несколько лет (а в некоторых случаях и десятилетия), однако веб-дизайн довольно быстро меняющаяся индустрия, где тренды приходят и также быстро сменяются
.
Некоторые из трендов мы до сих пор используем: адаптивный веб-дизайн, flat дизайн, производительность и скорость, совершенствование пользовательского опыта. И все же, какие новые или уже видимые на горизонте тенденции можно ожидать в 2016 году? Рассмотрим некоторые тренды, которые в этом году будут все чаще появляться на виду. И прежде всего…
Продолжающиеся эксперименты с навигацией и меню
Я сам веб-дизайнер, и я заметил, что мы просто не можем не поиграться с навигацией и меню. Мы продолжаем экспериментировать, придумываем различные способы улучшения, повышаем полезность меню. Мы занимаемся тем, что размещаем меню в новых и неожиданных местах, прячем его под иконкой гамбургера (тренд, о котором я говорил в 2015) или вовсе отказываемся от меню, потому что понимаем, что оно необходимо, но смотрится оно ужасно.
Мы бьемся в поисках самого лучшего места на экране для демонстрации этой важной составляющей контента. Все это ради того, чтобы сделать меню более удобным, не важно на каком экране. Мы до сих пор экспериментируем с различными способами отображения, чтобы понять, какой из них работает наилучшим образом. К примеру, Shellshock выше совместил иконку гамбургера с карточным макетом меню. В будущем я ожидаю еще большего количества экспериментов и попыток по улучшению меню.
Скролить или не скролить
Достигли ли мы того момента, когда прокрутка страницы повышает читаемость текста? Возможно. В 2016 году я ожидаю, что некоторые сайты сократят прокрутку на страницах до минимума, в то время как другие наоборот увеличат прокрутку.
Преимущества и недостатки есть с обеих сторон: длинная прокрутка выглядит более естественно, и она намного проще, чем необходимость постоянно кликать на мышку. Однако данный подход растягивает контент, что затрудняет поиск на странице. На страницах с маленькой прокруткой мы быстро находим то, что необходимо, но в таком случае может возрасти число закрытий страницы.
На скриншоте выше изображен сайт Uppercase, который решил отказаться от прокрутки вовсе. На скриншоте изображена полностью загруженная страница сайта. Все, что вам может понадобиться находится на странице, листать никуда не нужно.
Будет интересно наблюдать в 2016 году за битвой скролинга на сайтах, и кто же все-таки победит. На данный момент сайтов с длинной прокруткой страниц больше, чем сайтов с короткой прокруткой. Только время рассудит, какой подход лучший для потребления контента.
Проектируйте модули и компоненты а не целые страницы
Веб-дизайн движется в сторону модульности и компонентности вместо создания целиковых шаблонов для определенной веб-страницы. Компоненты часто включают также разработку функции работы поиска, того, как будет отображаться меню на странице и т.д.
Мы поняли, что элементы необходимо дублировать под разные экраны, и что эти элементы должны быть спроектированы таким образом, чтобы они работали независимо друг от друга, но не теряли связи с остальной частью сайта. Мы беспокоимся не только о внешнем виде компонентов с точки зрения дизайна, но и об индивидуальном функционале элементов. Модульное и компонентное проектирование позволяет сохранить тот же функционал и дает возможность копировать элементы в любую точку на сайте. Отличный ресурс по данной тематике — Brad Frost’s Atomic Web Design.
Дизайн становится все более плоским
Адаптивный веб-дизайн занимает лидирующие позиции в интернете, однако ожидается, что в 2016 году flat дизайн сохранит доминирование. Будут появляться не только сайты с плоским дизайном, но и те, которые уже используют данную стилистику, станут еще более плоскими.
В качестве примера возьмем логотип Google. Компания сделала свой логотип более плоским (убрали скосы букв) и сменила шрифт. Было установлено, что более ясный шрифт без засечек помог сократить вес файла логотипа более чем на половину. Google также выяснили, что такой шрифт легче читается на маленьких устройствах.
Данный подход включает в себя обновление логотипов (как Google), набора иконок, изображений и других элементов, которые с первого раза были не полностью переведены в плоский режим. Благодаря данному подходу наши сайты грузятся быстрее, весят меньше, а контент доходит до читателей намного эффективнее.
Взлет Material Design
Google выпустил Material design в июне 2014, однако переход на него немного затянулся. Тем не менее, сейчас разработчики намного лучше понимают, что такое Material design, и я полагаю, что с распространением документации и примеров использования они все чаще будут предпочитать данный вид дизайна другим.
Material design фокусируется не на тактильных ощущениях, а на динамических элементах, которые напоминают нам бумагу и чернила. Реалистичные тени, наложение элементов, все взаимодействие ограничивается конкретным слоем и не влияет на другие.
Похоже, что мы достигли пика в плоском дизайне, дизайнеры начинают искать что-то новое, и Google дает им Material design. Мне кажется, в 2016 году будет все больше сайтов с материальным дизайном.
Замените стоковые элементы чем-то более интересным
Все больше и больше сайтов заменяют стоковые элементы, такие как стоковые фотографии и иконки, на что-то более проработанное, более личное.
Некоторые веб-сайты предпочитают использовать свои фотографии на домашних страницах и страницах постов в блогах, а не стоковые изображения. Другие сайты заменяют стоковые изображения на видео, инфографику или даже GIF анимацию, все чтобы правильно передать сообщение. К примеру, Flatiron Health стали использовать свои фотографии, чтобы сделать сайт более привлекательным, личным и менее корпоративным.
Иконки теперь тоже заменяют на что-то более необычное. В интернете тысячи наборов иконок, бери любые и вперед, однако дизайнеры говорят, что небольшой дополнительный штрих при создании иконок поможет выделить ваш сайт среди других.
Формы и поля ввода становятся полноэкранными
Многое, что я говорил еще год назад об адаптивном веб-дизайне начинает воплощаться на полноценных сайтах, а не на их мобильных версиях. Данный тренд пришел с широкоформатных версий адаптивного дизайна.
Все больше сайтов и приложений отображают формы и поля ввода на весь экран (регистрация и форма входа), а не делают их маленькой частью сайта. Кликните на кнопку «войти» или «связаться», и вместо перенаправления на новую страницу перед вами откроется полноэкранный макет с формой. Отличный пример – форма связи на сайте Eighty East. При клике на «contact», открывается полноэкранная форма.
Как говорилось выше, данный тренд пришел из лучших практик адаптивного дизайна, так как он: освобождает другие экраны от загрузки, увеличивает пространство на экране для более удобного использования на сенсорных экранах, призывает пользователя заполнить форму (для форм, где за раз появляется только одно поле ввода).
Богатая и утонченная анимация
Так как веб-дизайн становится все более плоским, сайты становятся похожи друг на друга. Один из способов, которым дизайнеры пытаются выделить свой сайт из толпы, это использование богатой, умной и утонченной анимации.
Дизайнеры предпочитают изменять каждодневную анимацию, к который мы все привыкли, но сохранять ее основное назначение. К примеру, на экране загрузки сайта Slack скучный круг был заменен на пользовательскую анимацию загрузки с использованием логотипа сайта. Сохраняется основная цель – дать людям понять, что все работает. Однако подается это умным и красивым путем.
Другой пример это противоречивая замена звездочки избранного в Twitter на иконку сердечка. Раньше при нажатии на старую иконку анимация не была столь детализирована, как с новой иконкой. Такая тонкая анимация добавляет интерактивности дизайну.
Людям важнее функционал сайта а не его внешний вид
Отличный дизайн это хорошо, но он ничего не значит, если ваш сайт не работает. Люди все лучше начинают понимать, когда на сайте что-то работает не так.
Люди все чаще покидают сайт, если они столкнулись с неправильной работой веб-страниц. Представьте, насколько это ужасно для коммерческих сайтов.
Дизайнеры хотят, чтобы их сайты отлично смотрелись, но нельзя забывать про функционал, все должно работать правильно. Дайте людям то, что они хотят: функционал и дизайн.
Дизайнеры переходят к проектированию в браузере
Некоторые веб-дизайнеры уже сейчас проектируют только в браузерах. У такого подхода есть преимущества: сокращается время разработки, появляется возможность увидеть ограничения и реакцию конкретного браузера, данный подход более естественный, в отличие от проектирования в специальных программах, не имеющих ничего общего с интернетом.
Веб-дизайнеры как минимум умеют кодировать на front-end стороне (HTML/CSS/JS), так что проектирование в браузере имеет смысл. Тенденция перехода из программ типа Photoshop, Illustrator и Sketch в браузер только усиливается, и я полагаю, что все больше веб-дизайнеров начнут работать с HTML и CSS. А как вы думаете, какие новые тенденции появятся в 2016?
Автор: Amber Leigh Turner
Источник: //thenextweb.com/
Редакция: Команда webformyself.
