Тренды дизайна. Текст в рамке

” Джона Мур Уильямса, руководителя отдела контент-стратегии Webflow.

Завершение текущего года не за горами, и каждый веб-дизайнер хотя бы раз задавался важным вопросом: что же будет определять веб-дизайн в наступающем 2017 году? Я решил найти ответ на этот вопрос и спросил дизайнеров WebFlow, какие тренды, по их мнению, будут преобладать следующие 365 дней. Их мыслям я также дал собственные комментарии.

В первую очередь давайте узнаем мнение главного дизайнера-проектировщика Webflow Серджи Магдалин (Sergie Magdalin).

1. Дизайн, направленный на контент

“Расположение элементов дизайна внутри данной структуры должно быть таким, чтобы читатель мог легко уловить главную мысль, не снижая свою обычную скорость чтения” - Герман Цапф

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

Было очень интересно смотреть на метаморфозы, происходящие с приоритетами в разработке.

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

Это одна из причин перехода от “скевоморфного” дизайна (когда элементы изображаются максимально похожими на их аналоги в реальном мире) к плоскому, минималистичному дизайну. Из этих соображений Google создал Материальный дизайн.

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

2. Качественное взаимодействие дизайнеров с разработчиками и дизайнеров между собой

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

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

Чтобы облегчить эту задачу, было создано множество инструментов, начиная коллективными шаблонами и досками в Webflow’s Team и заканчивая графическим редактором интерфейсов Figma, показывающим изменения в реальном времени. Я уверен, в 2017 эти платформы будут улучшаться и дополняться.

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

Карсон Миллер (Carson Miller) высказался по этому поводу в своей недавней статье “Будущее фронтенда в дизайне ” на TechCrunch:

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

3. Упрощенный процесс “от дизайнера к разработчику”

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

Тренды веб-дизайна в предстоящем году по мнению продукт-дизайнера Гаджи Хархарова (Gadzhi Kharkharov):

4. Крупный, громкий заголовок

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

The #MadeInWebflow Heco Partners

Как можно увидеть на примерах, “крупный” и “жирный” относится не только к описанию шрифта. Скорее, речь идет о том, что значительная часть главного экрана выделена под простое, но сильное и самодостаточное утверждение о продукте или услуге. Подобный заголовок должен содержать в себе самую суть и быть понятным для любого посетителя, избегая излишней напыщенности (окей, фраза “Design the impossible”, возможно, звучит чересчур громко).

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

5. Сложная разметка, пришедшая из основ графического дизайна

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

В последние несколько лет вёрстка веб-страниц ограничивалась возможностями CSS, но такие новые модули, как Flexbox и CSS Grid (который выйдет в марте 2017 года), позволят осуществить самые смелые задумки в веб-разметке.

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

Вот несколько примеров того, что стоит ожидать (конечно, если у вас есть браузер, поддерживающий CSS Grid, например, Firefox Nightly, Safari Technical Preview или Chrome Canary):

Экспериментальная лаборатория макетов Джен Симмонс

Обратите внимание на стиль главного блока – явная отсылка к истории графического дизайна.

Grid by Example

На сайте можно посмотреть больше примеров.

6. Больше SVG

SVG (scalable vector graphics – масштабируемая векторная графика) имеет больше преимуществ для веб-дизайнеров и разработчиков, чем традиционные форматы изображений, например, JPG, PNG или GIF.

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

Но это еще не всё. SVG также славится тем, что не требует отправки HTTP-запросов. Если вы когда-нибудь проверяли скорость загрузки своего веб-сайта, вы могли заметить, что эти HTTP-запросы могут действительно тормозить ваш сайт. С SVG такой проблемы нет.

7. Инструменты для адаптивного дизайна на основе правил

Адаптивный дизайн полностью изменил наш взгляд на веб-приложения и на их создание.

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

Ожидается новая волна дизайнерских инструментов (таких как Figma) на основе “правил”, корректирующих вид сайтов на различных экранах и устройствах, тем самым сокращая количество повторных действий дизайнера. Такие инструменты основываются на пространственных связях элементов и, когда мы меняем размер экрана или устройство, они стремятся сохранить эти связи путем изменения размеров элементов и отступов между ними.

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

Тренды дизайна в 2017 году по мнению Райана Моррисона (Ryan Morrison), старшего графического дизайнера.

8. Больше ярких цветов

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

Взгляните на новый сайт Asana с яркой цветной заливкой:

Новая иконка приложения Instagram вызвала много критики, но этот редизайн, несомненно, освежил бренд:

Всё, что делает Stripe, не требует отдельного представления:

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

Хотя, может быть, стоит всё-таки немного уменьшить яркость? Мы следим за вами, Asana.

9. Больше внимания анимации

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

Эта тема особенно важна, поскольку создание анимации упрощается с каждым днем. На Конференции Дизайна и Контента (Design & Content Conference) в 2016 гуру анимации Вал Хэд (Val Head) подчеркнула, что при разработке анимированных элементов дизайнерам следует помнить о целях и потребностях бренда, чтобы достигнуть эффект, который ожидают увидеть создатели контента. Если к этому совету будут прислушиваться, анимация будет выполнять задачи, значимые для бренда, а не просто вызывать мигрень у пользователя.

10. Необычная разметка

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

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

Метод “сломанной” разметки заключается в выходе элементов за пределы скрупулезно выровненной сетки. Подобные приемы могут иногда показаться даже неприятными для глаза. Например:

Наезжающие друг на друга тексты и изображения:

Тексты и изображения, раскиданные (казалось бы) случайно по странице:

Это была первая часть перевода статьи “18 трендов веб-дизайна в 2017 году ”. А вы согласны с мнениями специалистов Webflow? Как вы думаете, какой веб-дизайн будет в моде в наступающем году?

Часто в резюме дизайнеров можно встретить фразу: «Слежу за украинскими и зарубежными трендами, применяю их в работе». Фраза ни о чем не говорит, кроме того, что вы фолловите на Behance, Dribble некий список дизайнеров и пытаетесь их наследовать.

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

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

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

Базовые понятия

Википедия нам говорит:

«Тренд - основная тенденция изменений временного ряда».

Коротко и не очень понятно, согласитесь.

Чтобы его расшифровать, давайте поиграем в Тьюринга, он любил всякие головоломки. Для начала зацепимся за два понятия «тенденция» и «временной ряд» .

Тенденция - направление развития, склонность, стремление. Делится на микротенденции и макротенденции. Первые в дизайне живут 1–2 года, вторые - 5–7 лет.

Тенденция - направление развития, склонность, стремление. Делится на микротенденции и макротенденции.

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

Теперь соберем все вместе и получим следующее: тренд - основное направление развития изменений последовательно измеренных через равные промежутки времени данных. А если упростить? Берем некоторые промежутки данных и измеряем их, полученную информацию используем, чтобы определить вектор развития, направленность. Все.

Для анализа трендов используется два метода.

  1. Изучение природы данных. Откуда они взялись, почему образовались, что на них повлияло.
  2. Метод прогнозирования. Прогнозирование - построение модели для предсказания будущих событий, основываясь на известных событиях прошлого.

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

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

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

Основные составляющие жизненного цикла тренда

  • Анализ прошлого;
  • Анализ настоящего;
  • Прогноз будущего;
  • Внедрение тренда;
  • Принятие тренда.

Основные составляющие жизненного цикла тренда.

Профессии

На рынке появились профессии, которые соответствуют каждой составляющей цикла.

Тренд-хантер

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

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

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

Трендсеттер

Понятие появилось в 1913 году. Окончательно понятие вошло в обиход в 40-х годах, после американского исследования, в котором изучали, как распространяются инновации у фермеров.

Трендсеттер - человек, пытающийся стать основателем или основавший некое материальное или нематериальное новшество.

В 60-х Эверетт Роджерс популяризировал диффузную модель.

Согласно теории Роджерса общество делится на 5 групп:

  1. Новаторы - 2,5%.
  2. Ранние последователи - 13,5%.
  3. Раннее большинство - 34%.
  4. Позднее большинство - 34%.
  5. Отстающие - 16%.

2,5% людей - генераторы инноваций. Мы их знаем - Норман Кокс, Билл Гейтс, Стив Джобс, Илон Маск…

2,5% людей - генераторы инноваций.

Трендсеттеры - ранние последователи. Именно от них зависит, будет тренд трендом и будет ли он развиваться. Диффузная теория говорит, что не нужно влиять на все общество, предлагать товары всем - достаточно этих 13,5%.
Трендсеттеры делятся на две группы:

  1. Определяющие - следят абсолютно за всем новым. Это блоггеры, знаменитости, публичные люди, лидеры мнений.
  2. Категориальные - специализируются на определенной категории инноваций. Бьют точечно, но сильно. Они не просто лидеры мнений, а эксперты в своих категориях.

Тренд-вотчер

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

Тренды в дизайне 2017-го года

Цвета

Pantone объявил цвета, что будут в моде весной 2017-го. Это хорошо для печатников, для фешн-индустрии. У диджитал, веб-дизайнеров, дизайнеров интерфейсов, цифровая палитра шире. И нам важно запомнить: всё, наигрались в яркие контрастные чистые цвета. Теперь хотят спокойствия, выраженного в пастельных, нюдовых оттенках.

Спокойствие, выраженное в пастельных, нюдовых оттенках.

Графический дизайн

Кардинально нового нет.

Действительно живые логотипы

Не такой уж новый тренд - у любого телеканала анимированный логотип. Но в лого компании Seagate встроена информация о живых данных.

Лайн-арт

Тренд был популярен в прошлом году, будет популярен и в этом.

Негативное пространство

Что-то инновационное? Нет.

Эмоциональная типографика

GIF, синемаграф, глитч

Модерн и минимализм

Уникальная иллюстрация

Возрождение 3D

3D возвращается.

Моушн-дизайн

Хороший пример - Nike. По ним всегда можно ориентироваться. Цвета пастельные, 3D, негативное пространство.

UI-дизайн

И снова 3D

Иллюстрация вместо фотографии

Мы привыкли к иллюстрации книг, но как насчет иллюстрации приложений и веб-сайтов?

Становится модным иллюстрировать. Мы привыкли к иллюстрации книг, но как насчет иллюстрации приложений и веб-сайтов?

Уход от шаблонности к оригинальным решениям

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

Возрастной отзывчивый дизайн

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

Микро-мини взаимодействия

В 2017-м их станет больше.

Лайк в фейсбуке - мини-взаимодействие. А когда вы определяете характер лайка: «вау!», «супер», «фу» - это уже микро-мини взаимодействие. Их станет больше.

Тактильная обратная связь

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

Персонализация, Touch ID

Внедрение Touch ID в девайсы позволит использовать эту технологию в банковской сфере.

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

Внедрение Touch ID в девайсы позволит использовать эту технологию в той же банковской сфере. Логин/регистрация через Touch ID.

Разговорные интерфейсы

Проект, который здесь изображен называется «Лука» . Это чат-бот в интерфейсе - сайт-бот. Мой эксперимент. Хочу Лукой заменить классический сайт студии. По сути, роль студии - рассказать о себе и привести человека к тому, что он оставит онлайн-заявку. Я решил это сделать в виде сайт-бота, который общается с пользователем через разговорный интерфейс.

UX-дизайн

Де-линейность

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

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

Диалоговое взаимодействие

Появляются диалоговые интерфейсы. И сейчас они, в основном, строятся не на нейронной сети, а на алгоритме, который пишет и редактирует человек.

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

У юиксеров появится новый вид деятельности - написание сценариев для чат-ботов в социальных сетях или же для сайт-ботов.

Поведение, жесты, новые метафоры

Всем надоели кнопки. Появятся новые метафоры (контроллеры).

Специализация

Меня раздражают приставки - графический дизайнер, дизайнер интерфейсов, UI/UX дизайнер, диджитал дизайнер… Они существуют, чтобы определять узкую специализацию человека, но я считаю, что достаточно говорить просто «дизайнер». Мы к этому придем.

Узкие специалисты будут существовать всегда, но многие из нас будут универсалами.

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

Сварщик - дизайнер процессов.

Автоматизация дизайна/алгоритмический дизайн

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

Ответственность

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

Микро-тренды закончились. Подведем итоги.

Я считаю, что 2017-й будет годом креатива, возврата к реализму и годом сотрудничества с искусственным интеллектом.

Тренды на ближайшие 5-10 лет

Невозможно говорить о трендах и рассказать только микро-тенденции. Гораздо интереснее заглянуть в будущее.

В ближайшее время VR не войдет в массу. Сейчас дорогие контроллеры, да и мы не готовы. К дополненной реальности придем быстрее, чем к виртуальной.

Что касается параллельной/альтернативной системы - должна появиться концепция, которая будет противоположна концепции нынешней системы. Это и о стремлении интерфейсов раствориться в нашей реальности. Хороший дизайн - это незаметный дизайн.

Вспомните фильм «Она». Представьте операционную систему на основе искусственного интеллекта. Вы будете разговаривать с ней. Это самый природный путь взаимодействия для человека. Самый простой.

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

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

В ближайшее 10 лет мы выйдем за пределы устройств и существенно дополним нашу реальность.

Как внедряются тренды в работу?

Нет никакого рецепта, но есть два главных правила:

  1. Говорить нет, если хотите внедрить инновацию ради инновации.
  2. Четко понимать задачи. Понимая задачи, просто понять, какие тренды подходят, а какие - нет.

Самый главный тренд всех времен и народов - правильное дизайн-мышление.

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

Какие тренды графического дизайна наиболее заметны в 2017 году?

1. 80-е возвращаются
Последнее десятилетие дизайнеры неустанно пересматривают и возвращают лучшее из тенденций графического дизайна прошлых лет. Если в 2016 главенствовал ретро-стиль «модерн», то в 2017 стрелки передвинулись вперед. В моду вошли характерные особенности стиля 80-х: яркие и неоновые цвета, непредсказуемые сочетания узоров и рисунков, свободное выражение позиции автора и игра с композицией.

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

2. Индивидуализм
2017 стал годом индивидуализма. Плоский дизайн был главным трендом предыдущего года, Google даже разработал гид с шаблонами для упрощения работы дизайнеров и программистов. В результате, его стали применять повсеместно, а уникальность была потеряна.

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



3. Геометрические коллажи
Если в детстве вам нравилось вырезать из журналов отдельные предметы или фото людей, а затем создавать коллажи, то 2017 вас порадует. Да, да, да! Одна из модных тенденций в графическом дизайне этого года – коллажи, которые включают фотографии, иллюстрации, рисунки и текст. Все элементы размещаются в определенной геометрической форме. Коллажи отлично подходят для передачи идей на плакатах, в рекламе и презентационных материалах.
4. Уютный винтаж
Это винтаж, но не такой, каким мы его знаем. Невозможно создать современный дизайн, в точности копируя работы прошлых лет. Необходима доработка и привнесение современных элементов. Людей все больше привлекает ретро стиль, они стремятся создать дома уют, используя элементы прошлого. Упаковки товаров и продуктов повседневного спроса должны вписываться в интерьеры, а это задача дизайнеров.


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

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

Любите дизайн и хотите стать профессионалом в данной области? Начните с образования. Пройдите обучение в школе дизайна Марангони за рубежом (в Милане) на одной из специализированных программ:

Подробнее об обучении дизайну за границей на программах Istituto Marangoni можно узнать бесплатно у специалистов STUDIES&CAREERS.

Линии, цвета, светотени, пространство и формы - элементы, из которых состоит картина. Каждой эпохе были присущи свои тенденции в представлении мира. Веб-дизайнеры - это те же художники, только творят они в цифровом формате. И если направления в искусстве менялись не так часто, то веб-дизайн - трансформируется из года в год. Мы попробуем составить путеводитель по трендам графического оформления и предугадать, как видоизменятся сайты в 2017-ом. О трендах web-design 2018 года вы можете прочесть .

Итак, 14 поворотов на пути к модному интерфейсу:

1. Акцент на контент

Что важнее: содержание или оформление страницы. Ответ прост - дизайн должен выгодно представлять контент. Дизайнеры сервиса WebFlow (конструктора сайтов) предлагают закончить борьбу за главенство в 2017-ом, отдав предпочтение содержанию. Пользователь заходит на сайт в поисках ответа на запрос, неважно это товар, услуга или полезная статья. Задача веб-дизайнера подать контент максимально удобно для человека.

2. Уход от «гамбургеров»

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

3. «Сard-based design»

Карточный веб-дизайн завоевал просторы интернета быстро. Плюсы этого способа оформления:

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

На вопрос: быть или не быть карточному дизайну в 2017-ом, единогласного ответа нет. Его будут использовать, так как он уже доказал свою эффективность.

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

4. Ломаная сетка

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

Оригинальность всегда в моде. Нестандартные макеты и новые подходы в графическом дизайне уже опробовали западные дизайнеры. Самые смелые решения можно осуществить с помощью модулей Flexbox и CSS Grid.

5. Броские необычные шрифты - уклон на типографику

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

Отличным дополнением в оформлении сайта будет шрифтовая графика (если это уместно).

6. Адаптивный дизайн

Универсальность веб-сайтов для устройств с большими и маленькими экранами - уже не новая тенденция. Подход «mobile first» актуален и в 2017-ом. Кроме возможности подстроиться под мобильные гаджеты, в ближайшем будущем сайты должны адаптироваться под конкретного пользователя в зависимости от:

  • возраста;
  • навыков (компетенций).

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

7. Цвета

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

Он напоминает свежую весеннюю зелень и поможет расставить цветовые акценты на сайте. Специалисты Pantone Color Institute назвали его цветом 2017-го.

8. Инфографика

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

9. Анимации

Статичные страницы - это скучно. Пользователю гораздо интереснее «ходить» по сайту с анимированными иконками. Привлекайте внимание анимацией к тем элементам, которые выгодны вам, например, к кнопке «Купить».

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

10. Фоновые фото и видео

Анимация - это хорошо, а широкоформатные фоновые фото и видео для оформления сайта - это ещё лучше. Видео придает динамику веб-ресурсу и позволяет погрузить пользователя в определенную историю, заглянуть «за кулисы» внутренних процессов компании или бренда. Cторителлинг в веб-дизайне всё ещё актуален. Фото - иллюстрирует, создавая атмосферу.

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

11. Стоп «сток»!

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

12. Скроллинг +

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

13. Параллакс-скроллинг

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

14. 3D-панорамы

360° панорамы - ещё один способ эффектно продемонстрировать пользователю товар или «подарить» посетителю возможность виртуально присутствовать в каком-то месте, например в офисе компании, отеле.

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

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

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

1. Юзабилити станет товаром

Пример улучшения юзабилити сайта http://www.telemirspb.ru/

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

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

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

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

2. Исчезнут длинные тексты

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

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

Посмотрите аудиторию вашего сайта, например, в Яндекс.Метрике в отчете Сводка → Тип устройства и увидите, какой процент клиентов заходит с телефонов и планшетов. Не забывайте об этой аудитории при размещении контента.

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

6. Использование синемаграфий или «живых» изображений

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

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

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

7. Отказ от «типичных» стоковых фотографий

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

9. Мобильные устройства в первую очередь (Mobile First)

Суть данного подхода в том, что при проектировании сайта необходимо подумать, как он будет отображаться на мобильных устройствах. На эту тему написано много статей и книг, например, советуем почитать Люка Вроблески «Сначала мобильные» .

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

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