Что произошло с веб-дизайном в 2016 году и почему теперь следует больше внимания уделить анимации? 

Нам очень важно следить за всеми изменениями, происходящими в сфере веб-дизайна. Именно это позволяет нашей компании всегда оставаться на плаву, понимать Заказчика с полуслова и при разработке дизайн-макетов веб-страниц целиком и полностью соответствовать желаниям Клиента.

Поэтому делимся с вами очередным сводом итогов 2016-го года в области веб-дизайна. Он более чем будет уместен тем, для кого эффективность привлечения посетителей является важнейшим критерием при создании сайтов или приложений.  




1. Юзабилити

2016-й очень хорошо дал нам понять, как важно, когда удобно. Другими словами - как важно удобство использования или UX design. Теперь без UX никуда перед достижением поставленных целей по конверсии пользователей сайта в покупателей вашего продукта, либо клиентов компании! Кому какая разница, как выглядит ваш сайт, если он неудобен. Всё проще простого: большая кнопка посреди экрана и ничего лишнего. Но удобно — это не только, когда понятно, куда нажимать и почему, но и когда быстро. 

Скорость загрузки страниц — одна из самых щепетильных проблем для сайтов электронной коммерции. Согласно исследованиям, увеличение времени загрузки страницы всего-то на одну секунду приводит к падению продаж на целых 27%. Да и алгоритмы поисковых роботов говорят нам о том же: чем дольше загружается страница, тем ниже она будет в выдаче при остальных равных условиях (смотри Итоги 2016: ПОИСКОВАЯ ОПТИМИЗАЦИЯ). 


 

2. Адаптивность

Стремительное развитие технологий привело к  тому, что использование «резинового» шаблона больше не может считаться достаточным для дизайна сайта. Теперь требуется использование как минимум трёх версий шаблона: для смартфонов, планшетов и ноутбуков / настольных компьютеров. 2016-й год дал нам понять, что поисковым роботам для выдачи намного интереснее сайты, которые предлагают мобильную версию (и снова смотри Итоги 2016: ПОИСКОВАЯ ОПТИМИЗАЦИЯ).

Адаптивность и юзабилити связаны между собой: и чем важнее становится юзабилити, тем важнее будет адаптивность сайта под мобильные устройства. Большой размер элементов сайта, удобное расположение элементов на странице, не просто скрытие слишком больших блоков основной версии сайта для мобильной версии, а грамотное преобразование их.

Главной грустной новостью для нас всех является то, что все сайты стали похожими друг на друга. Многие используют готовые адаптивные шаблоны, что совсем убивает индивидуальность. 


 

3. Модульная и бесконечная прокрутки

Прокрутка в прокрутке: скроллинг у каждого модуля на странице вне зависимости от других модулей. Сложно? А вот и нет. Если вы продвинутый разработчик или веб-дизайнер, вы точно уже хотя бы раз включили это в свои решения, это же так.. так.. модно?

Неподвижная боковая панель и подвижная основная часть сайта.
Четыре колонки внутри сайта, которые прокручиваются независимо.

А началось все с бесконечной прокрутки, которая сейчас пользуется успехом у таких мировых сайтов, как Pinterest, Facebook и Twitter. Быть в тренде в 2016 - значит прокручиваться до бесконечности. Идея сама по себе неплохая, особенно если знать меру. 

Если до сих не поняли, в чем соль такой прокрутки, так все на самом деле очень просто - это легче и быстрее, чем кликать, и кликать и кликать на кнопки "Показать еще" или "Следующая страница", тем более все эти кнопки ведут за собой загрузки новых страниц, что естественно увеличивает время работы сайта. А это совсем так себе — смотри пункт 1. Не удивительно, что Pinterest и Facebook хвастаются огромным средним временем присутствия на страницах посетителями.


 

4. Модульный подход

В 2016 пользователи категорически перестали читать длинные блоки текстов. Возник вопрос: "Как же их перехитрить?". Первое, к чему прибегли веб-дизайнеры — разбивка длинных текстов на короткие абзацы (если заметили, мы здесь все время так делаем).  

Далее на помощь пришёл графический дизайн: он обеспечил модульный подход к компоновке веб-страницы. 2016 год — это год модульных конструкций, которые представляют собой блоки и сетку. Но не скучную сетку в виде шахматной доски, а такую, какая смогла быть аналогичной страницам журналов и брошюр:
 

Рис. 1 - Пример использования модульной сетки.
 

Естественно, страница, которая предоставляет возможность плыть по ней от одного блока к другому, как при чтении красочного и увлекательного журнала, является потенциально более интересной и предпочтительной для чтения пользователями, чем страница с сухой текстовой полосой и картинкой.  




5. Больше инфографики!

Раньше все догадывались, что инфографика — это хороший способ передачи информации, но в 2016 всех просто осенило: аккуратно, точечно, стильно и красиво - и вот, вашим контентом с инфографикой делятся в 3 раза чаще, чем любым другим.

Но речь идет не о скучных шаблонах и однотипных иконках — этим уже вряд ли будут так делиться, — речь идет о чем-то большем..

Рис. 2 - Пример использования инфографики для иллюстрации процесса заправки

 

 

6. Тоже касается и качественной типографики

Интересные шрифты, особенно когда они являются элементом фирменного стиля, привлекают потребителей. Потребителям нравится инфографика. А ещё больше — инфографика с красивыми шрифтами. Типографика является языком самовыражения сама по себе: несколько лет назад, только графические дизайнеры могли позволить себе «говорить» на этом языке. Теперь и веб-дизайнеры получили доступ к нему, благодаря широкому кругу доступных веб-шрифтов (Например, сервис Google Fonts).

2016 вернул нам крупные текстовые блоки, курсивы, заглавные буквы. О чем также свидетельствует стремительно растущее количество веб-шрифтов.


Рис. 3 - Типографика и Швейцарский стиль


 

7. Надежно спрятанные / умные меню 

Казалось бы. Прошло совсем немного времени, как «Гамбургер меню» стало таким популярным (не только для мобильной версии, к слову), как многие начали относиться к нему скептически, а некоторые и вовсе уже успели его возненавидеть. Однако это был только первый шаг на пути к той удобной, о которой так все мечтают, навигации. И вот, наступило время удобных меню. 

Скрытые навигационные панели, которые появляются из ниоткуда в зависимости от действий пользователя.

Считается,что самым главным в настоящий момент времени является только одно, и ничто другое не должно отвлекать пользователя от этого одного. 
Считается, что элементы навигации должны быть интуитивно понятными и появляться тогда, когда это нужно (например, сайт https://www.google.com/nexus/).
Считается..

Пока это новый, развивающийся тренд, нет четкого стандарта, и разработчики предлагают нам большое разнообразие всевозможных форм. Надежно спрятанное меню. Вы не могли не заметить, что привычное навигационное меню уменьшилось до одной-единственной иконки, которая раскрывается при клике.

На экранах мобильных устройств, где мало места и важен каждый пиксель, это действительно удобно, а вот на обычных — не всегда. Когда человек не видит иконку и не понимает, как ему перейти из одного раздела в другой, золотое правило дизайна гласит: избегайте ненужных сложностей. То есть, не прячьте меню и не заставляйте пользователя искать его.



 

8. "Нет" стоковым изображениям

Пользователи пришли к пониманию того, что стоковые фото - это очень скучно и неоригинально. Ну прям вообще. Не понятно, отчего все так медлили с запуском процесса отказа от стоковых изображений, ведь стоковые фото доступны для всех, а это значит, что включая такое изображение на свой сайт, вы никак не страхуете себя от "повторок" на других сайтах.

Зачем вам стоковые фото, когда вокруг столько профессионалов в иллюстрации, графическом дизайне и фотографии?



 

9. Видео и GIF на фоне

Наверное, это самая главная тенденция: сколько таких "крутых" сайтов появилось за 2016 год, и все они содержат потоковые видео в качестве фона для сайта. И не важно, что они требуют большего времени для загрузки страницы.. Видео с успехом начали заменять изображения. 

Остался один вопрос: чем же все-таки стоковые видео отличаются от стоковых фото? 



 

Веб-дизайн в 2017 

Мы провели аудит публикаций на эту тему и собрали для вас список, состоящий из тех вещей, которые веб-дизайнеры не коим образом не упустят в 2017 году. 


 

1. Минимализм и чистота

Уже несколько лет дизайнерами активно эксплуатируется «карточная» структура сайта. Однако она становится все менее востребованной. Блоки действительно очень удобно адаптировать под любой размера экрана. Такая визуализация получила широкое распространение из-за популярного сервиса Pinterest и благодаря развитию адаптивных сайтов.


К 2017 приходит понимание того, что сайты посещают из-за их содержания, а не из-за того, как они выглядят. Оформление сайта, его элементы должны позволить читателю сосредоточиться на сообщении без замедления скорости чтения. В общем, просто посмотрите на этот
сайт.


 

2. Интерактивный веб-сторителлинг

Среди трендов сторителлинга, которые будут актуальны для веб-сайтов: видео, боты, анимация. Боты — совсем не новое изобретение, но у многих именно сегодня появились возможности их использования для взаимодействия с клиентами: боты как очередная возможность заключить больше сделок и привлечь больше лидов.

Тренд на использование видео и анимации в веб-дизайне начался ещё несколько лет назад, а активное развитие получил в 2016-м году. В 2017-м анимации никуда не денутся и будут всё чаще появляться на интернет-страницах. Скорее всего, интерактивный дизайн будет принимать большие масштабы, перейдя от мини- и микро-интерактива к более сложной анимации.




3. Нестандартная сетка

Модульный подход был пиком уже в 2016. Но чёткая сетка, а чаще всего это сайты, построенные по принципу двух колонок (сплит-лэйаут), начали приедаться. В 2017 мы увидим все больше и больше сайтов с "ломаной" сеткой:



Рис. 4 - Пример "ломаной" сетки на сайте http://www.curiousspace.com/



 

4. ЭКРАНЫ-СКЕЛЕТЫ (SKELETON SCREENS)

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

На самом деле для человека важна не скорость, как конечная цифра, а процесс и ощущение самой загрузки страницы.Поэтому постепенная загрузка веб-страниц, что дают нам экраны-скелеты  (постепенная загрузка страницы от очертаний до полной картинки), позволят пользователям в полной мере ощутить процесс загрузки, понять, что их ждет. А если их ждет что-то стоящее, показатели отказов для вашего сайта точно будут снижены. 


 

5. Видео, видео и ещё раз видео!

Хоть вопрос наш так и остался висеть в воздухе, широкоформатные видео привлекают внимание, и никуда от этого не уйдешь (пока).  Кстати, у анимированной рекламы Facebook кликов на 60% больше, чем у статичной рекламы.



 

6. Уходите? Ну что же вы.. 

Вы можете любить их или ненавидеть, но всплывающие окна при попытке покинуть сайт увеличивают конверсию. При этом они не всегда раздражают. Конечно, как только они начали захватывать рынок, пользователи начали их ненавидеть. Это привело к тому, что теперь компании стараются подойти как можно более творчески к подобному рода уведомлениям. 

В 2017 появится ещё больше всплывающих сообщений, предлагающих ценность клиентам и не требующих ничего взамен (например, всего-то адрес электронной почты). А ценным для вас может быть что угодно: бесплатная доставка, бесплатная пробная версия или код купона.