Тренды веб дизайна и UI дизайна в 2022 году (Design Trends 2022)

[@Slava_Rosenthal]

Ты съел 3,5 минуты моей жизни в начале видео (. А за обзор - лайк

[@Maddson1995]

ОГОНЬ! очень хочется урок, как вставлять покадровую анимацию к скроллу )

[@Lend99]

Бля, в вордпрессе это есть уже лет 5

[@Maddson1995]

@@Lend99 в смысле?

[@Lend99]

@@Maddson1995 В прямом смысле. Там в Элементоре хоть чертика на калибре можно отрисовать и скролить его колесиком))

[@Maddson1995]

@@Lend99 просто ВП, это д просто CMS система. Может плагины какие имеешь ввиду?

[@Lend99]

@@Maddson1995 Чем меньше плагинов, тем быстрее сайт) Уже давно все встроено в элементор.

[@likey_dikey235]

Некоторые тайм-коды (которые могут пригодится в моём проекте) 8:10 Вкладки 9:03 - 10:20 Скролл с покадровой анимацией 11:58 Область с видео + Микс шрифтов 14:52 - 14:57 Большое - маленькое. Фоновое видео 15:35 Заголовок в лого 17:20 - 18:08 Курсор-кнопка. Фото-видео и переход между ними по кнопке с анимацией 18:08 - 18:58 Переключение на следующий проект (в конце появляется курсор-кнопка) + Переход с анимацией линии и расширение по вертикали + уход заголовок на задний фон и постепенное исчезновение 19:27 - 19:44 Карточки под наклоном. Анимация со скроллом + Появление иконок, зарисовок, карикатур при наведении на кнопку, текст + Градиент зависящий от места курсора 19:47 Обьёмы из реальности (фото). Элементы сайта поверх такого фото. 20:40 - 21:13 Смена цвета фона + Бегущая, перетекающая подсветка линии, кнопки при наведении 21:53 Скролл сетки изображений 27:32 - 29:09 Композиция и сетка. Воздух как элемент дизайна + иллюзия форм + анимация хронологии (даты и всплывающий текст)

[@raketa_vkosmos]

Спасибо! Конечно интересно про покадровую анимацию привязанную к скролу🤓

[@igorgilewicz1549]

Спасибо за сводку. И да - хотим внедрения анимации в скрол (я как раз больше по блендеру чем по фигме)

[@ДашаКоробкова-ь6щ]

Бомба! Интересно, зайдёт ли это клиентам клиентов, будет ли сайт понятный.

[@Anton.d37]

Огонь, очень крутой лектор!

[@НаталияРадченко-б9ю]

Контент просто круть! Спасибки

[@Patrickstul]

Что за плагин для плавного скрола?

[@niki_lord7716]

Комментарии к работам и смыслам - на 5 баллов!

[@yuliyastrembitskaya1441]

Спасибо! Интересное видео. Взяла идею для портфолио. Буду ждать видео про покадровую анимацию)

[@codeforgames]

либо я один такой, либо хз. Не люблю такие сайты с этими модными дизайнами и зайдя один раз, больше не захожу никогда) Из всего выпуска нормальный только 27:57 :) Ещё более менее нормальные, которые получают ежегодные премии, как наша Воронежская red collar. Вероятно, я фан минимализма и максимальной простоты)

[@АлесяОсадчук-л1и]

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

[@nikolaysobolev7017]

Страдает ux/ui, а это главное, дизайн предмет сугубо утилитарный

[@happy_lion]

Огонь, я залип) подборка отличная и интересно разбираете

[@an.sirovets]

Супер. Покажииии как делать анимацию по скролу😻

[@Alchemick-K]

УРАААА!!!!! 😃😃😁😅😅😁 я лайкнула 1000-ЫЙ ЛАЙК!!!! *Здоровья вам удачи, молодцы, ребята!!! ❤

[@elenalevasheva3830]

Спасибо за очень интересную информацию и превосходную подачу материала.

[@evgeniynevelskiy9876]

Классное видео!

[@КристинаКолесник-ч9т]

привет, как тебя найти на беханс?

[@Dora-hl6ih]

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

[@petraral8852]

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

[@roxone314]

про покадровую анимацию при скроле видос появился?

[@andrsn959]

Отличные комментарии! Минус только в воде, многословие разжижает суть

[@niki_lord7716]

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

[@niki_lord7716]

@Владислав Голтвянский ++ тоже самое. Я хоть не крутой UX но всегда также в первую очередь задача провести юзера от А до Б и чтоб выглядело современно, ну то что и требуется. А такое разве что для псевдо проектов отстраненных от массового рынка.

[@vladmax2366]

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

[@Inna260780]

Здравствуйте как с Вами связаться?

[@WbTopFinds]

Есть ли вы на бихансе?

[@pokitoescobaro4453]

Дайте ссылки на эти сайты, пожалуйста

[@nikel4015]

отичный контент 🤗

[@veronicakostycheva1274]

Где вы находите такие классные сайты, не могу ничего найти похожего для вдохновения и насмотренности😢

[@in2fractalout]

Действую осознанно, мыслю скроллами, напряжение звенит, воздух контрастирует ~

[@alexven5662]

привет) на 15:22 ты обозревал дизайн и наводил на разные текстовые блоки, где сразу появлялась инфа о шрифте, размере и тд. так вот, скажи пожалуйста, где, или как можно так же смотреть?

[@naukadsgn]

Привет. В браузере есть приложение WhatFont

[@krisshaze4644]

Спасибо, очень круто, вдохновляет на работу и творчество)

[@Roman_851]

Список сайтов бы еще

[@СлаваУкраїні-э6ф]

Я который занимался веб-дизайнов в 2008 году: О! Опять скругленные углы в тренде )))

[@alyaanizuk3262]

крутая подборка, спасибо! а что за сайт про Украину на 19:32? не могу найти

[@maxim_003]

Можно ссылку на сайт с 3Д самолётом

[@menoirdieu]

Долгожданное видео) спасибо!

[@naukadsgn]

Спасибо!)

[@IrynaRomanova-d2m]

Очень круто! Спасибо за видео, всё очень наглядно. Интересно узнать какделать анимацию скролом)

[@nurjaxonismoilov3274]

уважаю огонь)

[@Denizes_]

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

[@НатальяЯна-г5и]

Большое спасибо! 👍💗

[@docammacod]

Как вы смотрите размер шрифта и его семейство?

[@naukadsgn]

What font виджет в бразуер

[@togzhART]

Спасибо! Очень крутое видео! Прям глаза открываете и все становится понятнее!😍

[@boriskuznetsov5475]

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

[@boriskuznetsov5475]

Спасибо еще раз, смог самостоятельно найти, если кого тоже заинтересовал этот вопрос, расширение для хрома называется WhatFont, а расширение которым можно определять трекинг в конце видео называется Visual Inspector.

[@evgen0805]

Тильда не поддерживает отрицательный letter spacing? В Zero блоке не получается выставить отрицательное значение для заголовка :(

[@naukadsgn]

Используй вот такой код #rec393927494 .tn-elem[data-elem-id="1639905162503"] .tn-atom { letter-spacing: -1px; } в инспекторе кода посмотри идентификатор заголовка и название блока. Но можно сделать еще проще. в Зеро блоке кликни правой кнопкой мыши на текст и нажми Add css class и укажи необходимый класс. а потом вставь в блок T123 вот такой код .название класса { letter-spacing: -1px; }

[@shvydkyi]

За 3Д интересно)

[@ksamsonov107]

Пожалуйста, расскажи, что за плагин ты используешь для измерения расстояния межстрочного?!

[@naukadsgn]

Visual inspector

[@Yakramercom]

Супер! Хочу урок про покадровую анимация

[@LaLu85558]

Спасибо. Очень ценная информация 👍

[@sergiodesign4058]

Полезный видос, спасибо бро! 😉

[@naukadsgn]

Завтра выйдет еще видео про сетки!

[@nikel4015]

только не понятно что это за штука справа вверху ) я думал у меня монитору конец ) а это у вас

[@Дмитрий-ц5я1т]

Привет, а можно про тренды в мобилках ещё видосик ))

[@mrNik0710]

🔥🔥🔥 Спасибо за видос!

[@AlbinaChernikova]

Очень полезное видео! А можно ссылки на сайты? спасибо!

[@ЕкатеринаЗиберт-у1ю]

А где же ссылочки на рассмотренные сайты?

[@АннаРоманцова-й3у]

😊спасибо!

[@мамадлинныеношки]

Спасибо, было ОЧЕНЬ полезно!

[@АшотОганесян-к6и]

Скролл с привязкой очень интересен, ждем!

[@Andrewbolotin]

Было ОЧЕНЬ полезно!

[@goblin4089]

Го видео про блендер

[@naukadsgn]

С синемы сложно пересесть)

[@selfclimbing]

Снимайте про тренды мобильного дизайна тоже

[@AlevtinaKostyan]

Спасибо за такую классную информацию)

[@kristopop2116]

Лакос заслужил. Молодец.

[@МарияВолкова-г6к]

покадровую анимацию по скролу хотииииим

[@ЕленаЕлена-ь6о]

Отлично! Полезно! Но как это сделать в дизайне? Расскажите начинающим)

[@naukadsgn]

nauka-dsgn.ru/composition или у нас в инстаграме есть в актуальных тема "Композиция", там оч много полезного материала

[@ASebastianPereira]

Сразу пишу интересно, пили видос новый :-)

[@naukadsgn]

Скоро скоро!

[@vanmihaylovich]

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

[@VoiceSpeck]

Так и надо было написать: Тренды по моему мнению… Ещё и на 30 минут 🤪

[@niki_lord7716]

Типичный инфоциганист судя по вступительным словам. Если не веришь - я тебе могу за 2 минуты объяснить почему. Просто прежде чем рекламировать уточняй сразу что это для полных новичков ничего не соображающих в дизайне, а не для дизайнеров у которых что то не получается. Почему? Да потому что все что ты перечислил: работа с типографикой, ритмы, композиция и т.д. Нормальный уважающий себя дизайнер давно глубоко разбирается в этой теме, даже из бесплатных источников. И не получаться это может только из за отсутствия практики и маленького числа практики. От того что ты задашь определенные правила ученику, которых кстати не существует в дизайне, его работы не станут лучше. Все это приходит только исключительно с опытом и практикой и научить со стороны никто не способен этому) Максимум - это оценить работы и озвучить где именно косяки и над чем надо работать. Но на это способны не только учителя но и другие более опытные специалисты которые сделают это бесплатно, а вообще твой дизайнерский взгляд при сравнении себя с другими работами сам будет говорить тебе нравится ли своя работа или нет и чем она отличается от других мастеров. Это все только с опытом и практикой. Если есть стоящие аргументы против - готов выслушать. А за тренды в 2022 спасибо за идеи)

[@Александр-ч6м5ш]

Неплохо.

[@AlexeyLopushanskiy]

Сайт с подъязычными тгк таблетками 😋

[@CTILET]

Покадровую анимацию по скроллу! Подписался жду !)

[@gardenliken]

Обожаю смотреть эти модные приговоры, но занимаюсь всеравно вёрсткой. А за контент сп.

[@asuskomp7767]

ууууууууууввввввжжжжжжж улетел

[@EvgeniyNordman]

2% из 100 увидели эти сайты. Делайте обзор на моб

[@AleksandrSizonenko_]

1.25

[@eugene1312]

А с рекламами не перебор? Коммерсант

[@lxbcho]

долго ты рассказываешь

[@marmanduke4878]

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

[@siviwai]

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

[@Artur_Bagaviev]

как сложно слушать этого человека

[@naukadsgn]

Почему?

[@veronicababiy5209]

согл. я слушала на скорости 2х и все равно как-то с замедлениями было

[@Lend99]

Почему сайты на английском? Напишите русским огромным шрифтом))) Вот тогда и поговорим за дизайн бггг