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

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

1. Нестандартный «абстрактный» дизайн

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

Нестандартное расположение элементов дает больше интересных возможностей: позволяет использовать все пространство страницы, добавлять в макет наслоение объектов и ощущение глубины. Вы сможете реализовать дизайн, впечатляющий пользователей даже без красочного полноэкранного видео или анимации. Учитывая сотни тысяч классических макетов в сети, абстрактные уникальные решения практически всегда будут выделяться и привлекать внимание посетителей сайта (по типу WOW фактора). И этим нужно пользоваться!

2. Новые варианты навигации

Нестандартному проекту — продвинутое меню. Сегодня вам не обязательно размещать горизонтальную в шапке. За счет возрастающей популярности адаптивных макетов многие пользователи уже привыкли к иконке Hamburger меню (состоит из трех горизонтальных полосок), которая все чаще появляется и на обычных версиях сайтов. Грань между мобильным и десктопным дизайном постепенно стирается. В текущем году мы будем наблюдать множество экспериментов с размещением и формой меню — это может стать одной из главных тенденцией веб-дизайна 2017.

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

3. Карточки в дизайне

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

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

4. Сплит макеты с разделением экрана на 2 части

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

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

5. Большая и оригинальная типографика

Помнится, в далеком 2009 году мы публиковали , где применение огромных шрифтов было одним из перспективных трендов дизайна сайта. В 2017 вероятно произойдет то же самое (по крайней мере большинство дизайнеров об этом упоминают). Основная причина — конечно, привлечение внимания: кому-то нужно выделить определенные объекты на странице, кто-то хочет пояснить как правильно пользоваться навигацией и т.п. Как бы там ни было, типографика становится толще и больше. При реализации вам могут пригодиться посты блога про и .

Вместе с тем многие сайты избавляются от стандартных системных шрифтов, что позволяет значительно разнообразить их внешний вид. С ростом количества сервисов бесплатных оригинальных веб-шрифтов (Google Fonts, Typekit), их популярность еще больше возрастет. Похоже, что в 2017 нас также ждут эксперименты в области типографии сайтов. Главное в этом деле не перестараться — помните, что текст должен быть хорошо читаем. Кстати, если вы работаете с вордпресс то вам может пригодиться статья Как подключить шрифт в WordPress (в том числе и Google Fonts).

6. Градиенты и яркие цвета

Еще одна тенденция веб-дизайна 2017 — использование ярких цветовых палитр для градиентов (и не только). Старт эры плоского дизайна привнес в онлайн интересные фишки, но работать в этом стиле нужно весьма аккуратно, т.к. он может способствовать обезличиванию сайта. Дабы решить проблему некоторые специалисты начали экспериментировать с яркими цветами и градиентными решениями. В текущем году тенденция продолжит развиваться, причем не только в Web`е (наверняка, все уже заметили недавнее обновление Instagram).

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

7. Анимация и микро-взаимодействия

Сама по себе анимация на сайте не нова, однако дизайнеры с каждым годом учатся реализовывать ее все красивее и эффективнее. Незначительные визуальные эффекты для изображений / объектов / контента могут не только оживить ваш проект, но и добавят дополнительный инструмент обратной связи с пользователем. В современных UI/UX интерфейсах разные микро-взаимодействия превращают рутинные процессы в более веселые способы получения информации + позволяют юзеру видеть и понимать как работает тот или иной элемент страницы (меню, навигация, кнопки).

8. Параллакс эффект

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

9. Почти виртуальная реальность

VR — одна из наиболее актуальных нынче тем, не смотря на то, что реальная ситуация в данной сфере менее оптимистична многих прогнозов. Разумеется эта фишка не могла не повлиять на дизайнеров. В некоторых макетах можно встретить разные приемы, которые бы создавали для пользователя «эффект присутствия»: 360 градусные видео и панорамы, видеовставки «как в кино», игры и т.п.

10. Тактильный, естественный дизайн

Данный тренд объединяет сразу два направления — натуральная цветовая гамма и тактильный дизайн. Чрезмерная увлеченность плоскими Flat решениями превратила многие веб-проекты в однообразные безликие Bootstrap макеты. Сейчас некоторые дизайнеры пытаются отходить в сторону более естественных решений, например, они размещают фото и реалистичные 3D модели дабы у пользователя было ощущение возможности прикоснуться и потрогать объекты на сайте. Также они используют природные материалы в качестве текстур, иллюстраций и фонов + натуральные оттенки (зеленые, коричневые, серые, нейтральные металлические).

11. Остальные тенденции веб-дизайна 2017

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

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

Геометрические формы

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

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

В подборке мы нашли не так много оригинальных работ, но данный тренд веб-дизайна в 2017 будет все еще актуален. Во-первых, иллюстрации добавляют вашему проекту персонализированный вид (что в эпоху Flat макетов большой плюс). Во-вторых, метод отлично сочетается с нестандартной типографикой, позволяя создать еще более уникальные макеты. Сюда же можно включить тенденцию использования реальных фото в дизайне/контенте вместо картинок из фотостоков — оригинальность всегда востребована.

Итого

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

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

1) Первостепенное значение мобильной версии

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

Экран смартфона намного меньше экрана планшета, и уж тем более ноутбука и монитора стационарного ПК. На маленьком дисплее невозможно сразу просмотреть всё содержимое страницы. Чтобы адаптировать сайт под экраны мобильных устройств, брендам приходится отказываться от всего лишнего. Остаётся только та информация и те визуальные элементы, которые на 100% необходимы.

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

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

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

Помните: 79% мобильных пользователей незамедлительно покидают сайты, не оптимизированные под экраны телефонов; Google и Яндекс понижают позиции таких ресурсов в поисковой выдаче.

3) Крупные смелые шрифты

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

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

4) Аутентичные фотографии

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

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

5) Анимация: от микровзаимодействий до полноэкранных эффектов

Поскольку браузеры и языки программирования становятся всё более продвинутыми, многие сайты отказываются от статичных изображений в пользу более увлекательных динамичных. Благодаря развитию HTML5, CSS и jQuery все ограничения на использование анимации в веб-дизайне остались в прошлом. Сегодня бренды могут смело использовать микровзаимодействия и полноэкранные интерактивные элементы для налаживания коммуникации с пользователями. Анимация упрощает процесс взаимодействия посетителей с сайтом, позволяет быстрее разобраться, что к чему, подсказывает, на что нажать и куда перейти, чтобы добиться нужного эффекта. При всём этом технически правильно реализованная анимация весит не больше нескольких картинок.

6) Использование видео в качестве фона

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

Согласно результатам исследования Hubspot, в задающих мировые тренды США 50% потребляемого мобильного трафика уже сейчас приходится на видео, и к 2018 году этот показатель должен возрасти до 79% . Единственное, что может заставить российских сайтовладельцев повременить с видеофонами - это низкая пропускная способность сети.

7) Смелые цвета

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

8) Сеточные макеты и карточный дизайн

Шаблонные интерфейсы на основе карточек - ещё одна тенденция сайтостроения, претендующая на развитие в 2017 году. Карточный дизайн используют такие ресурсы, как Pinterest, Facebook, ВКонтакте, Одноклассники, Twitter, Google+. Контейнерный принцип организации контента (картинка + краткое описание ± ссылка) упрощает поиск нужной информации. Посетители быстро просматривают содержимое страницы по диагонали, выхватывая интересующие фрагменты. Поскольку продолжительность концентрации внимания пользователей с каждым годом становится всё короче, актуальность карточного дизайна возрастает. Плюс ко всему, он изначально адаптивен, а значит, и мобильно дружествен.

9) Инновационный скроллинг и параллакс

Строго следуете правилу размещения важной информации на первом экране (до линии прокрутки)? Расслабьтесь! С наступлением мобильной эры данное правило устарело. Теперь скроллинг можно применять как заблагорассудится. Инновационный подход демонстрирует Apple. При скроллинге вниз прокручивается лишь правая часть экрана, в то время как левая (с важными описаниями) остаётся статичной.

Параллакс от простого скроллинга отличается наличием 3D-эффекта. За счёт того, что элементы на переднем плане перемещаются быстрее, чем на заднем фоне, создаётся ощущение глубины и динамизма.

10) Асимметричные и хаотичные макеты

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

Заключение

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

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

Однако, есть основания следовать тенденциям. Если зайти на такие сайты, как Awwwards, FWA или CSS Design Awards, они могут вдохновить вас, и как следствие, помочь выйти за пределы ваших дизайнерских привычек. Вы можете узнать о новых визуальных мирах, которые вы потом можете (сознательно или нет) интегрировать с графическим языком. Наблюдение за работой других помогает улучшать ваши собственные навыки, а также оставаться в курсе новейших технологий.

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

Большую роль в этом процессе играет эволюция Canvas и WebGL. Современные проекты часто немного запутанные, менее интуитивно понятные, чем минималистичные, но они, конечно, производят неизгладимое впечатление на пользователей.

Что еще нас ждет в веб-дизайне 2017 года? Вот мои предсказания.

Открытая композиция

До недавнего времени в мире дизайна доминировали «закрытые», симметричные и статические композиции. С 2016 года появилось множество сайтов, которые отошли от этого стиля. Открытые композиции со свободно расположенными элементами, бегущими куда-то за пределы экрана, набирают популярность — примеры таких работ можно увидеть у romainpsd.com , durimel.io или booneselections.com . Распределение элементов на этих сайтах создает впечатление, что они продолжают жить и за монитором.

Ассиметрия

2016 также нарушил правило симметрии, которая преобладала в индустрии довольно долгое время. Многие дизайнеры создали ассиметричные макеты, которые далеки от идеального баланса с левой и правой стороны. В качестве примеров я хотел бы показать вам отличный сайт culture.pl , хаотичный dada-data.net , и ранее упомянутый durimel.io .

Разнообразие

Дизайнеры создали более динамичные композиции, в которых больше пересекающихся диагональных линий (poigneedemainvirile.com , vanderlanth.io), или более сложных форм (residente.com/en , helloheco.com , predictiveworld.watchdogs.com).

Иллюзия хаоса

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

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

Некоторые геометрические фигуры «подвешенные в воздухе» обладают только декоративной целью (melanie-f). Это также характерно для наложения элементов друг на друга. Тексты частично перекрываются фотографиями, как, например, на e03.epicurrence.com и melville-design.com , или изображения накладываются друг на друга, что можно увидеть на olivierbernstein.com.

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

Богатый фон и паттерны

Все чаще и чаще появляются фоны и паттерны на которых есть маленькие черточки , полоски или точки .

Особенно распространен паттерн с сеткой, который является «рамкой» для других элементов макета. Эти элементы параллаксом перемещаются по сетке и часто расположены хаотично.

Паттерн с сеткой

Одним из первых сайтов, на котором появилась такая сетка был werkstatt.fr , который, однако, не использовал характерных анимаций.

Немного другой способ использования паттерна с сеткой показаны у klimov.agency , brand.uber.com и maisonullens.com . В этих случаях сетка обладает очень специфической функцией — сделать движения элементов логическими. Это позволяет рационализировать нестандартные решения и дает ответы на такие вопросы, как «почему поля иллюстрации не гармонируют с полями кнопки»? Это создает ритм, и в то же время оправдывает свои нарушения.

Декоративные детали

Что действительно изменилось за последнее время, так это подход к деталям. Происходит постепенный отход от минимализма. Существует много других элементов, у которых только декоративные функции. «Летающие » геометрические фигуры и соответствующие фрагменты. Линейные, хрупкие иконки немного отрываются от контента, который они иллюстрируют. Подчеркивания и линии сдвигаются . Появляется зернистость и глитчи, как на bigyouth.fr или kikk.be.

Кнопки реже создаются в виде четких прямоугольников с текстом внутри. Они часто выглядят как мягкие, смещенные линии, как, например, на dahllaw.dk или yasuhiroyokota.com . Еще вариант кнопки — это эффектный ховер на Canvas, как на hpsoundincolor.com и cavalierchallenge.com .

Продуманные концепции — плавные анимации между секциями

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

Обилие анимаций приводит к исключению резкого разделения страницы на секции. Сайт плавно меняется во время скролла. Контент исчезает и появляется с помощью мягких анимаций. Последовательности этих переходов становятся все более продуманными. Это не просто случайные эффекты между блоками контента, а продуманная концепция, в которой каждый элемент появляется в нужное время (Nationalgeographic.com , stylenovels.com). Анимации с самого начала являются частью веб-сайта, а не просто случайно добавленной деталью.

Интересные анимации украшают простые макеты. Они добавляют новую ценность и делают страницу уникальной. Они становятся сутью всего проекта, как, например, на Ifly50 или tennentbrown.co.nz . Анимации часто создают красивую, гладкую структуру на веб-сайтах: Cuberto.com , lookbook.wedze.com , skarv-fashion.com или corentinfardeau.fr .

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

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

За последние 2 года ситуация начала меняться. Дизайнеры смело используют различные виды шрифтов. Теперь они больше готовы работать с контрастами — сочетать шрифты с засечками и без них.

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

Большие технологические возможности и более смелые решения влияют на рост разнообразия веб-типографики.

Геометрические шрифты

Геометрические шрифты без засечек приобрели большую популярность, например, классическая Futura, ITC Avant Garde, Proxima Nova, или те, что доступны в библиотеке Google — Poppins или Montserrat. Эти шрифты гораздо более выразительные, чем «невидимый» нео-гротеск. Более «агрессивный» и выразительный характер веб-сайта можно достичь если использовать большую толщину, как на достаточно старом сайте hugeinc.com , а вот более новые примеры: sequence.co.uk , startuplab.no или www.protest.eu .

Шрифты с засечками

Очень часто шрифты с засечками используют не только для основного текста, но и для больших заголовков. Особенно часто используют декоративные, такие как на duhaihang.com или jennyjohannesson.com . Еще популярными шрифтами можно назвать те, которые относятся к Bodoni или Didot.

Моноширинные шрифты («печатная машинка»)

Использовать пропорциональные шрифты, которые обычно ассоциируются с печатными машинками — новшество. Сейчас их можно увидеть на таких сайтах, как admirhadzic.com , cuberto.com или designembraced.com .

Контрастное сочетание шрифтов

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

Огромная типографика как часть основного изображения

Очень крутой и распространенной вещью было использование текстов очень больших размеров на основных изображениях. Это создавало очень сильный контраст между заголовками и остальной частью контента. Примеры можно увидеть на oursroux.com , femmefatale.paris или monsieurcaillou.com .

Иногда, в качестве украшения, в начале используется леттеринг, как, например, у corentinfardeau.fr или nurturedigital.com .

Ярким примером вышеупомянутого можно назвать сайт jennyjohannesson.com , где использованы декоративные качества шрифта с засечками Goku .

Дополнительные эффекты применимые к типографике

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

Большие размеры букв в текстах

Когда я только начал свой путь в веб-дизайне, у меня была старая привычка использовать 10 размер шрифта, которую я приобрел когда работал в печати. Однако, я быстро понял, что в вебе оптимальный читаемый размер — это 14.

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

Переходи на темную сторону

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

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

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

Подведем итог

2017 год обещает много интересных перспектив, однако есть и некоторые опасности на горизонте.

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

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

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

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

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

Минимализм станет более сложным и детальным. В веб-сайтах этого года все больше будет использоваться Canvas. Мы увидим много «хаоса», многообразия форм и экспрессии в будущих проектах. Это хорошие новости для дизайнеров, которые сыты по горло минималистичными стилями Flat, Material или Metro дизайна.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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