Последние тренды веб дизайна. Большие размеры букв в текстах. Вопреки парадигмам навигации – альтернативы

Под Новый год кто-то гадает на кофейной гуще и кидает тапочки через плечо. А дизайнеры пытаются прощупать будущее и выцепить тренды, которые станут основной темой 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. И не бомбардируйте сопротивляющихся клиентов в скайпе ссылками на эту статью. Используйте тренды с умом - или не используйте вообще. Все равно через три года они полностью обновятся 🙂

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

В статье описаны главные месседжи лекции, а с полной версией вы можете ознакомиться по ссылке .

Интерактивный скролл

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

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

Пример интерактивного скролла на сайте Volcano

Новая тема для баттлов UI/UX дизайнеров - насколько это удобно? Но если все грамотно продумать, может хорошо получится.

SVG маски

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

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

Canvas

Это уже сложно. Обязательно нужен человек с пониманием математических аспектов процесса. Некоторые вещи можно взять в библиотеках. Но В SVG нет синхронизации с курсором. А здесь есть.

Сайт Climachill от Adidas, к примеру.

Морфинг с буквой – это Canvas. Перелив градиентов - это Canvas. И это популярно уже несколько лет, но устареет не скоро. Потому что мало весит, и это 2D графика, которую сложно повторить. Подойдет тем, кто хочет много «вау» у себя на сайте.

3D+WEBGL

Направление будет развиваться. Когда вы делаете даже маленький, но качественный видеоролик на 1 минуту - это минимум 10 человек в команде. Когда в 3D - это 1 дизайнер. А webgl – это +1 разработчик. 3D может быть классическим, как на сайте Globekit. Выглядит фантастически, уникально. Хотя состоит из 6 слайдов всего.

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

VR

В марте 2017 появился первый сайт в VR. Их становится больше. Недавно сделали первую VR трассу на футбольном стадионе. Человек надевает маску, и ему кажется, что он на гоночной трассе.

Приспособление для виртуальных гонок от Audi.

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

AR

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

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

A frame

Это готовая библиотека, где можно найти все штуки для AR и VR. Можно посмотреть, как они работают, понаблюдать за ними в действии.

Поэтому я советую всем веб-дизайнерам идти доучиваться на 3D. Это сделает ваш сайт намного живее.

Google

Следите за ними. Они не стоят на месте. Есть такая штука, как Google experiments . Освободите пару часов времени, чтобы изучить всю красоту. Google проводит много экспериментов, к которым подключает разработчиков, агентства. Из последнего – использование big data.

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

WebVj

Очень новая заморочка. Построение страницы происходит на основе данных. Есть один японец, Масатацу Накамура , который особо серьезно этим занимается. Его графика сделана полностью программистом, а не дизайнерами. Он многое делает для Google Experiments.

Пример графики Масатацу Накамура, сделанной при помощи WebVJ

Трендосики

Самый задаваемый вопрос - “Какой цвет/шрифт/паттерн будет трендовым в следующем году?”. Я это называю “трендосиками”.

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

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

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

Вышла новая статья → ← Читай и вдохновляйся!

Тренды дизайна находятся под влиянием СМИ, технологий, индустрии моды и, в последнее время юзабилити. Тренд проявляется медленно, постепенно, проникая во все направления дизайна, а затем исчезает точно таким же образом. В основном дизайн тренды существуют не более чем один или два года. Дизайн в 2017 году продолжит тренды, которые появились в 2016 с добавлением некоторых новых изменений, это чувство хорошо известно и знакомо, и вы, возможно, заметили его в последние пару лет. Основное влияние остается за Google’s Material Design, с небольшими изменениями.

Какие тренды в веб-дизайне нас ждут в 2017 году

01. Полу плоский дизайн (Semi Flat Design)

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

Плавное затенение добавляет глубину и сложность, не разрушая ощущения плоского дизайна. Это новая функция добавлена во flat тренд и продолжит развиваться в 2017 году.

Проект: Resourсe | UI/UX Tool for Web Services
Авторы: Ruslan Latypov; LS Graphics; Anton Mishin; Valery Gurkov

Проект: Listener’s Playlist

02. Движущиеся фотографии (Cinemagraphs)

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

03. Больше 3D (More 3D)

3D определенно движется в нашу сторону, и мы будем видеть это влияние во всех областях дизайна. С технологиями VR/AR быстро наращивается темп, эта область развивается довольно быстро.

Проект: LUV.IT

Проект: Open Annual Awards

Проект: Air Max ’17

Проект: NIKE F.C. | 3D Golden balls in the real world

Проект: Better You Brand

04. Анимации (Animations)

Анимация все больше и больше присутствует в web-дизайне, формат может быть любым — WebGL CSS, GIFs, SVG или видео. Анимация была одной из самых важных трендов веб-дизайна прошлого года, не стесняйтесь ее использовать.

Проект: Nickelodeon Kids Pick The President

Проект: AR Virtual Fitness Coach App

Проект: ZH OURO- Rio 2016

05. Одностраничные сайты/лендинги (Landing pages)

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

Если вам понадобится лендинг, то можете заказать его у меня →

06. Геометрические фигуры, узоры, линии и круги (Geometric Shapes, Patterns, Lines and Circles)

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

Проект:

Проект: DRAP.agency Branding

Проект: Pfizer — Active and 50+ for The New York Times

07. Смелые, яркие цвета (Courageous Colors)

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

Проект: Edris — Logo Designed by MiLo

Проект: Rendered - Responsive Demo Website for Adobe

Проект: b2mach

08. Инновационный скроллинг и параллакс (Innovative Scrolling and Parallax)

Это отличная визуальная идея, которая добавит уникальности любому сайту. От параллакса из нескольких слоев к видео параллаксу, все возможно с плагином D.ex Multilayer Parallax (многослойный параллакс). Этот продукт разработан полностью студией Milothemes под руководством Loredana Papp и Mihai Baldean. Он доступен для покупки на Envato Market / codecanyon.net

Это WordPress плагин, который позволяет делать прекрасные Parallax блоки с более чем одним слоем. Будьте креативными и объединяйте слои в любом стиле, котором захотите. Мы сделали 12 различных примеров в гайде плагина, чтобы упростить ваше первое знакомство с прекрасным миром параллакса. Поиграйте со слоями!

09. Цветовые переходы/градиенты (Color Transitions)

Градиенты — один из главных трендов прямо сейчас. Транд начал набирать популярность с 2016 и продолжает быстро расти, после того как большие бренды, например Инстаграм решили изменить свое лого и картинки из одного цвета в многоцветный переход (градиент). От логотипов до кнопок или наложений на изображения (picture overlays), этот тренд по всюду.

10. Просмотры с мобильных устройств, адаптивный дизайн (Mobile Browsing (Responsive Design))

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

Проект: Responsive Website Animation

11. Графика и иллюстрации сделанные на заказ (Custom Graphics and Illustrations)

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

12. Креативно используйте нейтральное пространство и сетку (Creative Use of Neutral Space and Grid)

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

13. Рассказывайте истории (Storytelling)

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

Подробнее видео про сторителлинг от Бизнес молодости:

14. Постепенная загрузка контента (Lazy Loading)

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

15. Разделенный контент (Split Content)

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

16. Формы на всю ширину (Full-Screen Forms)

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

17. Видео по всюду (Videos Everywhere)

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

Проект: Hillsong

18. СЕО — важно! (SEO is Important)

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

19. Скрытая навигация (Hidden Navigation)

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

20. Маленькие детали дизайна (Tiny Design Details)

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

Проект: Barometa — Next-generation Job Platform

21. Тренды в дизайне логотипов (Logo Design Trends)

21.1. Минимализм (Minimalist)

Все крупные бренды переходят к более простому, минимальному дизайну, и эта тенденция останется.

21.2. Нарисованные от руки (Hand drawn)

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

21.3. Negative space

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

21.4. Cropping

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

21.5. Геометрия (Geometric)

Этот тренд из разряда Old school, но это один из тех стилей, который точно никогда не умрет.

21.6. Художественные линии (Line art)

Этот тренд популярен среди бизнеса нового поколения

Авторы: Sam Healy ; Andrea Schlaffer ; Jacek Janiczak

21.7. Паттерны, узоры (Pattern)

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

Авторы: Nick Edlin; Stanislav Aleynikov; Lucas Gil-Turner

21.8. Анимированные логотипы (Animated logos)

Motion дизайн сегодня востребованный тренд, и мы можем его наблюдать во всех областях дизайна.

Авторы: Javier Miranda Nieto; The Woork Co

21.9. Винтаж (Vintage)

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

21.10. Цветовые переходы (Color Transitions)

Градиенты везде в этом году — и логотипы не исключение.

21.11. Иллюстрации в логотипах (Illustrations in logos)

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

Авторы: Bodea Daniel; Jacek Janiczak

21.12. Фотография в логотипах (Photography in logos)

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

22. Тренды в типографике (Typography Trends)

22.1. Большая, яркая и красивая типографика (Big, bold & beautiful typography)

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

Авторы: Alexander Laguta

Авторы: Quim Marin

Проект: Baugasm Series — Pack 4

22.2. Градиенты/цветовые переходы в типографике (Color transitions in typography)

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

22.3. Визуальная иерархия (Visual hierarchy)

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

22.4. Tiny Typography (Мелкая типографика)

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

Авторы: Slava Oleinik; Bahaa Samir; Witty Digital

Проект: Baugasm Series — Pack 4

22.5. Анимация в типографике (Animated Typography)

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

Проект: Gotham Pro Animated Typeface Free

22.6. Типографика с фотографией (Typography meets photography)

Сочетание между текстом и фотографией может дать отличный результат. Посмотрите на эти прекрасные примеры.

22.7. Геометрические формы и типографика (Geometric shapes and typography)

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

22.8. Шрифтовые сочетания (Font pairing)

Используйте два или более шрифта вместе. Это еще в тренде в 2017.

———————————

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вышла новая статья → ← Читай и вдохновляйся!

Какие тренды в веб-дизайне нас ждут в 2017 году

01. Полу плоский дизайн (Semi Flat Design)

Проект: Resourсe | UI/UX Tool for Web Services
Авторы: Ruslan Latypov; LS Graphics; Anton Mishin; Valery Gurkov

Проект: Listener’s Playlist

02. Движущиеся фотографии (Cinemagraphs)

03. Больше 3D (More 3D)

Проект: Open Annual Awards

Проект: Air Max ’17

Проект: NIKE F.C. | 3D Golden balls in the real world

Проект: Better You Brand

04. Анимации (Animations)

Проект: Nickelodeon Kids Pick The President

Проект: AR Virtual Fitness Coach App

Проект: ZH OURO- Rio 2016

05. Одностраничные сайты/лендинги (Landing pages)

Если вам понадобится лендинг, то можете заказать его у меня →

06. Геометрические фигуры, узоры, линии и круги (Geometric Shapes, Patterns, Lines and Circles)

Проект:

Проект: DRAP.agency Branding

Проект: Pfizer — Active and 50+ for The New York Times

07. Смелые, яркие цвета (Courageous Colors)

Проект: Edris — Logo Designed by MiLo

Проект: Rendered - Responsive Demo Website for Adobe

Проект: b2mach

08. Инновационный скроллинг и параллакс (Innovative Scrolling and Parallax)

09. Цветовые переходы/градиенты (Color Transitions)

10. Просмотры с мобильных устройств, адаптивный дизайн (Mobile Browsing (Responsive Design))

Проект: Responsive Website Animation

11. Графика и иллюстрации сделанные на заказ (Custom Graphics and Illustrations)

12. Креативно используйте нейтральное пространство и сетку (Creative Use of Neutral Space and Grid)

13. Рассказывайте истории (Storytelling)

Подробнее видео про сторителлинг от Бизнес молодости:

14. Постепенная загрузка контента (Lazy Loading)

15. Разделенный контент (Split Content)

16. Формы на всю ширину (Full-Screen Forms)

17. Видео по всюду (Videos Everywhere)

Проект: Hillsong

18. СЕО — важно! (SEO is Important)

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

19. Скрытая навигация (Hidden Navigation)

20. Маленькие детали дизайна (Tiny Design Details)

Проект: Barometa — Next-generation Job Platform

21. Тренды в дизайне логотипов (Logo Design Trends)

21.1. Минимализм (Minimalist)

Все крупные бренды переходят к более простому, минимальному дизайну, и эта тенденция останется.

21.2. Нарисованные от руки (Hand drawn)

21.3. Negative space

21.4. Cropping

21.5. Геометрия (Geometric)

Этот тренд из разряда Old school, но это один из тех стилей, который точно никогда не умрет.

21.6. Художественные линии (Line art)

Этот тренд популярен среди бизнеса нового поколения

Авторы: Sam Healy ; Andrea Schlaffer ; Jacek Janiczak

21.7. Паттерны, узоры (Pattern)

Авторы: Nick Edlin; Stanislav Aleynikov; Lucas Gil-Turner

21.8. Анимированные логотипы (Animated logos)

Motion дизайн сегодня востребованный тренд, и мы можем его наблюдать во всех областях дизайна.

Авторы: Javier Miranda Nieto; The Woork Co

21.9. Винтаж (Vintage)

Авторы: Роман Додонов; Mingo Ideas Up; Will Try Further

21.10. Цветовые переходы (Color Transitions)

Градиенты везде в этом году — и логотипы не исключение.

21.11. Иллюстрации в логотипах (Illustrations in logos)

Авторы: Bodea Daniel; Jacek Janiczak

21.12. Фотография в логотипах (Photography in logos)

22. Тренды в типографике (Typography Trends)

22.1. Большая, яркая и красивая типографика (Big, bold & beautiful typography)

Авторы: Alexander Laguta

Авторы: Quim Marin

Проект: Baugasm Series — Pack 4

22.2. Градиенты/цветовые переходы в типографике (Color transitions in typography)

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

22.3. Визуальная иерархия (Visual hierarchy)

22.4. Tiny Typography (Мелкая типографика)

Авторы: Slava Oleinik; Bahaa Samir; Witty Digital

Проект: Baugasm Series — Pack 4

22.5. Анимация в типографике (Animated Typography)

Проект: Gotham Pro Animated Typeface Free

22.6. Типографика с фотографией (Typography meets photography)

Сочетание между текстом и фотографией может дать отличный результат. Посмотрите на эти прекрасные примеры.

22.7. Геометрические формы и типографика (Geometric shapes and typography)

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

22.8. Шрифтовые сочетания (Font pairing)

Используйте два или более шрифта вместе. Это еще в тренде в 2017.

———————————