🔮 17 Тенденций веб-дизайна, которые будут формировать 2017 год

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

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

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

1. Брутализм

Так называлось направление в архитектуре 60-70-х годов. Брутализм в дизайне проявляется в использовании смелых, бросающихся в глаза коллажей из текста и изображений, без правил и ограничений. Подражая интернету прошлого, на сайтах в стиле брутализма часто используется простая разметка, встроенные стили, резкие цвета и переходы. Некоторые даже утверждают, что новый логотип Instagram с его неоновыми цветами и переходами в стиле 90-х можно рассматривать как пример брутализма.

17 Web Design Trends That Will Take Over 2017
theoutline.com

Паскаль Девиль, основоположник этой тенденции и учредитель brutalistwebsites.com, определяет это движение так:

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

Но не все сайты в этом стиле бросаются в глаза. Например, Bloomberg News и TheOutline.com заимствуют эстетику, но добавляют лоска, что нетипично для большинства сайтов. Дизайнеры могут использовать брутализм, чтобы выделить сайт на фоне других с помощью смелых цветов, крупной типографики и компоновки, которая отличается от распространенной модели с Hero Image.

2. Большой экран

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

17 Web Design Trends That Will Take Over 2017
apple.com

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

  • Изображения SVG отлично подходят для проектирования под большие экраны, так как их можно масштабировать, они не зависят от разрешения, имеют небольшой размер, и их поддерживает большинство браузеров. Вот 10 ресурсов, где можно подробнее о них узнать.
  • Если применить CSS к изображениям SVG, можно использовать мультимедийные запросы, чтобы скрывать и показывать части изображения в зависимости от размера экрана. Здесь можно посмотреть урок, чтобы понять основы.
  • Компонент Interchange в Foundation использует мультимедийные запросы, чтобы быстро загружать изображения, соответствующие браузеру пользователя. Он сокращает время загрузки на мобильных устройствах и в то же время предоставляет соответствующий контент пользователям с большими экранами. Подробнее о нем можно узнать здесь.

3. Отзывчивые компоненты

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

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

4. Микровзаимодействия зависящие от устройства

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

17 Web Design Trends That Will Take Over 2017
dribbble.com/bnistr

В недавней публикации на Medium Ник Бабич отметил, что микровзаимодействия предоставляют пользователям подтверждения действий, которые им так нужны. Разработчики Slack, например, умело встроили их в дизайн, сделав интерфейс приложения более интуитивным.

Подробнее об основах микровзаимодействий, их важности и применении можно узнать здесь.
Использование анимаций и CSS переходов помогает при создании и тестировании некоторых микровзаимодействий. Вот несколько техник.

5. Дизайн с разделенным экраном

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

17 Web Design Trends That Will Take Over 2017
theoceanfortlauderdale.com

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

6. Реагирующая анимация

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

17 Web Design Trends That Will Take Over 2017
ui8.net/about

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

  • Наш Reactive Listener в разделе Playground — отличный пример того, как можно использовать отзывчивую анимацию, чтобы выделить контент для пользователя, прежде чем он совершит действие.
  • JS и отчасти CSS в сочетании с возможностями современных браузеров позволяют добавлять в дизайн отзывчивые, подвижные элементы, которые реагируют на действия пользователей. И они могут составить конкуренцию мобильным приложениям. Вот 10 ресурсов, с которых можно начать изучение темы.

7. Свежие интерфейсы на основе карточек

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

17 Web Design Trends That Will Take Over 2017
google.ru

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

8. Учет местоположения и ситуации

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

Представьте, что вы загружаете сайт и сразу видите отзывы и сравнение цен по всем подключенным к интернету устройствам рядом с вами, без поиска или установки приложения. А теперь представьте сайт, где используются Media Streams API (потоковая передача видео с камеры), Geo Location API (геолокация) и библиотека A-frame от Mozilla (для создания VR-сайтов), чтобы представить вам дополненную версию реальности, и снова без установки приложения. Хотя следует проявлять осторожность при использовании этих инструментов и уважать приватность пользователей, у этой технологии есть огромный потенциал, который позволит улучшить нашу жизнь.

9. Нарисованные от руки иллюстрации

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

17 Web Design Trends That Will Take Over 2017
themanyfacesof.com/leonardo-dicaprio

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

10. Flexbox

Долгое время создание хорошей компоновки в веб-дизайне считалось трудоемким процессом. Мы пытались использовать таблицы для компоновки и применяли свойство float, в результате чего все работало не так, как ожидалось. К счастью, появился Flexbox и все изменил. Flexbox позволяет свободно размещать элементы и решает проблемы, с которыми не могли справиться традиционные сетки с float.Эту спецификацию поддерживают многие браузеры, поэтому сейчас настало то самое время, чтобы воспользоваться Flexbox, если вы еще этого не сделали. В сочетании с CSS сеткой эта спецификация подарит нам удивительные и инновационные варианты компоновки в 2017 году.

Flexbox может решить или устранить массу проблем с компоновкой. Здесь представлен урок по вертикальному выравниванию с помощью Flexbox.
Foundation теперь опционально включает сетку на основе Flex. В этой публикации мы разместили некоторые удачные примеры наших экспериментов.

11. Больше внимания доступности

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

Привести сайт в соответствие с A11y не так сложно, и фреймворк Foundation упрощает эту задачу.

12. Полноэкранные формы

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

17 Web Design Trends That Will Take Over 2017
Fullscreen Form Interface

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

13. Вертикальное меню и навигация

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

17 Web Design Trends That Will Take Over 2017
shantellmartin.art

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

14. Диалоговый интерфейс

Крис Мессина, основоположник хэштега, сказал: «2016 будет годом диалоговой коммерции«. И действительно в прошлом году вы могли наблюдать рост популярности диалоговых интерфейсов. Эта тенденция будет только набирать обороты в 2017 году. Люди привыкают к тому, что могут взаимодействовать со своими любимыми брендами и сервисами с помощью чатов, передачи сообщений и других естественно-языковых интерфейсов.

17 Web Design Trends That Will Take Over 2017
messenger.com

Пока это относительно новое явление, и возникают некоторые проблемы в этом направлении, но оно развивается. И эта тенденция проявит себя везде.

15. Предварительный просмотр продукта в реальном времени и демонстрационные образцы

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

17 Web Design Trends That Will Take Over 2017
coffeecava.ru

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

  • Демонстрация — мощный психологический триггер, который помогает людям представить, какой будет их жизнь, если они начнут использовать ваш продукт или сервис. Вот отличный пример этой техники в действии.
  • Connect Mania — мобильная игра, которая покорила мир. Со стороны ее разработчиков было невероятно умно поместить демонстрационную версию игровой механики на главную страницу, чтобы пользователи могли попробовать ее до загрузки.
  • Команда MailChimp использовала анимацию и видео, чтобы продемонстрировать работу сервиса и внешний вид интерфейса.

16. Монохроматические цветовые схемы

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

17 Web Design Trends That Will Take Over 2017
ausdesignradio.com

17. Умелое использование видео

Скорость соединения все меньше заботит людей, поэтому все чаще дизайнеры используют видео. Фоны и «шапки» с видео были в моде несколько последних лет. Но сейчас видео начинают использовать в более творческой манере, чтобы рассказывать истории и формировать основу для некоторых интересных интерфейсов.

VIA

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.