Ожидаемые тенденции в дизайне 2015 года

Осень вступает в свои права, мы пьём тыквенный латте со специями и размышляем о том, как завершится этот год. Мы уже можем дать характеристику текущим дизайнерским тенденциям и потренироваться в предсказаниях: какие модные явления уйдут под занавес 2014 года, а какие останутся с нами в 2015.

По крайней мере, именно последним я хотел бы посвятить эту статью. И поскольку наш сайт существует на пересечении двух тем: веб-дизайна и WordPress, я уделю максимум внимания тому, как эти тренды повлияли и ещё повлияют на сообщество WordPress – от готовых к использованию плагинов и тем до новых возможностей, появляющихся у разработчиков в связи с новыми веяниями в веб-дизайне.

1. Адаптивный дизайн навсегда

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

За последние годы адаптивный дизайн де-факто укрепил свои позиции в качестве стандарта во взаимодействии сайта с пользовательскими устройствами вообще и в качестве основы построения WordPress-тем в частности.

Конечно, о методах реализации адаптивности ведутся споры, но никто ещё не сказал: «Давайте же, наконец, избавимся от этой ненужной адаптивности!» – наоборот, многие давно существующие сайты принимают эту концепцию при очередном редизайне. Этот процесс происходил в 2014, и он продолжится в 2015. Адаптивный дизайн перестал быть веяньем моды и стал нормой.

2. Призрачные кнопки

Кнопки, не имеющие фона, реализованы в темах Divi, о которых мы не устанем рассказывать. И вы должны понять, почему мы так любим эти темы. Минимализм, стильность и ненавязчивые эффекты при наведении курсора…

Пользоваться ими – одно удовольствие! Этот тренд мы ожидаем увидеть в следующем году. Тем более что он отлично сочетается с большими изображениями в качестве фона страницы и видеороликами, о чём мы ещё поговорим в пункте 4.

3. Акцент на типографику

Раньше средства веб-типографики были дорогими и сложными в использовании. Это означало, что только высокобюджетные сайты могли уделять много внимания разработке типографического дизайна. Мелкие сайты – основные пользователи WordPress – оставались не у дел. Теперь всё изменилось.

Появились недорогие или бесплатные (например, Google Fonts) наборы шрифтов, оптимизированных для веба. Это позволило бюджетным дизайнерам уделять больше внимания типографике.

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

4. Прекрасные фоновые изображения и видео

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

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

5. Прокрутка вместо ссылок

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

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

6. Модульный дизайн: есть к чему стремиться

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

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

7. Плоский дизайн взрослеет (или перерастает в материальный дизайн?)

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

Возможно, новым плоским дизайном станет так называемый материальный дизайн. Что же такое материальный дизайн? Google назвал его новым перспективным направлением в дизайне интерфейсов, в частности – интерфейсов мобильных устройств.

«Материал» – говорится в анонсе Google, – «это метафора. Метафора материала объединяет в единую теорию рациональную организацию пространства интерфейса и систему управляющих жестов. Наш материал берёт основы в тактильных ощущениях, которые возникают при использовании бумаги и чернил. Но в то же время наша концепция открыта проявлениям фантазии и магии».

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

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

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

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

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

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

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

9. Нарративный веб-дизайн

Что получится, если соединить все вышеназванные компоненты вместе? То, о чём я давно пишу: лучшая платформа для нарративного дизайна!

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

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

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

10. Персонализированный интерфейс

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

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

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

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

Несколько фантастических примеров

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

1 Apple

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

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

2 Tesla

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

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

Этот дизайн – смесь наслаждения и шока, которая превращает традиционно самую скучную часть сайта (FAQ) в незабываемое представление.

3 Divi

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

Divi – несомненно, лучшая тема для WordPress, которая может помочь вебмастеру с невысокими (вплоть до нулевых) программистскими способностями реализовать все те модные тренды, о которых мы сегодня говорили. Это одна из самых впечатляющих WordPress-тем, которые я когда-либо видел.

Эта тема полностью адаптивна, то есть отлично выглядит на любом устройстве. А встроенный конструктор с Drag-and-Drop-интерфейсом поможет вам спроектировать страницу любой длины и функциональности с использованием интерактивных модулей.

В заключение

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

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

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

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

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

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

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