Модный веб дизайн: от тёмной цветовой схемы к моушн-дизайну — CMS Magazine — DesignLessons – все о дизайне

Содержание

от тёмной цветовой схемы к моушн-дизайну — CMS Magazine

Какие тренды в веб-дизайне будут на пике популярности в следующем году? Мы в дизайн-студии Магвай неустанно следим за всеми новшествами и с радостью подготовили перевод статьи от экспертов Envato (Envato — австралийская it-компания, которая управляет 8-ю интернет-сервисами, ориентированными на продажу графического контента, такого как: шаблоны для веб-дизайна, графические элементы, 3D-модели и т.д).

Профессионалы из Envato рассказывают о главных тенденциях, на которые следует обратить внимание в 2021 году.

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

Тёмная цветовая схема
Коллаж
Антидизайн

Минимализм
Органический дизайн
Иллюстрации
Функциональность, инклюзивность и доступность
Моушн-дизайн и интерактивность
3D и геометрический дизайн

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

И всё же — от тёмной цветовой схемы до интерактивности: какие популярные тренды в веб-дизайне покорят интернет в следующем году? Мы спросили экспертов из Envato, что отличало классный сайт в 2020, а также их мнение о последних и наиболее удачных тенденциях в веб-дизайне, на которые следует обратить внимание в 2021 году.

Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

Тёмная цветовая схема

Тёмная цветовая схема — главная страница Apple

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

Что такое тёмная цветовая схема?

Тёмная цветовая схема — главная страница Clock Strikes Twelve

Крупные бренды, такие как Apple, Hublot, и отдельные дизайнеры, например, Clock Strikes Twelve, для своих продуктов и портфолио используют тёмный фон, так как это отличный способ сделать сайт современным и элегантным. Помимо того, что дизайнеры могут в этом случае поиграть с разными элементами, такими как пастель или неон (два главных тренда 2020 года), исследования также показали, что тёмный режим меньше расходует заряд устройства, кроме того, он лучше подходит для восприятия, поскольку уменьшает негативное воздействие синего цвета на глаза.

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

Тёмный режим не только лощёный, элегантный и приятный для глаз, он также увеличивает контраст и делает элементы дизайна более заметными. Вы даже можете добавить на свой сайт переключатель тёмного режима, как показано в этих примерах от Johny Vino, Koos Looijesteijn и Adrian Verde Studio, чтобы посетители могли настраивать сайт под себя.

Переключатель режима — главная страница Johny Vino

«По моему мнению, тёмный фоновый режим — определённо тенденция, которая оказала наибольшее влияние на веб-дизайн в 2020 году, — говорит UX-дизайнер из Envato, Талия Джаннополас. — Благодаря тому, что тёмный режим стал популярным, я уже видела несколько сайтов, где был добавлен переключатель (от светлого к тёмному). Это великолепно и в тоже время так просто, когда пользователь может выбрать настройки, основываясь на своих предпочтениях».

Всё больше и больше неоморфных вариантов с противоречивым UX-дизайном, основанным на скевоморфизме и flat дизайне (такие примеры часто встречаются в интерфейсе iOS или Android), включают опцию тёмного фона, несмотря на то что изначально создавались с использованием исключительно белых и светлых цветовых схем.

Коллаж и смешанные техники

Коллаж — главная страница City Circus

Коллаж — одна из самых популярных тенденций этого года в графическом дизайне и в социальных сетях, этот тренд быстро завоевал популярность и в мире веб-дизайна. Смешанная техника снова в центре внимания благодаря художникам из мира digital и инфлюенсерам, его также приняли многие бренды и веб-дизайнеры, включая Chobani, City Circus и Urban Outfitters.

Что же такое коллаж?

Коллаж — страница бронирования City Circus

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

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

«Я думаю, что концепция смешения разных средств будет только набирать обороты в 2021, — говорит Талия. — Многие уже сейчас используют приложения для рисования на iPad и цифровые кисти, имитирующие традиционные краски (например, акварель, масло, гуашь), границы цифрового искусства меняются. Кроме того, удобно, что такие произведения уже на цифровом устройстве, их не надо сканировать или фотографировать, а значит, ими проще делиться в интернете».

Коллаж — главная страница Urban Outfitters

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

Антидизайн

Антидизайн — главная страница Roze Bunker

Предупреждение: мы знаем, что этот тренд не для каждого!

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

Антидизайн — главная страница Play Type

Что такое антидизайн?

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

Антидизайн — главная страница XXIX

Многие профессионалы сейчас увлечены странным миром антидизайна, один из примеров — хаотичный, но причудливый сайт голландского бренда Roze Bunker и дизайн-студий Play Type и XXIX. Даже австралийский музыкант Flume решился на такой яркий, смелый и брутальный подход для своего сайта. Несмотря на то, что подобный тренд всегда выделяется среди множества конкурентов (надеемся, что в положительном смысле), эффективный веб-дизайн всё-таки про баланс. Если вы действительно хотите попробовать антидизайн, важно позаботиться, чтобы интерфейс вашего сайта оставался простым, функциональным и удобным для пользователя.

Антидизайн — главная страница Dynamic MTL

«Я думала, что популярность антидизайна постепенно упадёт, но сейчас считаю, что он эволюционирует вместе с трендом на использование смешанных техник, — говорит Талия. — Я встречала много разных сайтов, где изображения накладываются друг на друга, смешиваются шрифты с засечками и шрифт san serif, а также нетрадиционным способом используется анимация. Тем не менее, благодаря отличному UX они прекрасно работают».

Минимализм

Минимализм — Главная страница ETQ

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

Минимализм — главная страница Huge Inc.

Среди брендов есть прекрасные примеры, когда в дизайне используется минимализм. Например, обувь премиум-сегмента ETQ Amsterdam, а также агентство развития бизнеса Huge Inc из Бруклина. При этом часто минимализм ассоциируют с монохромом и белым фоном, однако минимализм — это не просто чёрное или белое. Красочный, яркий минимализм набирает обороты как в графическом, так и в веб-дизайне, в этом случае для создания простого, но потрясающего сайта используются блочные цвета и яркий фон, простые шрифты без засечек и минималистичные шрифты, а также небольшой набор элементов.

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

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

Органический дизайн

Органический дизайн — главная страница Ora

Органический дизайн — это один из самых заметных трендов 2020 года, он ориентирован на подражание природе и миру вокруг нас. Хотя эта тенденция часто встречается в дизайне продуктов, интерьере и графическом дизайне, сейчас она начинает набирать обороты и в мире веб-дизайна.

На органический дизайн влияет повышенное внимание к экологии и защите окружающей среды, отсюда тёплые землистые цвета, естественные формы и необработанные органические текстуры — как это видно на сайтах от Ora Floral Agency, A Better Source и Abbotsford Convent в Мельбурне.

Органический дизайн — страница сайта Abbotsford Convent

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

Органический дизайн — веб-страница A Better Source

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

Иллюстрация

Иллюстрация — Главная страница AHM

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

Как и органический дизайн, иллюстрации отлично подходят для того, чтобы добавить оригинальности сайту, они создают ощущение уюта и располагают пользователя. Так как в 2020 фокус был на разнообразии, то многие иллюстраторы теперь изображают необычных людей, этот стиль ещё называют odd bodies (странные тела).

Иллюстрация — страница результатов поиска Huge Inc

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

3D иллюстрация — дизайн сайта, отрисованный Амритом Пэлом

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

Функциональность, а также инклюзивный и доступный дизайн

Функциональность — главная страница Blue Receipt

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

Доступность — страница сайта Blue Receipt

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

Доступность — страница сайта Cat Person

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

Вот несколько способов сделать ваш сайт более доступным:

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

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

Моушн-дизайн и интерактивность

Моушн-дизайн — главная страница Gridspace

Видео-контент сегодня привлекает интернет-пользователей больше, чем другие формы, неудивительно, что это стало одним из популярных трендов в веб-дизайне. Моушн-дизайн и анимацию используют все: от бутиковых сайтов, таких как Alter Mind и Gridspace, до крупных сервисов по поиску работы, таких как SEEK. Это простой способ сделать обычную веб-страницу более интересной.

Аналогичным образом многие бренды и компании, такие как YouTube Rewind, начали добавлять на сайты больше интерактивных элементов (викторины, игры, квизы и опросы). Отличный пример такого подхода — бренд Estee Lauder. На сайте компании есть интерактивная аркадная игра под названием «THE ANRCADE», это футуристический квест, где пользователи зарабатывают «очки молодости», а бренд таким образом продвигает свой крем Advanced Night Repair.

Интерактивность — игра ANRCADE бренда Estee Lauder

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

Интерактивность — страница поиска YouTube Rewind

«По мере того, как технологии развиваются, становится всё проще применять моушн-дизайн, и это помогает создавать потрясающие впечатления (при правильном использовании), — говорит Шон. — Я вижу, что это хорошо получается, когда есть переход между контентом и взаимодействием с элементами».

3D и геометрический дизайн

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

Геометрический дизайн — главная страница The Imagineers

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

Трехмерные плавающие объекты — дизайн страницы The Artery

Использование простых линий сетки, границ и других структурных элементов также стало трендом в области веб-дизайна. Например, эту тенденцию можно оценить на сайтах Rail Road Ladies, Monograph Comms и The Imagineers.

Геометрический дизайн у The Railroad Ladies

«Я заметил, что в веб-дизайне снова начинают использовать геометрические элементы и сетку. И мне, как человеку, который любит структуру и порядок, это по-настоящему нравится», — говорит Шон.

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

По материалам статьи.

Тенденции веб-дизайна 2020: улетный визуал & инновации

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

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

Совмещение фотографий с иллюстрациями
Паттерны: от подложки до интерактива
Черно-белые палитры
Шрифты-гиганты, негабаритные надписи и минимализм
Современный ретро-стиль
Лайн Арт: креатив с визуальной чистотой
АРТ и Дизайн: иллюстративное единение
Трехмерная графика / 3D-моушн эффекты
Инновации, которые мы увидим в 2020-х

Тенденции в веб-дизайне 2020 года

1. Совмещение фотографий с иллюстрациями

В тренде новая визуальная эстетика – сочетать фото с 2D-иллюстрациями от руки. К фотоснимку добавляются элементы иллюстрации, либо они дополняют друг друга. «Микс двух реальностей» открывает дорогу творческим и маркетинговым идеям.

тренд в дизайне

2. Паттерны: от подложки до интерактива

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

тренд в дизайне

3. Черно-белые креативы

Черно-белые дизайны – нестареющая классика. Они изящны и элегантны, эффективны для eCommerce / творческих ресурсов. Ожидаем свежих черно-белых решений с отрицательным пространством, крупными шрифтами и элементами line-art.

тренд в дизайне

4. Шрифты-гиганты, негабаритные надписи и минимализм

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

Цепляет взгляд
Создает интересную визуальную деформацию
Усиливает дизайн концептуальным посылом «большей решительности»

тренд в дизайне

тренд в дизайне

тренд в дизайне

5. Современный ретро-стиль

С приходом новых веб-технологиий и трендов творческие дизайнеры начинают ностальгировать по прошлому. В 2020-м будут популярны штрихи «состаренного» дизайна: изношенность, черно-белые и зернистые / потертые фото, приглушенные ретро-оттенки и шумные / пыльные текстуры. Высокотехнологичное ретро – это особый шарм.

тренд в дизайне

6. Лайн Арт: креатив с визуальной чистотой

Абсолютный хит во всех сферах графического дизайна 2020-го года. Лаконичность контурной графики и креатив LineArt-иллюстраций сделают дизайны чище, профессиональней на вид.

тренд в дизайне

7. АРТ и Дизайн: иллюстративное единение

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

тренд в дизайне

# Интерактивность сайта + моушн-графика

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

тренд в дизайне

8. Трехмерная графика / 3D-моушн эффекты

3D скоро станет настоящим мейнстримом в графическом и веб-дизайне. Иными технологиями вам не удастся получить такой глубины и реалистичности. В 2020 году ожидаем новых 3D дизайнов – статичных, анимированных и интерактивных.

# Интерактивные 3D эффекты

Моушн стал увлекательнее, чем когда либо. Задача интерактива – цеплять и удерживать целевую аудиторию. 3D-моделлеры просто расширяют методику «втягивания» посетителя в диалог.

тренд в дизайне

# 3D-анимации

Моушн-дизайнерам известно, что анимированная 3D-графика производит визуальный восторг.

тренд в дизайне

# Статичная 3D графика

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

тренд в дизайне

# 3D-рендеринг и высокая реалистичность

Завораживающая «фирменная» реалистичность в продающем дизайне – это интересно и ярко. Актуально для eCommerce, промо-сайтов, домашней или посадочной страницы с товарами. Качество создается проработкой объекта: блики на поверхности, рассеивание… Софт-2020 существенно упростит и удешевит реализацию Wow-эффекта. Смотрите пример 3D-рендера продукции на фоне цепляющих мотиваторов в динамичном дизайне товарного лендинга.

тренд в дизайне

9. Инновации в веб-дизайне 2020-х

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

# Чат-боты

В 2020 году больше веб-ресурсов предложат услуги говорящего и самообучающегося чат-бота. В режиме 24/7 он ответит на часто задаваемые вопросы, послужит опорой на протяжении всего посещения сайта. Продвинутые ИИ-технологии сделают ботов адекватными как никогда.

# Диалоговые интерфейсы & Автоматизированные агенты

В 2020-х диалоги с сайтом будут интернет-привычкой, а пионерами внедрения разговаривающих ассистентов станут веб-сервисы. Голосовой ввод – глобальный тренд, Популярностью обязан совершенствующимся технологиям распознавания речи и удобству голосового интерфейса (по сути является отсутствием UI). Ожидаем умных ассистентов на основе речевых технологий. Общаться с сайтом командами – совершенно новый пользовательский опыт. Бизнесу пора присмотреться к модной тенденции, а пользователям – приобретать навыки web-коммуникации в реальном времени.

Подводя итог

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

Успешных дизайнов и взаимопонимания с Web’ом 2020-х!

Современный веб-дизайн: популярные стили и элементы

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

Coastal Creative называет 2018-й годом контрастов и сочетаний разных стилей & направлений. Оформляя веб-сайт крупными изображениями, современный дизайнер волен добавить ретро-паттерны, цвета & типографику. Может использовать 2D окружение в трехмерном дизайне или статические иллюстрации с ненавязчивыми эффектами.

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

Текст, перекрывающий графический контент

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

Дизайны с наслаиванием и пересечением контента в общем пространстве:

elegantseagulls.com – сайт агентства с чистым дизайном и нестандартными подходами

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

thibaultpailloux.com – разработчик на собственном сайте разнообразил тренд, украсив переходы градиентами

Асимметричные макеты и «ломаная» сетка

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

Дизайны с асимметричной разметкой и наслаиванием элементов:

welikesmall.com – ультрасовременный дизайн digital-агентства использует ломаную сетку с асимметричными пересечениями элементов. Крутые эффекты и микро-анимации интерфейса

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

originalterritory.com – приятный eCommerce сайт «Территория собак» с асимметричной разметкой. Дизайн мягкий, компактный и современный

imsproductions.com – красивое применение тренда на сайте американской продакшн компании

heeds.eu – яркий и нестандартный дизайн. Двуцветная коррекция изображений, градиенты, ломанная разметка

Duotone и оверлей поверх изображений

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

Современные и эстетичные веб-дизайны применяющие дуотон:

muller.it – итальянский продуктовый бренд красиво оформил сайт дуотон-видеобекграундом с добавлением мягкого градиента

cliquestudios.com – на главной странице сайта дизайн-агентства кейсы разграничены цветовыми фильтрами (overlay)

socialplayground.com.au – дуотон фото усиливают социальные доказательства, украшают главную и страницу «О нас»

Современное ретро в иллюстрациях и элементах

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

Современные сайты с элементами ретро-стиля:

sugarfirepie.com – винтажная иллюстрация в главном экране создает первое впечатление о кондитерском бренде, улучшает UX-дизайн сайта

Кастомные иллюстрации

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

Эстетичные сайты с уникальными иллюстрациями:

getonboardbrt.com – красивое применение акварельной иллюстрации в плоском дизайне

bostonbrt.org – инновационную систему транспорта, бостонский сайт иллюстрирует акварелью

mamyfactory.com – рисованным изображением процесса вязки французский e-Commerce сайт привлекает целевого посетителя

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

Брутальный веб-дизайн

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

Стиль брутализм применяемый в веб-дизайнах:

gift.gucci.com – интерес к брутализму проявляют не только в веб дизайнерской среде: звездный бренд применяет не ради забавы

balenciaga.com – этот вид Web брутализма критик назвал минимализмом на стероидах (к примеру, mahzedahrbakery.com уже выглядит простым минималистичным сайтом)

Стильные текстуры в фоне

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

Современные веб-дизайны творчески применяющие фоновые текстуры:

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

abcdentaltexas.com – необычное для сайта стоматологии мультяшное оформление с красивой текстурой фона

djeco.com/ru – клетчатый фоновый паттерн и другие текстуры в красивом мультяшном дизайне сайта компании

Градиенты 2.0

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

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

Сайты с яркими оттенками и градиентами в дизайне:

wpengine.com – wordpress-хостинг оформил градиентами выпадающее меню и формы подписки

chunkagency.com – сайт креативного агентства с двухцветным неоновым градиентом и эффектными переходами

fullstory.com – двухцветные градиенты применяются для кнопок и в фонах

Продуманные анимации и эффекты UI

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

Примеры сайтов с хорошо продуманной анимацией:

insuranceexperiments.org.uk – занимательный промо-сайт британской страховой компании в стиле FLAT, с плоским видео и мультяшными анимациями

aproposducancer.fr – свежий сайт лионского хосписа с фантастически иллюстрированным и анимированным дизайном. Красивые прелоадер, интерактив, скролл, UI

hellobloom.io – анимация с высокой детализацией, эффектное обучающее видео. Так, товарный Landing Page вовлекает и настраивает на позитив

stripe.com – уникальный эффект превращает выпадающее меню в украшательство, а легкая анимация акцентирует важный контент

district0x.io – современный полу-плоский дизайн анимирован по максимуму: креативные хедер / футер, облака в фоне карточек и сами карточки

Масштабируемая SVG-графика

Важные преимущества масштабируемой векторной графики (SVG) перед растровыми форматами: изображения масштабируются без потерь в качестве, легко редактируются при помощи CSS и весят мало. Технологии HTML5 позволяют интегрировать гибкие SVG-элементы в веб-страницу. С сервисами вроде svgator.com, можно создавать SVG-анимации без знаний кодинга.

Примеры эффектного применения SVG-графики:

blockcollider.org – свежий современный сайт с SVG эффектами и анимацией

boite-a-oeufs.com – креативное агентство сделало свой сайт на вордпрессе, используя SVG и анимировав на GSAP платформе

playground.it – страница-«заглушка» пока идет редизайн, анимированные SVG-иллюстрации делают ее просто залипательной. Сыграете в Jump UP?

Изометрия в дизайне

Вероятно, возвращение изометрического дизайна стало реакцией на FLAT-экспансию по всему миру.

Этот стиль оформления достаточно трудоемкий. Для 3D-визуализации в двумерном пространстве веб-страницы потребуется работа с графическими элементами. С другой стороны, изометрические иконки и графика – это отличный способ показать свою индивидуальность.

Примеры современных изометрических дизайнов:

pikmykid.com – приятный веб-дизайн в мягких тонах с плавными эффектами, изометрическими иллюстрациями, фиксированными полигональными фонами и красивыми кнопками (призрачные / с градиентным фоном)

brightscout.com – зеленый дизайн сайта компании красиво проиллюстрирован, использован полу-плоский стиль с тенями, градиентами и скорлл-эффектами

mibexsoftware.com – сайт софт-компании, современный плоский изометрический дизайн с фирменным персонажем

Разделенный экран

Мода на разделение веб-страниц пополам появилась в результате эволюции Hero-изображений.

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

Сайты эффектно использующие вертикальное разделение экрана:

enginethemes.com – разделенный пополам объект (элемент фирменного стиля) в центре главного сплит-экрана представляет компанию WP-разработчиков (код внутри / дизайн визуально)

bigeyeagency.com – нестандартная навигация с разделением экрана для кейсов, фоновое видео с текстурой и фотоэффекты в бэкграундах (высветление, размытие, боке, двойная экспозиция)

special.bose.eu – логическое разделение контента на главной, ярко представляет продукцию Bose и упрощает навигацию по сайту

chekhov.withgoogle.com – разделенным контентом представлен опрос «Узнай себя в произведениях Чехова»

Тренды веб-дизайна 2020: модное и значимое

Что объединяет два высказывания: «62% людей поколения Z чувствуют себя постоянно одинокими» и «PANTONE 19-4052 Classic Blue приносит ощущение мира и спокойствия человеческому духу»? Их объединяет 2020 год и понятие трендов. Что сейчас понимают под термином «тренд»? Как он изменился после пандемии и о чем стоит думать при работе над сайтом проекта, чтобы сделать его удобнее, понятнее и глубже?

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

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

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

Модные тренды веб-дизайна

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

Темный фон.
Сложные градиенты и свечения.
Мягкие тени и парящие элементы.
Большие размеры и крупные (bold) шрифтовые начертания.
Использование 3D-графики.
Появления контента и анимации по скроллу или другим действиям пользователя.
Графика, нарисованная от руки.
Подчеркнутое наложение слоев.
Много белого пространства.
Минималистичная навигация.

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

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

«Быть не в тренде» – главный модный тренд.
Алексей Полеухин, сооснователь студии и школы «Гонзо-дизайн».

Значимые тренды веб-дизайна

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

Инклюзивная доступность

Скриншот сайта с адаптивным дизайном организации heart n soul, работающей в основном с людьми с особенностями развития.

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

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

Использование визуальных конструкторов и редакторов

Скриншот проекта «Бужение земли» про природу женщины, выполненного на сайте-конструкторе Readymag.

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

Сложно рекомендовать сайт на конструкторе для сверхответственных и масштабных проектов, но если вы хотите быстро, экономично и эффектно запустить лендинг, то, возможно, стоит теперь посмотреть в сторону визуальных конструкторов Tilda, Readymag, Wix, Webflow, нежели классических WordPress, Drupal, Joomla и Bootstrap?

Содержание, созданное пользователями (User-generated content – UGC)

Скриншот сайта UGC-проекта «Generations stories», разработанного на основе фотографий, присланных участниками проекта.

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

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

Защита персональных данных

Мультимедийный проект «История кражи личных данных».

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

Социальная ответственность

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

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

Психологическое здоровье пользователей

Скриншот инструкции по созданию разных типов домика от ИКЕА, запущенной в период карантина #явдомикеИКЕА.

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

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

Дистанционная устойчивость

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

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

Качественное содержание

Скриншот сайта проекта «Being», реализованного большой командой, включая авторов из Центра документальной фотографии «4Plus».

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

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

Ссылки и материалы по теме

10 трендов веб-дизайна на 2020 год

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

Содержание статьи

Два основных направления

1. Тренды дизайна в сфере eCommerce
2. Тренды отзывчивого дизайна

1. Яркие цвета + простота
2. Анимации, интегрированные gif и динамические иллюстрации
3. Асимметричные макеты
4. Громкая типографика
5. CSS Grids
6. Масштабируемая векторная графика
7. Нарисованные от руки изображения
8. Голосовые интерфейсы
9. Искусственный интеллект и передовые технологии машинного обучения
10. Брутализм в веб-дизайне
Заключение

Два основных направления

Можно заметить, что некоторые из трендов недавнего прошлого, такие как градиенты, к примеру, вновь становятся актуальными (хотя на этот раз эти самые градиенты приняли вид динамических градиентов). Это означает, что если плоский дизайн слегка ослабит свою хватку, вместе с трудно различимыми контурными кнопками (ghost buttons), которые уже всем надоели. Динамические градиенты, в свою очередь, могут заполонить собой все веб-пространство — по крайней мере, на некоторое время.

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

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

1. Тренды дизайна в сфере eCommerce

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

2. Тренды отзывчивого дизайна

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

Во всем мире на мобильный сектор приходится около 52% всего веб-трафика. К концу 2019 года 63% всех пользователей мобильных телефонов будут осуществлять выход в интернет, главным образом, через свое мобильное устройство. Следовательно, более подходящего времени, чтобы сосредоточить свое внимание на главных адаптивных тенденциях дизайна, наверное, и не будет.

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

Но что всех нас ожидает в ближайшие пару лет?

1. Яркие цвета + простота

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

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

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

Стоит отметить, что особенно выгодно такие дизайны смотрятся на устройствах, чьи экраны используют технологию In-Plane Switching (IPS), в силу чего яркие цвета и смелые решения выглядят еще более зрелищно и эффектно.

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

Вечеринка на крыше + жареная курочка

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

Вечер у костра + сыр на гриле

Сам дизайн при этом остается предельно простым. Подобная простота сама по себе является одним из популярных трендов в среде eCommerce последних лет.

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

Читайте также: 8 ярких цветовых трендов 2019 года
2. Анимации, интегрированные gif и динамические иллюстрации
В 2017 году весьма модным было размещать на страницах сайтов видео. Но медленная загрузка таких страниц заставила многих довольно быстро предать этот тренд забвению, ведь чем дольше загружается сайт, тем большее число пользователей (потенциальных покупателей) вы теряете.
Очевидно, что людей раздражают не сами ролики: разного рода динамические изображения пользуются популярностью у пользователей всех возрастов — а именно долгая загрузка страниц. Что же следует предпринять в данной ситуации?
Использовать анимации, конечно же.
Есть несколько способов, где и как вы можете задействовать этот формат:
В отличие от видео высокого качества анимации не приведут к долгой загрузке страниц (несмотря на наличие ряда возможных вариантов использования). Мало того, что анимации добавляют вашему бренду изрядную долю харизмы (при условии, что они качественно воспроизводятся), так еще и помогают выразить его ценности и поведать о нем историю — в свежем и интересном формате.
В будущем году особое внимание будет уделено мобильной анимации.
Ориентация на мобильные экраны (так называемый mobile first) уже некоторое время является трендом веб-дизайна, и это доминирование мобильных устройств (их превалирование над десктопом) будет только усиливаться, мотивируя дизайнеров как можно плотнее заниматься разработками мобильных анимаций и их всесторонним развитием.
Иллюстрации, в свою очередь, могут существенно облегчить задачу по демонстрации потенциальным клиентам того, как пользоваться продуктом — или помочь с обзором функций сервиса.
Интернет-магазины также способны извлечь пользу от кастомных иллюстраций, обеспечив с их помощью более удобное перемещение по страницам продукта, демонстрируя всем онлайн-покупателям то, как продукт работает, как настроить фильтры и корзины покупок, и, наконец, доводя их до страницы оформления заказа.
«Серьезные» бренды могут задействовать пользовательскую анимацию и иллюстрации, чтобы придать своей воронке продаж или пути покупателя атмосферу непринужденности. Или просто удержать внимание людей во время загрузки страницы.
Благодаря прогрессу веб-технологий, искусственного интеллекта и продвинутым механизмам обработки больших данных, анимация и 3D-эффекты смогут обеспечить более мягкую визуализацию данных.
Но анимации следует использовать с одной оговоркой, а именно — не забывать про мобильных пользователей. В зависимости от размера и характера используемого устройства, может оказаться трудным или даже невозможным перенести десктопный опыт на мобильную платформу.
Тем не менее, есть много способов использовать анимацию для установления и укрепления отношений с клиентами.
Читайте также: 75 инструментов веб-анимации, которые вам нужно испробовать
3. Асимметричные макеты
Просто задумайтесь.
Для разработки большинства сайтов используются сетка, границы которой обрамляются внутренними и внешними отступами, что делает любую страницу максимально комфортной для восприятия. Не то чтобы хорошо организованные страницы — это грех, но в 2020 году именно асимметричные структуры позволят многим брендам выразить свою индивидуальность и даже брутальность на полную катушку, создавая причудливые и экстравагантные работы.
К примеру, персональные сайты уже возвели эту идею в ранг культовой. Сайты на ломаных сетках особенно привлекательны из-за их уникальности и демонстрируемой в лоб самоуверенности.
Но забывать об осторожности все же не стоит.
Бренды, которые могут похвалиться большими объемами живого контента на сайте, могут воспринять асимметричные структуры как фактор, который будет только усложнять веб-опыт читателей. Такой компании было бы неплохо пересмотреть эту идею и переключиться на более подходящий, но представительный дизайн — если они хотят, чтобы пользователи остались довольны.
В качестве примера вновь можно обратиться к сайту Dadadata. На нем использовано сочетание асимметричной структуры и динамического фона, который приходит в движение при перемещении указателя мыши:
Насколько это смелое решение (и как быстро, в хорошем смысле, все на сайте образует беспорядок?).
Конечно, нередко появляются и такие примеры дизайна, когда разработчики явно переборщили с тем или иным трендом. Секрет потрясающих дизайнов заключается в том, что работа с асимметрией должна быть, как это ни иронично звучит, хорошо просчитана. Чтобы создать ощущение баланса в асимметричном дизайне, важно убедиться, что ни одна часть страницы не является более «тяжелой», чем все остальное. Использование больших изображений приветствуется, но при условии, что они идеально сбалансированы с текстом, пространством и другими элементами.
Независимо от того, насколько сложным или причудливым может оказаться дизайн, человек всегда будет в первую очередь уделять внимание более крупным объектам на странице и уже потом разглядывать детали.
Читайте также: Как использовать симметрию и асимметрию в дизайне лендингов
4. Громкая типографика
Типографика как искусство оформления текста не станет в 2020 году чем-то принципиально новым. Между тем нужно отметить, что в настоящее время наибольшее предпочтение отдается шрифтам без засечек (san-serif), поэтому если вы хотите выделиться на фоне конкурентов, в будущем году стоит разменять традиционные шрифты на что-то более смелое и дерзкое, то, что трудно будет не заметить.
Порой текст оказывается гораздо убедительнее, чем самая эпатажная фотография, и, как правило, этого удается достичь за счет использования больших, жирных и нестандартных шрифтов. Благодаря большему количеству инструментов и устройств, поддерживающих пользовательские шрифты, 2020 год — это самое подходящее время, чтобы смело заявить о себе интересным выбором шрифта.
Стоит отметить, что набирают популярность так же и вариативные шрифты.
Вариативный шрифт — это, по сути, один динамический шрифт, который ведет себя как бесконечное множество начертаний. Главное, чтобы все интерполировалось. Осей интерполяции при этом может быть сколь угодно много: от ширины символов до насыщенности. Так что наиболее отчаянные дизайнеры шрифтов могут насладиться большим разнообразием доступных им вариантов.
Взгляните на пример вариативного шрифта от блога Typekit:
И, конечно же, типографика имеет больше значение для любого интернет-бизнеса, который стремится обратить себе на пользу возможности поисковой оптимизации, используя целевые, хорошо продуманные ключевые слова.
В погоне за оригинальностью и своеобразием не стоит забывать о таких основных характеристиках текста, как его читабельность и простота восприятия. Конечно, шрифты должны быть интересными и необычными, но если из-за ваших творческих амбиций контент станет менее разборчивым, считайте, что вы только навредили.
Также очень важно сохранить баланс между «громкой» типографикой и мобильной отзывчивостью. Проблема в том, что типографику, которая удачно смотрится на десктопных экранах, как правило, трудно вписать в крошечный экран мобильных устройств. А размениваться мобильными посетителями в 2020 году все же не стоит. Как уже было отмечено выше, их просто больше.
Кстати, если вы пользуетесь платформой LPgenerator, вам не нужно открывать сервис Google Fonts для получения сторонних шрифтов на ваши посадочные страницы, ведь шрифты подключаются прямо из редактора. Мы добавили все шрифты из коллекции Google Fonts в наглядную галерею, и все, что нужно сделать — это выбрать подходящий шрифт, нажать на кнопку подключения и использовать его для новых или уже размещенных на лендинге текстов.
Читайте также: Анатомия шрифта: визуальный гайд по типографике
5. CSS Grids
Этот тренд веб-дизайна предназначен для решения проблем с адаптивным дизайном:
В последнее время многим интернет-брендам приходилось создавать отдельные версии сайта для мобильных устройств и для настольных компьютеров. И дизайнеры должны были так настраивать эти ресурсы, чтобы те могли самостоятельно определять, с какого устройства заходит на сайт посетитель, и перенаправлять этого человека на более подходящую его экрану версию.
И хотя с 2017 года всем известно, что в интернет люди чаще выходят со своих смартфонов и планшетов, чем с ноутбуков и ПК, отмахиваться от того, что способен предложить умный CSS grid все же не стоит, ведь это, бесспорно, прекрасный вариант, который позволит на базе одного сайта создавать множество его версий, соответствующих размеру экрана пользователя (вместо того, чтобы делать только мобильный или только десктопный сайт). С точки зрения конечного пользователя это, безусловно, одна из самых важных тенденций адаптивного дизайна последних лет.
Как уже упоминалось ранее, объемы мобильного веб-трафика уже превзошли традиционный настольный трафик на большинстве ключевых мировых рынков. Достаточен тот факт, что сам Google продолжает демонстрировать сильную приверженность мобильным веб-сайтам.
CSS grid как одно из последних достижений в адаптивном веб-дизайне гарантирует, что каждому посетителю, независимо от того, какого размера, типа и характера устройство он использует для доступа к сайту, будет предложен высококачественный веб-опыт. Система компоновки позволяет владельцу ресурса организовывать содержимое в строки и столбцы, соответствующие размеру экрана пользователя.
Читайте также: Почему LPgenerator не использует адаптивный дизайн для шаблонов лендингов
6. Масштабируемая векторная графика
Люди любят мультимедиа, а сайты, на которых размещается привлекательный мультимедийный контент, оцениваются выше, чем простые текстовые веб-страницы, особенно, если дело касается привлечения и удержания посетителей.
Но раньше за такое богатое наполнение приходилось расплачиваться более долгой загрузкой страниц, и все из-за распространенных тогда «тяжелых» форматов файлов, вроде GIF, PNG, а также видео-форматов. Все они изначально не подходили под мобильные экраны.
Недавно стало известно, что в скором времени для ранжирования веб-сайтов Google будет использовать результаты мобильной индексации.
Это означает, что для всех владельцев веб-сайтов пришло время как следует заняться ориентированными на мобильные устройства дизайнами, сделать мобильную приоритезацию центром процесса разработки дизайна, не жертвуя при этом богатством визуального контента, способного очаровать посетителей.
И тут пора вспомнить про такой формат, как SVG.
Это векторные изображения, которые способны масштабироваться под разные экраны, сохраняя при этом исходное качество. В SVG нет пикселей, что и определяет способность этого формата к изменению размера изображения без изменения его четкости.
С помощью SVG-изображений возможно обеспечить постоянное качество пользовательского интерфейса для всех мобильных посетителей, а это значит, что использование этого формата — это еще один критически важный тренд адаптивного дизайна, который сохранит свою актуальность еще долгие годы.
Теперь вас не будет грызть совесть из-за того, что кому-то вы предоставили полноценный веб-опыт, а кто-то остался обделенным. SVG-формат не даст в обиду владельцев смартфонов и планшетов, а это важно в интернет-сообществе, ориентированном на мобильные технологии.
Читайте также: Как и когда использовать самые распространенные форматы графических файлов
7. Нарисованные от руки изображения
По мере того, как все большее число веб-мастеров начинает воспринимать сайты как нечто большее, чем просто адрес в интернете, рисованные элементы, которые делают эти самые сайты уникальными и необычными, будут встречаться все чаще.
Надо сказать, что востребованным такой стиль изображений сделали два других не менее заметных тренда, речь которых уже шла выше — громкая типографика и кастомные иллюстрации.
Но глядя на эти картинки, нельзя не задаться вопросом: учитывая сложность и технологическую начинку большинства других тенденций веб-дизайна, упомянутых в этой статье, в чем заключается привлекательность таких далеко не самых совершенных рисунков? Почему бы не делать упор исключительно на фотографиях высокого разрешения, которые, как правило, и ассоциируются у большинства пользователей с классным и крутым дизайном?
Все просто — нарисованные от руки картинки обладают человеческим обаянием и теплотой.
Вы можете использовать такие рисунки, чтобы просвещать, привлекать и очаровывать, источая индивидуальность и обаяние:
Разумеется, вы всегда можете использовать в своем дизайне 4K-изображения и мотивирующие фото, но, тем не менее, важно не упускать один ключевой факт: веб-дизайн 21-го века часто оказывается слишком совершенным.
Все настолько безупречно и слишком идеально, чтобы быть продуктом чего-то иного, кроме бездушной машины. Напротив, если вы внесете в микс что-нибудь несовершенное, вы тут же сделаете свой дизайн чуть более человечным, душевным. Особенно, если сам рисунок будет немного грубым — для большинства пользователей, которые не обладают художественным талантом, он вызовет еще больше симпатий.
Любой желающий сегодня может снять кучу красивых фотографий, а затем разместить их на веб-сайте. Однако когда вы что-то рисуете от руки и с гордостью демонстрируете эти иллюстрации на своем сайте, делаете их частью своего имиджа, это многое говорит о характере вашего бренда. Да и о вас самих.
Конечно, вы можете нанять профессиональных художников, которые нарисуют то, что и как вам нужно, но ничто не способно рассказать о вашем бизнесе так, как это сделают нарисованные вашей командой иллюстрации.
Читайте также: 7 советов по созданию рисованной анимации
8. Голосовые интерфейсы
Внимание мимолетно. И умные веб-мастеры знают, что только сотрудничество с прогрессивными веб-дизайнерами поможет им увлечь за собой современную аудиторию.
Пользователи устройств, на борту которых располагаются такие виртуальные смарт-помощники, как Алиса, Siri, Google Now и Cortana, уже давно предпочитают взаимодействовать с ними и искать что-либо в интернете при помощи голоса. А все потому, что говорить непосредственно в устройство гораздо удобнее, нежели набирать запросы вручную. И если веб-разработчики адаптируют свои интерфейсы под голосовое взаимодействие, то смогут привлечь внимание более занятой аудитории.
Экраны устройств уменьшаются в размере, и на них остается все меньше свободного места, а голосовые модели не очень прихотливы в пространстве и персонализируют доставку контента так, как не может ни один текст.
Возможно, все началось слишком неспешно, но популярность голосового управления / ввода, наконец, достигла своего пика. Следующая статистика показывает, как и почему голос является одним из самых важных трендов веб-дизайна в 2020 году и не только:
ожидается, что к 2022 году голосовой шопинг перешагнет отметку в 40 миллиардов долларов;
по всему миру объемы поставок смарт-колонок выросли почти на 200% в 3 квартале 2018 года;
ожидается, что к 2022 году 55% всех домохозяйств обзаведутся смарт-колонками;
65% пользователей от 25 до 49 лет говорят со своими голосовыми устройствами по крайней мере один раз в день;
61% пользователей от 25 до 64 лет отмечают, что в будущем планируют использовать свои голосовые устройства чаще.
Однако крупный бизнес не спешит внедрять голосовые интерфейсы. Но, судя по данным исследований, это лишь вопрос времени. Не за горами эра, когда именно голос будет основным вариантом ввода/управления для рядового пользователя.
Читайте также: 4 тренда digital-маркетинга, которые встряхнут 2019
9. Искусственный интеллект и передовые технологии машинного обучения
Гигант от мира социальных сетей Facebook встретил 2018 год заявлением о том, какие тенденции развития социальных медиа будут актуальны в будущем году. Среди прочих были названы дополненная реальность, искусственный интеллект и машинное обучение.
Дизайнерам пользовательского опыта будет удивительно узнать, что в будущем главная страница сайта превратится в некий анахронизм, и пользовательские интерфейсы будут прекрасно обходиться и без нее. Ее место займут более таргетированные и персонализированные посадочные страницы.
Продвинутое машинное обучение поможет веб-мастерам, веб-разработчикам и дизайнерам UX / UI получать информацию о пользователе на основе их истории браузера и местоположения, к примеру.
В свою очередь, эта информация поможет владельцам сайтов и дизайнерам разработать релевантные интересам этих пользователей веб-страницы, которые будут встречать людей предложениями тех продуктов или услуг, которые посетители могли бы захотеть искать, скажем, на сайте интернет-магазина.
Искусственный интеллект — не новичок в сфере веб-дизайна и разработки. Любая автоматизированная система, которая обеспечивает персонализированный опыт, основанный на предпочтениях пользователя и воспринимаемом поведении, квалифицируется как ИИ.
Средний пользователь сети скоро начнет ждать (и требовать) гораздо более многомерной персонализации своего онлайн-опыта. Такой онлайн-опыт, при котором веб-сайты, которые они посещают и с которыми взаимодействуют, узнают о том, чего они хотят, прежде, чем они даже сами осознают это.
10. Брутализм в веб-дизайне
Прежде чем на сцену выскочили материальный и плоский дизайны, балом правили строгие сетки и блоки с острыми краями.
В прошлом году крупные компании старательно дополняли органические дизайны своих сайтов плавными изогнутыми линиями и сглаженными формами, подчас творя настоящие произведения искусства. Задача таких дизайнов — сделать стоящие за ними бренды более человечными, вдохнуть в них душу и, таким образом, привлечь внимание целевой аудитории и заслужить ее доверие.
В качестве хорошего примера можно вспомнить округлые дизайны Google.
К концу 2017 года сформировалась новая когорта дизайнеров, которая стремилась переосмыслить традиционную верстку веб-дизайна. В своих работах они старались подчеркнуть связь с дизайном старых-добрых статических сайтов с четко структурированным макетом. Цель этого состояла в том, чтобы за счет оригинальности и индивидуальности выразить принадлежность бренда к целевой аудитории.
Сайт дизайнера Atelier Florian Markl в стиле брутализм
Сайты с такой «оберткой» не ускользнут от вашего взгляда: сочетание цветных блоков горизонтальной и вертикальной направленности, соседство контрастных оттенков — внешний вид таких веб-ресурсов будет отличаться наличием асимметричных визуальных эффектов, которые диаметрально противоположны тому, что все мы привыкли видеть в более консервативных дизайнах.
Короче говоря, такие сайты по-брутальному оригинальны.
Более того, брутализм всегда ставил превыше всего функциональность ресурса, и нередко в жертву этой функциональности приносилась эстетическая сторона дизайна. Поэтому одними из наиболее востребованных трендов веб-дизайна на будущий год можно назвать простоту и доступность. Конечно, брутализм располагает потенциалом, чтобы создавать привлекательные и не лишенные красоты сайты, но вы можете обратиться к этому стилю, если вам понадобиться создать простой и функциональный сайт, преследующий исключительно бизнес-цели.
Читайте также: Брутализм и антидизайн
Заключение
По мере совершенствования технологий и средств потребления веб-контента, все больше дизайнеров отличаются созданием креативных и по-настоящему революционных работ, чье влияние распространяется на многие годы вперед.
Некоторые инновации, как, например, веб-анимации, уже являются вполне устоявшимися тенденциями, тогда как другие, вроде CSS grids, достигнут своего пика популярности в течение следующей пары месяцев. Тем не менее, нужно понимать то, что в долгосрочной перспективе жизнестойкость той или иной тенденции веб-дизайна будет по-прежнему определяться одним и только одним фактором: предпочтениями конечного пользователя.
Теоретически вполне возможно, что вкусы, предпочтения и ожидания вашей целевой аудитории могут радикально измениться с течением времени. Но надо понимать, что в этом случае многие практики веб-дизайна, ранее считавшиеся превосходными и обязательными, таковыми быть перестанут. Если потребители вдруг начнут проявлять негативную реакцию на асимметричные макеты, к примеру, от них очень быстро откажутся и разработчики.
Все это рождает необходимость технологического картирования будущего веб-дизайна, разработка сценариев его изменения относительно прогресса технологий. Просто подумайте: стремительный прогресс в развитии мобильных технологий изменил то, как сегодня мир получает доступ к веб-сайтам и как с ними взаимодействует. Голосовые интерфейсы тоже оказывают свое влияние. Возможно, через несколько лет технологии виртуальной реальности обозначат наступление новой эры веб-дизайна и разработки. Но пока это кажется маловероятным.
На данный момент лучше акцентировать внимание на перечисленных выше 10 тенденциях, которые помогут вам создать по-настоящему потрясающий дизайн, способный привести в восторг любого современного пользователя.
Если же у вас нет времени разбираться в тонкостях лендостроения, но при этом вам нужен уникальный сайт с гарантированно высокой конверсией, команда LPgenerator с радостью разработает для вас индивидуальный дизайн. Он будет выполнен с учетом всех ваших пожеланий, подчеркнет особенности оффера и позиционирование бренда, а еще — легко масштабируется по мере необходимости.
Высоких вам конверсий!
По материалам: sondoramarketing.com Изображение: pixabay.com
28-11-2019
Тренды UI/UX Дизайна, Которые Взлетят в 2021 Году
Сейчас для стартапов важно следить за трендами UI/UX дизайна, как никогда раньше. Давайте по-честному: 2020 перевернул игру. Пандемия коронавируса оказала влияние на все сферы жизни, в том числе и на рынок мобильных приложений. Когда в одночасье миллионы людей по всему миру застряли дома, все быстро переместилось в онлайн: рабочие встречи, доставка продуктов, спортивные тренировки.
Вместе с количеством пользователей в приложении, количество конкурентов тоже выросло. Чтобы выиграть борьбу за внимание юзеров, важно знать, какие фичи и элементы в UI/UX дизайне будут актуальными и модными в 2021.
Команда дизайнеров Purrweb создала список 10 ключевых трендов UI/UX дизайна, которые будут популярны в следующем году среди стартапов. Энджой!
1. 3D-графика
Разговор о трендах на 2021 год точно стоит начинать с 3D дизайна. Объемные элементы оживляют интерфейс и помогают визуализировать основные идеи бизнеса. Это не новый тренд — он существует уже некоторое время, и точно останется популярным в течение нескольких последующих лет. Почему мы так уверены? Рассказываем. Многие крупные компании, такие как Apple или Google, используют 3D-элементы в своих мобильных решениях. Например, в недавнем релизе обновленной MacOS Big Sur Apple показала интерфейс со встроенными 3D-иконками приложений. А визуальный стиль крупных компаний задает тренды для стартапов
Big Sur OS с 3D иконками в интерфейсе вышла в ноябре 2020 года.
Вот совет от наших дизайнеров: прежде чем интегрировать такой тяжеловесный контент, как 3D-графика, убедитесь, что ваше приложение обладает высокой производительностью и быстро подгружает все элементы.
2. Блюр в интерфейсах
Блюр не только показывает, что вы следуете моде, но и решает задачи функционального дизайна. Размытые элементы помогают добавить глубину интерфейсу и показывают пользователю иерархию. Другими словами, с помощью блюра можно выделить важные кнопки и показать юзеру, куда смотреть.
Блюр — не универсальная тенденция: он идеально подходит для решений на iOS, но смотрится неестественно в приложениях на Windows. Несмотря на то, что блюр можно назвать одним из самых больших трендов UI/UX дизайна следующего года, что с ним будет дальше — не знает никто. Честно говоря, даже в команде разработчиков Purrweb нет единого мнения по этому поводу.
Вот что об этом говорит наш ведущий дизайнер Вадим Субботин:
«Блюр скоро умрет. Так случается раз в полгода: тренд умирает, затем поколение дизайнеров сменяется, новички смотрят на старые залайканные работы, делают то же самое — и вот блюр снова «в тренде»».
Вне зависимости от будущей судьбы, блюр точно еще будет в тренде в 2021.
Если вам нужны идеи, как интегрировать блюр в ваш интерфейс, примеры можно подглядеть здесьhttps://dribbble.com/tags/blur.
3. Новый неоморфизм
Неоморфмизм — это не новый тренд. Он выстрелил в конце 2019 — начале 2020, и за это время успел превратиться в анти-тренд. Неоморфизм происходит от слов «новый» и «скевоморфизм» — дизайн с элементами, имитирующими реальные объекты. Скевоморфизм был популярен еще в 2000-х годах, а недавно появилась его новая версия — неоморфизм.
Мода на объемные интерфейсы привела к тому, что этим начали заниматься все кому не лень, не обращая внимание на детали и качество. В 2021 году от этого останется только лучшее, и в тренде будут хорошо сделанные тени, объем и градиенты. Все вместе это составляет новый неоморфизм.
4. UX-копирайтинг
Текст — это один из способов взаимодействия с пользователями, и качество копирайтинга так же важно, как и визуальные эффекты в приложении. Например, вы знали, что желание пользователя нажать на кнопку зависит от того, какие слова вы на нее поместите? Хороший UX-копирайтер в команде поможет решить множество коммуникативных задач и увеличитьhttps://themindstudios.com/blog/importance-of-ux-writing/ вовлеченность пользователей приложения до 17%.
Поскольку действия говорят громче слов, вот пример того, что хорошо продуманный UX-копирайтинг может сделать с компанией. Каждый год стриминговый сервис Spotify анонсирует «Wrapped» — персонализированные отчеты для слушателей. Они всегда делают это весело и задорно, но в 2020 году компания особенно поработала над текстами в отчете. В результате мы все видели бесконечные скриншоты в Instagram Stories, и в день выпуска отчетов акции Spotify вырослиhttps://www.billboard.com/articles/business/streaming/9492882/spotify-stock-new-high-wrapped на 16% до максимального показателя за всю историю сервиса.
«Вы умеете слушать. Поделитесь этим со своими бывшими» и «Спасибо за то, что провели все 67 месяцев 2020 года с нами». Мы тоже не смогли устоять и добавили эти скриншоты в статью — вот что делает хороший UX-копирайтинг.
UX-копирайтинг точно будет одним из 10 ключевых трендов мобильного дизайна в 2020 году.
5. Иконки и эмодзи
Технологии и новые разработки безусловно повлияли на то, как мы воспринимаем информацию. Мы привыкли фокусироваться на символах, а не на словах, а иконки и эмодзи понятны всем вокруг. Независимо от того, на каком языке вы говорите, вы поймете, что 💵 = деньги и 🧑🏻‍💻 = разработчик.
Эмодзи влияют на то, как мы воспринимаем и читаем информацию, а также на то, какой посыл мы получаем из текста. Исследования показываютhttps://www.researchgate.net/publication/317170695_The_Effect_of_Emoji_on_Person_Perception, что мы делаем выводы о людях и тоне их голоса, основываясь на смайликах, которые они используют в диалоге. Поэтому внедрение иконок и эмодзи в интерфейсы мобильных решений станет одним из ведущих трендов UI/UX дизайна в 2021 году.
Сначала пользователи обращают внимание на эмодзи, а затем на слова. Используйте символы с умом!
6. Темная тема
Впервые эта функция появилась в нескольких приложениях пару лет назад, а в 2020-2021 годах она уже стала мейнстримом, но в хорошем смысле этого слова. Темная тема — это не только стильно, но и практично. Во-первых, этот режим экономит заряд батареи для некоторых типов экранов. А во-вторых, он смягчает вредное воздействие на глаза пользователей в плохо освещенных помещениях.
Сегодня практически каждое приложение дает возможность переключиться в ночной режим, а некоторые из них, чтобы «похайпить», сразу делают только темную тему. Мы предлагаем следовать трендам мобильного дизайна с умом, и разрабатывать приложения с двумя режимами и возможностью переключаться между ними.
7. Супер-аппы
Мы гарантируем, что в 2021 году все вокруг будут стремиться к упрощению, в том числе и крупные компании. Супер-аппы — это концепция «все в одном». Она не только упрощает доступ к различным услугам, таким как кинотеатр, доставка еды, такси и музыка, но и делает дизайн более четким и минималистичным.
Например, Яндекс недавно представил супер-апп Яндекс.Go, в котором объединились несколько решений: Яндекс.Еда, Яндекс.Такси, Яндекс.Лавка и так далее. Идея проста: пользователям нужно только одно приложение на смартфоне, которое покрывает все их потребности. Это экономит время и некоторое пространство в памяти телефона.
Когда речь идет о многофункциональном приложении, делать сложные интерфейсы — уже не актуально в 2021 году. С этим связан следующий тренд веб-дизайна и мобильных приложений.
8. Минимализм, а не брутализм
Грубый, тяжелый на вид брутализм в UI/UX дизайне будет супер устаревшим в 2021 году. Этот стиль был навеян специфической архитектурой СССР и отпал еще в 2018 году. Брутализм оказался неудобным, трудным в разработке и неэффективным в использовании как для дизайнеров, так и для владельцев стартапов. Поэтому на смену вычурным шрифтам и неуклюжей графике пришел чистый и ясный минимализм.
9. Мини-аппы
Один из ключевых трендов UI/UX дизайна — приложения, которые вам даже не нужно скачивать. Вместо этого можно просто перейти по ссылке или отсканировать QR-код, и затем получить доступ к услуге. Например, так можно взять напрокат электрический скутер или заказать доставку еды из местного кафе. Эта тенденция дает небольшим компаниям возможность сократить расходы на разработку и получить новых клиентов. Эти плюсы жизненно важны для стартапов в условиях глобальной пандемии.
<
10. Воздушные интерфейсы
Легкий воздушный дизайн — один из современных трендов в дизайне в 2021 году. Этот стиль дополняет моду на разработку минималистичных приложений. Воздушные интерфейсы интуитивно понятные и интерактивные, а контент в них легко читается и воспринимается пользователем.
Наш дизайнер Полина Толмачева объясняет: «Все, что приятно глазу и просто в использовании — это и есть воздушные интерфейсы. Не перегружайте пользователя своими дизайнерскими изысками — все и так знают, что UI/UX студии умеют делать круто. Лучше — пастельные тона, светлые фоны и удобный UX».
Приложение, которое помогает справиться со стрессом и тревогой, должно вызывать доверие и создавать домашнюю атмосферу, визуально снимая стресс с помощью цветовой гаммы и шрифтов.
Итоги
В 2021 году знание основных трендов UI/UX дизайна может иметь решающее значение для вашего стартапа. Поскольку конкуренция становится все более напряженной, следовать моде стало еще важнее, чем раньше. Вот почему наша команда дизайнеров собралась вместе и выбрала топ-10 трендов, о которых вы точно должны знать в следующем году. Вот они:
Все тренды 2021 года — это реакция на быстро меняющийся мир вокруг нас. Мы точно знаем, что в настоящее время пользователи перегружены информацией и контентом. Им нужны более простые, минималистичные решения с интуитивным интерфейсом, смайликами и размытыми элементами, которые подсказывают, куда смотреть. Ну и с функцией ночного режима, который облегчает напряжение глаз в малоосвещенной комнате.
В Purrweb мы занимаемся разработкой UI/UX дизайна, созданием прототипов, визуализацией контент-стратегий и многим другим. Мы считаем, что сырой, недоработанный интерфейс может испортить весь релиз. Поэтому мы работаем над UI/UX дизайном с самого начала разработки.
Каждый день мы помогаем стартапам создавать интуитивно понятные и удобные интерфейсы. На протяжении многих лет наша команда развивала интуицию и тренировала насмотренность, чтобы предсказывать последние тренды мобильного дизайна и внедрять их в надежные высокопроизводительные решения.
Подробнее об этапах и сроках работы над UI/UX дизайном приложения читайте здесь.
У вас есть идея для проекта?
X
Трендовые цвета в веб-дизайне 2021 года | Дизайн, лого и бизнес
Создайте свой логотип онлайн. Более 50 тысяч брендов по всему миру уже используют логотипы от Турболого.
Создать логотип онлайн
Разработка сайта состоит не только из выбора доменного имени, хостинга и шаблона. Важно уделять должное значение цветовому решению сайта. Правильно выбранная расцветка способна положительно сказаться на отношении потенциальных клиентов к бренду. Какие цвета будут популярны в 2021 году в веб-дизайне? Об это читайте в данной статье.
Ниже представлены главные модные цвета в дизайне сайтов на 2021 год. Мы подробно описали их преимущества и рекомендации по использованию.
Розовый
Розовый цвет уже давно не приписывают только к женской аудитории. Сейчас такое цветовое решение используется компаниями различных направлений: от интернет-магазинов одежды до сайтов строительных фирм.
Популярность розового цвета в веб-дизайне обусловлена рядом причин. Во-первых, этот оттенок не перегружает глаза. Во-вторых, розовая расцветка способна вызвать у пользователей доверительное отношение к компании. Еще один плюс — данный цвет ассоциируется со спокойствием, беззаботностью и детством. Поэтому дизайн сайта в розовых тонах успокоит посетителей и снизит их напряжение.
Чаще всего розовый сочетают с желтым цветом. Это позволяет сделать текст выразительным и при этом не броским. Также распространенные решение — комбинация розового и черного.
Оранжевый, красный
Многие известные компании используют такое сочетание цветов в качестве расцветки сайта. Данные оттенки относятся к теплой гамме. Также они ассоциируются с 80-ми годами. Поэтому дополнительное воздействие оранжевого, красного и розового в совокупности — вызывание ностальгических чувств.
Часто можно увидеть комбинацию данных цветов в эффекте градиента. Это значительно смягчает эти яркие цвета и делает их более плавными, спокойными.
Тотальный черный
Использование черного цвета как основного тона в расцветке сайта кажется непривычным и абсурдным для многих пользователей. Однако такое цветовое решение пользуется популярностью среди западных организаций.
Черный обычно дополняют серым или белым. Такое решение смотрится стильно и элегантно. Кроме того, этот необычный подход вызывает восторг у посетителей сайта.
Однако, чтобы дизайн веб-сайта не превратился в однотонное пятно, необходимо приложить усилия и продумать окраску всех элементов (надписей, изображений и т.д.). Оптимально использовать в таком решении градиенты и другие переходы, позволяющие выделить отдельные составляющие сайта из черного фона.
Голубой + бирюзовый
Голубой цвет довольно часто можно встретить в качестве основного оттенка корпоративной расцветки. Однако в 2021 году возрастает популярность градиентов и более мягких переходов цветов. Голубой не выходит из моды, а комбинируется с бирюзовым.
Популярность такой расцветки обусловлена особенностью ее влияния на психику людей. Голубой (как и все холодные оттенки) оказывает успокаивающее действие, но при этом усиливает концентрацию внимания. Поэтому компании разных сфер выбирают этот цвет.
Серый
Серый цвет редко встречается в качестве самостоятельной единицы дизайна. Обычно он используется вместе с черным (в виде градиента). Но это в прошлом. Все больше брендов начинают делать серый цвет доминантой в своих проектах.
Такое цветовое решение выглядит необычно и однозначно удивит посетителей сайта. Если делать серый цвет центральным акцентом веб-дизайна, оптимально дополнять его синим, черным, голубым или зеленым тонами. Так вы создадите уникальное сочетание и выделите вашу площадку среди конкурентов.
Синий
Классический глубокий синий цвет все еще удерживает лидирующие позиции в качестве основы расцветки сайтов. Многие дизайнеры используют его в исходном виде (без добавления градиента и смешения с другими цветами). Чтобы расставить акценты, обычно используют белый цвет текста.
Чем обусловлена такая популярность синего цвета? Он, как и другие холодные тона, имеет положительное подсознательное воздействие. Это помогает представителям брендов добиваться нужного впечатления о компании и вызывать определенные эмоции у потенциальных клиентов.
Натуральные оттенки
Последние годы активно освещаются в СМИ и Интернет-источниках проблемы с экологией. Блогеры и представители компаний пытаются привлечь внимание своих клиентов и зрителей к экологическим катастрофам. Они делают это с помощью прямых призывов или косвенно — путем использования «экологичных» цветов в дизайне сайта.
Также натуральные оттенки ассоциируются с природой, чистотой, благополучием. Поэтому сайт в такой расцветке вызовет к посетителей чувство спокойствия, доверия к бренду.
Особенно часто зеленый, голубой и бежевый цвета применяются в качестве корпоративного цветового решения у фирм, реализующих натуральную косметику, веганские продукты, эко сумки из хлопка т.д. Это еще раз указывает на их eco-frendly.
Как подобрать цветовое решение сайта?
Выше мы описали основные трендовые цвета 2021 года. Однако, вопрос «Как выбрать расцветку для сайта?» остается открытым. Попробуем на него ответить.
В первую очередь, необходимо приглядеться к своему бренду. О чем он, что предлагает целевой аудитории, чем отличается от конкурентов и т.д. Ответив на данные вопросы, вы сможете определить особенности своей компании. Исходя из этого стоит выбрать основной цвет сайта.
Далее следует продумать несколько комбинаций главного тона с другими оттенками. Вы должны оценить, хорошо ли видны текст, изображения и иконки в такой расцветке. В идеале, цвета должны гармонировать, но при этом не сливаться друг с другом.
В цветовой гамме вашего сайта могут быть использованы как один, так и несколько тонов. Главное, не переборщить. Лучше выбрать 1-2 основных оттенка и 1-2 дополнительных. Отличным решением будет использование градиента. Тем более, в 2021 году он на пике моды.
Подведем итог
Цвета, используемые в веб-дизайне, играют большую роль в успешности фирмы. Поэтому важно подобрать подходящую расцветку, опираясь на уникальные черты бренда. А знание трендовых цветов этого года позволит получить актуальный дизайн сайта.
Другие статьи
Редактор блога и специалист по контент-маркетингу в Turbologo. Статьи Виктории содержат полезные советы о маркетинге, создании бренда и продвижении его в Интернете.
9 крупнейших тенденций веб-дизайна в 2021 году
Ежегодные тенденции веб-дизайна обещают направить нас в научное будущее нашей мечты, поскольку они основаны на технологиях. Но прогнозы на 2021 год, полученные от сообщества веб-дизайнеров со всего мира, говорят об обратном.
2021 Тенденции веб-дизайна, похоже, имеют общую тему: вместо того, чтобы стремиться к высокотехнологичной фантазии, веб-дизайнеры стремятся к новым высотам реализма. Они как никогда раньше смешивают цифровое и обычное, и это отражает то, насколько веб-сайты стали неотъемлемой частью повседневной жизни.Таким образом, следующие 9 тенденций веб-дизайна на 2021 год буквально вдыхают жизнь в цифровой мир.
9 тенденций веб-дизайна, которые будут огромными в 2021 году

—
Параллакс анимация
Неоморфизм
Абстракционистские композиции
Комфортные цвета
Веб-дизайн для причин
Прокрутка преобразований
Цифровая интерпретация физических продуктов
Увлекательные анкеты
Трехмерные цвета
1.Параллакс анимация

— Автор Pinch Studio
От микровзаимодействий до фоновых частиц — мы наблюдаем растущую популярность веб-анимационных тенденций год за годом. Веб-анимация 2021 года становится еще более сложной из-за разделения элементов страницы на крайние области переднего и заднего плана, создавая эффект параллакса.
Мин Фам через Dribbble
Автор Уэсли ван’т Харт через Dribbble
Параллакс — это оптическая иллюзия, которая возникает, когда кажется, что объекты рядом со зрителем движутся быстрее, чем объекты дальше от него.Хотя мы видим это в повседневной жизни — например, при просмотре проезжающих пейзажей во время вождения — эффект на веб-страницах в равной степени воспринимается как реальный и сюрреалистический.
Автор Iconic Graphics
Глубина, созданная за счет использования переднего и заднего планов, также имеет дополнительное преимущество погружения, превращая экран компьютера в нечто похожее на театральную сцену. Когда пользователи перемещаются по веб-странице, они словно по волшебству увлекаются ее убедительной работой. И, в конце концов, разве интернет не волшебство?
По UI8 через Dribbble
Слава Корнилов через Dribbble
Автор Permadi Satria Dewanto через Dribbble
2.Неоморфизм

—
Неуморфизм набирает невероятную популярность в прошлом году, а в 2021 году обещает ввести нас в парадоксальную эпоху минималистского реализма. Этот стиль является преемником скевомофизма — подхода к дизайну, который включает визуализацию знакомых, устаревших материалов в текущие дизайны, и его расцвет в значках приложений пришелся на начало 2010-х годов. Эту тенденцию в значительной степени вытеснил плоский дизайн, который упростил значки и цвета до менее реалистичного, но более единообразного и легко распознаваемого способа.
Мы увидим Neumorphism — новый Skeumorphism, превращающий плоские значки в реалистичные трехмерные объекты.
— Клэр Тейлор, старший дизайнер продукта 99designs
Neumorphism представляет собой слияние обеих тенденций, с дизайном, имитирующим физичность за счет выборочных падающих теней, но наложенных полуплоскими цветами. Чаще всего эффект напоминает цифровое тиснение или дебоссинг. Это позволяет дизайнерам восстановить тактильные ощущения, которые были утрачены в эпоху плоского дизайна, и это, в свою очередь, усиливает связь пользователя с дизайном, с которым он взаимодействует.Ожидайте увидеть этот стилизованный реализм на кнопках, панелях поиска и текстовых полях во всех цифровых дизайнах 2021 года.
Автор ODarka
3. Абстракционистские композиции

—
Абстрактные формы, особенно состоящие из геометрических примитивов, таких как квадраты и круги, могут показаться простыми, минималистичными и ограниченными. Однако в 2021 году веб-дизайнеры включают их в сложные, обширные композиции, излучающие свободу.
Автор andrei2709
В 2021 году элементы абстрактного искусства будут использоваться в качестве альтернативы фотографии в веб-дизайне для стартапов, технологических продуктов и приложений.
— Тристан Ле Бретон, креативный директор 99designs
В большинстве случаев это абстрактное искусство заменяет стоковые фотографии и иллюстрации. Хотя они могут включать изображения людей, они по-прежнему вызывают эмоции без них. Их взрывные композиции в стиле Поллока кажутся энергичными, а их многочисленные яркие цвета заразительно теплыми. В результате веб-страницы кажутся выразительными и живыми даже при отсутствии знакомых человеческих лиц.
через indicius.com
4. Комфортные цвета

—
Учитывая все более цифровую природу рынка труда в наши дни, большинство людей проводят большую часть своего времени за компьютерами. Из-за этого пользователи нередко испытывают усталость глаз после длительного просмотра экрана. Веб-дизайнеры учли это, создавая цветовые схемы, которые упрощают восприятие глаз.
Автор: Creative_David
Наши миры шумные, усталость от Zoom — это вещь.В 2021 году веб-дизайн сократится до «одной работы за раз», чтобы не отвлекаться и сделать взаимодействие более комфортным.
— Клэр Тейлор, старший дизайнер продукта 99designs
Это отчасти объясняет популярность прошлогоднего тренда темного режима, который нейтрализовал подавляющую белизну, которая преобладает в экранах.
В 2021 году веб-дизайнеры будут думать за пределами двух крайностей — света и тьмы.Они находят золотую середину в мягких цветовых палитрах, таких как здоровый зеленый, пастельный синий, теплый коричневый или светло-розовый. Они не только делают цвета веб-сайтов менее резкими, чем чистый черный или чистый белый, но и вызывают умиротворение и расслабление.
Эта общая тенденция является обнадеживающим признаком того, что веб-дизайнеры будущего могут быть больше озабочены доступностью и комфортом, чем радикальными инновациями.
Автор Виола через Dribbble
Будет проводиться конкурс на создание максимально простого дизайна с использованием нежных и прохладных цветов, чтобы пользователи могли проводить больше времени, рассматривая дизайн веб-сайта.- RV ™, дизайнер 99designs
5. Веб-дизайн для причин

—
С пандемией COVID-19 и последовавшими за этим различными приказами о предоставлении убежища Интернет стал убежищем. Виртуальные конференции не только стали нормой для общественных встреч и развлечений, но и многие обычные бренды обратились к веб-сайтам, чтобы поддерживать свой бизнес на плаву. И веб-дизайнеры справились с этой задачей, создав значимые и впечатляющие дизайны.
По дизайнуExcellence
Артур Минеев через Dribbble
В 2021 году мы увидим больше дизайнов и изображений, резонирующих с движением, социальными и экологическими проблемами. Я видел, как все больше и больше брендов объединяются вокруг проблем и общаются со своими пользователями на более глубоком уровне.
— Тристан Ле Бретон, креативный директор 99designs
В 2021 году мы увидим, что веб-дизайнеры по-прежнему будут ценить свою роль в помощи миру в трудные времена.
Это означает, что бренды сосредотачивают свои веб-дизайны на своих достоинствах, таких как их усилия по обеспечению устойчивости или участие сообщества. Это означает, что бренды получают стоковые фотографии, которые отражают реальных разнообразных клиентов. Это означает рост цифровых пространств, позволяющих осознать социальные причины с помощью интерактивных средств, таких как визуализации и симуляции. А это означает увеличение ресурсов и методов самостоятельного веб-дизайна, делая создание веб-сайтов доступным для всех.
Автор: Лэнс Баррера, Dribbble, By SixtyTwo, Dribbble
. Веб-дизайн уже давно ориентирован на обеспечение максимального удобства пользователей.А в 2021 году лучший пользовательский опыт будет определяться общими ценностями и общими целями.
через Nike
6. Прокрутка преобразований

—
Когда пользователи прокручивают страницу, они делают больше, чем просто перемещаются по странице: они взаимодействуют. Физические действия, которые они выполняют в реальной жизни — щелчки пальцами по мышке — вызывают реакцию на экране. Взаимодействие — это форма участия, и когда пользователи вовлечены в происходящее, они с большей вероятностью будут заинтересованы и вовлечены.
Автор: Хироши
По JP через Dribbble
Слава Корнилов через Dribbble
Автор Vilius Vaicius через Dribbble
Прокрутка — одна из самых тонких форм взаимодействия, и поэтому веб-дизайнеры 2021 года увеличивают визуальную обратную связь, которую пользователи получают при прокрутке. Это может быть как изменение полной цветовой схемы, так и сложные анимированные переходы, а также массовые сдвиги в макете. В общем, веб-дизайнеры не торопятся, чтобы каждый свиток ощущался как новая страница, а иногда даже новый веб-сайт.
Внешним через Dribbble
Автор Manon Jouet через Dribbble
7. Цифровая интерпретация физических продуктов

—
Продукты часто лежат в основе веб-сайтов, а веб-страницы 2021 года их сердца находятся в их руках. В частности, продукты вдохновляют буквальные элементы дизайна за счет творческой цифровой интерпретации физических носителей.
Автор: JPSDesign
Это может быть цвет, размазанный по странице, например лак для ногтей, или изображения, обрезанные в скругленные прямоугольники, как на смартфонах.Такой подход не только создает визуальную синергию между продуктом и его веб-сайтом, но и делает веб-страницы более органичными и неожиданными.
Поскольку веб-сайты становятся все более распространенной частью повседневной жизни, эта тенденция смешивания реального мира и цифрового мира кажется созданной для нашего времени.
По Абая (бухта)
8. Увлекательные анкеты

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

—
Цветовые схемы в веб-дизайне уже некоторое время имеют тенденцию к градиенту, и тенденция этого года выглядит как следующая эволюция, когда цветовые переходы становятся более реалистичными, чем когда-либо. Следуя примеру Apple Big Sur OS, мы ожидаем, что цвета будут насыщенными и трехмерными, почти как фрукты, которые вы можете сорвать прямо с экрана.
ОС Big Sur через Apple
Эта тенденция достигается за счет тонкой штриховки, которая придает округлости плоским иконам прошлых лет.Хотя мы ожидаем, что это будет чаще всего появляться на значках приложений, веб-дизайнеры также отказываются от аккуратных переходов градиентов для смешанных цветов фона, которые кажутся более несовершенными и естественными. Два цвета, расположенные рядом, могут резко слиться друг с другом или могут сохранять тени и глубину окрашенных объектов. В целом, эта тенденция говорит о том, что цвета веб-дизайна 2021 года стремятся к более высокому реализму.
В 2021 году мы увидим множество дизайнов, таких как Big Sur от Apple: сочная графика, градиенты, множество теней.
Готовы к крупнейшим тенденциям веб-дизайна 2021 года?

–
В конце концов, главные тенденции веб-дизайна 2021 года выглядят не столько как дизайн из научно-фантастического фильма, сколько как реальный дизайн, с которым мы сталкиваемся в повседневной жизни. Это показывает, насколько все более распространенные веб-сайты становятся частью нашей жизни, и дизайнеры 2021 года воплощают их в жизнь. Каким вы представляете будущее тенденций веб-дизайна? Сообщите нам свои прогнозы в комментариях ниже.
21 уникальная тенденция веб-дизайна на 2021 год
Добро пожаловать в наш ежегодный обзор тенденций веб-дизайна. От ретро-типографики до постоянно растущего движения без кода — есть много чего ожидать в 2021 году.
Ознакомьтесь с нашим последним постом: 22 тенденции веб-дизайна на 2022 год .
2020 год был непростым. С его галлонами дезинфицирующего средства для рук, неудобными встречами Zoom и надвигающейся тревогой неопределенности, мы все чувствуем себя немного измотанными. Несмотря на обстоятельства, мы все сделали все возможное, чтобы пройти через все это.Многие из нас потратили время на изучение новых дизайнерских навыков. А некоторые из нас только что испекли хлеб на закваске. У всех нас есть свои навыки выживания.
Когда дело дошло до дизайна, мы следили за нескончаемыми тенденциями в Интернете. Поговорив с командой Brand Studio в Webflow и несколькими другими дизайнерами, мы составили исчерпывающий список некоторых тенденций веб-дизайна, которые мы ожидаем увидеть в 2021 году. Мы надеемся, что этот список не только вдохновит вас, но и вдохновит. подходить к Интернету более инклюзивно и доступно.

21 современная тенденция веб-дизайна на 2021 год
Вот 21 тенденция веб-дизайна, которая также поможет сделать 2021 год немного ярче.
1. Ретро шрифты
Мы видели, как многие старые вещи снова становились крутыми, а затем, в свою очередь, становились еще более неаккуратными. Подумайте об усах на руле и джинсах для мамы. Ирония недолговечна.
Ретро-шрифты испытали те же приливы и отливы своей популярности, и многие дизайны с винтажной типографикой не устарели.
Однако типографика с возвратом пережила некоторое возрождение. Мы не видим таких же утомленных шрифтов. Скорее, стилизация и немного артистизма переосмысливают, какими могут быть ретро-шрифты.
Мы видим это слияние старого и нового на странице продвижения Spotify Carnival. Вместо того, чтобы казаться устаревшими и клише, они вдохнули новую жизнь в традиционные жирные шрифты, немного поэкспериментировав. Это хороший пример использования традиционных шрифтов и придания им классного и современного стиля, сохраняя при этом разборчивость.
На этом веб-сайте компании по организации мероприятий Goliath Entertainment чувствуется ретрофутуризм. Смелая типографика отсылает к прошлому, но при этом очень актуальна.
В 2021 году мы с нетерпением ждем более творческого переосмысления типографики.
2. Анимация прокрутки параллакса
Эффекты прокрутки параллакса были трендом в дизайне веб-сайтов в течение многих лет, и в 2021 году мы надеемся увидеть более тонкие и творческие исследования того, что можно достичь с помощью параллакса.
Помните, что слишком большое количество движений в эффектах параллакса может быть вредным для людей с вестибулярными расстройствами, потому что иллюзия глубины и движения может вызвать дезориентацию и головокружение. Вот несколько рекомендаций, которые, как мы видим, все больше дизайнеров принимают во внимание, чтобы обеспечить минимальное включение параллакса и не причинять вреда:
Не позволяйте эффектам параллакса отвлекать важную информацию
Не усложняйте пользователю выполнение важная задача
Сведите количество эффектов параллакса к минимуму
Сведите к минимуму количество параллаксов в каждом экземпляре
Ограничьте эффекты параллакса в пределах небольшой области экрана
Включите опцию для пользователей, чтобы отключить эффекты параллакса
Сайт портфолио Алисы Ли использует эффекты параллакса, которые реагируют на положение мыши, чтобы оживить ее иллюстрацию.Количество движений невелико и ограничено рамками героя. Это отличный пример использования параллакса с ограничениями и намерениями.
Не всякая параллакс-анимация должна отображать большие жесты по экрану. Мы также видели более тонкие приложения. В этом веб-дизайне для Green Meadow этот эффект можно было почти полностью упустить. Но это мягкое раскрытие текста создает достаточное сопоставление, чтобы привлечь внимание к каждому блоку текста по мере его появления.
В следующем году мы будем рады видеть, как прокрутка с параллаксом используется тонко, не для яркого эффекта, а как инструмент для выделения или выделения важных фрагментов контента.
3. Горизонтальная прокрутка
Горизонтальная прокрутка, ранее считавшаяся ошибкой веб-дизайна, возвращается.
Все больше веб-дизайнеров продолжают экспериментировать с горизонтальной прокруткой. Те, кто это делает, лучше всего ломают шаблон не ради того, чтобы отличаться, а как практический способ постепенно раскрывать вторичную информацию, как в галерее изображений.
Дизайнеры, успешно использующие горизонтальную прокрутку в 2021 году, будут иметь в виду следующие соображения:
Не заставляйте пользователей перемещаться по горизонтальному содержимому: разрешите альтернативные способы навигации, такие как кнопки со стрелками с четкими метками
Используйте четкие визуальные подсказки для указать, где контент использует горизонтальную прокрутку, и не скрывать эти подсказки за наведениями.
Подумайте о том, какой контент выиграет от отображения в горизонтальной прокрутке — фотогалерея — хороший соперник, поскольку горизонтальная прокрутка покажет пользователям небольшой предварительный просмотр, и предоставить им возможность просматривать больше или продолжать движение вниз по странице.
Избегайте необходимости горизонтальной прокрутки для текста, который необходимо прочитать.
На нашей собственной странице функций Designer мы использовали небольшую горизонтальную прокрутку для увеличения на большом изображении и покажите более релевантные фрагменты изображения в большем размере, чтобы сопровождать релевантный контент.
‍ На главной странице Momento Design Studio есть четкая подсказка рядом с основной кнопкой, которая также действует как ссылка, медленно перемещая вас к избранным работам при нажатии. Движение прокрутки идет в быстром темпе и не слишком длинное, что позволяет отображать избранные изображения.
McBride Design использует горизонтальную прокрутку для демонстрации больших фотографий своих работ, не занимая слишком много места на странице. Они также включают четкий индикатор в правом нижнем углу, который устанавливает ожидание, что страница будет прокручиваться по горизонтали.
4. 3D-визуализация повсюду
С появлением экранов с более высоким разрешением 3D-дизайн прошел долгий путь от блочных и скошенных краев Geocities. Мы наблюдаем, как высококачественные 3D-изображения органично вплетаются в веб-дизайн. Вместо того, чтобы отвлекать внимание, они улучшают общее впечатление пользователя.
Креативное агентство Sennep добавляет глубины с помощью трехмерных элементов на своем веб-сайте. Здесь приятно ощущение гармонии между всеми элементами дизайна.Это прекрасный пример того, как в более минималистичных макетах 3D может производить еще большее впечатление.
Yaya поместила свою любовь к 3D во главу угла своей домашней страницы с помощью этой причудливой и крутой анимации героя.
В приведенном ниже примере от компании Pitch, производящей программное обеспечение для презентаций, они имеют красочную компоновку, полную трехмерных форм, теней, градиентов и многослойных элементов. Эти элементы трехмерного дизайна воплощают этот дизайн в жизнь.
3D-элементы добавляют уникальности и объемности любой веб-странице.
5. Мультимедийные возможности
Поскольку большинство людей имеют доступ к более высокоскоростному Интернету, мультимедийные возможности Интернета появляются повсюду. Объединение визуальных элементов, текста, видео и аудио делает пользовательский интерфейс более удобным.
Успешные проекты в 2021 году будут использовать ограничения с мультимедийными возможностями:
Сделайте ставку на простоту, например, при сочетании движения и звука. Слишком много происходящего может отвлекать или подавлять людей с когнитивными расстройствами.
Обдуманно используйте различные форматы мультимедиа, чтобы сделать контент максимально доступным.
Включите скрытые субтитры и стенограммы для всех предварительно записанных мультимедийных файлов.
Включайте замещающий текст для изображений и сопровождайте сложные изображения более длинным описательным текстом.
Убедитесь, что весь текст написан с использованием HTML, а не отображается внутри изображений.
Избегайте автоматического воспроизведения видео или движущегося содержимого: вместо этого предоставьте четкую кнопку «воспроизведение», которая дает пользователю возможность воспроизвести и приостановить воспроизведение содержимого.
Эффективное и доступное использование мультимедиа требует учета множества факторов. Вот дополнительные ресурсы о доступности видео.
На сайте Николаса Эрреры есть элементы управления воспроизведением красивого фонового видео: оно воспроизводится при нажатии, а также может быть приостановлено. Он также включает в себя тонкую анимацию, которая показывает, насколько далеко вы находитесь в видео.
Мультимедийные возможности работают в самых разных областях. В приведенном ниже примере мы видим снимок экрана из Black Yearbook.Это краудфандинговая книга, составленная Адрейнтом Берэлом и его друзьями, чтобы показать, каково быть афроамериканским учеником, посещающим преимущественно белые школы. Полные элементы управления воспроизведением четко видны на всех видео. Красиво снятый кинематографический фильм переходит от одной сцены к другой в начале дизайна с гипнотическим саундтреком, играющим на заднем плане, что очень похоже на трейлер к фильму. За этим введением стоит страсть, и вы захотите углубиться в изучение книги и движений, стоящих за ней.
И для чего-то необычного, мы собираемся завершить этот список мультимедийных примеров с MSCHF, печально известной компанией, стоящей за множеством вирусных веб-дропов. Внешний вид MSCHF пересекает линию брутализма с почти абсурдистским дизайном, сочетающим строгую типографику, текстовые SMS-сообщения и другие элементы.
6. Опыт дополненной реальности (AR)
А с мультимедийными возможностями, давайте не будем забывать все удивительные впечатления от погружения с использованием дополненной реальности (AR).AR теперь означает больше, чем просто охота на покемонов на вашем мобильном устройстве Apple или Android. Новые технологии, такие как API WebXR и программное обеспечение от Wayfair Technologies, открыли эту сферу почти для всех.
Jeep использует дополненную реальность для страницы «Сборка и цена джипа». Для тех, кто ненавидит заходить в автосалоны, это будет легким и беззаботным опытом. Все больше веб-сайтов розничной торговли и электронной коммерции используют возможности дополненной реальности, чтобы продавать свои продукты и расширять возможности потенциальных клиентов в процессе покупки.
7. Акцент на зернистость
Жесткие решетки и плоские однотонные блоки действительно могут лишить веб-дизайн индивидуальности. Зернистая текстура придаст им более естественный вид.
На этом веб-сайте Studio Gusto мы видим красоту зернистости. Он использует элементы дизайна lo-fi для более грубого взаимодействия с пользователем, которое кажется более естественным, чем гладкое совершенство, которое является обычным явлением во многих веб-дизайнах.
8. Акцент на приглушенные цвета
Так же, как зерно может придать дизайну более естественный вид, так и приглушенные цвета могут.‍
Magic Theater Studio использует светлую цветовую палитру вместе с темными блоками зеленого цвета, что создает четкий контраст между разделами этого веб-дизайна. Эти приглушенные цвета являются идеальным фоном для нарисованного от руки текста и иллюстраций. На заднем плане есть слегка жужжащая зернистость, которая почти неразличима, и легкое искажение светлого и темного фона, что делает дизайн очень живым.
Это маркетинговое портфолио для Бобби Роу, представленное ниже, представляет собой праздник цвета и содержит информативные и забавные записи о работе, которую он выполняет.Может быть трудно создать веб-дизайн, который был бы хорошо продуман, но Бобби Роу справился с этим веб-дизайном. Есть хорошее разнообразие приглушенных цветов и более смелых.
9. Дизайн на основе предпочтений
Веб-разработка сделала большие успехи в предоставлении более персонализированного опыта. Это может быть что угодно: от переключения между темным / светлым режимом и другими способами изменения внешнего вида сайта и навигации до предложения контента, адаптированного к вашему вкусу, например, пользовательских плейлистов, созданных Spotify.
Новые методы проектирования и алгоритмы делают Интернет менее пассивным и ориентированным на пользователя. В будущем еще больше внимания будет уделяться удовлетворению потребностей, желаний и вкусов тех, кто просматривает веб-сайты.
10. Размытие по Гауссу
Размытие по Гауссу очень хорошо работает для обеспечения плавного фокуса изображений и градиентов. Этот эффект существует уже некоторое время, но дизайнеры использовали его в более заметных областях веб-дизайна.
Moment House начинает свою домашнюю страницу не с изображения героя, а с приятного гауссовского размытия цветов. Это придает атмосферу атмосферы и напрямую перекликается с фотографией городского пейзажа Лос-Анджелеса, которая следует за ней. Он идеально передает линзу золотого света и дымки, через которую просматривается Лос-Анджелес.
Мы видим размытие по Гауссу на заднем плане Monograph Communications. Это пушистое смешение красного, пурпурного и синего цветов создает приятный контраст между прямыми линиями и жирной типографикой, которая их накладывает.
Портфолио UX Я Тамара использует тот же подход, добавляя немного размытия по Гауссу на задний план.
Goodbooks объединяет похожий на пар пузырь размытия по Гауссу. Снимок экрана ниже не передает этого должного, но кажется, что он спрятан за белым экраном. Мы видим изменение и вращение формы, но никогда не видим полностью, что это такое. Это создает такой замечательный визуальный якорь и привлекает внимание к призыву к действию под ним, чтобы проверить их 12 лучших рекомендуемых книг.
Нам нравится видеть, как вещи, которые существовали вечно, например размытие по Гауссу, становятся все более популярными в руках дизайнеров, которые используют их по-новому и интересно.
11. Прокрутка
Мы заметили растущую тенденцию в том, что дизайнеры рассказывают истории через веб-интерфейс. Здесь на помощь приходит скроллтеллинг — визуальное повествование, которое усиливает сюжет и вовлекает вас в его повествование.
Лучшие применения ограничения практики скроллинга:
Сохраняйте движение в пределах небольшой площади.
Обеспечьте взаимодействие на условиях пользователя: предоставьте очевидные элементы управления воспроизведением для воспроизведения / паузы / остановки взаимодействий и движений.
Убедитесь, что любые элементы прокручиваемого повествования помогают подчеркнуть историю, а не отвлекают от важного текста.
На нашем собственном сайте истории искусства веб-дизайна используются небольшие, тонкие анимации и красивые иллюстрации, которые подтверждают рассказ о том, как история искусства влияет на веб-дизайн.
12. Темный режим
Акцентируйте внимание на показе AC DC «Снова в черном», потому что темный режим появится на всех экранах в 2021 году.Все больше дизайнеров принимают эстетику темного режима, где черный цвет обеспечивает идеальный темный фон, чтобы элементы дизайна выделялись на экране.
В приведенном ниже примере агентство Obys Agency разработало прекрасную дань уважения модельеру Питеру Линдбергу, соединив тонко текстурированный черный фон с красивым шрифтом с засечками.
Не бойтесь уйти из жизни в 2021 году с собственными дизайнерскими работами.
13. Мультяшные иллюстрации
Не так давно были времена, когда веб-сайты были просто текстом и несколькими изображениями или графикой.Веб-дизайн эволюционировал, и теперь дизайнеры создают работу, которая связывает людей на более личном уровне. Мультяшные иллюстрации приобрели популярность как способ трансформации веб-сайтов со здоровой человечностью.
Существует так много источников и художников, создающих фантастические мультяшные иллюстрации. Blush — отличная платформа для поиска пользовательских иллюстраций персонажей, таких как этот отличный набор от Виджая Верма.
Карикатуры предлагают очень многое с точки зрения творчества и делают бренд более представительным.Мы с нетерпением ждем появления в следующем году новых персонажей веб-дизайна.
14. Геометрические сетки
Сетки просты, но обладают большой гибкостью в том, как их можно интегрировать в проект. Геометрические сетки набирают популярность как способ структурировать макет, придавая ему четкий и смелый вид.
Этот дизайн от Хадсона Гэвина и Мартина использует блоки как для элементов навигации, так и для контента. По этим большим цветным квадратам интересно перемещаться, и они так хорошо работают, удерживая ваше внимание.
Геометрические сетки не должны располагаться одинаково. Flowmingo использует более асимметричную геометрическую сетку, но в основе их макета лежат квадраты и линии. Более толстые линии подчеркивают квадратные формы во всем.
И для более легкого прикосновения мы получили красивое расположение квадратов и четких линий в этой геометрической сетке для косметической компании Skin Labs.
Геометрические сетки должны быть в наборе инструментов любого веб-дизайнера, чтобы обеспечить прочную структуру и простое представление.
15. Пользовательские курсоры
Курсоры, вероятно, являются одним из наиболее недооцененных аспектов веб-дизайна, и большинство из нас довольствуется простой старой стрелкой. Когда дизайнер может взять эту незначительную часть сайта и превратить ее во что-то крутое, это настоящее достижение.
Мы только что говорили о HGM Legal и их использовании геометрических сеток, но у них также есть необычный жирный черный курсор.
Инструмент «Перо» продвигает круговой курсор на один шаг дальше, объединяя анимацию и текст, создавая почти психоделический эффект.
Или посмотрите на этот трансформирующийся круговой курсор от Büro, который меняет свой внешний вид в зависимости от того, над каким элементом дизайна он наведен.
В 2021 году мы надеемся увидеть больше оригинальных вариантов того, чем может быть курсор.
16. Карточки с прокруткой
Мы были рады видеть, что карточки с прокруткой стали неотъемлемой частью дизайна. Независимо от того, прокручиваются ли они по горизонтали или по вертикали, они добавляют быстрых действий к веб-сайту и являются отличным способом представления информации.
На этом веб-сайте Ofcina используются привлекательные цвета для прокручиваемых карточек.
Макеты карточек существуют уже довольно давно, и нам нравится видеть, как они используются в новых направлениях прокрутки.
17. Бесцветный дизайн
Редкий белый цвет создает чистый дизайн, а любые цветные элементы привлекают еще больше внимания.
В этом дизайне для латинских дизайнеров много белого пространства с эффектом наведения, который преобразует черно-белое изображение каждого дизайнера в полноцветное.
Даже что-то вроде минималистичного простого дизайна может быть интересным благодаря микровзаимодействию, анимации и другим динамическим эффектам.
User Experience Database также использует бесцветный подход к дизайну, что делает его минимальным и легким для чтения.
18. Аудио
Использование звука в качестве неотъемлемой части дизайна устраняет барьеры доступности для людей с нарушениями зрения, а также приносит пользу тем, кто предпочитает слушать большой кусок текста на веб-сайте,
The New York Times отлично справляется с предоставлением звукового сопровождения к некоторым из представленных ими статей.
Мы надеемся, что в будущем на веб-сайтах появится больше вариантов звука, которые позволят людям выбирать, как они хотят воспринимать контент.
19. Интернет, вдохновленный печатью
С цифровой техникой, которая заменила так много, что когда-то были физическими объектами, произошло возрождение старых медиа. Популярность виниловых альбомов является доказательством того, что люди хотят испытать что-то, кроме кучи нулей и единиц.
Макеты, вдохновленные печатью, удовлетворяют желание людей найти что-то в реальном мире. Макеты в стиле журналов и другие элементы традиционного графического дизайна обеспечивают связь с тактильными ощущениями от печати на бумаге.
Приведенный выше пример из Home Run Studio и приведенный ниже для Foundamour черпают вдохновение из печати, давая им знакомство и связь с публикацией.
20. Системы проектирования для единообразия
Системы проектирования мощные. Используя CMS для создания повторяемых макетов и связанных коллекций, легко обновлять или редактировать, а также быстро создавать дублирующиеся веб-сайты. Независимо от того, используются ли они в небольших масштабах или в более крупных, они полезны для любой организации при создании и управлении своими проектами.
Руководство по стилю от Saasly
Мы также видели действительно полезные приложения, разработанные, чтобы еще больше упростить рабочие процессы дизайн-системы. Zeroheight действует как централизованное пространство для управления задачами и совместной работы. Figma предлагает шаблоны, а также другие инструменты для систем дизайна. А коллекция CMS от Webflow может поддерживать дизайн-систему любого размера.
21. Отсутствие кода

Отсутствие кода не означает полное удаление кода. Программисты и разработчики всегда будут важны.Никакой кодекс не означает открытия этих областей знаний для тех, кто в противном случае был бы освобожден. Это позволяет творить любому, у кого есть идея или видение.
Без кода дизайнеры становятся фронтенд-разработчиками. Писатели становятся веб-дизайнерами. А владельцы малого бизнеса могут окунуться в мир электронной коммерции. Кем бы вы ни были, никакой код не дает вам возможности стать чем-то большим. Он убирает границу между не дизайнерами, теми, кто занимается только дизайном, и теми, кто занимается разработкой. Он объединяет людей в сотрудничестве.
Было захватывающе наблюдать за развитием новых платформ без кода, а также за разработкой курсов дизайна, которые включают в свои учебные программы учения об этом. Нам не терпится увидеть, что произойдет с отказом от кода в 2021 году.
Мы с нетерпением ждем 2021 года
Всегда интересно наблюдать, как веб-дизайн продолжает меняться и продолжает расти движение без кода.
Нам тоже не терпится увидеть, что вы собираетесь создать в новом году. Разместите свои последние работы в нашей витрине и не забудьте присоединиться к поддерживающему и растущему сообществу на нашем форуме сообщений.
С Новым годом — продолжайте проектировать!
‍
Примечание : Наш исходный пост включал доступность как тенденцию веб-дизайна, но перечисление ее как тенденции подрывает ее важность. Мы искренне приносим свои извинения и признаем вред, который мы причинили, указав доступность в Интернете как тенденцию, как и другие в этом списке. Доступность — это не мимолетный тренд в дизайне — это стандарт, к которому должна стремиться наша отрасль.

Мы также добавили некоторые рекомендации и рекомендации, которые следует учитывать при использовании этих тенденций, не причиняя вреда.Мы надеемся продолжить обучение и повышение осведомленности о специальных возможностях в Webflow и надеемся побудить наше сообщество дизайнеров сделать то же самое.
14 вдохновляющих примеров портфолио UX-дизайнеров в 2021 году
Без UX веб- и UI-дизайн был бы бесплодным пространством голых кнопок, роботизированного копирайтинга и холодных линий сетки, лишенных какой-либо человечности. Если вы UX-дизайнер, вам нужно продемонстрировать свои навыки, создав что-то, что вызывает интерес.
Прежде чем мы перейдем к портфелям, имейте в виду, что они не расположены в определенном порядке.Мы составили этот список исключительно для демонстрации отличного дизайна и контента. Если вы считаете, что ваше портфолио заслуживает того, чтобы быть в нашем следующем обзоре, не забудьте оставить комментарий ниже!
14 примеров портфолио UX-дизайнера
Хорошо, давайте проверим эти 14 портфолио UX, которые помогут вам создать свой собственный дизайн таким образом, чтобы он отражал дух вашей работы, а также ощущение того, кто вы есть.
1. Эйлин Шин
Портфолио UX продвигает ваши навыки и таланты, где бы вы ни находились в своей карьере.Эйлин Шин многого достигла за короткий промежуток времени. Независимо от того, чем она занималась в качестве стажера или в качестве дизайнера продуктов в Tumblr и Amazon, ее навыки UX демонстрируют сильное чувство юзабилити, основанное на простоте.
У каждого проекта есть хорошая рецензия, которая дает немного стратегической основы и разъясняет ее роль. Она демонстрирует свой опыт, но при этом остается скромной — две черты, которые любой клиент захочет от своего следующего UX-дизайнера.
2. Хесус Амадор

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

Портфолио Хиро Сибаты открывается главным изображением из пунктирных линий, проходящих по дуге на темном фоне веб-сайта. Это несколько абстрактное изображение, но оно напоминает карты и путешествия пользователя.
Последующий дизайн имеет логическую организацию.Крупные заголовки и лаконичное письмо сообщают о том, что он делает, легко для понимания. Даже если вы просто пролистываете страницу, все сочетается с очевидной визуальной гармонией, демонстрируя его таланты как визуального дизайнера и UX.
4. Любомир Барджич
Ваша задача как UX-дизайнера — помогать людям легко воспринимать веб-дизайн. Ваше портфолио также требует плавного потока, показывающего, что вы создаете целостный дизайн, в котором легко ориентироваться.Ваша домашняя страница должна демонстрировать ваши сильные стороны как UX-дизайнера.
Любомир Барджич точно владеет UX / UI дизайном в своем портфолио. В 4 избранных проектах, каждый из которых занимает свой цветовой блок, он дает достаточно деталей, чтобы показать все, на что он способен.
Он дает отличное понимание каждого проекта в своем собственном тексте и включает отзывы людей, с которыми он работал. Этот сопроводительный текст идет дальше, чем просто избранные проекты, и действительно показывает, кем он является как дизайнер.
5. Венди Шорр
Страница Венди Шорр открывается с лампочкой. Да, лампочка, отражающая яркость интеллекта, — распространенный мотив, но эта лампочка выходит за рамки простой стоковой фотографии. Яркость нити накала становится ярче, показывая, что Венди выделяется на фоне остальных.
Отмеченные проекты находятся в нескольких шагах от этой целевой страницы, украшенной лампочками. В каждом из них есть обширное тематическое исследование, в котором подробно описаны пользовательские исследования Венди, процесс и ранние прототипы.Если у вас есть примеры каркасов или других набросков, которые были частью визуального дизайна, не стесняйтесь включать их в свое портфолио. Все это легко могло бы стать информационной перегрузкой, но каждое тематическое исследование разбито таким образом, чтобы его было легко читать. Это еще одно отличное портфолио UX, также разработанное с помощью Webflow.
6. Михал Мацеевски

Прокрутка UX-портфолио Михала вниз показывает слова: «Я верю в дизайнерское мышление». Это сильное заявление, которое следует сделать вверху, но это заявление вводит тему, которая связывает все воедино в этом портфолио.Еще одна причина, по которой нам нравится этот дизайн: он был сделан в Webflow!
Темно-серый фон имеет легкий статический эффект, который гудит по всему дизайну. Это крошечное размытое движение делает все изображения и текст перед ним еще более четкими на контрасте. Это может быть незаметный эффект, но он настолько силен, что заставляет ваши глаза сосредоточиться на содержании перед ними. Это свидетельствует о приверженности Михала дизайнерскому мышлению не только на макроуровне, но и на микро.
Еще одна приятная часть этого одностраничного дизайна — это анимация, запускаемая при прокрутке.Одностраничные макеты могут быть довольно утомительными для навигации, если нет ничего, кроме статического текста и изображений. Эти эффекты делают посетителя активным участником, а не праздным пассажиром.
7. Паскаль Страш

Вот еще один фантастический пример использования Webflow для создания портфолио UX. Так легко придерживаться того, что практично для портфолио, и иметь только скриншоты проектов и многое другое. Но портфолио должно быть не просто галереей ваших лучших работ, а немного показать, кто вы есть как личность.
Паскаль Штраше помещает свое фото прямо вверху главной страницы. Он ведет разговорный диалог и имеет множество деталей, подтверждающих то, что он говорит. Паскаль показывает, как найти правильный баланс между личным и профессиональным.
8. KOCO

Что может быть лучше для создания сайта-портфолио, чем использование причудливого робота? Этот милый дроид появляется на заднем плане и движется вперед, слегка махнув рукой, приветствуя вас в портфолио KOCO.
Мы видим несколько избранных проектов, все с подробными объяснениями, в которых указывается проблема, которую каждый проект стремился решить, и то, как дизайн KOCO обеспечил решение. Это возвращает тон сайта к земле, давая понять, что любовь к роботам не мешает этому агентству предлагать практические решения. Мы видим ценность работы, проделанной KOCO, и то, как она помогла клиентам — важная сила для коммуникации любого портфолио UX-дизайна.
9. Даниил Новыков
UX-портфолио Даниэля Новикова — еще один пример того, как сделать громкое заявление наверху.«Я делаю это простым, но важным» — слова, которые любой клиент хотел бы услышать от дизайнера UX.
Эта философия простоты прослеживается во всем визуальном дизайне Даниэля, с цветовой палитрой черного и белого в сочетании с несколькими цветовыми пятнами. Текст набран шрифтом Poppins, практичность которого без засечек облегчает чтение.
Это чувство значительной простоты также проявляется в представленных проектах. Нас не перегружает головокружительная сетка работы.Вместо этого Дэниел демонстрирует несколько тщательно отобранных проектов с важными деталями для каждого.
Еще один замечательный пример его простой и простой в использовании дизайнерской работы — это диалоговая контактная форма. Такие нестандартные украшения значительно способствуют раскрытию ваших UX-талантов.
А знаете, что еще в этом важного и простого? Дэниел использует Webflow для его разработки.
10. Грег Кристиан
Как UX-дизайнеру полезно иметь свою нишу.Ваше портфолио UX-дизайнера должно доходить до клиентов, с которыми вы хотели бы работать больше всего. Грег Кристиан специализируется на технологиях и работал со стартапами, такими как Sea Status, трекер океанской погоды, и Acorns, мобильное инвестиционное приложение. Грег — нетрадиционный дизайнер UX, стремящийся привлечь внимание клиентов, связанных с технологиями.
И угадайте, что — это портфолио также было разработано в Webflow.
11. Райан С. Робинсон

UX-портфолио Райана С. Робинсона играет с размерностью.Вместо плоской сетки проектов он выкладывает портфолио под невидимым углом. Хотя кажется, что в наши дни все больше дизайнеров хотят экспериментировать с геометрией, вы не увидите ее во многих портфолио. Это портфолио UX-дизайнеров преуспевает в своих слоях и наложениях, избавляясь от двумерности, к которой так привязаны многие дизайнеры. Всякий раз, когда вы можете придумать способ освободиться от обычного процесса визуального дизайна, это может обогатить ваши дизайнерские навыки, расширив ваш инструментарий.
Райан также включает несколько способов связи с ним, включая ссылку на его профиль в LinkedIn, который должен быть в каждом портфолио.
12. Джейсон Стивенс

Когда мы заходим на UX-портфолио Джейсона Стивена, мы сразу же видим избранный проект. Прокручивая страницу вниз, мы узнаем, что Джейсон не только дизайнер UX, но и имеет опыт работы в сфере продаж, маркетинга и создания команд. Поговорим об упражнении в пользовательском опыте!
Это может показаться тривиальной деталью, но она заходит так далеко, чтобы показать, кто такой Джейсон. UX — это личное общение с людьми, и этот фрагмент текста делает именно это.
Из этого введения мы получаем аккуратное расположение проектов с небольшой тенью. Горизонтальная строка состояния в верхней части страницы также является приятным штрихом, помогая посетителям этого одностраничного просмотра понять, где они находятся в общем потоке.
13. Аарон Рудык

Ярко освещенный Аарон Рудик выглядит с первой страницы своего портфолио без единой пряди волос на голове. Слева от него плывет газообразное пурпурное облако. Его взгляд стоичен, но таинственный пар движется.Работа UX-дизайнера требует как серьезности, так и творческого духа. Этот образ героя передает эту двойственность. Прокрутка вниз отрывает от этого мрачного и загадочного введения к множеству ярких проектов с забавной вставной анимацией на фоновом изображении каждого проекта.
14. Whitney Martin
Когда вы путешествуете по Whitney Martin’s, вам предоставляется достаточно белого пространства и описание того, кто такая Уитни — пользовательский исследователь, рассказчик и визуальный дизайнер.
По мере прокрутки вниз вы видите различные проекты — от дизайна приложений до адаптивного веб-дизайна.В нижнем колонтитуле вы также можете получить доступ к социальным сетям Уитни, предоставляя клиентам, рекрутерам и менеджерам по найму возможность найти больше примеров их работы.
Продемонстрируйте свои таланты с портфолио UX
Если все, что у вас есть для веб-присутствия, — это профиль Linkedin, вам нужно поработать. Легко захотеть просто собрать базовое портфолио UX-дизайнера, и если вам нужно что-то быстро сделать, это лучше, чем ничего не делать в Интернете. Но позвольте вашему UX-портфолио быть продолжением вашего личного бренда, отображая ваши таланты и личность, показывая, что ваша работа и то, кем вы являетесь, выходят за рамки простой сетки проектов на скучном экране.
Если вы хотите создать звездное портфолио дизайнера UX, ознакомьтесь с нашим бесплатным 21-дневным курсом портфолио дизайна. И обязательно ознакомьтесь с нашими шаблонами портфолио или просмотрите другие примеры портфолио в Webflow Showcase!
25 уникальных веб-сайтов с эффектами параллакс-прокрутки
Цифровые экраны могут быть двухмерным пространством, но веб-дизайнеры нашли методы, позволяющие придавать своим плоским пикселям ощущение глубины и размерности. Здесь могут сыграть роль тонкие эффекты параллакса.
Эффекты прокрутки с параллаксом добавляют действие и иллюзию глубины, используя различные визуальные элементы и перемещая их с разной скоростью в дизайне веб-сайта. Некоторые могут двигаться быстрее, другие — медленнее, а некоторые могут стоять на месте.
Использование параллакса — это метод проектирования, который можно использовать для добавления разнообразия или для более практического применения, показывая кому-то что-то важное. В этом посте мы рассмотрим несколько примеров, которые помогут вам вдохновиться. Кроме того, мы покажем вам, как использовать эти концепции для создания чего-то красивого для Интернета.
Однако имейте в виду, что слишком большое количество движений в рамках эффектов параллакса может причинить вред людям с вестибулярными расстройствами. Иллюзия движения и глубины может вызвать головокружение или дезориентацию. Если вы действительно используете эти веб-сайты в качестве источника вдохновения для себя, не забудьте следовать некоторым из этих рекомендаций для создания доступных эффектов параллакса:
Сведите количество эффектов параллакса к минимуму
Ограничьте эффекты движения в пределах небольшой области экрана
Включите опции для пользователей, чтобы отключить эффекты параллакса
Не позволяйте своим эффектам отвлекать пользователей от важной информации
25 примеров веб-сайтов с параллакс-прокруткой
Мы собрали 25 примеров веб-сайтов с эффектами параллакса, которые могут вас вдохновить использовать эту тенденцию веб-дизайна в своей работе.
1. Луи Селлерс
Один из многих талантов Луи Селлерса как дальновидного дизайнера UX — его умение взаимодействовать. Здесь, в своем онлайн-портфолио, он поместил несколько классных, привлекающих внимание визуальных эффектов. Во-первых, ручка, которая открывается и возвращается вместе, когда вы продвигаетесь сверху вниз.
Затем для каждого представленного проекта есть эффекты параллакса. При наведении указателя мыши на проект контур заполняется деталями, а изображение смещается, придавая ему ощущение трехмерности.Когда изображения переднего плана перемещаются на сплошном фоне, они становятся более заметными, чем когда они остаются неподвижными.
2. Алекс Драм
Попав на главную страницу портфолио UX / UI Алекса Драма, вы встречаетесь с минималистичным набором фиолетовых треугольников и несколькими словами о том, кто такой Алекс как дизайнер. Но с помощью всего лишь крошечного движения вниз по экрану эти фигуры складываются в конфигурацию, подобную стрелам, и направляются прямо в планетарный ландшафт, который разворачивается перед ними. Использование Алексом параллаксной прокрутки приводит кого-то в путешествие, которое составляет целую плеяду его работ.
Эта трехмерная ловкость рук достигается за счет параллакса, в то время как визуальное движение происходит с разной скоростью. Нам нравится видеть параллакс, используемый в хитрых целях, и это очень сильно придает этому сайту уникальную космическую атмосферу.
3. Веб-дизайн и история искусства
Наш микросайт, посвященный веб-дизайну и истории искусства, не только проведет вас через то, как искусство эволюционировало и связано с современным веб-дизайном, но это также великолепный визуальный опыт, полный блестящей графики — вдохновленная типографикой и изобретательские параллакс-эффекты.Это не только углубленное исследование искусства и веб-дизайна, но и энциклопедия анимаций, запускаемых при прокрутке. От простой прокрутки текста до более сюрреалистических визуальных эффектов — этот фрагмент демонстрирует множество отличных примеров параллакса.
4. Балбесы
Этот замечательный дань уважения «Балбесам», очаровательному фильму 80-х годов, открывается потрясающим параллаксом, который переносит вас на знакомое скалистое побережье Орегона, где происходит действие фильма. Этот пример параллакса не требует особой сложности.Применяя разную скорость к изображениям переднего и заднего плана и немного увеличивая их, этот 3D-эффект захватывает вашу руку и ведет прямо к этому веб-дизайну.
5. OK Alpha
В прошлом мы хвалили креативное дизайнерское агентство OK Alpha за то, что они использовали очень крупную типографику и смелые цвета. Но к этому эклектичному набору цвета и текста добавляются эффекты параллакса, которые используют то, что могло бы быть длинным плоским свитком, но превращают его в динамичный опыт с движением и глубиной.
6. Dockyard Social
Ресторанам легко не тратить кучу усилий на свои веб-сайты. И мы это понимаем. То, что находится на тарелке покупателя, гораздо важнее, чем то, что отображается на экране компьютера. Но Dockyard Social, шотландский поставщик удобных блюд и напитков, выходит далеко за рамки минимума, которому уступают многие веб-сайты ресторанов. Наряду с привлекательной цветовой схемой, эффекты параллакса добавляют привлекательной, но необычной атмосферы их веб-сайту.
7.OnCorps AI
Партнеры Heco снова появятся в этом блоге, так как они хорошо разбираются в неожиданных и привлекательных направлениях визуальных эффектов. Этот веб-дизайн, который они создали для компании OnCorps, занимающейся аналитикой данных, начинается с разбросанной группы точек, которые сливаются в колоколообразную кривую, так хорошо представляя, что они делают с данными. Прокрутка вниз открывает макет, полный плавающих фигур, анимации и эффектов параллакса.
8. Jomor Design
Благодаря продуманному расположению, уникальным микровзаимодействиям и большому остроумию, это портфолио от Jomor Design показывает, что можно найти правильный баланс между дизайном и индивидуальностью.
От слегка смещающегося текста до многочисленных эффектов параллакса, затрагивающих его визуальные компоненты, все объединяется для легкого взаимодействия с пользователем. Джо также добавляет нужное количество юмора вместе со своей дизайнерской работой. Он описывает себя так: «78% моих клиентов говорят, что я гений. Остальные 22% говорят, что я сексуальный гений ». Это вместе с рядом других забавных строк делает это больше, чем просто портфолио его работ, а, скорее, репрезентацией того, кем он является.
9.Timeslot
Timeslot представляет собой интересную платформу для социальных сетей. Они хотят, чтобы люди делились своими календарями о том, чем они занимаются, и общались со своими друзьями, чтобы строить планы на будущее. Они сосредоточены на том, как технологии могут объединять людей для обмена опытом, вместо того, чтобы сидеть пассивно.
Timeslot использует горизонтальный параллакс, чтобы помочь пользователям рассказать историю того, как их приложение работает. Вверху страницы мы видим многоуровневую стопку фотографий людей.Когда вы прокручиваете страницу вниз, эти люди собираются вместе и выводятся на экран смартфона. Это яркое визуальное представление представляет собой фантастическую метафору того, что их приложение нацелено на объединение людей.
10. Weglot
Webflow позволяет любому быть дизайнером без каких-либо визуальных платформ кода, предоставляющих инструменты для создания перед вами — без программирования. Weglot еще больше расширяет возможности Webflow, позволяя дизайнерам создавать многоязычные сайты, не зная другого языка.Это дает вам возможность преодолеть языковой барьер и создавать дизайн для клиентов по всему миру.
Веб-сайт Weglot открывается с раздвинутого земного шара. Прокрутка вниз объединяет эти части. Этот символизм того, как их программное обеспечение может привлекать иностранных клиентов, которое в противном случае было бы недостижимо, отражает суть того, что делает их программное обеспечение.
Эффекты параллакса могут работать для тонких сдвигов в дизайне или там, где вы хотите оказать большее влияние, как то, что делает Веглот в этой анимации отключенного мира.
11. STEEZY Studio
STEEZY Studio хочет, чтобы вы выполняли свои ежедневные упражнения, выполняя некоторые движения. Они предлагают видеокурсы по танцам, которые больше, чем просто воспроизведение видео. Они позволяют вам выбирать разные углы, петли движения и варианты для более глубокого изучения танцев.
В дизайне используется пара эффектов параллакса, но наиболее привлекательным является эффект в стиле аккордеона, представленный ниже. Они выкладывают классы определенного танцевального курса на угловой плоскости.Это не только интереснее горизонтальной сетки скриншотов, но и экономит место.
12. neueform
neueform — это веб-пространство lo-fi, гипнотической электронной музыки Андреса Жассо, вдохновленной R&B. У него есть не только навыки продюсера, но и дизайнера, и это видно. Он создал минималистичный, почти бруталистский черно-белый музыкальный веб-сайт для демонстрации своих песен. В самом верху есть бросающийся в глаза параллакс, который касается цилиндрической сетки.Это небольшой эффект, но он действительно заставляет фигуру выпрыгивать из экрана. Это еще один пример того, что с эффектами параллакса не нужно переусердствовать, но даже крошечные движения могут так много добавить к дизайну.
13. Avenir Creative
Avenir Creative является второй записью в этом списке от Heco Partners. В то время как их другой дизайн в этом блоге для On Corps имеет игристую геометрию, их работа для дизайнерского агентства Avenir Creative использует более угловатый подход. Наряду с этой искаженной геометрией существует ряд эффектов параллакса, которые добавляют эксцентричности и уникальности сайту этого агентства.
14. Terusama
Terusama, платформа управления цепочкой поставок, использует параллакс на параде смартфонов и снимках экрана, которые занимают правую часть их дизайна. Это эффект, который, возможно, не заметят даже не дизайнеры, но мы, безусловно, заметили его. Изменяя скорость этих визуальных эффектов, создается хороший разрыв в согласованности.
15. Центр города Бентонвилл
Собираетесь ли вы провести какое-то время в Бентонвилле, штат Арканзас? Если нет, вам следует — на этой странице показано, что там происходит много удивительных вещей (козья йога, кто-нибудь?).
Здесь много контента, но есть несколько эффектов срабатывания прокрутки, которые смешивают вещи, в том числе параллакс, который упрощает взаимодействие с пользователем.
16. UDX Bike
UDX Bike предлагает электрические велосипеды BMX, которые выглядят так, как будто они способны на серьезные действия.
На фотографии продукта запечатлены детали и суровая красота этих велосипедов, каждый из которых расположен под углом на монохроматическом фоне. Этого было бы достаточно, чтобы эти велосипеды BMX выделялись, но параллакс подталкивает их еще больше, требуя, чтобы вы обратили внимание.
17. Agency In The Wild
Agency In The Wild сочетает в себе негабаритный текст и гладкую анимацию с запуском прокрутки для звездного веб-сайта агентства. Есть новый запускаемый пользователем параллакс в виде сдвигающегося символа сложения в сочетании со списком тех, с кем они работали. Некоторые из лучших эффектов не служат практической цели, но выделяют дизайн.
18. Superlab
Веб-сайт агентства Superlab с яркими геометрическими формами, увлекательной анимацией и оптимистичной эстетикой не лишен креативности.Параллакс применяется к каждому избранному проекту, придавая каждому небольшой толчок, создавая контраст со статическими элементами дизайна.
19. Custom Web
Итак, нам нечего говорить о том, что представляет собой этот дизайн Webflow для приложения, но стоит упомянуть то, что здесь с точки зрения параллакса. Каждый раздел этого макета имеет анимированный эффект, оживляющий пространство движением. Повсюду присутствует обильное добавление параллакса, что придает ему столь необходимую глубину и размерность.
20. Vectary
Vectary предлагает платформу для создания изображений AR и 3D. С их программным обеспечением возможно все, от героев мультфильмов до фотореалистичных представлений продуктов. Этот макет занимает много 3D-графики. Но наряду с этим они добавляют несколько эффектов параллакса, показанных ниже, — еще больше добавляя энергии этому дизайну.
21. Creative South
Creative South, конференция по дизайну в Колумбусе, Джорджия, организует мероприятие с впечатляющим списком докладчиков и семинарами для творческих людей.И этот веб-сайт с его причудливыми иллюстрациями и органическими текстурами передает дух конференции. При прокрутке можно увидеть несколько эффектов параллакса, перемещающих элементы красочного ландшафта, составляющего этот дизайн.
22. Digital Bake
Если вы дизайнер Webflow и не пробовали использовать библиотеку крутых и практичных элементов Webflow Аарона Грива на Digital Bake, вам стоит это сделать. Этот изобретательный и плавный макет, полный совершенства параллакса, дает вам еще один повод зайти и проверить все, что он может предложить.
Вы можете бесплатно клонировать его с множеством интересных форм и местом для вашего собственного контента. Вы даже можете изменить цвета и настроить их по своему усмотрению.
23. IX2
Эффекты параллакса являются частью Interactions 2.0. Это естественное развитие веб-дизайна, в котором действия пользователя определяют путь через прокрутку и микровзаимодействия. В этом руководстве рассматривается, как далеко зашли взаимодействия сегодня, с использованием ряда интересных эффектов параллакса.
24. Parallax
Хорошо, это правильно в названии. Но этот пример, который можно бесплатно клонировать, является примером из учебника. Со сменяющимися слоями звезд и туманными горами это дает вам простой урок, как собрать что-то подобное самостоятельно.
25. Голландское золото
Это еще один проект параллакс-скроллинга от Webflow Showcase, созданный очень плодовитым Нельсоном Абалосом-младшим. Здесь использована тема шахты «Затерянный голландец», представленная слоями 8-битных визуальных эффектов.Нам нравится дурацкое чувство экспериментирования, и это еще один дизайн Webflow, который вы можете бесплатно клонировать и разбирать, как он был собран.
Начало работы с собственными проектами параллакс-прокрутки

Мы, конечно, рассмотрели много разных стилей эффектов параллакса, но есть гораздо больше возможностей. Мы знаем, что вы, вероятно, задаетесь вопросом, как начать использовать их в своих проектах.
Если вы еще не посещали наш университет Webflow, у нас есть полный курс по взаимодействиям и анимации, который показывает вам, как создать параллаксное движение при прокрутке.Вместо того, чтобы писать HTML, CSS и JavaScript, вы можете использовать Webflow для визуальной разработки эффектов параллакса без кода.
Вы также можете посмотреть это видео, чтобы получить представление о том, что вы найдете в курсе:

Если у вас есть какие-либо вопросы, не стесняйтесь оставлять комментарии ниже или размещать их в нашем дискуссионном форуме — есть сообщество дизайнеров Webflow, готовых помочь.
Руководство для начинающих по скроллтеллингу
Скроллтеллинг превращает длинный рассказ в интерактивный опыт.Аудиовизуальный контент добавляет более глубокий смысл, передавая то, что нельзя передать одними словами. Скроллинг раскрывает детали рассказа в увлекательной форме, чтобы люди читали. Он использует то, что есть в сети, чтобы рассказывать интересные истории.
Прокрутка: когда вы хотите рассказать историю, богатую деталями.
Прокрутка особенно хорошо подходит для рассказов с четкой хронологией. По мере развития событий вы можете использовать дизайн, чтобы оживить «кто» и «что».Скроллинг можно рассматривать как визуальное повествование, которое подчеркивает историю и вовлекает вас в ее повествование. Заимствование из одностраничных макетов и макетов целевой страницы заставляет детали танцевать и заставляет вас прокручивать страницу дальше.
Мы собрали несколько лучших примеров скроллтеллинга и ресурсов, которые помогут вам создать свои собственные.
Snow Fall: The Avalanche at Tunnel Creek
Snow Fall: The Avalanche at Tunnel Creek — это шедевр скроллинга. Это душераздирающая история о вашингтонской лавине 2012 года.Каждая часть этой истории имеет отдельную страницу, разбитую на управляемые блоки.
Это увлекательное чтение с сопутствующими аудио- и визуальными средствами массовой информации, чтобы предложить гораздо более широкую картину того, что произошло в тот трагический день. Мы не только читаем истории участников, но и узнаем о местности и погодных условиях, которые привели к этой лавине.
Это мультимедийный подход к повествованию, который раскрывает, что пошло не так и что подталкивает искателей острых ощущений к преодолению нетронутого порошка, несмотря на его опасности.
Миллениалы облажались
Ладно, поколение Икс. Я знаю, что мы все подшучивали над миллениалами — тосты с авокадо, коачелла и слово «буквально» — все это делает их легким кормом. Но это поколение действительно сталкивается с серьезными проблемами. «Миллениалы облажались» показывает нам мир глазами этой более молодой демографической группы, чтобы получить четкое представление о том, с чем они борются.
История, рассказанная самим миллениалом, сочетает в себе юмор и конкретную информацию о финансовых трудностях, с которыми они сталкиваются.Здесь много юмора в сочетании с отрезвляющими реалиями этого поколения.
История рассказывается с помощью ностальгической анимации из видеоигр, пиксельной графики и других дурацких визуальных эффектов. Он отражает причудливые чувства миллениалов, оставаясь доступным для тех, кто сбит с толку мемами Губки Боба Квадратных Штанов.
Невозможно не проявить больше сострадания к миллениалам после прочтения этого эссе. Это хороший пример использования умного и интересного веб-дизайна для привлечения более широкой аудитории.
UTC всем хватит … да?
Для большинства из нас тема универсальных временных кодов (UTC) не является особенно интересной темой. Но Зак Холман создал веб-сайт, объясняющий, как они работают, и объясняет сложности программирования с ними. На его сайте много остроумия и иногда творчески используется ненормативная лексика.
Есть приятные сдвиги в цвете и монохромный фон видео, которые разбивают контент. Это необычно, но не отталкивает. Завораживающее столкновение цветов привлекает ваше внимание и заставляет задуматься о том, какие потрясающие визуальные эффекты будут следующими.
Любой, кто читал какие-либо статьи по техническому программированию, вероятно, уснул. Это эссе доказывает, что творческий подход и отличное повествование могут воплотить в жизнь даже самые сухие темы. Для тех, кто не интересуется программированием, информация о времени — увлекательное чтение.
Веб-дизайн и история искусства
Прокрутка нашего собственного веб-дизайна и истории искусства похожа на времяпрепровождение в музее. Каждый раздел похож на филиал галереи, кураторские работы демонстрируют широту данного направления в искусстве.Здесь объясняется эволюция искусства.
Поскольку веб-дизайн и изобразительное искусство имеют общий язык, знакомство с историей искусства может вдохновить и наполнить вашу собственную работу. Мы сделали все возможное, чтобы написать информативный контент, включая красивые визуальные эффекты и анимацию. Если вы интересуетесь искусством и дизайном, это эссе станет отличным учебником для начинающих.
The History of the Web: Interactions 2.0
Scrollytelling выходит за рамки традиционного повествования и использует хороший веб-дизайн для творчества.
Наш Введение в Interactions 2.0 проведет вас от истоков Интернета до «100% визуального способа создания анимации и взаимодействия для Интернета, раздвигающего границы того, что можно создать без кода». На сайте так много восхитительных дерзких ссылок на Geocities. О, как далеко мы зашли!
Время в перспективе
Прокрутка — идеальный способ рассказать линейную историю — а что может быть более линейным, чем движение времени? От 24 часов до конца вселенной анимация, запускаемая прокруткой в режиме «Время в перспективе», растягивает временную шкалу, показывает вехи и показывает, как каждая эпоха вписывается в историю.Это отличный пример использования веб-дизайна не только для маркетинга. Дизайн — мощный инструмент инновационного обучения.
Если бы Луна была только 1 пикселем
Если бы Луна была только 1 пикселем, это горизонтальный свиток, который уносит вас через бескрайние просторы Вселенной. Джош Уорт создал сайт после того, как изо всех сил пытался объяснить своей дочери, сколько времени потребуется, чтобы добраться до Марса, задаваясь вопросом, может ли он использовать экран компьютера для картографирования космоса. Сайт прекрасно справляется с задачей сосредоточить внимание на пустоте космоса, помогая нам понять, насколько далеко простирается наша Вселенная.Джош использовал один пиксель для изображения Луны и показал все, что с ней связано.
Этот проект — еще один блестящий пример того, как хороший дизайн может сделать обучение увлекательным.
Слежение за Исламским государством
На нашем пути появляется так много новостей. А с такой массой информации может быть трудно оставаться в курсе. Трекер Исламского государства от Washington Post показывает историю и текущие события Исламского государства.
В правой части экрана прокручивается временная шкала историй, а карта в левой части экрана показывает, где они произошли.Щелкнув точки на карте, вы попадете в конкретную историю этого места. Сопоставление местоположения с каждым событием дает более глубокую картину каждого региона.
Али Вонг Структура стендап-комедии
Марк Твен, возможно, сказал знаменитую фразу: «Объяснение юмора очень похоже на рассечение лягушки, вы многому научитесь в процессе, но в конце концов убьете ее». Но, к сожалению, старый Сэмюэл Клеменс не смог увидеть цифровую эпоху.
Ранее мы говорили о том, как скроллтеллинг можно использовать для историй, имеющих четкую временную шкалу.Комедийный спектакль — это повествование, в котором темп и развитие событий имеют такое же значение, как и настоящие шутки.
Али Вонг «Структура стендап-комедии» — это анализ недавнего специального комедийного сериала Али Вонга «Малышка Кобра». Он анализируется момент за моментом, шутка за шуткой, чтобы показать, где больше всего смеются. Это увлекательное исследование того, как тайминг и установка являются ключевыми для создания эффективных изюминок, и дает нам представление о том, что делает Али Вонга таким блестящим писателем и исполнителем.
Инструменты прокрутки
Мы увидели, как можно использовать скроллтеллинг для рассказа разных типов историй, а также некоторые из практик проектирования, которые они включают.Чтобы помочь вам начать собственное скролл-повествование, мы собрали несколько инструментов, которые помогут вам. Webflow — идеальный выбор для вашей дизайнерской работы, если вы хотите опробовать его, пока вы работаете.
Параллаксное движение при прокрутке
Элементы, которые перемещаются с разной скоростью при прокрутке, позволяют создать иллюзию глубины. Параллакс — это простой эффект для создания трехмерности и движения в вашей истории, побуждая людей продолжать движение.
Мы использовали прокрутку с параллаксом для этих геометрических фигур в статье «Веб-дизайн и история искусства.”
Ознакомьтесь с этим руководством по параллаксу, чтобы начать работу самостоятельно.
Индикатор выполнения прокрутки
Использование полосы прокрутки в вашем дизайне — это способ показать людям, где они находятся, и продолжать двигать их вперед. Этот синий индикатор выполнения остается привязанным к верхней части страницы с плавной анимацией, которая растягивается от 0 до 100% макета. Это добавляет движения дизайну и улучшает навигацию.
Ознакомьтесь с нашим руководством по прокрутке, чтобы узнать, как создать свою, всего за несколько шагов.
Показывать элементы на свитке
Когда в дизайне слишком много статического содержимого, его чтение может быть утомительным. Благодаря скроллтеллингу, при котором рассказываются длинные истории, анимация предлагает приятный отдых от текста и фотографий. Исчезновение визуальных элементов добавляет всплеск движения.
Эффект можно применить к тексту или визуальным элементам. Мы используем этот эффект в нашем архиве графического дизайна, сигнализируя о начале нового блока контента.
Следует ли раскрывать элементы в своей собственной дизайнерской работе? Определенно! Ознакомьтесь с нашим руководством, чтобы узнать, как это сделать.
Горизонтальное перемещение при прокрутке
Когда у вас есть элемент дизайна, который простаивает на странице, например, заголовок, почему бы не придать ему немного пика? Горизонтальное движение пробуждает эти сонные элементы дизайна и придает им смысл. Возьмите приведенный выше пример из нашего руководства. Горизонтальное движение сигнализирует о начале истории и делает «Пойдем на улицу» более эффектным.
Это легко сделать — ознакомьтесь с нашим руководством по созданию собственного эффекта горизонтального движения.
Горизонтальная прокрутка
Горизонтальная прокрутка может быть приятным изменением. Он привлекает внимание к вашему контенту и освобождает от типичного вертикального макета.
Proud and Torn, веб-сайт, посвященный истории Венгрии, использует горизонтальную прокрутку, чтобы выделить различные эпохи, которые он охватывает.
И вернемся к нашему собственному арт-веб-дизайну и истории искусства, о которых говорилось ранее — мы используем горизонтальную прокрутку как еще один способ поддерживать активность и заинтересованность людей.
Наш учебник по горизонтальной прокрутке поможет вам начать использовать ее в собственном дизайне.
Прикрепление позиции
Это руководство по созданию эффекта прилипания положения можно найти на сайте Pudding, на том же сайте, на котором была создана комедия Али Вонга. Прикрепление позиции берет элемент и временно размещает его в дизайне, привлекая к нему внимание. После небольшой прокрутки он снимается со своего места. Мы поклонники руководств, в которых процесс раскрывается в простой и понятной форме. И все это делается с помощью прокрутки.
Создание закрепленной боковой панели
Хорошо, мы только что говорили о закреплении позиции.Но как насчет создания липкой боковой панели?
После небольшой прокрутки боковая панель занимает заданное положение. Вы можете использовать его для навигации к другим частям истории или к другим частям веб-сайта.
Превратить боковую панель в липкую боковую панель не так уж сложно. Взгляните на это краткое руководство, чтобы добавить возможности липкой боковой панели в свои собственные проекты.
Веб-дизайн позволяет рассказывать истории более творчески.
Сеть изменила повествование.Благодаря анимации, визуальным эффектам и интерактивности чтение истории больше не должно быть пассивным. Скроллинг — это мультимедийный опыт, побуждающий к более глубоким размышлениям и пониманию. Он освещает то, что нельзя передать одними словами, и делает читателя активным участником.
Хотите рассказать свою историю с помощью прокрутки? Мы будем рады услышать об этом в комментариях.
10 тенденций современного веб-дизайна, которые вдохновят вашу стратегию на 2021 год
Веб-дизайн составляет почти 95% первого впечатления посетителей о вашем бизнесе, а отличный дизайн может помочь вам улучшить показатели продаж.
Вот почему как никогда важно включить современный веб-дизайн в вашу маркетинговую стратегию.
Но какие современные тенденции веб-дизайна появятся на горизонте в 2021 году, и как вы можете использовать их, чтобы освежить свой сайт?
Просто продолжайте читать, чтобы узнать о 10 современных тенденциях веб-дизайна, которые вы можете украсть для вдохновения в этом году!
Вам нужно больше вдохновения для современного веб-дизайна и цифрового маркетинга? Подпишитесь на одну из наших информационных бюллетеней по электронной почте!
Мы создали более 1000 красивых, функциональных веб-сайтов, которые помогают клиентам улучшить посещаемость своих сайтов в среднем на 23%.Мы можем сделать то же самое для вас.
Получите БЕСПЛАТНУЮ цитату
1. Пустое пространство
Современный дизайн веб-сайтов возвращается к минимализму с целенаправленным белым пространством, как в печатных журналах.
Подобно естественным течениям, белое пространство помогает перемещать посетителей по страницам вашего сайта, переходя от одного элемента к другому, и создает визуальную иерархию, в которой ни один элемент не отвлекает от целого.
Белое пространство комнаты для дыхания позволяет глазам отдыхать.Он также помогает пониманию, определяя отношения между элементами страницы.
Когда два элемента расположены близко друг к другу с небольшим промежутком между ними, человеческий глаз будет рассматривать их как одно целое. С другой стороны, если два элемента находятся дальше друг от друга, ваши глаза будут рассматривать их по отдельности.
Белое пространство позволяет посетителям определить иерархию вашего сайта. И они используют пустое пространство для поиска наиболее важной информации на страницах, поэтому знание того, как использовать пустое пространство на вашем веб-сайте, поможет улучшить пользовательский интерфейс (UX) вашего сайта.
Пример: Взгляните на пустое пространство в цифровом портфолио Майлза Нгуена как веб-дизайнера и дизайнера взаимодействия.
Видите, как это ведет вас прямо ко всем важным моментам? Количество белого пространства, которое он оставляет в своем современном дизайне сайта, позволяет вашим глазам путешествовать с комфортом, давая вам много мест для отдыха.
Этот пример современного веб-дизайна переопределяет минимализм с продуманным использованием белого пространства.
2. Полностраничные заголовки
Полностраничные заголовки — это путь к современному веб-дизайну в 2021 году.
Веб-дизайнеры могут реализовывать варианты заголовков, но популярная установка включает добавление основного текста или кнопок призыва к действию (CTA) слева от заголовка с привлекательными изображениями справа.
Это связано с тем, что читатели, как правило, сосредотачивают большую часть своего внимания на верхнем левом углу вашей страницы.
Пример: Веб-сайт Discord, на котором есть приложение для голосового и текстового чата для геймеров, является хорошим примером.
Discord показывает забавное и причудливое изображение справа от заголовка, а слева подчеркивает преимущества их платных услуг.Их кнопки с призывом к действию четко обозначены и точно сообщают зрителям, что им нужно сделать, чтобы получить дополнительные впечатления.
Прокрутив вниз, вы обнаружите, что Discord группирует элементы сайта в карточки, делая их информацию понятной, легкой для поиска и удобочитаемой, сохраняя при этом забавный элемент. Вы можете видеть, как такие веб-сайты создают ощущение игривой изысканности.
3. Игривые курсоры
Современные веб-сайты часто имеют курсоры, которые делают просмотр страниц новым.
Реализация игровых курсоров на вашем сайте в 2021 году может быть столь же простой, как изменение формы курсора, или столь же сложной, как кодирование анимации, запускаемой курсором. В любом случае ваши посетители отлично проведут время, используя уникальные курсоры.
Пример: Паоло Форнасье установил потрясающий курсор в своем онлайн-портфолио. Курсор отображает разные фотографии с волнистой анимацией и звуком фортепиано при прокрутке вертикально выровненного текста в меню навигации.
Благодаря игривости анимации пользователи легко проводят пару минут, перемещая курсор по меню навигации.
Ваш курсор не должен быть таким сложным, как этот, но добавление уникального элемента к курсору обязательно добавит изюминки вашему сайту.
4. Динамическая прокрутка
Динамическая прокрутка — еще одна тенденция современного веб-дизайна на 2021 год.
Одна версия динамической прокрутки устанавливает разные скорости прокрутки для переднего и заднего планов вашего сайта, чтобы дать посетителям трехмерный эффект.
Пример: Взгляните на сайт Crypton, чтобы увидеть, насколько забавна динамическая прокрутка делает сайт.
Фоновое видео также можно включить в динамическую прокрутку, при которой видео воспроизводится только при прокрутке пользователя, а с помощью динамической прокрутки вы можете запускать анимацию и делать ваши изображения похожими на волшебство.
5. Пользовательские иллюстрации
Иллюстрации вдохнут жизнь в ваш бренд и веб-сайт.
Что касается иллюстраций, современный веб-дизайн 2021 года черпает вдохновение из печатных изданий и других традиционных художественных форматов.
Прошли те времена, когда в 2021 году веб-сайты использовали стандартные изображения в своем современном веб-дизайне.
Пример: Взгляните, например, на искусство известного иллюстратора Алисы Ли. Она разработала индивидуальные иллюстрации для популярных брендов, таких как Macy’s и The Washington Post.
Ее искусство помогло вызвать растущую тенденцию к созданию пользовательских иллюстраций для брендов, которые выглядят так, как будто они вышли прямо из сборника рассказов.
Благодаря расширенным возможностям кодирования, иллюстрации продолжают развиваться, выходя за рамки двухмерного дизайна.
Даже сейчас цифровой дизайн притягивает трехмерные иллюзии, которые добавляют еще один уровень глубины Интернету.
Например:
Медленное изменение одного цвета на другой с градиентной заливкой
Стили цифрового вырезания, имитирующие рисунки, вырезанные из слоев бумаги
Взаимодействие с 3D-курсором, с которым пользователи не могут не взаимодействовать на вашем сайте
Вам также может понравиться: 10 статистических данных о веб-сайтах, которые нужно знать
6.Сетка конструкция
Современные веб-дизайнеры продолжат играть с сетками в 2021 году — и асимметричный макет, вероятно, станет еще более популярным.
Пример: Интернет-портфолио Jingqi Fan показывает, насколько функциональным может быть асимметричный макет. На его сайте много белого пространства и минималистский стиль, подчеркивающий его проектные изображения, в то время как асимметричный дизайн делает его сайт свежим, захватывающим и увлекательным.
Многие ведущие дизайнеры используют CSS Grid Layout, чтобы перенести все возможности макета печати в Интернет.
Также известный как Grid, CSS Grid Layout — это система макета 2D-сетки для Cascading Styles Sheet, языка кодирования, который описывает макет страницы сайта HTML. Сетка позволяет веб-дизайнерам более легко и последовательно создавать макеты для сложного адаптивного веб-дизайна в разных браузерах.
CSS-сетке
еще предстоит пройти путь, прежде чем она станет совместимой со всеми интерфейсами, но она продолжает набирать обороты как основная тенденция веб-дизайна в 2021 году.
7. Цветовые тенденции в 2021 году
В современном веб-дизайне используются цветовые палитры, и каждый год в Интернете появляется новый популярный цвет.В 2019 году он был синим, а в 2020 — мятным. На 2021 год компания по прогнозированию трендов WGSN и Coloro имени A.I. Aqua, оттенок синего, вдохновленный технологиями, будет их цветом года в 2021 году.
В целом Venngage прогнозирует, что к 2021 году онлайн-цветовые палитры станут более приглушенными.
Градиенты — это тенденция, продолжающаяся с 2020 по 2021 год, и дизайнеры, вероятно, продолжат изучать глубины, на которые они могут подойти к дизайну с помощью градиентов. А поскольку градиенты охватывают диапазон цветов, они идеально подходят для целевой аудитории.
Психология цвета также будет играть важную роль в тенденциях веб-дизайна на 2021 год. Прежде чем создавать новую цветовую палитру для своей компании, обязательно изучите психологию цвета. Важно, чтобы ваши цвета соответствовали вашему бренду.
Некоторые небольшие тенденции веб-дизайна в цветовой гамме, вероятно, сохранятся с 2020 по 2021 год. Похоже, что:
Мягкие, холодные цвета (синий, бирюзовый и серый) = Информация и фон
Смелые, теплые цвета (красные, оранжевые, даже зеленые) = призывы к действию (CTA)
Пример: Посетите веб-сайт Trello, чтобы найти программное обеспечение для совместной работы над проектами и организации.
Этот веб-сайт является отличным примером объединения приглушенных цветовых палитр и градиентов в гладкий иллюстративный дизайн. Они даже выделяют свой призыв к действию ярким цветом!
8. Жирный шрифт
В 2021 году современный веб-дизайн будет играть со шрифтами еще больше. Шрифты с засечками и шрифтами с засечками так же популярны, как и прежде, а винтажный шрифт неожиданно возвращается в брендинг.
Обведенный шрифт и жирный шрифт также показывают свои лица во многих местах — от названий брендов до заголовков целевых страниц, где наиболее заметной тенденцией является преобладание текста на экране.
Пример: Посмотрите, как Startup Lab использует выделение изображений жирным шрифтом. Они придают сайту смелый, объемный вид, но при этом выглядят профессионально.
Весело, правда?
Смотрите также, как они добавили трафаретные буквы в название своего бренда? Он демонстрирует немного шероховатый эффект, который приятно контрастирует с розовой жевательной резинкой на странице. Смелый выбор, но им это удалось.
Убедитесь, что выбранный шрифт соответствует вашему бренду, вашей аудитории и целям, которые вы ставите перед своей компанией.
Не забудьте также выбрать удобный для чтения шрифт для основного текста любого контента, который у вас есть на вашем сайте. Читаемость текста — один из важнейших факторов улучшения UX вашего сайта. Простой и скромный шрифт без засечек, такой как Arial, — отличный выбор.
9. Повышенное внимание к UX / UI
Современные тенденции веб-дизайна ориентированы на людей в 2020 году, и это станет еще более важным в 2021 году.
UX вашего сайта должен быть плавным, бесперебойным и интересным к 2021 году.Это означает:
Веб-дизайнеры сочетают функциональность с творчеством, чтобы создать отличный UX, опираясь на чистый дизайн, оставаясь при этом креативным и уникальным во всех смыслах. Лучшие веб-дизайнеры вносят немного неопрятности в белый, стерильный мир технологий.
Вместе с UX пользовательский интерфейс вашего сайта должен быть интуитивно понятным в 2021 году. Это означает:
Голосовые интерфейсы
Подписи к изображениям
Транскрипция видео
Без отвлекающих элементов
Конструкция со сбалансированным движением
Повысьте уровень UX / UI вашего сайта с помощью:
Предоставление посетителям удобного для чтения контента и простых в использовании интерфейсов
Покоряют эстетическое пристрастие к сладкому
Также важно отметить, что в 2021 году количество пользователей мобильного серфинга увеличится по сравнению с2020. Более 50% интернет-трафика поступает с мобильных устройств, и ожидается, что это число будет расти.
Чтобы веб-сайт имел успешный современный веб-дизайн в 2021 году, все его элементы должны безупречно переводиться как на настольные, так и на мобильные устройства. Мобильная адаптивная анимация и видеосъемка будут приобретать все большее значение в современном веб-дизайне.
Пример: Взгляните на элегантный мобильный дизайн Чобани.
Chobani предоставляет мобильным пользователям элегантный, полностью адаптивный дизайн, который полностью использует пустое пространство.Их содержание легко сканировать с помощью привлекательных, аппетитных изображений их продуктов.
С помощью простого баннера с призывом к действию в нижней части экрана, Chobani точно знает, как привлечь свою мобильную аудиторию.
10. Эффектные, увлекательные истории
Наконец, современные веб-сайты в 2021 году смогут рассказывать истории.
Чтобы ваш сайт превратился в настоящий современный веб-сайт, научитесь рассказывать убедительные истории в своих контентных и рекламных кампаниях.
Благодаря классному дизайну и интересной истории ваш сайт обязательно привлечет внимание вашей целевой аудитории.
Пример: Веб-сайт бренда устойчивых продуктов питания Zume — хороший пример использования вашего веб-сайта для рассказа историй.
Зуме обнаружил проблему, решил ее исправить, и они рассказывают миру, как они это делают, делая приготовление пищи более эффективным, по отдельности.
Сайт чистый, его можно сканировать, на нем много изображений и инфографики, а также очень интересное видео, объясняющее, кто они и их цель.
Чтобы получить еще больше советов по цифровому маркетингу, подпишитесь на электронную почту, которой доверяют более
190 000 других маркетологов: Revenue Weekly. Зарегистрироваться Сегодня!
Хотите вдохновения для более современного веб-дизайна?
Вот некоторые из наших любимых примеров современного дизайна веб-сайтов, которые могут вас вдохновить.
Хотите помочь превратить ваш сайт в современный веб-дизайн в 2021 году? У нас есть отмеченное наградами портфолио веб-дизайнов, и мы разработали веб-сайты для более чем 1000 компаний!
Позвоните нам по телефону 888-601-5359 или свяжитесь с нами через Интернет, чтобы узнать, как наши услуги веб-дизайна могут превратить вас в гуру современного веб-дизайна!
15 лучших тенденций веб-дизайна в 2021 году и современные примеры веб-сайтов
Наступил Новый год, и мы изучаем будущие тенденции веб-дизайна на 2021 год.Найдите минутку, чтобы подумать о веб-сайтах, которые вы просматривали за последние несколько месяцев. Вероятно, есть несколько, которые запомнились вам благодаря их удобному интерфейсу и привлекательной компоновке. То же самое и с веб-сайтами с ужасным пользовательским интерфейсом — они остаются с вами и могут даже вызвать у вас негативное отношение к бренду.
Собрав современные примеры веб-сайтов и проведя собственное исследование UX, мы начали искать закономерности. В сегодняшнем обширном и насыщенном онлайн-мире потрясающий пользовательский интерфейс и креативный веб-дизайн — это не просто приятные дополнения, они ожидаемы и необходимы для успеха веб-сайта.
Мы нашли время, чтобы выделить тенденции дизайна веб-сайтов 2021 года, которые окажут большое влияние на онлайн-мир. Важно выделить квалифицированные дизайнерские работы, которые привлекли наше внимание, и мы включили несколько примеров, созданных нашей собственной отмеченной наградами командой веб-дизайнеров. Следите за тем, как мы делимся вдохновением для веб-дизайна и предлагаем идеи о новых тенденциях в дизайне веб-сайтов в 2021 году.
1. Встроенные видео для привлечения домашних страниц в 2021 году
Использование видео на главной странице вашего веб-сайта — одна из лучших тенденций веб-дизайна на 2021 год.Веб-дизайнеры и разработчики Blue Compass использовали встроенные видео при создании новой домашней страницы McAninch. Эти видеоклипы демонстрируют сотрудников, оборудование и проекты McAninch и дают вам представление о том, как может выглядеть обычный день. Когда пользователи посещают веб-сайт McAninch, видеоролики привлекают их внимание и помогают им понять бренд McAninch, прежде чем они продолжат прокрутку страницы. Мы рекомендуем использовать видео на своей домашней странице, если вы создаете новый веб-сайт в 2021 году.
2.Современный минимализм: вдохновение для простого веб-дизайна
Современный дизайн не только эстетически приятен на вид, но и многие современные веб-сайты предлагают простой и оптимизированный пользовательский интерфейс. Эта клининговая компания из Нью-Йорка Oboosho имеет очень минималистичный дизайн, демонстрирующий их веселый, игривый бренд. Здесь нет ярких функций, которые отвлекали бы посетителей от достижения их цели — поиска дополнительной информации или записи на прием, и это легко для пользователей. найти актуальную информацию на этом сайте.
На этом веб-сайте также используется разновидность гамбургерной навигации, распространенная тенденция веб-дизайна UX для мобильных веб-сайтов. Хотя мы не всегда рекомендуем этот стиль навигации для настольной версии веб-дизайна, он, безусловно, усиливает минималистский эффект этого простого веб-сайта.
3. Тенденции веб-дизайна в темном режиме и при слабом освещении
Некоторые компании начинают предлагать версии своих веб-сайтов в темном режиме, и мы считаем, что эта тенденция в дизайне веб-сайтов продолжит расти в 2021 году.Темный режим, ночная смена и другие параметры пользовательского интерфейса при слабом освещении предоставляют пользователям малоконтрастный сайт или приложение, на которые легче смотреть в условиях низкой освещенности. На своем веб-сайте бразильская дизайн-студия estudio / nk использует липкий переключатель от светлого к темному, который появляется на каждой странице веб-сайта, позволяя пользователям переключаться между светлой и темной версиями при прокрутке разных страниц. Наша команда считает, что популярность тумблеров темного режима на веб-сайтах может привести к увеличению количества черно-белых веб-дизайнов в 2021 году.

4. Вращающаяся анимация: грядущая тенденция веб-дизайна, вызывающая повышенный интерес
Лучшим источником вдохновения для дизайна веб-сайтов, который мы видели с использованием тренда вращающейся анимации, является новый дизайн веб-сайта The Disruption Company. Они вызывают у пользователей интерес к большему, потому что каждый раз, когда вы обновляете главную страницу, вы будете видеть новое и новаторское фирменное видео. Подобные забавные сюрпризы оставляют у пользователей уникальные впечатления от посещения вашего веб-сайта.
5. Нетрадиционная прокрутка привлекает аудиторию на современных сайтах
Мы заметили, что все больше веб-сайтов используют различные методы прокрутки для уникального взаимодействия с пользователем. Типичная прокрутка, конечно же, вертикальная. Горизонтальная прокрутка, как в этом примере на веб-сайте Gelateria Amande, — это тенденция дизайна UX, которая в хорошем смысле подрывает, привлекает внимание пользователей, оставаясь простой и функциональной. Веб-сайт Gelateria Amande сочетает в себе высококачественные фотографии продуктов, элегантные иллюстрации и анимированную типографику для повышения удобства работы пользователей.В 2021 году мы будем рады видеть новые дизайны веб-сайтов с использованием различных форм нетрадиционной прокрутки.
6. Градиентные цветовые схемы: красочное вдохновение для веб-сайтов на 2021 год
Когда в 2016 году был проведен ребрендинг Instagram, люди определенно заметили новый градиентный логотип. Он сильно отличался от популярного в то время стиля, но их решение модернизировать градиенты повлияло на дизайн в целом. Теперь градиенты стали более популярными среди креативщиков в поисках вдохновения для нового дизайна веб-сайтов.Признавая популярную тенденцию, ColorSpace создала веб-сайт с градиентным дизайном, который также функционирует как инструмент для создания градиентов и цветовых палитр, упрощая создание вашего собственного уникального дизайна. Мы ожидаем увидеть все больше и больше градиентов, включенных в новый дизайн веб-сайтов в следующем году, среди других тенденций дизайна веб-сайтов 2021 года.
7. Инновационные примеры веб-дизайна диагональных линий, ориентированных на UX
В прошлые годы новый дизайн веб-сайтов отличался прямыми горизонтальными линиями для разделения разделов на веб-страницах.Проведя небольшое исследование UX, наша команда обнаружила, что использование диагональных линий дает пользователю ясный и интересный путь, по которому он может следить за страницей. Польское цифровое агентство BrightMedia использует диагональные линии и анимацию с запуском прокрутки, чтобы привлечь внимание пользователей к странице и побудить их продолжить чтение.
Эта комбинация диагональных линий и анимации является прекрасным примером того, как различные будущие тенденции веб-дизайна могут интегрироваться друг с другом для создания прекрасного современного веб-сайта с интересным пользовательским интерфейсом.

8. Примеры современных веб-сайтов, демонстрирующие анимацию, запускаемую прокруткой
Интересная тенденция UX-дизайна, которая стала более популярной в последние годы, — это анимация прокрутки. Этот тип веб-дизайна демонстрирует талант визуального дизайна и навыки фронтенд-разработки, а также увеличивает время на странице и вовлеченность. Наши специалисты создали новый дизайн веб-сайта Игоря, чтобы побудить пользователей пролистывать или пролистывать макеты страниц, чтобы увидеть линии обслуживания Игоря.Пока анимация не мешает достижению вашей цели и не сбивает с толку пользователей, эта тенденция веб-дизайна 2021 года может стать очень эффективным способом упростить пользователям конверсию. Мы ожидаем, что подобные функции появятся среди трендов адаптивного дизайна и UX в 2021 году.
9. Креативный цветной брендинг как тренд веб-дизайна в 2021 году
Еще одна популярная тенденция веб-дизайна 2021 года — это многоцветный брендинг. Такие компании, как Camden Town Brewery, движутся к новому дизайну веб-сайта, который будет брендирован на основе страницы или продукта, а цвет меняется, когда пользователь перемещается и взаимодействует с элементами на странице.Такой веб-дизайн помогает пользователю перемещаться по сайту и создает подсознательные ассоциации со страницами продуктов или услуг исключительно на основе цветовых сигналов. Посетите их отличный сайт, где вы найдете вдохновение для цветного брендинга!
10. Конструкции с глубиной и размером
Наши дизайнеры разработали этот веб-сайт, полный теней и различных цветов, чтобы добавить глубины и придать этому сайту ипотечного хаба более сложный вид. Мы считаем, что плоские дизайны, которые кажутся трехмерными, более визуально привлекательны и иногда приводят пользователей к следующему этапу процесса продажи.Некоторые из наиболее распространенных техник плоского дизайна 2.0 для придания большей глубины веб-дизайну включают использование падающих теней, градиентов или двухцветных цветовых схем, как в приведенном выше примере дизайна веб-сайта.
11. БОЛЬШИЕ заголовки, привлекающие внимание: сверхразмерный веб-дизайн, вдохновение
В нашем стремительном обществе кажется, что у пользователей остается все меньше времени проводить на веб-сайтах. По этой причине дизайн адаптируется и включает в себя крупные жирные заголовки и сокращенные сообщения, чтобы быстро охватить аудиторию и сократить время на конверсию.Если требуется больше информации, теги заголовков большего размера обычно сочетаются с гораздо меньшей копией подтекста, что похоже на подход минимализма. Остин Истсидерс демонстрирует этот союз размеров шрифтов во всем дизайне своей домашней страницы и использует видео, чтобы продемонстрировать разные случаи, когда можно насладиться вкусным сидром.
12. Привлекайте внимание абстрактными фигурами в веб-дизайне
Еще одна популярная тенденция веб-дизайна — это использование абстрактных форм. Мы начали видеть, что бренды используют более уникальные формы, которые придают дополнительный элемент интриги для пользователей.Группа elje проделала большую работу по представлению абстрактных форм и графики, которые напоминают лавовую лампу и будут заинтересовывать пользователей. Обратите внимание, что эта компания интегрировала несколько тенденций веб-дизайна 2021 года, в том числе современные градиенты и диагонали во вступлении, когда вы загружаете страницу!
13. Примеры повествования и интерактивного веб-дизайна
Интерактивные элементы веб-сайтов становятся все более популярными, и эта тенденция анимации пользовательского опыта будет по-прежнему лежать в основе адаптивного веб-дизайна только в 2021 году.Потребители проводят больше времени на веб-сайтах, которые используют адаптивные и интерактивные функции. К сожалению, внедрение подобных тенденций в UX-дизайне может быть дорогостоящим и трудоемким. Наша команда веб-дизайнеров надеется, что появится больше автоматизированных процессов разработки, что в идеале сократит расходы для клиентов, которым нужны уникальные интерактивные функции на своих сайтах.
Изучите отличный пример взаимодействия с пользователем, созданный нашей командой веб-дизайнеров! На целевой странице Игоря Nexos Intelligent Disinfection пользователи могут прокрутить, чтобы увидеть визуальное объяснение решения Nexos для ультрафиолетовой дезинфекции помещений.Этот адаптивный веб-дизайн не только визуально привлекателен и информативен, но также дольше удерживает пользователей на веб-сайте и повышает узнаваемость бренда.

14. Динамические целевые страницы и адаптивный веб-дизайн в 2021 году
Некоторые из наиболее интересных примеров современных веб-сайтов используют динамические, отзывчивые целевые страницы. Удерживать пользователей на простой статической целевой странице сложно, поэтому добавление адаптивных элементов веб-дизайна, таких как анимация и интерактивные функции, может удерживать пользователей на странице дольше.Посмотрите на эффект водной ряби на этом веб-сайте лос-анджелесской фирмы веб-дизайна и маркетинга Weberous. Интерактивные и анимированные элементы страницы — отличные примеры использования творческих тенденций веб-дизайна ux, чтобы сделать скучную целевую страницу более динамичной.
15. Подробные нижние колонтитулы выделят веб-дизайн в 2021 году
На протяжении многих лет нижние колонтитулы веб-сайтов часто упускались из виду или не учитывались в общем веб-дизайне — до сих пор. Тенденция в веб-дизайне, которая произвела фурор, — это подъем футера.’То, что раньше использовалось только для предоставления контактной информации или формы регистрации, превратилось в пространство для включения дополнительных элементов главной страницы. Компания 360gardalife проделала фантастическую работу, продемонстрировав эту тенденцию. Как вы можете видеть на изображении выше, они включили дополнительные элементы в пространство нижнего колонтитула, и теперь оно кажется включенным в общий веб-дизайн.
Поднимите свой веб-дизайн на новый уровень
Мы рекомендуем вам изучить bluecompass.com для вдохновения более современных веб-сайтов! Наша команда веб-дизайна и разработчиков в Айове создала привлекательный и функциональный дизайн, который включает в себя многие из последних тенденций веб-дизайна.На нашей домашней странице вы найдете встроенное видео вверху, анимацию прокрутки, диагональный дизайн и другие примеры тенденций дизайна веб-сайтов 2021 года по всему сайту.
Если ваш бизнес готов поднять ваш веб-дизайн на новый уровень, обратитесь к нашей команде экспертов. Blue Compass — отмеченная наградами компания по дизайну и разработке, с консультантами по исследованиям UX, которые могут вывести ваш дизайн и конверсии на новый уровень! Свяжитесь с Blue Compass сегодня.
Вам понравилась эта статья? Если да, то вы можете узнать больше о тенденциях UX-дизайна и вдохновить их на создание веб-сайтов:
Мак и сыр
Mac and Cheese входит в команду Digital Bark-eting в Blue Compass.Он любит приветствовать членов своей команды, когда они приезжают на день, поощрять веселые перерывы в течение рабочего дня и вздремнуть в разных местах по всему офису. Ему также нравится здороваться с клиентами и другими посетителями, особенно с почтальонами, которые привозят угощения! Mac — важная часть нашей команды цифровых экспертов в Blue Compass, где мы помогаем брендам добиваться успеха в Интернете с помощью стратегий веб-дизайна, разработки и цифрового маркетинга.
Свяжитесь с нами
Дополнительные комментарии и вопросы:
Предыдущий Следующий .