9 инновационных трендов в веб-дизайне на 2022 год — Дизайн на vc.ru

Команда Магвай всегда внимательно следит за трендами и старается внедрять их в своей работе. Как известно — основные тренды зарождаются на западном рынке, а потом плавно появляются в России. Поэтому, чтобы понять, какие новые веяния будут главенствовать в 2022 году, мы подготовили перевод статьи, вобравшей в себя мнения профессионалов из «99designs» (99designs — компания, основанная в 2008 году в Австралии, но имеющая на данный момент офисы по всему миру. Она управляет онлайн-платформой, соединяющей экспертов в области дизайна и потенциальных клиентов).

38 756 просмотров

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

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

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

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

9 главных тенденций веб-дизайна на 2022 год:

• Дизайн в стиле Memphis
• Типографика в главном баннере (hero image)
• Ретро революция
• Видимые границы
• Вовлекающий интерактив
• Необрутализм
• Движущийся текст
• Креативный скроллинг
• Графика, нарисованная от руки

1. Дизайн в стиле Memphis

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

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

By Aneley

By Iconic Graphics

By MASER

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

By e2infinity

By Adam Muflihun

2. Типографика в главном баннере (hero image)*

(*здесь и далее под hero image, переведенном как “главный баннер” или “первый экран”, подразумевается первый экран главной страницы — прим. переводчика)

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

By jonasgo

By Bluesjay

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

By Bluesjay

By Sebastian ✅

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

[email protected]

By malzi.

By Bluesjay

By Jack Kingslain

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

adamk

3. Ретро революция

Поскольку появление Всемирной паутины становится все более отдаленным воспоминанием, многообещающие веб-дизайнеры наших дней черпают вдохновение из тех ранних “времен Дикого Запада”. Так называемый стиль “Web 1.0” 90-х годов отличался яркими цветами фона, видимой разметкой таблиц и роботизированными шрифтами, такими как Courier.

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

By Hiroshy

via curry. cafe

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

By Kristen Ryan via Dribbble

via starface.world

By Ruxandra Nastase via Dribbble

By Max Osichka via Dribbble

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

Джастин Хамра

By Ana Rumenović via Dribbble

via goliath-entertainment. com

4. Видимые границы

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

By logogram ♬

By Ashik via Dribbble

By Soumitro Sobuj via Dribbble

By Gavrisov Dmitri via Dribbble

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

By Anastasia Fesiuk via Behance

By JJay Jay via Behance

By Arvin Aradhana via Dribbble

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

Джастин Хамра

By Ashik via Dribbble

5. Вовлекающие интерактивы

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

via Spotify

via weareimpero.com

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

Ключ к этому тренду — создать немного загадки: например, следующий за курсором крошечный черный куб на сайте LEQB, или явно отсутствующая навигация на сайте Chiara Luzzana, — и посетителю предлагается использовать определенную форму взаимодействия, чтобы узнать, как работает страница. Это создает новые впечатления, которые заставляют пользователей сайта чувствовать себя исследователями, активно кликающими по странице, чтобы раскрыть ее секреты.

via le-qb.com

via chiaraluzzana.com

Простой и при этом эффективный дизайн дополнен современными визуальными hover-эффектами

[email protected]

via kim-jooyoung.com

via monopo.london

6. Необрутализм

Необрутализм происходит от классических корней брутализма, архитектурного движения 50–70-х годов, в котором упор делался на сырые, необработанные материалы, такие как бетон. Брутализм набирает обороты в веб-дизайне с момента его цифрового возрождения в 2014 году, как указано на сайте brutalistwebsites.com. Примитивный HTML без применения стилей, простые фоны, асимметричные макеты, стандартные компьютерные шрифты и необработанные фотографии — все это характеризует цифровой брутализм.

By Maia I

By Luka Marr via Dribbble

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

By Pier-Luc Cossette via Dribbble

By Tee Tran via Dribbble

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

Джастин Хамра

via cargo.site

By Aleksandar Igrošanac via Dribbble

7. Движущийся текст

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

via esfuerzomezcal.com

via vitaarchitecture.com

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

via chungiyoo.com

via vancouverartbookfair.com

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

Ариан Бозорг

via spielzeit.jungesschauspielhaus.de

via enjoylunacoffee.com

8. Креативный скроллинг

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

via uncannyvalley.studio

via tote.design/sirup/

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

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

via stonestyle.co.th

via dgstudio.com

Простая, и в то же время элегантная интерактивная прокрутка — заметный тренд веб-дизайна на 2022 год

Халед Лиуи

via drinkcann. com

via kikk.be

9. Графика, нарисованная от руки

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

By Brent & Jo Studio

By Realysys

By Sudip Dutta

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

Создавайте грубо, очевидно от руки, чтобы выделиться из толпы

c-artworker

via inapsquare.com

By andrei2709

By Bernardo Henning

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

Реза Эрнанда

Готовы к трендам веб-дизайна 2022 года?

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

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

Топ 10 трендов веб-дизайна 2021-2022 года — Дизайн на vc.ru

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

17 978 просмотров

Поддержите видео лайком!

1. Текстовый гигантизм

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

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

Поэтому, размер шрифта на сайте будет расти в геометрической прогрессии, в ближайшем будущем, и это неизбежно.

2. Брутализм

В СВОЕЙ ШЕРОХОВАТОСТИ И НЕЖЕЛАНИИ ВЫГЛЯДЕТЬ КОМФОРТНО ИЛИ ЛЕГКО, БРУТАЛИЗМ МОЖНО РАССМАТРИВАТЬ, КАК РЕАКЦИЮ МОЛОДОГО ПОКОЛЕНИЯ НА ЛЕГКОСТЬ, ОПТИМИЗМ И ЛЕГКОМЫСЛИЕ СОВРЕМЕННОГО ВЕБ-ДИЗАЙНА

Паскаль Девилль

Это один из самых ярких трендов в веб-дизайне последних годов. Брутализм — это смелый, шероховатый, необработанный стиль, который не стремится к идеальности, он является отголоском первых сайтов начала 90-х. Часто этот стиль называют “анти дизайном” из-за своей грубости и неряшливости.

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

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

3. Ретро-ностальгия

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

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

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

4. Аутентичность

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

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

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

5. Плавучесть

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

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

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

6. Табличность

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

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

7. Скетчинг

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

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

8. Очень яркие цвета

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

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

9. ЧБ стиль

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

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

10. Минимализм

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

Однако, если мы посмотрим на минимализм 2013 года и 2021 и поймем, что это разный стиль. В 2013 был популярен flat design, тусклые невыразительные цвета, дурацкие паттерны. А в 2021 минимализм полностью изменился, дизайн яркий, не плоский, акценты на самом важном и крутая графика. Эта разница в 8 лет делает монументальную разницу в минимализме разных лет. Самое главное, чтобы от упрощения не страдал визуал и функционал сайта, тогда минимализм будет работать как нужно.

❤ Если вам понравилась статья то поддержите ее лайком, а я продолжу делиться полезным о дизайне 🙂

✌🏻 Также я открыт к сотрудничеству Сайт Телеграм Intagram YouTube Behance

Лучшие тренды веб-дизайна и UI на 2022 год / Хабр

Осторожно, статья очень «тяжелая», в ней много анимации (да, это один из трендов). Кликать на свой страх и риск!

Был ли 2021 год лучше 2020-го? Однозначно да — если мы говорим о UI/UX дизайне. Были созданы новые крутейшие сайты и приложения, выпущено новое ПО для графических дизайнеров. Творчество било ключом. И даже отобрать лучшие тенденции года в этот раз было трудно.

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

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

Прокрутка мертва. Привет, прокрутка!

Прокрутка утомляет. Многие пользователи от нее устали. К счастью, за этот год получило развитие другое направление: визуальное повествование, «скроллителлинг».

The New York Times стала одной из первых, кто использовал скроллителлинг в своей статье Снегопад. И получилось довольно свежо.

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

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

Скроллителлинг — это то, что действительно заставляет пользователей, выросших на Инстаграмме и Тик-Токе, читать. Например, бросаются в глаза такие динамические тексты, как в Google:

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

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

А как насчет мобильных приложений? Pure, приложение для знакомств, создало историю, которую можно было бы назвать «tappytelling» (она активируется, когда вы нажимаете и открываете приложение в первый раз).

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

Пользователи любят данные

Как делать достойный it-продукт в 2022 году? Меньше прилагательных, больше фактов! Сколько у вас отделений, в каких городах, кто ваши клиенты, как вы им помогли. Факты — единственная надежная информация. Но если у вас есть много полезных данных, нужно сделать их представление не только простым, но и увлекательным.

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

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

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

Также существует такое явление, как «похмелье» от COVID. Это долгосрочное влияние Covid на компании и их сотрудников. По данным управления национальной статистики Великобритании, в 2018 году средний уровень стресса и тревожности составил около 2,7 из 10. С тех пор, как появился Covid, оценки выросли до 4,0 из 10 и редко опускались ниже этого уровня. Также из-за пандемии рабочая нагрузка увеличилась на 4 часа за последние 2 года.

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

Вот несколько вариантов, в которых мы рекомендуем представлять данные:

• Диаграммы и графики
• Иллюстрации
• Статическая инфографика
• Интерактивная инфографика

Мобильные приложения переоценены?

По данным We Are Social, в 2021 году мобильными телефонами будут пользоваться 5,22 миллиарда человек — это примерно 66% населения мира. С января 2020 года количество уникальных мобильных пользователей выросло на 1,8% (93 миллиона), а общее количество мобильных подключений увеличилось на 72 миллиона (0,9%) и к началу 2021 года достигло 8,02 миллиарда.

Количество пользователей социальных сетей за последний год увеличилось более чем на 13%. К началу 2021 года в социальных сетях зарегистрировалось почти полмиллиарда новых пользователей. По данным App Annie, пользователи Android проводят в своих телефонах более 4-х часов в день. В 2020 году пользователи Android потратили более 3,5 триллиона часов на веб-серфинг.

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

Мать всего 3D

Мир дизайнеров уже сошел с ума от 3D-графики и анимации. 3D существует уже 4 года и в ближайшее время никуда не денется. За последние несколько лет 3D-искусство и анимация были представлены в многочисленных обзорах тенденций дизайна UI на различных медиаресурсах. Это означает, что все больше и больше дизайнеров интегрируют их в веб-сайты и целевые страницы.

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

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

Многие дизайнеры стилизовали 3D-объекты, органично «поселившиеся» в 2D-пространстве. Это позволяет создавать более интересные композиции, но также служит отличным рабочим подходом с большим потенциалом. Например, как на украинском государственном сайте.

Кампания Метавселенной

Facebook, как известно, теперь называется Meta. Дело в том, что логотип Meta не сделан ни 2D, ни 3D. Или там и то, и другое? Он заработал довольно жесткую критику, потому что это почти можно назвать стоковым изображением — настолько простой логотип. Это лента Мебиуса и кот Шредингера наступающего 2022 года. Реддит оценил.

Balenciaga x The Simpsons: 2D наносит ответный удар

Модный дом Balenciaga в сотрудничестве с создателями The Simpsons представил новый эпизод мультсериала на «Неделе моды» в Париже, чтобы показать свою новую коллекцию весна-лето 2022.

В этом эпизоде классические 2D-Симпсоны получают некоторые новые детали, нарисованные в 3D. Конечно, одно из них — платье. Эпизод вызвал неоднозначную критику со стороны фанатов сериала, но посыл Баленсиаги было одним из самых сильных в 2021 году.

Анимировать или исчезнуть

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

Сколько анимации вы хотите? Да.

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

В 2022 году моушн-дизайн станет важной и продуманной частью позиционирования бренда на рынке. IT-рекрутеры начинают активно искать веб-дизайнеров с навыками в сфере ЗD и анимирования.

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

Как использовать веб-анимацию в 2022 году?

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

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

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

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

Кстати о буквах… Вы знали, что есть номинации на Эмми за дизайн заставки с названием в фильмах? Посмотрите на потрясающую анимацию для оупенинга The Queen’s Gambit (номинант на 2021 год):

Анимированные иллюстрации для добавления персонажа

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

Такие работы часто используются в 2-х случаях:

• Для поясняющих видеороликов
• В качестве рекламы

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

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

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

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

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

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

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

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

Анимированные логотипы

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

Есть ли у анимированных логотипов какие-то маркетинговые преимущества? Да, вот список:

• Они привлекают внимание. Это означает, что они способствуют повышению узнаваемости бренда.
• Они помогают улучшить SEO. Так уж получилось, что Google отдает предпочтение динамическому контенту, а страницы с движущейся графикой быстрее привлекают аудиторию.
• Они хорошо смотрятся на мобильных устройствах. Броская анимация выглядит интереснее статичного логотипа.
• Главное, что они демонстрируют историю. Идея статичного логотипа развивается в анимации. Благодаря этому за несколько секунд вы сможете показать не только миссию бренда, но и его ценности!

Чего нам ждать в 2022 году? Множество интересных новых брендов, веб-сайтов и приложений!

Дизайн всегда меняется. Но его смысл остается прежним.

P. S. А вот и самый старый кот в мире, которого мы обещали. Ей 34 года (это как 160 лет, если бы она была человеком):

Кстати, некоторые тенденции 2021 года останутся актуальными и в 2022. Если вы хотите познакомиться с ними ближе, можно посмотреть нашу прошлогоднюю статью.

22 вдохновляющих тренда в веб-дизайне на 2022 год — CMS Magazine

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

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

Ниже вы найдете 22 тренда веб-дизайна на 2022 год, которые вдохновят и расскажут о том, что люди создают для веба. Поехали!

Главная тенденция, которую мы видим в наступающем году, — это более игровой (и игривый) веб-дизайн

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

Похоже, мы немного возвращается в период возрождения раннего интернета. Это логично. Также и мода немало заимствует из конца 90-х — начала нулевых. Многие из нас проводили время дома, праздно бродя по Интернету, ища что-нибудь интересное или захватывающее, так же как и тогда, когда Интернет только появился.

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

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

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

Мы ожидаем, что в наступающем году будут заметны следующие тренды:

Мини-сайты, созданные ради удовольствия

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

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

«День и ночь», короткометражка от Pixar 2010 года, повлияла на подходы к анимации, используемые затем в таких полнометражных фильмах, как «Головоломка» и «Душа»

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

Поэкспериментировать можно несколькими способами: придумав намеренно шутливый UX-дизайн или специально обманув ожидания (но убедитесь, что вы по-прежнему создаете доступный продукт!). Добавьте юмор не только в текст и изображения, но и в навигацию по сайту, меню и взаимодействия; будьте неуловимы и тонки. Пусть сайт выглядит серьезным, пока не выяснится, что это не так. Можно создать сайт, который будет работать неожиданным образом. Профессиональный сайт, нацеленный на продажи, может содержать в себе пасхалки, если они хорошо оформлены.

Guns 2 Swords — это мини-сайт/инициатива в стиле знаменитой настолки 80-х годов «Dungeons & Dragons» со вкусом серии книг «Выбери свое приключение»*. Он был создан командой MSCHF (которая представляет собой что-то среднее между между художниками в стиле гонзо и создателями хайп-приложений), чтобы рассказывать об их услуге. Пользователи могли отправить им свое оружие, чтобы кузнец мирового уровня превратил его в мечи. Поистине эпично.

* примечание переводчика: Книги «Выбери свое приключение» были серией детских книг-игр, популярных в Америке (а затем и в других странах) в 1980-х годах. Они были написаны от второго лица, где читатель становился главным героем, имеющим возможность сделать выбор, который изменил бы историю. В России с 1995 по 1998 годы вышло 15 книг из данной серии.

Blue Check Homes использовали противоположный подход — создали абсолютно правдоподобно выглядящий «серьезный» веб-сайт. То, что начиналось как шутка Даниэллы Баскин в Твиттере, может в итоге превратиться в настоящий мини-бизнес по продаже медальонов «с голубой галочкой» (таких, которые присваиваются подтвержденным аккаунтам в Твиттере) для домов известных людей.

«Охота за мусором» («квесты-находилки») * в Интернете

* примечание переводчика: «Охота за мусором» (Scavenger hunts) — американская игра, заключающаяся в том, что участники (это могут быть как команды, так и отдельные игроки) должны за определенное время найти и собрать предметы из заранее составленного списка. Далее по тексту статьи эта игра переведена как «квест-находилка»

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

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

Некоторые идеи для подсказок:

• Предложить слово, основанное на загадке или подсказке

• Найти слово, спрятанное на вашем основном сайте или на сайте квеста-находилки

• Найти скрытый кликабельный элемент на странице

• Нарисовать фигуру

• Расшифровать шифр

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

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

Опыт взаимодействия с сайтом как с приложением

Джереми Бейт, соучредитель ThreeSixtyEight, твердо уверен, что небольшие сайты, фокусирующиеся на пользовательском опыте, — это будущее веб-дизайна. Он поясняет: «Front-end-driven* опыт взаимодействия с сайтом, который сильно раздут с точки зрения дизайна, — это совершенно новый способ использования веба, которого раньше не было; это похоже на опыт взаимодействия с приложением. Для меня прямо сейчас это возможность». Мир привык к приложениям, в которых взаимодействие, анимация и динамический опыт являются нормой. Следующим логичным шагом будет привнесение этого в веб-сайты и создание там более уникального опыта.

* примечание переводчика: Frontend-driven — рендеринг интерфейса на стороне клиента

Некоторые думают, что мы возвращаемся в те времена, когда сайты были замкнутыми на себе, известными лишь посвященным и странными. Но новые инструменты для создания сайтов, такие как no-code, значительно упрощают создание динамических, ориентированных на взаимодействие проектов. ThreeSixtyEight даже добавил в свой процесс разработки этап, посвященный концентрации на дизайне полного взаимодействия (full-interaction design).

Одностраничные сайты

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

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

Этот сайт для Инди Харрис (созданный Джорданом Хьюзом) представляет собой цифровое резюме. Это позволяет объекту быть в центре внимания и увеличивает вероятность того, что случайный посетитель прочитает всё резюме, поскольку все, что ему нужно, находится прямо перед ним.

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

Сайты с сильным sense of place (чувством места) *

* примечание переводчика: sense of place (дословный перевод, который будет использоваться далее — чувство места) — ощущение тоски по принадлежности к месту или городу, с которым человек (когда-то был) знаком или связан. Особое значение (и смысл) этого места для конкретного человека и привязанность к нему определяется личным опытом, социальными взаимодействиями, самоопределением.

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

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

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

Мотивы ар-деко

И вот мы снова в 20-х годах! Мотивы ар-деко хорошо сочетаются с геометрическим дизайном, который был в тренде последние несколько лет. Хотя первая ассоциация со стилем ар-деко может быть связана с богато украшенными подпольными заведениями 20-х —30-х годов и свадьбами в стиле Гэтсби, из этого может получиться красивый минималистичный дизайн.

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

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

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

Меньше изображений на первом экране* (hero)

* примечание переводчика: здесь и далее под hero или hero image, переведенном как «главный баннер» или «первый экран», подразумевается первый экран главной страницы

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

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

Типографика преувеличенного масштаба

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

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

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

Интерактивные шрифты

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

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

Ответственный моушн-дизайн

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

Движение можно использовать осторожно и ответственно. Кори Моэн, Senior Brand Designer в Webflow, подробно рассказал о том, как разрабатывать, принимая во внимание настройку «Уменьшить движение» в MacOS.

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

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

Коллажи

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

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

Абстрактные иллюстрации

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

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

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

Градиенты с зернистостью

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

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

На веб-сайте конференции Webflow 2021 No-Code используется несколько зернистых градиентов. Градиенты используются в анимированной графике, фонах и элементах, расположенных по всей странице. Была выбрана зернистость среднего размера, которая дает эффект печатного материала.

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

Использование линий

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

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

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

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

Сайты с разделенным экраном

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

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

Больше глассморфизма

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

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

Тайлер Галпин использует глассморфизм для создания завораживающего крутящегося логотипа.

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

Меньше неоморфизма

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

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

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

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

Инклюзивный текст

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

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

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

Гендерно-нейтральный дизайн

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

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

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

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

Приоритезация скорости страницы

С технической точки зрения скорость загрузки страниц стала в этом году приоритетным вопросом для веб-разработчиков. Обновление алгоритма Google в 2021 году делает скорость более важным фактором для SEO, чем раньше. Это также отражает более высокие ожидания пользователей в отношении скорости загрузки сайта, поскольку 53% пользователей покидают страницу, загрузка которой занимает более 3 секунд. Прошли те времена, когда можно было терпеливо ждать загрузочных экранов.

Google PageSpeed Insights или Lighthouse — это инструменты, которые можно использовать для оценки оптимизации скорости вашей страницы. Есть несколько простых шагов, которые могут предпринять разработчики (или их платформа по выбору), чтобы страницы загружались быстро — это, например, оптимизация изображений и отложенная загрузка изображений за пределами экрана. Также может помочь ограничение количества используемых шрифтов. Кроме этого, следует избегать разработки сайтов на платформе, которая слишком полагается на плагины, поскольку это может сильно повлиять на скорость.

Разработка с использованием динамического контента

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

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

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

No-code используется все большим количеством команд

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

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

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

Мы с удовольствием будем наблюдать за тем, как все описанное будет реализовываться в 2022 году.

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

9 инновационных трендов веб-дизайна в 2022 году

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

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

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

1. Стиль Мемфис

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

Автор Aneley     Автор Iconic GraphicsАвтор MASER

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

Автор e2infinityАвтор Adam MuflihunАвтор Valeriia Suvorova, Behance

2. Типографика вместо главного изображения

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

Автор jonasgo  Автор Bluesjay

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

Автор Bluesjay   Автор Sebastian ✅

‍“Меня всегда вдохновляет хорошая типографика — и как часть композиции, и как отдельный элемент дизайна.”

Vl@daS, дизайнер 99designs

Автор malziАвтор BluesjayАвтор Jack Kingslain

“Типографика открывает большой простор для творчества: мы можем комбинировать забавные элементы и оригинальные цвета — это путь в будущее.”

adamk., дизайнер 99designs

3. Ретро-революция

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

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

Автор HiroshyАвтор curry.cafe

Хотя в 90-е Интернет был наполнен ненужными функциями, графикой и цветами, это также было время, когда правил еще не существовало — профессия “веб-дизайнер” тогда еще не появилась.

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

Автор Kristen Ryan, Dribbble

starface.worldАвтор Ruxandra Nastase, DribbbleАвтор Max Osichka, Dribbble

‍“Когда-то 2020-е воспринимались как будущее дизайна и технологий. Сейчас же мы отворачиваемся от безупречного минимализма настоящего и смотрим в прошлое в поисках вдохновения.”

Джастин Хамра, арт-директор 99designs

Автор Ana Rumenović, Dribbblegoliath-entertainment. com

4. Видимые рамки

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

Автор logogram ♬Автор Ashik, DribbbleАвтор Soumitro Sobuj, DribbbleАвтор Gavrisov Dmitri. Dribbble

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

Автор Anastasia Fesiuk, BehanceАвтор Ashik, DribbbleАвтор JJay Jay, BehanceАвтор Arvin Aradhana, Dribbble

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

Джастин Хамра, арт-директор 99designs

5. Интересные взаимодействия

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

Источник: Spotify

Источник: weareimpero.com

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

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

Источник le-qb.com

Источник chiaraluzzana.com

“Простой, но эффективный дизайн, наполненный современными визуальными эффектами наведения.”

Vl@daS, дизайнер 99designs

Источник kim-jooyoung.com

Источник monopo. london

6. Необрутализм

Необрутализм уходит корнями в классический брутализм, архитектурное движение 50-х — 70-х годов, главной особенностью которого было использование необработанных материалов, таких как бетон. Популярность брутализма в веб-дизайне растет с момента его цифрового возрождения в 2014 году. Изучите примеры на сайте brutalistwebsites.com, и вы убедитесь в этом сами.

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

Автор Maia I

Автор Luka Marr, Dribbble

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

Автор Pier-Luc Cossette, Dribbble

Автор: Tee Tran, Dribbble

“Брутализм всегда ассоциировался с минимализмом и необработанными материалами. Необрутализм сохраняет основные ценности брутализма, уточняет и оживляет их. Сильный, смелый и впечатляющий.”

Джастин Хамра, арт-директор 99designs

Источник cargo.site

Автор Aleksandar Igrošanac, Dribbble

7. Шрифт в движении

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

Источник esfuerzomezcal.com

Источник vitaarchitecture.com

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

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

Источник chungiyoo.com

Источник vancouverartbookfair.com

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

Ариан Бозорг, комьюнити-менеджер 99designs

Источник spielzeit.jungesschauspielhaus.de

Источник enjoylunacoffee.com

8. Креативные эффекты прокрутки

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

Источник uncannyvalley.studio

Источник tote.design/sirup/

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

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

Источник stonestyle.co.th

Источник dgstudio.com

“Простая, но элегантная интерактивная прокрутка, — популярный дизайн-тренд 2022 года.”

Халед Лиуи, тимлид креативной студии

Источник drinkcann.com

Источник kikk.be

9. Нарисованные от руки графические элементы

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

Автор Brent & Jo StudioАвтор RealysysАвтор Sudip Dutta

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

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

c-artworker, Designer at 99designs

Источник inapsquare.comАвтор andrei2709Автор Bernardo Henning

‍“Меня всегда привлекали простые нарисованные от руки детали. Я часто добавляю в проекты какие-то интересные винтажные образы или несовершенные оригинальные формы. Такие идеи оказывают огромное влияние на мою работу.”

reza ernanda, дизайнер 99designs

Готовы к новым трендам?

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

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

5 новых направлений в веб-дизайне

Дизайн

Лизавета Чернова

О бунтарстве и нарушении норм

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

 

1.   К истокам и бунтарству

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

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

Пример 1. Источник: https://www.behance.net/gallery/146576725/The-Prism?tracking_source=best_of_behance

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

Пример 2.

 

2.   Хороводы букв

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

 

Пример 1. Источник: https://www.behance.net/gallery/67530909/An-experimental-typeface-design-using-comma/modules/394881373

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

Пример 2.

Пример 3. 

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

Пример 4. 

 

3. С асфальта на экран 

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

Пример 1.  

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

Пример 2. Источник: https://www.behance.net/gallery/106983525/Tasty-Wok-Sushi-Diseno-de-Marca/modules/613513489

4.   Дизайн — игра

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

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

Пример 1.

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

 

5.   Наивная брутальность 

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

Однако в современном веб-дизайне акцент сделан на смягчении нарочитой грубости и объединении современного, смелого с монументальным и вечным. 

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

Пример 1. Источник: https://www.behance.net/gallery/147331677/dizajn-prilozhenija-v-stile-neobrutalizm?tracking_source=search_projects%7C%D0%BD%D0%B5%D0%BE%D0%B1%D1%80%D1%83%D1%82%D0%B0%D0%BB%D0%B8%D0%B7%D0%BC%20

Пример 2. 

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

---

Иллюстрация на обложке: Лизавета Чернова

Сообщить об ошибке

Подписаться на журнал

Подписаться на рассылку

Июл 26, 2022

20 доминирующих тенденций веб-дизайна на 2022 год

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

Скачать бесплатно

77 блестящих примеров домашних страниц, блогов и целевых страниц

Каковы современные тенденции в веб-дизайне?

1. Экспериментальная навигация
2. Эффекты прокрутки
3. Кинетическая типография
4. Взаимодействие перетаскивания
5. Ретро-типография
6. Синемаграфы
7. Брутализм
8. Монохроматические градиенты
9. Многослойность
10. Только текст
11. Анимированная иллюстрация
12. Ультраминимализм
13. Смешивание горизонтального и вертикального текста
14. Геометрические фигуры и узоры
15. Тонкие шрифты с засечками
16. Перекрывающийся текст и изображения
17. Сломанные сетки
18. Органические формы
19. Веб-текстуры
20. Линии сетки

Одной из общих тем этих тенденций является моушн-дизайн. Гэри Саймон, опытный UI/UX-дизайнер и разработчик интерфейса, считает, что в 2022 году моушн-дизайн будет повсюду. Чтобы увидеть несколько примеров веб-сайтов, использующих анимацию на основе прокрутки, эффекты параллакса, анимированные SVG и многое другое, посмотрите его видео:

1. Экспериментальная навигация

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

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

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

2. Эффекты прокрутки

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

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

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

3. Кинетическая типографика

Что нам нравится: Кинетическая типографика может радовать посетителей и помогать им усваивать ваш контент.

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

Его также можно использовать для выделения важных разделов, направления посетителя при прокрутке и постепенного раскрытия информации, как в Аркадии.

4.

Взаимодействие с перетаскиванием

Что нам нравится: Взаимодействие с перетаскиванием может дать пользователям ощущение контроля над своим опытом.

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

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

5. Ретро-типографика

Что нам нравится: Ретро-типографика может вызывать у посетителей сайта чувство ностальгии и сентиментальности.

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

Это часть более крупной тенденции под названием «Neue Nouveau». В своем отчете о тенденциях шрифтов за 2022 год литейная и технологическая компания Monotype описывает Neue Nouveau как поворот в движении Art Nouveau, для которого характерны декоративные узоры, украшенные окончания штрихов, а также диагональные и треугольные формы символов. Согласно отчету, мы можем видеть некоторые из этих характеристик — например, органические формы и расцветки — в типографике сегодня.

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

Вы можете ознакомиться с другими дизайнами веб-сайтов ресторанов здесь.

6. Синемаграфы

Что нам нравится: Синемаграфы помогают привлечь внимание посетителей к странице даже в самых сложных макетах.

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

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

7. Брутализм

Что нам нравится: Брутализм отдает предпочтение простоте и функциональности, которые являются столпами пользовательского опыта.

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

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

8. Монохроматические градиенты

Что нам нравится: Монохроматические градиенты визуально интересны, но не отвлекают.

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

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

Creative Studio Better Half иллюстрирует прекрасный пример того, как сделать этот эффект свежим и современным. Он сочетает в себе смелую типографику и анимацию при наведении с монохромным пастельно-желтым градиентным фоном.

9. Многослойность

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

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

10. Только текст

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

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

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

11. Анимированные иллюстрации

Что нам нравится:   Анимированные иллюстрации помогают передать сложные идеи и придают сайту индивидуальность.

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

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

Например, если вы наведете курсор на одну из иллюстраций на сайте NewActon (разработанную австралийским цифровым агентством ED), иллюстрация и окружающие ее области будут покачиваться. Тогда только иллюстрация, на которую вы наведете курсор, продолжит двигаться по маленькому кругу. Этот дизайн также функционален: каждая иллюстрация представляет одну из категорий из навигационного меню справа.

12. Ультраминимализм

Что нам нравится:   Ультраминимализм может положительно повлиять на пользовательский опыт и производительность веб-сайта.

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

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

13. Смешивание горизонтального и вертикального текста

Что нам нравится: Смешивание горизонтального и вертикального текста бросает вызов условностям и поэтому может восхищать и интриговать некоторых пользователей.

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

14. Геометрические формы и узоры

Что нам нравится: геометрические фигуры и узоры могут привлечь внимание посетителей к определенным продуктам или кнопкам призыва к действию.

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

15. Шрифты с тонкими засечками

Что нам нравится: Эта тенденция добавляет бренду изысканности.

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

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

Как видно на The Sill, тонкий заголовок с засечками добавляет изысканности и стиля.

16. Наложение текста и изображений

Что нам нравится: Наложение текста и изображений увеличивает пространство на странице.

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

17. Broken Grids

Что нам нравится: Этот нестандартный метод может сделать стандартные страницы или разделы веб-сайта более интересными.

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

18. Органические формы

Что нам нравится:  Органические формы добавляют индивидуальности, не отвлекая от содержимого.

Прошли времена строгой сетки и острых краев — теперь все дело в изогнутых линиях и мягких органичных формах.

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

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

19. Веб-текстуры

Что нам нравится: Веб-текстуры привлекают внимание к определенному разделу веб-сайта.

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

20. Линии сетки

Что нам нравится: Эта тенденция подчеркивает сетку как организующий принцип.

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

Тенденции дизайна, которые вы можете использовать на своем веб-сайте

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

Примечание редактора: этот пост был первоначально опубликован в январе 2018 года и обновлен для полноты.

 

Первоначально опубликовано 18 июля 2022 г., 7:00:00, обновлено 1 сентября 2022 г.

10 тенденций веб-дизайна в 2022 году

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

Поделиться на facebook

Поделиться на Twitter

Поделиться на linkedin

Поделиться на WhatsApp

Поделиться по электронной почте

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

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

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

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

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

Содержание

• 10 трендов веб-дизайна в 2022 году
• 1. Мания инклюзивного дизайна
• 2. Прокрутка
• 3. Горизонтальная прокрутка
• 4. Бруталистическая типографика
• 5. Типографская анимация/кинетическая типографика
• 6. Ностальгия
• 7. Контрастные цвета
• 8. Вне сети
• 9. Многослойность изображений
• 10. Восторг
• Будущее в наших руках

10 тенденций веб-дизайна в 2022 году

1.

Мания инклюзивного дизайна

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

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

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

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

Модель Ranboo Fashion , показанная в их видео, несколько гендерно изменчива, скрывая лицо, так что зритель не уверен в личности модели.

2. Прокрутка

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

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

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

Infrared Mind Body из Техаса, США, отображает большие изображения и тексты, которые появляются с помощью различных анимаций, подчеркивающих их ценность. Крупные планы, приглушенные изображения, крупномасштабная типографика, а также мягкие и плавные переходы создают атмосферу сауны в утонченной чистоте.

3. Горизонтальная прокрутка

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

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

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

4. Бруталистическая типография

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

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

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

Zona de Propulsão — это одностраничник для центра технологических инноваций. Гигантский тип, безусловно, является отправной точкой этой айдентики, создавая урбанистическую фестивальную атмосферу. Дизайнер хотел создать информацию, доступную для всех, и представить технические знания в более доступной форме.

5. Типографика Анимация / Кинетическая типографика

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

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

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

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

6. Ностальгия

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

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

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

7. Контрастные цвета

, это для миллениалов в доме, детей 80-х и 99-х годов.0 с. Трудно остаться равнодушным к сайту с неоновым воротником. Цвет — это основной инструмент, который помогает сфокусировать внимание пользователя, а также стимулирует эмоции.

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

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

8. Вне сети

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

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

Arrowww Space , портфолио Максима Агинского, использует цитату из своей дизайнерской мантры в герое страницы, демонстрируя свое видение охвата аварий с перекрывающимся текстом на пути и фоном линейной структуры.

Infrared Mind Body из Техаса, США, отображает большие изображения и тексты, которые появляются с помощью различных анимаций, подчеркивающих их ценность. Крупные планы, приглушенные изображения, крупномасштабная типографика, а также мягкие и плавные переходы создают атмосферу сауны в утонченной чистоте.

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

9. Многослойные изображения

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

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

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

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

10. Восторг

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

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

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

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

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

Будущее в наших руках

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

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

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

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

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

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

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

Ищете свежий контент?

Получайте статьи и идеи из нашего еженедельного информационного бюллетеня.

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

Шани Двора

Шани — многопрофильный веб-дизайнер в Elementor. Ее опыт охватывает UI/UX, иллюстрацию и графический дизайн. Она увлечена типографикой и любит проводить время на свежем воздухе. В свободное время она представляет произведения искусства, связанные с ее восточными корнями.

Вам также может понравиться

Представляем Elementor 3.7 — локализованное рабочее пространство, средство очистки чисел и многое другое!

Габриэлла Ластер 22 августа 2022 г.

Создание мастерских, отмеченных наградами веб-сайтов с помощью наборов Elementor

Дорон Вульф 14 августа 2022 г.

Комментарии

Создание потрясающих веб-сайтов

22 вдохновляющих тренда веб-дизайна на 2022 год

Эти 22 тренда веб-дизайна на 2022 год помогут информировать и вдохновлять людей на то, что они создают для Интернета. Погрузитесь в.

Миша Вон

Директор по контенту

Ничего не найдено.

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

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

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

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

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

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

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

1. Мини-сайты удовольствия

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

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

Day & Night , короткометражка от Pixar в 2010 году повлияла на подходы к анимации, используемые в таких функциях, как Inside Out и Soul.

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

Вы можете поэкспериментировать разными способами: установив намеренно игривый UX-дизайн или преднамеренно разрушив ожидания (но убедитесь, что вы по-прежнему строите доступным образом!). Добавьте юмора не только в текст и изображения, но и в навигацию по сайту, меню и взаимодействия. Будьте тонкими. Делайте вид, что это серьезный сайт, пока это не так. Это возможность создать сайт, который будет функционировать неожиданным образом. Маркетинговый сайт в стиле пасхального яйца для профессиональных целей может работать, если он хорошо выполнен.

Guns 2 Swords — это мини-сайт/предприятие во всей красе Dungeons & Dragons 80-х, с привкусом «Выбери свое собственное приключение». Он был создан MSCHF, группой, которая находится где-то между гонзо-артистами и создателями хайп-приложений, чтобы стать настоящим сервисом. Посетители могли отправить свое оружие, чтобы кузнец мирового класса перековал его в мечи. Действительно эпично.

Компания Blue Check Homes применила противоположный подход к созданию полностью законно выглядящего «серьезного» веб-сайта. То, что началось как шутка Даниэль Баскин в Твиттере, может в конечном итоге превратиться в настоящий мини-бизнес по продаже медальонов с «голубыми чеками» (подобных тем, которые есть в подтвержденных аккаунтах в Твиттере) для домов известных людей.

‍

2. Охота за мусором в Интернете

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

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

Некоторые идеи для подсказок:

• Предложите слово, основанное на загадке или подсказке
• Найдите слово, спрятанное на вашем основном сайте или на сайте поиска мусора
• Найдите скрытый кликабельный элемент на странице
• Нарисуйте фигуру
• Расшифровать шифр
  

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

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

‍

3. Приложения, похожие на приложения

Джереми Бейт, соучредитель ThreeSixtyEight, твердо верит, что такие небольшие, ориентированные на опыт сайты — это будущее веб-дизайна. Он объясняет: «Интерфейс-ориентированный веб-интерфейс, который действительно преувеличен с точки зрения дизайна, — это совершенно новый способ использования Интернета, которого раньше не существовало; это похоже на приложение. Для меня это возможность прямо сейчас». Мир привык к приложениям, в которых взаимодействие, анимация и динамичный опыт являются нормой. Следующим логическим шагом будет перенос этой энергии на веб-сайты и создание там более уникального опыта.

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

4. Одностраничные сайты

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

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

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

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

5. Сайты с сильным чувством места

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

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

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

6. Мотивы ар-деко

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

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

Арт-деко объединил элементы из мира природы с современностью века машин — смелые линии, симметрия, простота и неизменное повторение элементов. Посмотрите, как формы этого крыла стрекозы переходят в обычные узоры классического ар-деко Chrysler Building.

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

7. Меньше изображений в заголовках

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

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

8. Негабаритная типографика

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

На этом веб-сайте с портфолио фильмов для Евы Хаберманн (автор Daniel Spatzek) крупный текст накладывается на движущуюся катушку с портфолио фильмов. Текст частично закрывает изображение, вызывая у зрителя любопытство увидеть больше, а двухцветный шрифт без засечек обеспечивает необходимый уровень контраста, не будучи неразборчивым или подавляющим.

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

9. Интерактивные шрифты

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

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

10. Дизайн ответственного движения 

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

Движение можно использовать тонко и ответственно. Кори Моэн, старший дизайнер бренда в Webflow, подробно рассказал о том, как строить с учетом параметра «Уменьшить движение» в MacOS.

Для тех, кто предпочитает уменьшенное движение:

Используйте медиа-запрос Preferences-Reduced-Motion CSS, чтобы скрыть анимированные SVG и показать полный статический SVG иллюстрации, когда у кого-то включена настройка ОС «Уменьшить движение»!

Пример кода здесь: https://t.co/inMvJCnj15

3/4 pic.twitter.com/oNhboHsdl1

— Кори Моэн (@CoreyGMoen) 28 июля 2021 г.

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

Учебник по теме: Как строить для тех, кто предпочитает движение, и для тех, кто его не любит

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

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

Раскройте свой творческий потенциал в Интернете

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

Начните бесплатно

Подпишитесь на участие в программе предварительной оценки Webflow

Спасибо! Теперь вы подписаны!

Ой! Что-то пошло не так при подписке.

Начать бесплатно

12. Абстрактные иллюстрации

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

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

Абстрактное не значит простое! Эти иллюстрации в блоге дизайнера Адама Хо являются прекрасным примером. Посмотрите на любопытную сложность его конструкций. С их ультратонкими линиями и графическими формами кажется, что они могут быть техническими чертежами, не представляя непосредственно какой-либо конкретный объект.

13. Градиенты с зернистостью

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

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

Мы использовали несколько зернистых градиентов на веб-сайте для конференции Webflow 2021 No-Code. Градиенты используются в анимированной графике, фонах и элементах по всей странице конференции, и мы выбрали среднюю зернистость, которая создает эффект типа печатного издания.

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

14. Линии

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

‍На сайте Appart Agency используются сверхтонкие линии. Эффект техничный, резкий и минималистичный. Графический дизайн и выбор оранжевого, черного и серо-коричневого цветов напоминают о минималистском художественном движении 19-го века.60-е годы. Движение горизонтальных линий при прокрутке также приятно.

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

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

15. Веб-сайты с разделенным экраном

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

var!－būt! Веб-сайт фестиваля (разработанный ONEIGHT7) представляет интересную особенность этого дизайна с фиксированным нижним колонтитулом, прокруткой бегущей строки и контрастными направлениями прокрутки в правой и левой частях. Разделенный экран здесь фиксирует зрителя, поэтому вы можете включить много движений, не теряя их.

16. Больше глассморфизма

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

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

Тайлер Галпин использует стекломорфизм для создания завораживающего логотипа с движением.

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

17. Меньше неоморфизма

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

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

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

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

18. Инклюзивная копия

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

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

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

19. Гендерно-нейтральный дизайн

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

Стало стандартом предлагать несколько вариантов пола и местоимений в формах и раскрывающихся меню. 42% процентов американцев теперь считают, что следует включать несколько вариантов. Еще лучше, когда у веб-сайтов нет острой необходимости включать эти параметры, они могут полностью отключить оба, как решил Snapchat.

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

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

20. Приоритет скорости загрузки страницы

С технической точки зрения, в этом году веб-разработчики уделяют особое внимание скорости загрузки страницы. Обновление алгоритма Google 2021 года делает скорость более важным фактором для SEO, чем раньше. Это также отражает более высокие ожидания пользователей в отношении скорости работы сайта, поскольку 53% пользователей покинут страницу, загрузка которой занимает более 3 секунд. Прошли времена терпеливого ожидания на экранах загрузки.‍

Google PageSpeed ​​Insights или Lighthouse — это инструменты, которые можно использовать для оценки оптимизации скорости страницы. Есть также несколько простых шагов, которые разработчики (или их платформа по выбору) могут предпринять, чтобы обеспечить быструю загрузку страниц, такие как оптимизация изображений и отложенная загрузка изображений за пределами экрана. Также может помочь ограничение количества используемых шрифтов. Вы также хотите избежать разработки своих страниц на платформе, которая слишком сильно зависит от плагинов, поскольку это может иметь большое влияние.

21. Здание с динамическим наполнением

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

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

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

22. No-code используется для большего числа команд

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

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

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

Мы рады видеть, как они будут реализованы в 2022 году

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

Или совершите путешествие в прошлое и ознакомьтесь с тенденциями веб-дизайна 2021, 2020, 2019, 2018, 2017 и 2016 годов.

19 октября, 2021

Веб -дизайн

Поделиться этим

Рекомендуемые чтения

Веб -дизайн

Веб -дизайн

Веб -дизайн

Подписывайтесь на Webflow Inspos. дизайн и код без кода доставляются на ваш почтовый ящик каждую неделю.

Электронная почта

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

Все готово, следите за нашей следующей рассылкой!

К сожалению, адрес электронной почты недействителен. Попробуйте еще раз!

Подробнее о Designer

Designer

Сила CSS, HTML и JavaScript в визуальном холсте.

Взаимодействия

Визуально создавайте взаимодействия и анимацию веб-сайта.

Подробнее о взаимодействиях

CMS

Определите собственную структуру контента и создавайте дизайн с использованием реальных данных.

Подробнее о CMS

Электронная торговля

Прощайте, шаблоны и код — визуально оформите свой магазин.

Подробнее об электронной торговле

Редактор

Редактируйте и обновляйте содержимое сайта прямо на странице.

Подробнее о Редакторе

Хостинг

Настройте молниеносный управляемый хостинг всего за несколько кликов.

Подробнее о хостинге

Бесплатно, пока вы не будете готовы к запуску

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

Начните работу — это бесплатно

Трансформация процесса проектирования по телефону

Основные тенденции дизайна веб-сайтов на 2022 год

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

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

1. Эффекты параллакса

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

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

2. 3D-визуализация

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

Вот лучшие примеры персональных веб-сайтов с использованием 3D-визуализации.

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

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

• Диана Мартель . Этот режиссер музыкального видео использует титры в формате 3D на своей странице. Вы можете использовать мышь, чтобы навести курсор на заголовок.

3. Смайлики

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

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

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

4. Минимализм

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

Вы можете использовать тенденции минимализма в дизайне на своем веб-сайте:

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

5. Анкеты

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

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

Основные выводы из этого примера:

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

6. Абстрактные композиции

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

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

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

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

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

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

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

8. Возможности дополненной реальности

Дополненная реальность (AR) может улучшить взаимодействие с пользователем, особенно для пользователей веб-сайтов электронной коммерции. Он предоставляет вашей аудитории опыт 360.

Проверьте эти веб-сайты, которые предлагают технологию AR.

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

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

• Первый человек . Этот фильм включает AR в свой маркетинг. Откройте веб-сайт и наведите свой смартфон на Луну, чтобы имитировать визуальный опыт миссии «Аполлон-11».

9. Искусство коллажа

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

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

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

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

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

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

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

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

Вдохновитесь этими эффектами прокрутки.

• Долгая прокрутка. Часто используется для одностраничных веб-сайтов. В нем часто используется плавная и линейная техника повествования — например, Le Mugs.

• Исправлена ​​долгая прокрутка. Объединяет несколько разделов на одной странице. Каждый раздел посвящен объяснению одной темы, такой как история, руководство и контактная информация, например, Carandache.

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

12. Приглушенные цвета

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

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

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

Заключение

Эти тенденции дизайна веб-сайтов на 2022 год не будут работать, если вы не разработаете их с продуманным планом дизайна.

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

Веселись!

6 современных тенденций веб-дизайна в 2022 году, которые вдохновят ваш дизайн

Обучение / Руководства / Руководство по веб-дизайну

Вернуться к руководствам

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

Последнее обновление

6 июня 2022 г.

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

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

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

1. Подчеркивание пустого пространства

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

Интеграция большого количества негативного пространства в дизайн вашего сайта может помочь:

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

• Улучшите навигацию: негативное пространство значительно упрощает пользователям взаимодействие с вашим сайтом и обработку представленной вами информации, повышает удобство использования и обеспечивает отличный UX.

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

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

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

2. Оптимизированные основные разделы

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

VideoAsk делает свой главный раздел простым, за исключением информативного и полезного видео о продукте.

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

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

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

Clint L. Sanchez

Партнер BlakSheep Creative

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

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

• Сильный, привлекающий внимание заголовок, который сделает ваше уникальное торговое предложение (УТП) и позиционирование продукта ясность

• Упрощенный абзац текста, предоставляющий больше информации о вашем продукте

• Призывы к действию (CTA), побуждающие пользователей совершить конверсию Совет для профессионалов: инструменты Hotjar Observe , такие как Heatmaps и Session Recordings , могут помочь вам оптимизировать главный раздел и показать, какие элементы веб-сайта привлекают наибольшее внимание пользователей, чтобы вы могли расставить приоритеты по важности и переместить или удалить остальные. После внесения изменений используйте такие инструменты, как Виджеты обратной связи , чтобы спросить пользователей, как они относятся к вашим корректировкам.

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

   3. Смелый и громкий шрифт

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

  Squarespace делает заявление с помощью крупной типографики на своей домашней странице. Источник: Squarespace

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

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

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

  Roots применяет сдержанный подход к тренду негабаритного шрифта на своей домашней странице.

  4. Ностальгический дизайн

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

  Вот несколько ностальгических элементов дизайна, которые вы можете использовать, чтобы вернуть пользователей к их «Золотые дни»:

  • Простые формы

  • Уникальные линейные работы

  • Двухтовые цветовые схемы

  • Vintage-STAGE-STAGE STAGE. типографика

  • Текстуры старой школы

  • Иллюстрации в мультяшном стиле

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

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

  Notorious Nooch — отличный пример ностальгического дизайна, сделанного правильно.

  5. Графика в стиле коллажа

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

  Tech Агентство по связям с общественностью и СМИ Bulleit Group , например, имеет изображение в стиле коллажа в своем разделе героев. Они выбрали перекрывающиеся игривые, но футуристические изображения, которые поддерживают их миссию « рассказывать истории о связи технологий и культуры». Разнообразие цветов, текстур, стилей и форм, которые они включили, добавляет динамичности и изысканности их интерфейсу.

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

  Графика в стиле коллажа на домашней странице Bulleit Group олицетворяет их футуристическую миссию.

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

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

  6. Горизонтальная прокрутка

  Хотя вертикальная прокрутка является нормой для просмотра на компьютере, в 2022 году все больше и больше веб-сайтов интегрируют горизонтальную прокрутку.0003

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

• Интуитивно понятный интерфейс на таких устройствах, как смартфоны, с функциями прокрутки

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

Крис Смит

Владелец и директор, Compare TV

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

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

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

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

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

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

Часто задаваемые вопросы о тенденциях в веб-дизайне

Проблемы веб-дизайна + решения

Предыдущая глава

Индекс руководства

Все руководства

От поведенческого дизайна к ретро-интерфейсу пользователя

Домашняя страница / Веб-дизайн / 2 Тенденции веб-дизайна2 : От поведенческого дизайна к ретро-интерфейсу

Веб-дизайн

Хотите знать, что нового в мире веб-дизайна? Вот основные тенденции веб-дизайна на 2022 год, а также советы по созданию стильного, привлекательного веб-сайта.

Келси Риммер

Опубликовано 1 ноября 2021 г.

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

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

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

1. Дизайн поведения
2. Сложные градиенты
3. Большая типографика и современные шрифты с засечками
4. Ретро интерфейс
5. Нативные настольные приложения
6. Связь внутри приложения
7. 3D-дизайн
8. Самодельные конструкторы сайтов

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

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

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

«От знания того, когда поливать растения, до уверенности, что вы моете руки не менее 20 секунд, в 2022 году мы можем ожидать сохранения спроса на поведенческий дизайн в цифровых продуктах и ​​искусственном интеллекте, чтобы укреплять поведение и помогать людям формировать привычки, — объясняет Вив Ву, старший дизайнер продуктов в Envato. «Прошли те времена, когда люди полагались исключительно на уведомления календаря и письменные заметки. На этом все более конкурентном рынке предприятия продолжают собирать данные о людях и отслеживать поведение пользователей, чтобы приносить пользу пользователям и повышать вовлеченность в продукт, но где мы проводим черту?»

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

Чтобы использовать поведенческий дизайн в своем собственном UX или пользовательском интерфейсе, ознакомьтесь с этой иллюстрацией поведения от usedesignspace на Elements или с этим WoWonder Android Messenger — мобильное приложение для WoWonder Social Script на CodeCanyon.

2. Сложные градиенты

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

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

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

3. Большая типографика и современные засечки

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

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

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

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

«Поскольку дизайн склоняется к более минималистичным автономным макетам, крупная типографика помогает связать все это воедино и предлагает простое воздействие на бренд», — объясняет Вейл Джой, специалист по контенту Envato.

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

Включите крупную жирную типографику в план дизайна вашего веб-сайта с помощью этой темы Tobel — Modern Furniture Store от Elated-Themes — темы электронной коммерции для Elementor. Разработанный специально для дизайна интерьера или мебельных магазинов, он представляет собой современный и шикарный вариант крупного шрифта.

Современные шрифты с засечками

На другом конце спектра шрифтов современные шрифты с засечками также переживают момент.

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

Чтобы включить современные шрифты с засечками в вашу работу, этот Black Delights – Elegant Serif от mokatype использует петлевые лигатуры и излучает утонченный стиль. Идеально подходит для цитат или логотипов, это привлекательный шрифт, который выделит ваш дизайн.

4. Ретро-дизайн в пользовательском интерфейсе

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

Вдохновленный 70-ми годами овал и дугообразная окантовка с радиусом

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

«Эта тенденция популярна в сфере моды и презентации портфолио и является данью уважения винтажному макету журнала 70-х годов», — говорит Вейл Джой. «Он часто сочетается с земляными тонами».

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

Чтобы создать элегантный образ 70-х годов на своем собственном веб-сайте, посвященном моде или образу жизни, попробуйте этот набор шаблонов Elementor JewellryWear — Jewellery Store от energythemes с ретро-макетом, идеально подходящим для магазинов электронной коммерции.

Пользовательский интерфейс в стиле гранж 90-х

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

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

Чтобы использовать гранж в своем веб-дизайне, попробуйте эти текстуры Vector Grunge от Digital_infusion. Эта коллекция из 29 тяжелых текстур в стиле гранж обещает сделать даже самый кристально чистый веб-сайт более шероховатым.0s внешний вид.

5. Возвращение нативных настольных приложений

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

Но почему в мире, который становится все более онлайновым, компании переводят свои приложения в автономный режим? По словам дизайнера продуктов Envato Рауфа Араджи, на самом деле у пользовательского опыта на рабочем столе есть много преимуществ.

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

Отличным примером этого является графический веб-редактор и инструмент для создания прототипов — Figma. Нативная настольная версия программного обеспечения включает в себя функцию под названием Figma Mirror, которая позволяет вам просматривать свои проекты из настольного приложения Figma в режиме реального времени на всех ваших устройствах iOS. Также продолжаются споры о Figma и Sketch — двух самых популярных инструментах дизайна UI/UX на сегодняшний день.

6. Более удобное общение в приложении

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

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

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

7. 3D-дизайн

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

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

«Несмотря на то, что 3D существует уже некоторое время, сейчас его более легко интегрировать в проекты», — объясняет Джон Каппа, старший дизайнер Envato. «От ярких ярких и красочных элементов до гиперреалистичных абстрактных дизайнов — 3D уже здесь, и оно делает вещи популярными!»

Ознакомьтесь с некоторыми работами из портфолио Джона — от этой коробки с бутылками Aesop до этой блестящей надписи — и узнайте, как 3D-дизайн действительно может улучшить вашу игру в веб-дизайне.

Автор Envato PixelSquid360 является мастером создания формируемых 3D-объектов. От ретро-мультфильма Retro Television до этого хромированного Золотого черепа — на Envato Elements есть множество 3D-объектов, с которыми можно поиграть.

8. Самодельные конструкторы веб-сайтов

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

«В 2022 году я буду наблюдать за изменением ландшафта веб-дизайна как ремесла; особенно инструменты для создания веб-сайта, размещения его в Интернете и получения дохода в процессе», — объясняет Ян. «Удобные для клиентов платформы в последнее время заполонили профессиональную сцену веб-дизайна; фрилансеры и внутренние отделы все больше и больше поворачиваются в их сторону.

Почему это может быть? Поскольку ожидания от новых веб-сайтов становятся все более сложными, очевидной причиной является простота использования. Сотрудничество между клиентом и дизайнером — это еще один плюс поддержка, развитие и сообщество вокруг самих инструментов. Быстрая прокрутка #webdesign на TikTok показывает, что молодые дизайнеры повсеместно используют подход без кода.

Как бы то ни было, их успех длился долго. Создатели веб-сайтов повсеместно получают широко освещаемые раунды финансирования и IPO, что составляет прогнозируемый совокупный ежегодный рост сектора на 8% в период до 2027 года. Так что, по крайней мере, за этой областью стоит следить».

Совет для профессионалов: убедитесь, что вы выбрали сборщика, который предлагает максимальную безопасность, чтобы защитить вас от растущих угроз кибербезопасности, таких как утечка данных и кража личных данных! Elementor — любимый конструктор страниц среди веб-дизайнеров и непрофессионалов. Вы можете начать работу с Elementor, получив доступ к широкому выбору наборов шаблонов для Elementor на ThemeForest, таких как этот набор шаблонов Influence Marketing от BimberOnline, который имеет интуитивно понятный макет, яркие цвета и высокую эффективность.

И это наш выбор основных тенденций веб-дизайна, которые вы можете ожидать увидеть больше в 2022 году. От идеального полужирного шрифта до наборов UX и UI, шаблонов и тем веб-сайтов, Envato Elements имеет все, что вам нужно для создания цельного, плавный и эстетически приятный пользовательский интерфейс. И пока вы здесь, не забудьте ознакомиться с нашими тенденциями графического дизайна и тенденциями маркетинга на 2022 год!

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