Тренды в Web дизайне 2016

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

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

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

Скевоморфизм

Долгое время Скевоморфизм был основным направлением в дизайне. Итак, что же такое Скевоморфизм? Точный термин из Википедии гласит: ”Скевоморфи́зм — физический орнамент или элемент дизайна, который скопирован с формы другого объекта, но изготовлен из других материалов или иными методами.” Проще говоря — это имитация одной поверхности или объекта с помощью другого.

Все это можно было отнести к web дизайну и мобильным интерфейсам.

В web дизайне у Скевоморфизма был ряд преимуществ.

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

2. Реалистичные кнопки и элементы интерфейса. Интерфейсы были максимально приближены к реальным. К примеру, у вас музыкальный проигрыватель — его интерфейс будет похож на старый добрый бобинный проигрыватель.

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

Но эволюция не стоит на месте и приходит новый тренд.

FLAT

Является основным трендом последних лет. Если попробовать дать описание Flat-у, то получится приблизительно следующее — это минималистичный подход к дизайну объектов, который подчеркивает удобство пользования. Он больше ориентирован на конечного пользователя.

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

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

Баухаус

Нет, это не название паба в Германии. Это высшая школа строительства и художественного конструирования. Учебное заведение, существовавшее в Германии с 1919 по 1933 годы, а также художественное объединение, возникшее в рамках этого заведения.

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

Международный типографический стиль

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

Совокупность этих направлений и подарила нам Flat — чистый, легкий, лишенный глубоких и объемных теней, дизайн.

Еще немножечко истории

Теперь давайте рассмотрим, что же было крутым и трендовым пару лет назад:

1. Long shadows (Длинные тени)

В 2013–14 годах начинается рассвет длинных теней. Основное их использование — это иконки, иллюстрации и заголовки.

Использование длинных теней позволило сделать элементы и иконки более объемными без использования скевоморфизма.

2. Яркие цвета, как акценты

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

3. Простая типографика

Типографика становится более удобной, четкой и простой для чтения. Все сводится к единой строке по всей ширине.

4. Призрачная кнопка

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

А теперь давайте рассмотрим, что же будет актуально в ближайшем будущем.

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

1. Flat совместим с Responsive дизайном. Пользователю легче пользоваться приложением или просматривать сайт на различных девайсах.
2. Flat легкий по структуре и навигации для пользователей. За счет своей простоты, пользователю легче ориентироваться в навигации по сайту.
3. Flat имеет быстрое время загрузки. За счет своей простоты и отсутствия сложных фотореалистичных элементов, сайт и приложения быстро загружаются.
4. Простая типографика во Flat способствует легкой читабельности. Чем проще и четче текст, тем легче и быстрее он считывается.

Основные минусы таковы:

1. Flat сложно сделать хорошо. Для многих, в частности для новичков, Flat за счет своей простоты, становится сложным, так как кажется что сделано пусто и чего-то не хватает.
2. Высокий риск того, что станет скучно. Желание не переборщить, зачастую приводит к тому, что дизайн выглядит скучным, пустым и незаконченным.
3. Высокий риск потерять оригинальность из-за популярности стиля.

Теперь поговорим о самих трендах. Одним из первых трендов, набирающих все большую и большую популярность в этом году является:

Креативная иконографика

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

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

Резкая типографика

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

Возрастает использование приятной типографики, пользовательских шрифтов, целенаправленного леттеринга.

Акцентированные цвета

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

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

Один дизайн один шрифт

За исключением логотипов для индентификации бренда, основной текст во Flat дизайне выполняется в одном и том же или похожем шрифте.

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

HD картинки в хейдерах

Растет популярность больших HD изображений, поскольку они добавляют нотку реализма в дизайн Flat интерфейсов, без ухода в скевоморфизм.

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

UI карточки

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

Зародившиеся в Pinterest, а затем популяризированные на сайтах социальных медиа, таких как Facebook и Twitter, UI карточки в сейчас являются одним из наиболее развивающихся layout-ов.

Существуют несколько стилей UI карточек, которые актуальны на данный момент, давайте рассмотрим их:

1. Пины
Созданные в Pinterest, пины — самый узнаваемый layout для карточек сегодня.

В свое время Wordpress собрал лучшие 100 шаблонов, сделанных в Pinterest стиле.

2. Сетка
Фрейморк в виде сетки с равными расстояниями придает карточкам более логическую структуру, что делает контент понятным и легко просматриваемым.

3. Журнал
Возникнув на сайтах новостей и прессы, этот стиль сейчас широко используется на сайтах с большим количеством контента, например в блогах или портфолио. Особенность данного стиля — превью новости с заголовком.

UI карточки на данный момент широко применяются в web дизайне и имеют как преимущества так и недостатки, рассмотрим их.
Основные преимущества:

1. Интуитивное понимание того, как их использовать. Пользователь не задумывается о том как это работает, он просто считывает контент и использует элементы UI карточек.
2. Идеально подходят для комбинирования, сочетания разного контента. Пример: на новостных сайтах, использующих UI карточки, разные новости — будь то политика, спорт, искусство — смотрятся органично в едином блоке.
3. Легко просматривать. Контент в UI карточках легко считывается, а сами карточки выглядят гармонично.
4. Универсальность. Карточки могут быть адаптированы практически к любому стилю.

Основные недостатки таковы:

1. Немного надоели. Особенно это касается клонов Pinterest, Facebook.
2. Требуют усилий и креативного UX дизайна. Интерактивность и взаимодействие являются ключевыми компонентами их успеха.
3. Высокий риск того, что создашь хаотичную структуру. В погоне за дизайном и креативностью можно переборщить, нарушить логику и общую визуальную составляющую.
4. Требуется еще больше внимания к визуальному дизайну. Ввиду того, что каждая карточка может отображать несколько типов информации.

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

Иммерсионное воздействие

Или проще говоря — интерактивность, развивается все больше и постепенно занимает главенствующие роли в web дизайне.

“Хороший интерактивный дизайн это то, что происходит в каждый момент взаимодействия между человеком и устройством (или системой или службой), с которым он или она взаимодействует.” Stephen P. Anderson

Интерактивность является лучшим способом достучаться до вашего пользователя. И для этого она использует множество методов:

1. Длинный скроллинг или параллакс скролинг.
2. UI карточки.
3. Видео и анимация.
4. Свайпанье и кликанье.
5. Микровзаимодействия.
6. Push — уведомления.
7. Контроль над скрытием и появлением контента.

Интерактивность должна помочь пользователям двигаться к реализации их целей. Изучите свою аудиторию с помощью “основных действующих лиц” пользовательских сценариев и карт опыта (Experience map).

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

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

Последовательные интерфейсы более предсказуемы. Это способствует обучаемости и, соответственно, улучшает общее юзабилити, поскольку пользователи действуют интуитивно, без длительных размышлений.

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

Видео и анимация

Это еще одни быстро растущий и набирающий популярность тренд. Что неудивительно— с ростом скорости интернета растет и возможность использовать видео и анимацию. Я не буду углубляться сейчас в то, как развивается анимация и насколько она важна, просто рекомендую вам почитать “12 главных принципов Уолта Диснея”.