0:18 Это новый выпуск подкаста между пикселями.
0:21 Меня зовут Катя и я веб дизайнер.
0:23 Это полезный подкаст о дизайне и для дизайнеров, который поможет поднять чек, уровень и стать востребованным.
0:29 Этот выпуск о трендах в дизайне на 22-й год.
0:32 Сегодня поговорим о том, куда двигаться дизайнеру, на что обратить внимание и что может помочь заработать больше в этом году.
0:40 Давайте начнем с общих трендов.
0:42 И первый тренд - это скроллителлинг.
0:45 Когда каждый элемент сайта живой от символов до картинок.
0:49 Это не просто анимация, это история, ну, собственно, и название у нас происходит из слова старителлинг.
0:55 Бренды и компании начинают заботиться о том, чтобы рассказывать о своем продукте, о своей услуге через историю.
1:02 Они заботятся о том, чтобы пользователи досматривали сайт до конца.
1:06 Простые сухие лендинги: они просто умирают, скроллинг становится мертвым, потому что смотреть на статичные картинки и тексты, или пытаться найти необходимую информацию в течение долгого времени на сайте - просто представляется невозможным для пользователей.
1:21 Начинаем беречь свое время и, конечно, закрываем такие сайты, в которых можно заблудиться.
1:27 Ну, и получается, что дизайнерам немножко придется теперь позаботиться не только о красоте и юзабилите, но и о том, чтобы создать интересную историю.
1:37 И тут вход у нас вступают такие инструменты, как скетчинг, как прототипирование.
1:43 Необходимо только понимать, что такие сайты создаются за 2 дня, они создаются даже за неделю.
1:50 Здесь понадобится гораздо больше времени, но результат будет стоить того.
1:55 Приложения тоже не отстают по трендам, и здесь можно просто обозвать этот тренд как топтейлинг, потому что при нажатии мы получаем тоже какую-то интересную историю.
2:07 Следующий тренд - это визуализация данных.
2:09 Очень много сейчас стало информации, и когда клиент передает какие-то блоки, таблицы, графики и прочее, это, конечно, нужно вносить в дизайн, но важно учитывать, что это должны быть не просто сухие графики, а возможно, какие-то анимированные элементы или представленные графики в виде картинок.
2:26 Их интересно разглядывать, интересно углубиться.
2:29 Опять же, помним, для чего мы это делаем: для того, чтобы пользователь как можно дольше проводил время на сайте и добирался до той информации, за которую он пришел.
2:37 Иногда просто невозможно без данных донести инфу, выкинуть эти данные невозможно, ничего сделать невозможно.
2:43 Главное грамотно это представить и сделать так, чтобы пользователь не пролистнул этот экран.
2:50 Задача дизайнера все это дело визуализировать красиво, и можно это сделать с помощью различных диаграмм, графиков, иллюстраций, возможно, иллюстрации с рукописными какими-то словами.
3:00 Если у вас есть такая возможность, статичная инфографика, интерактивная инфографика, то есть технических инструментов здесь довольно много.
3:08 Следующий тренд - 7 любимый 3Д.
3:10 Этот тренд, в принципе, уже 4 года держится на пике популярности и только с каждым годом добавляться каких-то новых элементов.
3:17 Например, я думаю, вы заметили огромное количество визуализаций 3д, типа человечков или более сложных объектов на сайте.
3:24 Только теперь на это все можно навешивать дополнительную анимацию и эти объекты очень круто интегрировать в свой сайт.
3:31 Конечно, веб-дизайнер не обязан заниматься такой стороной, вообще этим занимаются 3-шники, но если вы найдете крутого, классного 3д-шника и скопирируетесь, то из вас получится отличная команда, и может быть ваш сайт попадет в аварс.
3:45 Ох, ну и огненный просто тренд пожарищая.
3:49 Конечно, куда без него?
3:51 Многие, думаю, заметили уже запросы от клиентов, которые просят вставить на сайт какую-то небольшую анимацию.
3:58 Причем, если они думают, что это можно реализовать с помощью кода или там, допустим, в той же тильди, иногда это не работает и необходимо уже анимировать отдельно картинки, например, в Авто Эффекте.
4:08 И требования, конечно, к такому проекту они возрастают, но, соответственно, и ценники растут.
4:15 То есть в анимацию вообще нужно очень так смотреть, большими шагами двигаться в этом направлении, я бы сказала.
4:21 И требования к крутому проекту в портфолио, в том числе, становятся все выше и выше.
4:26 То есть поставить просто статичную картинку на тот же Би Хендс - это не всегда окей.
4:31 То есть, я бы, например, стала добавлять какие-то отдельные блоки, анимированные, если у вас, допустим, там прототипы или какие-то схемы.
4:38 Это все будет очень здорово, как раз таки, смотреться именно в анимации.
4:41 Но, опять же, не обязательно здесь изучать Авто Эффект, допустим, очень круто анимацию можно оформить в принципе, но нужно понимать, как, конечно, это делать, не просто на обум лепить все, что душе придется.
4:55 Как можно это использовать в вебе, конечно же, для тех же историй, про которые я рассказала, можно использовать минималистичные эффекты с курсором, с менюшкой, с какими-то доп.
5:06 элементами, анимировать типографику, анимировать иллюстрации на сайте.
5:11 Также помните про различные микро взаимодействия, когда происходит небольшая анимация на управляющих элементах или, допустим, на кнопках.
5:18 Это очень круто тоже смотрится, когда не напрягают пользователя.
5:22 Это не значит, что вот все, что я сейчас, и нужно просто открыть сайт и навесить туда максимум анимации, которая вам придет в голову.
5:28 Пожалуйста, не делайте этого, потому что это наоборот и толкнет пользователя.
5:32 Анимация должна быть уместной.
5:34 И вообще, вот все эффекты, и вся графика на сайте должна быть максимально уместной и качественной, потому что мы боремся за внимание пользователя.
5:43 Можно запариться также с анимацией логотипа.
5:45 Думаю, вы периодически видите на видео различных проектах, где анимируется логотип, это можно также внедрить и в век.
5:52 Будет смотреться круто, но нужно продумать эту анимацию.
5:55 Не так просто взять - вот я хочу анимировать логотип.
5:58 Здесь нужно прям тоже подумать над историей, так скажем.
6:02 Добрались до моего любимого тренда - это мобильные платформы.
6:06 Я, наверное, о нем говорю уже больше, чем полгода просто уже весь язык себе отбило: о том, что нужно уметь создавать мобайл фезд, нужно уметь создавать интерфейсы мобильных приложений, все потому, что мы движемся огромными просто шагами и с невероятной скоростью к тому, что все будет в приложениях, все будет в мобильных сайтах.
6:26 Даже я вот сейчас создаю все свои проекты начиная с мобильной версии, и некоторые сайты просто даже не поддерживают диск топную версию, потому что весь трафик, который идет у меня, идет из социальных сетей и используется в основном людьми, которые сидят с телефонов.
6:42 По данным Виа Сочел в 2021 году мобильными телефонами будут пользоваться 5,22 миллиарда человек.
6:50 Просто представьте, это количество людей.
6:52 Это 66% населения мира.
6:55 А с января 2020 года количество уникальных мобильных пользователей выросло на 1,8%, на 93 миллиона человек.
7:03 Общее количество мобильных подключений увеличилось на 72 миллиона и к началу 21 года достигло 8 миллиардов.
7:10 То есть представьте, какое огромное количество людей сейчас пользуется мобильными телефонами, мобильными платформами, и что нужно делать для этого дизайнеру.
7:21 Что делать, что делать?
7:22 Конечно же, развиваться в этом направлении.
7:24 Если у вас недостаточно знаний, то поторопитесь это исправить, потому что, ну, я не представляю, как сейчас без качественного мобильного интерфейса, не обязательно приложение, то есть не всегда это необходимо клиенту.
7:36 Но просто это не взять и как в Тетрисе переставить там алименты - и у вас готовая мобильная версия сайта.
7:43 Здесь нужно подумать про сетку, про расстояние, про то, что пользователь нажимает, а не использует мышку и другие нюансы, которых огромное, просто невероятное множество.
7:54 Вы должны это понимать для того, чтобы создавать очень качественные сайты и не только сайты, и интерфейсы.
8:00 Просто потому, что здесь на дизайнер лежит очень большая ответственность, и пользователь может уйти с сайта, а ваш клиент потеряет огромное количество денег.
8:09 Создавая классные приложения и классные мобильные сайты, вы можете также стать очень востребованным дизайнером, потому что дизайнеров, которые разбираются в этом, не так много, как хотелось бы.
8:21 И что же выбрать клиенту, да, допустим, мобильное приложение или мобильную версию сайта.
8:26 Когда к вам приходит клиент, вы должны до него четко донести, что есть мобильное приложение, а что есть мобильная версия сайта.
8:34 Во-первых, не всем бизнесам это нужно.
8:37 Во-вторых, он должен понимать разницу в разработке.
8:40 Например, стоимость дизайна приложения может начинаться от 2000 рублей, а стоимость мобильного дизайна крупной платформы от 50 000 рублей.
8:47 Если говорить про полноценную разработку, то я вообще не видела приложения, дешевле, миллиона рублей в целом.
8:54 И клиент это должен понимать, у него должен быть заложен бюджет.
8:58 Но в Ангую будет огромный просто пик и спрос на эту историю.
9:02 Если уж не в этом году, то в следующем миллион процентов - потому что даже ко мне начало все больше и больше людей обращаться, как раз-таки, за приложениями.
9:10 Короче, другими словами, просто не отсеиваем эту историю и держим в голове, что в этом году вам точно нужно научиться создавать грамотные мобильные сайты, или же научиться, да не то, что или же, и научиться создавать мобильные приложения.
9:25 Ну, даже если у вас это не какая-то приоритетная ваша задача держать это в голове и думать о том, что все-таки когда-то этому нужно обучиться, я бы вам очень рекомендовала.
9:36 Идем к следующему тренду.
9:38 Это скорость загрузки.
9:39 Ну, а я думаю, это так такой, скажем, нативный тренд, который идет уже годами.
9:44 Конечно, чем быстрее грузится ваш сайт, тем лучше, но анимация, допустим, та же анимация довешивает немного, так скажем, каких-то проблем нам, да.
9:53 И мы должны это учитывать, что сайт с огромным количеством графики и анимации будет грузиться дольше.
9:58 И нужно как-то с этим бороться.
10:00 В первую очередь, при создании сайта нужно учитывать логичную навигацию по сайту, легкость восприятия информации, высокую скорость получения данных - опять же, это все нужно для того, чтобы пользователь держался на сайте как можно дольше.
10:15 В общем, все эти тренды направлены на то, чтобы упрощать работу пользователя и делать взаимодействие с вашим продуктом наиболее приятным и комфортным.
10:24 Если говорить о визуальных трендах, то все становится еще более закругленным.
10:28 Вы, думаю, стали замечать это в интерфейсах, на сайтах, менее элементов с острыми углами.
10:33 Но здесь есть такая небольшая загвоздочка, и просто лайфхак - чтобы вы об этом не забывали.
10:38 Если у вас есть прямоугольник с закругленными углами и вы хотите в него вложить еще один прямоугольник, то вам необходимо, чтобы внутренний элемент имел меньше радиус кругления угла, чем внешний.
10:50 Просто вот на заметку.
10:52 В целом, вообще интерфейсы становятся более округлыми, и эта тенденция вполне адекватна.
10:58 Следующий тренд - это фокус на контенте.
11:01 Плоский дизайн заставляет пользователя концентрироваться на контенте, не на визуале.
11:05 И, допустим, операционные системы, такие как ось, Андроид, продолжают поддерживать эту концепцию и внедряют в свои последние релизы систем эту историю, там, допустим, просвечивающиеся фоны, да, и опять же, здесь искругленные углы, и плоский дизайн, максимально плоский - везде, где это только возможно, это помогает реально пользоватьсятелю не отвлека.
11:28 Это тоже у нас идет из плоскости.
11:29 Иконки стали очень важны для пользовательского опыта, как и текст.
11:34 И дизайнеры сейчас создают иконки, имитирующие письмо для того, чтобы они сливались с текстами.
11:40 И, допустим, иконки с заливкой сейчас стали применять либо на выделении каких-то объектов, контрастов, или же для состояний дополнительных объектов.
11:48 Следующий тренд - это персонализированные интерфейсы с всякой стористыми обоями, цветовыми палитрами, яркими цветами кнопок, другими элементами управления, любое изменение в стандартном интерфейсе и пользователь, если может этим управлять, он будет этому очень рад.
12:05 То есть все приложения и вообще все это направление идет к тому, что пользователь может кастомизировать свои вещи.
12:13 Тренд стекломорфизма, клейморфизма, неоморфизма - все это стало объединяться, выглядит отличным дополнением для дизайна и это, так скажем, некое будущее визуале.
12:22 Следующий тренд - многослойная графика.
12:25 Используем иллюстрации, шрифты, цветовые градиенты - все, что нужно для того, чтобы привлечь внимание пользователя к определенным алиментам.
12:33 Но опять же, не забываем про контент и про то, что на нем все-таки нужно фокусироваться.
12:37 Не навешиваем 3000 картинок и не перегружаем вашу страницу.
12:42 Следующий тренд - это дарк мод.
12:44 Ну, здесь думаю, все понятно.
12:47 Сейчас наличие у сайтов, у интерфейсов нескольких вариантов цветовой палитры, да, то есть светлое, темная, это признак хорошего тона, так скажем.
12:58 Ну, еще пару слов о шифтовых изменениях и трендах.
13:02 Шрифт становится в целом основой дизайна и на некоторых проектах вы можете увидеть, что он как бы лидирует относительно картинок и относительно контента, как такового, потому что на шрифте можно очень хорошо выехать.
13:14 В шрифтах популярна будет заливка шрифта градиентам, динамическая типографика.
13:20 Еще возвращаются шрифты за сечками и вдохновленные - они обычно ностальгии по 70-м годам.
13:26 Шрифты на нескольких слоях.
13:28 Я думаю, что вы видели такие дизайны: когда у нас есть картинка, сзади шрифт, спереди тоже шрифт.
13:34 Я думаю, в голове вы сейчас себе представили, что это такое.
13:36 Часто любят это делать с горами на главных экранах.
13:39 Стали использовать заголовки с засечками, чтобы привнести в цифровой дизайн больше какой-то индивидуальности.
13:45 То есть, у нас второстепенный шрифт идет без засечек, а вот основной любят максимально исказить.
13:51 Где-то используют контурные шрифты, где-то рукописные шрифты, где-то брусковые.
13:55 Ну, в общем, какой-то персонализации добавляют.
14:00 На сегодня все по трендам.
14:02 Если вы знаете еще какие-то интересные тренды, замечали и хотите со мной поделиться, обязательно пишите мне в директ в инстаграме, я с вами пообщаюсь на эту тему.
14:11 Зачем вообще в целом ориентироваться в трендах?
14:14 Для того, чтобы быть готовым к любым изменениям, которые будут происходить в мире.
14:18 Иногда, допустим, обучение может занимать довольно продолжительное время.
14:22 Ну, например, если вы хотите выучить анимацию, это точно займет минимум 2 месяца.
14:27 А если вы хотите стать профессионалом в анимации, то от года и более.
14:31 Поэтому вам нужно закладывать время на то, что у вас просто не получится - как бы впрыгнуть в волну на пике тренда, вы уже должны быть к этому времени готовы.
14:40 И если вы откладывали свое образование в долгий ящик, пора об этом задуматься и сделать несколько шагов наперед.
14:47 Также хочу отметить, что сейчас все очень плавно идет в виртуальную реальность, дополнительную реальность.
14:53 Стоит даже отметить логотип меты бывшего фейсбука.
14:57 Просто обратите на это внимание, что дизайнеры потихоньку начинают адаптироваться к грядущим изменениям.
15:03 И сам дизайн уже стал далеко не только о красоте, а больше о науке, о технологиях, о психологии и о будущем.
15:10 И я знаю, что многие меня слушают и хотят стать лучшими востребованными дизайнерами на рынке, но для этого нужны усилия, и рука вот на пульсе.
15:19 Как раз-таки для этого я и записала этот выпуск, для того, чтобы вы просто понимали и ориентировались, куда вам двигаться.
15:24 Поэтому очень рекомендую на этот год записаться не на одно обучение, записать это в свои планы, свою копилку знаний, добавить все больше информации и создать не один проект, внедрив туда какие-либо тренды.
15:39 Ну, если вам был полезен этот выпуск, ставьте звездочки в айтюн, спешите ваши отзывы, отмечайте меня в историях с инсайтами из выпуска.
15:47 Я буду вам очень благодарна.
15:48 Заслышимся уже совсем скоро.
Комментарии
Войдите, чтобы оставить комментарий.