Текст в рамке. Текст в рамке Современное сайтостроение

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

Внимание, контент

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

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

Конец эпохи флэт-дизайна

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

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

Геометрические формы, линии и узоры

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

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

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

Широкое использование анимации

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

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

Упрощенная навигация

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

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

В UX-дизайне позитивный опыт взаимодействия является ключевой задачей. Следовательно, микровзаимодействия должны помочь пользователям понять, как взаимодействовать с интерфейсом без ненужной путаницы. Перелистывание фотографий, прокрутка графики и другие действия пользователя должны быть максимально естественными. Помогая пользователю эффективно взаимодействовать с приложением, можно с помощью микровзаимодействий поощрять людей просматривать контент. Главное – постоянно удерживать внимание пользователя, предлагая ему удобные варианты просмотра интересной информации. Широкое распространение мобильных устройств сделало микровзаимодействия одним из самых заметных трендов 2016 года и нет сомнений, что эта тенденция будет одной из самых актуальных в следующем году.

Кастомная графика

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

Рост значения целевых страниц

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

Вместо заключения

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

Перевела Катя Гонзуль.

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

Мы предлагаем рассмотреть тенденции веб-дизайна, которые стоит знать в 2017. Не все они новые; некоторые из них – стили, которые завоевывали и/или сохраняли свою популярность в 2016 году. Их активное использование ожидается и в проектировании сайтов нынешнего года.

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

Цвет

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

Компания Pantone представила свой цвет года – Greenery. Он был выбран как символ новых начинаний; освежающий и оживляющий оттенок. Мы не ждем, что в 2017 году каждый веб-сайт будет зеленым. Но уверены, что несколько веб-дизайнов, вдохновленных этим цветом, все же появится.

Если вы ищете вдохновения в вопросе цветовых комбинаций, то некоторые из сочетаний можете увидеть на странице Pantone Color of 2017.

Из-за популярности Google Material Design цвета и цветовые сочетания, рекомендуемые этими принципами дизайна, скорее всего, войдут в TOP-2017. Цвета яркие и смелые. Даже за пределами GMD в последнее время было много примеров веб-дизайна, включающих яркие цвета.

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

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

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

Сайт Adison Partners успешно использовал дуплекс в пределах своего веб-дизайна.

Современное ретро

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

Интерактивное резюме Робби Леонарди – блестящий пример современного ретро. Он объединил полусовременный пиксель-арт-стиль с боковой прокруткой видеоигры Супер Mарио.

Кондитерская Sweet Magnolia Gelato выбрала винтажный дизайн с использованием привлекательной анимации. Это придает веб-сайту современный вид, одновременно сохраняя шарм старины.

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

Синемаграфия

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

Синемаграфией может быть GIF-файл или видео. Оба могут быть довольно большими по размеру файлами, если сняты в высоком разрешении. Синемаграфия в формате GIF легко достигает размеров более 3 MB, так что вам, возможно, будет логичнее загрузить видео.

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

Material Design

Material Design от Google появился в поле зрения еще в 2014 году. По существу, он построен на принципе бумаги и чернил, переводя их качества в цифровой формат. Например, использование теней и краев, чтобы указать на то, к чему вы должны прикоснуться: кнопки.

За последние пару лет Material Design набирает популярность с многочисленными темами и шаблонами, созданными для CMS (Content Management Systems), а также интерфейсными структурами, такими как Twitter Bootstrap. Одно из критических замечаний, которые вы можете услышать об этом сервисе, – то, что многие сайты, разработанные системой Material Design, очень похожи; возможно, даже слишком похожи. Это происходит из-за утрированного следования стилю Material Design – вместо применения основных принципов.

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

Отличным примером Мaterial Design в наиболее чистой форме является Material Design Blog (неожиданно, правда?). Здесь вы можете увидеть большинство принципов MD в действии.

Прямолинейная креативная типографика

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

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

Friends – дизайн-агентство, основанное в США. На своем сайте оно использует большой жирный шрифт, который действительно выделяется как главная особенность.

Модульный дизайн

Модульный дизайн – не новинка, но он набирает популярность в течение нескольких последних лет. Это подход к проектированию с использованием шаблона модульной сетки расположения элементов. Взглянув на данные Google Trends, можно проследить рост интереса к модульному дизайну уже с начала 2011 года (по данным частоты запросов). И мы надеемся на сохранение этой тенденции и в 2017 году.

Build в Амстердаме создали очень изящный модульный дизайн веб-сайта. Такой подход позволяет четко определить каждый элемент контента.

Университет Warwick также использовал модульный дизайн в проектировании своей странички.

SVGs (Scalable Vector Graphics)

Устали от логотипов и изменений размеров других изображений? Если да, стоит попробовать файлы SVG вместо обычных форматов PNG и JPG. Формат SVG подходит не для всех изображений; они будут работать только с векторной графикой, так что вы не сможете бесконечно масштабировать любые фотографии. Тем не менее, для таких изображений, как логотипы, формат работает блестяще.

SVG появился примерно с 1999 года, но до сих пор мы видим форматы PNG и JPG там, где SVG был бы более уместен. Хотя сейчас, вероятно, все-таки происходят некоторые изменения. Вы наверняка встречаете все больше файлов SVG, и данные Google Trends показывают, что интерес к этому формату растет начиная с 2013. В этом году ожидается еще более широкое использование этого формата, а также множество новых статей на эту тему.

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

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

Flexbox

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

Flexbox неуклонно набирает обороты. И вместе с тем, в настоящее время он поддерживается всеми современными браузерами. Вероятно, все больше разработчиков интерфейсов будут использовать его. Вы можете прочитать больше о Flexbox в наших гидах: Understanding CSS3 Flexbox для Clean, Hack-Free Responsive Design и Understanding CSS Grids для Modern WordPress Website Design.

360°-видео и виртуальная реальность

2016 был годом VR (virtual reality). Были выпущены многочисленные игровые VR-наушники, и полнообзорные видео побили все рекорды по поисковым запросам. Надеюсь, в течение этого года дизайнеры подумают над интересными способами размещения панорамных видео на веб-сайтах.

Если вы еще не знали, Google VR View – это API (интерфейс программирования приложения) JavaScript, который позволяет без затруднений добавить 360°-видео на свой собственный веб-сайт.

Интерактивный веб-VR был создан для нового фильма «Ведьма из Блэр» (Blair Witch ). Его лучше всего смотреть на мобильном телефоне с использованием гарнитуры VR.

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

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

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

1. Видео - функциональный элемент

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

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

Да: Видео, которое отвечает на вопросы пользователей и решает задачи сайта.
Нет: Видео на фоне, потому что красиво и вообще все так делают.

2. Синемаграммы вместо видео

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

Осторожно! Синемаграммы страшно залипательны.

3. Шрифтовая графика

Еще одна альтернатива видео и изображениям - шрифтовая графика. Она одновременно украшает сайт и делает его информативнее. Тут главная забота - качественный контент. Но это уже совсем другая история .

4. Иконки - главный декоративный элемент

Зачем вам изображения, видео и шрифтовые извороты, если можно в иконки, которые и так будут на сайте, досыпать «вау»? Серьезно, добавьте нестандартную анимацию и заканчивайте на этом. Будете самыми трендовыми.

5. Залипательная инфографика

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

С каждым годом проблема усугубляется. Поэтому задача дизайнера - зацепить пользователя и заставить его взаимодействовать с контентом, даже если это занудная статистика. Особенно (!) если это занудная статистика.

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

6. Комбинированная навигация

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

7. Отказ от гамбургер-меню

В 99,9% прогнозов веб-дизайна на 2015 и 2016 авторы обещают, что в этом году дизайнеры ну уж точно откажутся от гамбургер-меню. Прям совсем. Что ж, поддержим традицию и тоже скажем: в 2017 гамбургер-меню будет не в тренде, не делайте так, фу!

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

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

studio-spoon.co.jp

8. Рамка вокруг сайта

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

teletype.online

9. Больше эмодзи

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

10. Материал дизайн

Да, он все еще с нами.

11. Больше Mobile First

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

12. Больше микровзаимодействий

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

13. CTA ещё навязчивее

Красоту ради красоты дизайнер мутит только в стол и в Dribbble. В остальных случаях (в тех, за которые деньги платят) ему в ухо тяжело дышат маркетологи, которым нужно вот здесь поярче и вон там кнопочку побольше. Похоже, в 2016 случился перелом и переосмысление этих требований - ждите в 2017 больших, сочных, бьющих по глазам CTA-блоков. Таких, чтобы маркетологам нечего было к ним добавить.

strv.com

14. Ностальгия по 80-м

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

retrominder.tv

15. Отказ от стоковых фотографий

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

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

16. Зелень

Ребята из Pantone считают, что цвет 2017 года - вот этот зелененький Greenery. Прислушаемся и добавим к нам в список.

17. Новый подход к прототипированию

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

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

Часто в резюме дизайнеров можно встретить фразу: «Слежу за украинскими и зарубежными трендами, применяю их в работе». Фраза ни о чем не говорит, кроме того, что вы фолловите на 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.