В 2017 году веб-дизайнеров ждет много трудностей. Они должны создавать привлекательные сайты, приложения и сервисы, которые плавно работают на всех устройствах и подходят пользователям по всему миру, а сроки проектов при этом сокращаются с каждым годом.
Сами пользователи также стали более грамотными в отношении техники и дизайна, их ожидания возросли, и они хотят видеть на выходе почти совершенный продукт. Сталкиваясь с этими трудностями, дизайнерам как никогда важно отслеживать появляющиеся тенденции, решения и модели, которые помогают справиться с распространенными проблемами, захватить все внимание их аудитории и оставить у пользователей приятные впечатления.
Сотрудники ZURB помогают сотням компаний найти лучшие решения и использовать новые модели в своих продуктах и на сайтах. Мы составили список из 17 тенденций в дизайне и разработке и считаем, что каждому дизайнеру стоит ознакомиться с ним, чтобы проявить себя в 2017 году и после него.
1. Брутализм
Так называлось направление в архитектуре 60-70-х годов. Брутализм в дизайне проявляется в использовании смелых, бросающихся в глаза коллажей из текста и изображений, без правил и ограничений. Подражая интернету прошлого, на сайтах в стиле брутализма часто используется простая разметка, встроенные стили, резкие цвета и переходы. Некоторые даже утверждают, что новый логотип Instagram с его неоновыми цветами и переходами в стиле 90-х можно рассматривать как пример брутализма.
Паскаль Девиль, основоположник этой тенденции и учредитель brutalistwebsites.com, определяет это движение так:
Благодаря жесткости и отсутствию заботы об удобстве или простоте брутализм можно рассматривать как реакцию более молодого поколения на веселость, оптимизм и несерьезность современного веб-дизайна.
Но не все сайты в этом стиле бросаются в глаза. Например, Bloomberg News и TheOutline.com заимствуют эстетику, но добавляют лоска, что нетипично для большинства сайтов. Дизайнеры могут использовать брутализм, чтобы выделить сайт на фоне других с помощью смелых цветов, крупной типографики и компоновки, которая отличается от распространенной модели с Hero Image.
- В создании эстетики брутализма большую роль играет типографика, поэтому здесь критичен выбор шрифта. Просмотрите эти советы, чтобы передать правильный посыл с помощью типографики.
- На сайтах в стиле брутализма используются разные цветовые гаммы, от спокойных до волнующих. Примеры можно посмотреть здесь.
- Дизайнеры Spotify уже довольно давно экспериментируют с этим стилем. Посмотрите, как они используют смелые цвета, сильную типографику и компоновку в стиле коллажа.
2. Большой экран
Рассматривая отзывчивый веб-дизайн, большинство людей думают, как правильно отобразить сайт для монитора, на экране планшета или мобильного телефона. Но они при этом игнорируют растущий сегмент пользователей, которые приобретают большие мониторы с высоким разрешением экрана. Хотя мобильные устройства набрали огромную популярность за последние десять лет, сейчас на сцену выходят большие мониторы с постоянно растущей плотностью пикселей. Проблема в том, что основное внимание уделяется только небольшим устройствам. Немногие сайты адаптированы под большие экраны. Если вы посмотрите на свои данные, то можете обнаружить, что большинство людей используют экраны с разрешением 1920×1080 или выше. Существует много интересных и творческих подходов к использованию этого экранного пространства. И умные дизайнеры не боятся к ним прибегать.
Дизайнерам следует тщательнее изучать данные, чтобы точно знать свою аудиторию и устройства, которые она использует. Независящая от разрешения SVG-графика, жирная типографика и использование фото в низком или высоком разрешении с помощью JavaScript, позволяют оставить приятное впечатление у всех пользователей, даже владельцев больших экранов.
- Изображения SVG отлично подходят для проектирования под большие экраны, так как их можно масштабировать, они не зависят от разрешения, имеют небольшой размер, и их поддерживает большинство браузеров. Вот 10 ресурсов, где можно подробнее о них узнать.
- Если применить CSS к изображениям SVG, можно использовать мультимедийные запросы, чтобы скрывать и показывать части изображения в зависимости от размера экрана. Здесь можно посмотреть урок, чтобы понять основы.
- Компонент Interchange в Foundation использует мультимедийные запросы, чтобы быстро загружать изображения, соответствующие браузеру пользователя. Он сокращает время загрузки на мобильных устройствах и в то же время предоставляет соответствующий контент пользователям с большими экранами. Подробнее о нем можно узнать здесь.
3. Отзывчивые компоненты
Прошло примерно 8 лет с того момента, как Итан Маркотт представил миру концепцию отзывчивого веб-дизайна. И она развивается невероятными темпами. Но на горизонте появляются новые техники и технологии, которые значительно упрощают создание отзывчивых элементов. На их фоне современные отзывчивые сайты кажутся простыми и грубыми. Например, элементные запросы и новая спецификация CSS сеток. Две эти технологии позволят веб-дизайнерам и разработчикам создавать проекты, которые действительно подстраиваются под любой размер экрана. Элементные запросы позволят создавать компоненты, которые адаптируются на основе предоставленного им пространства, а не под весь экран. А CSS сетка даст возможность эффективно менять компоновки на основе мультимедийных запросов.
Благодаря этим двум техникам мы увидим появление множества разных отзывчивых моделей, доступных дизайнерам и фронтенд разработчикам.
- Элементные и контейнерные запросы открывают новые возможности для отзывчивых компонентов. Здесь вы найдете 10 ресурсов, где можно подробнее о них узнать.
- В этой статье ведущий инженер Foundation Кевин Болл объясняет, как работают отзывчивые компоненты и что нас ждет в ближайшем будущем.
4. Микровзаимодействия зависящие от устройства
Как правило, разработчики сначала создают легкий и удобный дизайн для маленьких экранов, а затем наслаивают на него более сложные взаимодействия и анимацию для экранов ПК. Но инструментарий мобильных устройств развивается, а мобильный трафик уже превышает поток данных с обычных компьютеров. И можно по-разному использовать особенности различных мобильных устройств для создания взаимодействий на их основе. С появлением сенсорных экранов и библиотек JavaScript с поддержкой жестов возникла масса возможностей для создания интересных анимаций в ответ на действия (например, обновление ленты в мобильном приложении Twitter). И эти анимации можно добавлять в самые разные веб-приложения.
В недавней публикации на Medium Ник Бабич отметил, что микровзаимодействия предоставляют пользователям подтверждения действий, которые им так нужны. Разработчики Slack, например, умело встроили их в дизайн, сделав интерфейс приложения более интуитивным.
Подробнее об основах микровзаимодействий, их важности и применении можно узнать здесь.
Использование анимаций и CSS переходов помогает при создании и тестировании некоторых микровзаимодействий. Вот несколько техник.
5. Дизайн с разделенным экраном
Популярность дизайна с разделенным экраном растет. Он позволяет легко подчеркнуть контраст, сбалансировать текст и изображения или представить два разных продукта на одном экране. Его легко реализовать, и это отличный способ представить контент так, чтобы это выглядело свежо и гармонично.
Такой дизайн — очевидный выбор для продуктов или сайтов, где требуется сравнение. Хотя уже существуют интересные варианты с использованием разделенного экрана, люди только начинают его осваивать.
- В Pattern Tap вы можете найти такие примеры.
- Все равно не хватает вдохновения? Здесь вы найдете 20 примеров действительно впечатляющих приложений с использованием этого дизайна.
- Здесь Ник Бабич рассказывает о простых приемах работы с таким дизайном, которые определенно стоит знать.
- То, что они простые, не значит, что будет легко. Вот три вещи, которые следует помнить при создании компоновки для разделенного экрана.
6. Реагирующая анимация
Рост популярности нативных мобильных приложений в прошлом десятилетии привлек внимание к человеко-ориентированному дизайну. iPhone и iOS от Apple отчасти стали прорывом благодаря использованию дизайна для имитации людей и обращения к эмоциям. Внешний вид проекта сегодня играет второстепенную роль по сравнению с тем, как он ощущается. Пока мобильные приложения совершали прорывы, проекты для компьютеров по-прежнему казались неуклюжими и не интуитивными. Но благодаря развитию браузеров, JavaScript и CSS переменных, теперь мы можем и в этом сегменте использовать человеко-ориентированные взаимодействия.
Мы думаем, что вскоре появится больше технологий, которые добавят в браузеры все возможное, во главе с анимированными взаимодействиями.
- Наш Reactive Listener в разделе Playground — отличный пример того, как можно использовать отзывчивую анимацию, чтобы выделить контент для пользователя, прежде чем он совершит действие.
- JS и отчасти CSS в сочетании с возможностями современных браузеров позволяют добавлять в дизайн отзывчивые, подвижные элементы, которые реагируют на действия пользователей. И они могут составить конкуренцию мобильным приложениям. Вот 10 ресурсов, с которых можно начать изучение темы.
7. Свежие интерфейсы на основе карточек
Хотя карточки используются уже давно, они не потеряют актуальность в ближайшем будущем. Это уникальная модель для отзывчивого веб-дизайна. Карточки позволяют отображать большое количество информации, и при этом ее легко просматривать и представлять. В последнее время их стали использовать не только для текста и ссылок, но также превратили в контейнеры для разного мультимедийного контента. Дизайнеры экспериментируют с микровзаимодействиями в самих карточках и находят способы освежить эту старую модель.
Эти надежные модели решают много распространенных проблем, и нет причин от них отказываться. А эксперименты с карточками только укрепляют их позиции.
- В интернете карточки можно встретить повсюду, но по-прежнему находятся дизайнеры, которые совершают эти 5 ошибок при работе с ними.
- Не любите читать? Посмотрите видео о том, как избежать этих 5 ошибок.
- Карточки служат основой для массы отличных интерфейсов. Эти 10 ресурсов помогут вам понять, как лучше всего их использовать в своем проекте.
- Новые карточки Flex от Foundation откроют для вас все возможности. В этом уроке Рафи рассказывает, как использовать Flex.
- В этой статье Ник Бабич рассказывает о некоторых приемах работы с интерфейсом на основе карточек.
8. Учет местоположения и ситуации
Люди постоянно носят с собой телефоны, планшеты и портативные игровые консоли. Эти маленькие устройства начинают все лучше понимать местоположение и ситуацию, в которых они находятся. Все больше веб-дизайнеров открывают для себя эти возможности. И предстоящие инновации будут связаны с созданием сайтов, которые реагируют на окружение и обстоятельства.
Представьте, что вы загружаете сайт и сразу видите отзывы и сравнение цен по всем подключенным к интернету устройствам рядом с вами, без поиска или установки приложения. А теперь представьте сайт, где используются Media Streams API (потоковая передача видео с камеры), Geo Location API (геолокация) и библиотека A-frame от Mozilla (для создания VR-сайтов), чтобы представить вам дополненную версию реальности, и снова без установки приложения. Хотя следует проявлять осторожность при использовании этих инструментов и уважать приватность пользователей, у этой технологии есть огромный потенциал, который позволит улучшить нашу жизнь.
- По мере развития технологии мы сможем предоставлять пользователям продукты, которые подстраиваются под местоположение и ситуацию. В этих статьях объясняется, что можно использовать уже сейчас, а что станет доступно в ближайшем будущем.
9. Нарисованные от руки иллюстрации
Векторные изображения используются по всему интернету, и на это есть причина. Они имеют небольшой размер и отлично подходят для отзывчивых сайтов. Но хорошо нарисованная иллюстрация может добавить элемент человечности в дизайн сайта. Может эти иллюстрации намеренно создают такими ностальгическими и искренними, но в любом случае они пробуждают теплые и добрые чувства. Вероятно, именно это и нужно вашему бренду.
themanyfacesof.com/leonardo-dicaprio
Эта тенденция набирает популярность, особенно когда нужно представить сложные темы в менее грозном виде. Стиль рисования от руки также может выделить ваш бренд на фоне остальных. Нам нравятся уникальные яркие иллюстрации у таких брендов, как Intercom.
- Мы использовали нарисованного от руки персонажа, чтобы помочь компании McAfee представить убедительную историю.
- Но дело не только в стиле. Иллюстрация сама по себе играет большую роль в интернете.
- Существует масса вариантов для использования иллюстраций на сайте, от Hero Image до иконок. Нас вдохновляли эти примеры.
- Некоторые люди предпочитают использовать иллюстрации по всему сайту. Вот несколько хороших примеров.
10. Flexbox
Долгое время создание хорошей компоновки в веб-дизайне считалось трудоемким процессом. Мы пытались использовать таблицы для компоновки и применяли свойство float, в результате чего все работало не так, как ожидалось. К счастью, появился Flexbox и все изменил. Flexbox позволяет свободно размещать элементы и решает проблемы, с которыми не могли справиться традиционные сетки с float.Эту спецификацию поддерживают многие браузеры, поэтому сейчас настало то самое время, чтобы воспользоваться Flexbox, если вы еще этого не сделали. В сочетании с CSS сеткой эта спецификация подарит нам удивительные и инновационные варианты компоновки в 2017 году.
Flexbox может решить или устранить массу проблем с компоновкой. Здесь представлен урок по вертикальному выравниванию с помощью Flexbox.
Foundation теперь опционально включает сетку на основе Flex. В этой публикации мы разместили некоторые удачные примеры наших экспериментов.
11. Больше внимания доступности
Интернет — одно из величайших достижений человечества. Он предоставляет возможности, знания, свободу и независимость людям со всего мира. Если ваш сайт соответствует A11y (доступен людям с ограниченными возможностями), каждый сможет воспользоваться тем, что предлагает интернет. Доступные сайты имеют простую навигацию, занимают более высокое место в выдаче и обеспечивают рост конверсии, предоставляя контент большему количеству людей.
Привести сайт в соответствие с A11y не так сложно, и фреймворк Foundation упрощает эту задачу.
- Интернет предназначен для всех. Если хотите привести свой сайт в полное соответствие с A11y, то стоит ознакомиться с этими 10 ресурсами.
- Сделать сайт более доступным не так сложно. В этом уроке автор рассказывает о том, как за 5 минут сделать доступную страницу.
12. Полноэкранные формы
Формы регистрации могут легко затеряться на сайте или быть невероятно надоедливыми. В полноэкранных формах используется полноэкранное наложение. То есть они не отправляют посетителя на другую страницу, что дает пользователю больше экранного пространства и меньше отвлекает его внимание.
Эта техника позволяет дизайнерам постепенно вести пользователей через поля для ввода данных, а не показывать им все сразу. Благодаря ей многие пользователи заполняют форму до конца. И это подтверждают данные. А значит такая тенденция сохранится.
- Формы — важный компонент многих сайтов. Вот 6 техник, которые помогут повысить их эффективность.
- Устройства с сенсорными экранами заставляют нас переосмысливать то, как люди взаимодействуют с нашими продуктами. И формы не исключение. Вот несколько советов, которые помогут сделать формы удобнее при использовании жестов.
- Эти 7 простых шагов позволят быстро и легко создавать такие формы.
13. Вертикальное меню и навигация
Эти элементы не всегда используются эффективно, но при правильном исполнении они выглядят отлично. Сайты с вертикальной навигацией — это свежее решение на фоне массы горизонтальных меню.
Вертикальные меню предоставляют больше пространства для работы, если у вас много важных страниц, на которые нужно оставить ссылку. Это служит одним из основных преимуществ такого подхода. Вертикальные меню даже позволяют расположить элементы по важности. Этот формат отлично работает в сочетании с другими моделями, например раскрывающимся меню и закрепленной навигацией. На большинстве сайтов, где используется такой формат, вертикальное меню находится слева, что обеспечивает лучший обзор на основе F-паттерна. Но можно разместить меню и справа, что выделит сайт на фоне других.
- Обновленный компонент off-canvas (вне холста) в Foundation 6 позволяет создавать более динамичные и модульные компоновки. В этом уроке мы объясняем плюсы и минусы этого компонента.
- А здесь фрагмент кода, который можно использовать в проекте (верхняя панель с меню off-canvas, содержащим «аккордеон»).
14. Диалоговый интерфейс
Крис Мессина, основоположник хэштега, сказал: «2016 будет годом диалоговой коммерции«. И действительно в прошлом году вы могли наблюдать рост популярности диалоговых интерфейсов. Эта тенденция будет только набирать обороты в 2017 году. Люди привыкают к тому, что могут взаимодействовать со своими любимыми брендами и сервисами с помощью чатов, передачи сообщений и других естественно-языковых интерфейсов.
Пока это относительно новое явление, и возникают некоторые проблемы в этом направлении, но оно развивается. И эта тенденция проявит себя везде.
- Все станет диалоговым. В этой статье автор подробно разбирает, что происходит и почему.
- Диалоговые интерфейсы оказывают большое влияние на чат-ботов. Вот несколько уроков по диалоговому интерфейсу, которые один разработчик узнал на этом пути.
- Диалоговый интерфейс используется везде, но может ли он полностью заменить графический интерфейс? В этой статье автор хорошо объясняет, почему диалоговый интерфейс набирает популярность и в чем его недостатки.
15. Предварительный просмотр продукта в реальном времени и демонстрационные образцы
Дизайн целевой страницы продолжает эволюционировать по мере развития браузеров. Одна из тенденций, которая повышает конверсию, это использование предварительного показа продукта в реальном времени прямо на главной странице. Это могут быть видео и анимация, которые демонстрируют особенности продукта, или рабочий образец, который дает пользователям возможность посмотреть продукт и даже испытать его. Все это кажется невероятным.
Статические изображения скучны и малоэффективны. В 2017 году появится больше демонстрационных образцов, которые позволят людям напрямую взаимодействовать с реальными, рабочими компонентами приложений и сервисов.
- Демонстрация — мощный психологический триггер, который помогает людям представить, какой будет их жизнь, если они начнут использовать ваш продукт или сервис. Вот отличный пример этой техники в действии.
- Connect Mania — мобильная игра, которая покорила мир. Со стороны ее разработчиков было невероятно умно поместить демонстрационную версию игровой механики на главную страницу, чтобы пользователи могли попробовать ее до загрузки.
- Команда MailChimp использовала анимацию и видео, чтобы продемонстрировать работу сервиса и внешний вид интерфейса.
16. Монохроматические цветовые схемы
Монохроматические цветовые схемы (использование разных оттенков одного цвета) тесно связаны с эстетикой минимализма, охватившей весь интернет. Они помогают придать сайту утонченности и служат отличным способом подчеркнуть цвет бренда. Благодаря теням, оттенкам и тонам монохроматические сайты не кажутся слишком простыми. Ограниченность при работе с одним цветом позволяет проявить себя с творческой стороны, а добавление акцентного цвета, в обход правил, может создать достаточный контраст.
- Монохроматические цветовые схемы кажутся простыми, но заключают в себе больше, чем вы думаете. Вот несколько важных вещей, которые стоит рассмотреть.
- Дизайнер должен хорошо знать теорию цвета, чтобы создать монохроматический сайт. Эта памятка поможет закрепить основы.
Если монохроматическая цветовая схема слишком ограничивает вас, сочетание двух цветов или наложенные цвета могут дать тот же эффект. Вот несколько полезных советов.
17. Умелое использование видео
Скорость соединения все меньше заботит людей, поэтому все чаще дизайнеры используют видео. Фоны и «шапки» с видео были в моде несколько последних лет. Но сейчас видео начинают использовать в более творческой манере, чтобы рассказывать истории и формировать основу для некоторых интересных интерфейсов.
