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

Содержание

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 ✅

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

[email protected], дизайнер 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

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

[email protected], дизайнер 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

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

Источник enjoylunacoffee.com

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

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

Источник uncannyvalley.studio

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

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

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

Источник 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 предстоящих трендов, чтобы пробудить ваше воображение.