0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>23 дек 2022</li>
2
<ul><li>23 дек 2022</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Акцидентные шрифты, кастомизация деталей и крафтовые иллюстрации.</p>
4
</ul><p>Акцидентные шрифты, кастомизация деталей и крафтовые иллюстрации.</p>
5
<p>Иллюстрация: Kampong Gelamorous / Museum of Online Artifacts Almanac / Colowgee для Skillbox Media</p>
5
<p>Иллюстрация: Kampong Gelamorous / Museum of Online Artifacts Almanac / Colowgee для Skillbox Media</p>
6
<p>Журналист, автор статей про моду, искусство и дизайн. Кастомизирует одежду и влюбляет людей в английский язык.</p>
6
<p>Журналист, автор статей про моду, искусство и дизайн. Кастомизирует одежду и влюбляет людей в английский язык.</p>
7
<p>Поговорили с экспертами о том, какие тенденции в дизайне интерфейсов нам принёс 2022-й, как применять их в своих проектах и какие скиллы развивать, чтобы выделяться в следующем году.</p>
7
<p>Поговорили с экспертами о том, какие тенденции в дизайне интерфейсов нам принёс 2022-й, как применять их в своих проектах и какие скиллы развивать, чтобы выделяться в следующем году.</p>
8
<p>В материале иллюстраторы рассказывают:</p>
8
<p>В материале иллюстраторы рассказывают:</p>
9
<ul><li>как<a>нейросети</a>упрощают привычную работу;</li>
9
<ul><li>как<a>нейросети</a>упрощают привычную работу;</li>
10
<li>чем выделят работу<a>акцидентные шрифты</a>;</li>
10
<li>чем выделят работу<a>акцидентные шрифты</a>;</li>
11
<li>о новых<a>цветовых гаммах</a>в интерфейсах;</li>
11
<li>о новых<a>цветовых гаммах</a>в интерфейсах;</li>
12
<li>как<a>микровзаимодействия</a>помогают дизайнеру погрузить пользователя в продукт;</li>
12
<li>как<a>микровзаимодействия</a>помогают дизайнеру погрузить пользователя в продукт;</li>
13
<li>как<a>иллюстрации</a>стирают границу между реальным и диджитал-миром;</li>
13
<li>как<a>иллюстрации</a>стирают границу между реальным и диджитал-миром;</li>
14
<li>о смешении<a>противоположных дизайн-школ</a>;</li>
14
<li>о смешении<a>противоположных дизайн-школ</a>;</li>
15
<li>как<a>no-code</a>захватывает рынок;</li>
15
<li>как<a>no-code</a>захватывает рынок;</li>
16
<li>как<a>3D проникает в веб</a>;</li>
16
<li>как<a>3D проникает в веб</a>;</li>
17
<li>о чём ещё стоит<a>помнить дизайнерам</a>при работе с трендовыми приёмами.</li>
17
<li>о чём ещё стоит<a>помнить дизайнерам</a>при работе с трендовыми приёмами.</li>
18
</ul><p>Продуктовый дизайнер в "Альфа-Банке"</p>
18
</ul><p>Продуктовый дизайнер в "Альфа-Банке"</p>
19
<p>- Ясно можно выделить тренд на использование нейросетей. Мы привыкли, что можно сгенерировать палитру с помощью AI, получить иллюстрацию или обработать изображение. Датасеты будут расширяться, алгоритмы совершенствоваться - очень надеюсь, что в ближайшем будущем у дизайнеров не останется рутинной работы.</p>
19
<p>- Ясно можно выделить тренд на использование нейросетей. Мы привыкли, что можно сгенерировать палитру с помощью AI, получить иллюстрацию или обработать изображение. Датасеты будут расширяться, алгоритмы совершенствоваться - очень надеюсь, что в ближайшем будущем у дизайнеров не останется рутинной работы.</p>
20
<p>Дизайнер-директор диджитал-агентства<a>beta</a></p>
20
<p>Дизайнер-директор диджитал-агентства<a>beta</a></p>
21
<p>- В 2023-м дизайнеры попробуют нейронки - и как инструмент для вдохновения, и как быстрый, и, следовательно, дешёвый генератор альтернативных вариантов для своих макетов. Задача погенерить вариантики перестанет быть оверкиллом для большинства дизайнеров. А сервисы, которые предоставляют доступ к мощностям рабочих моделей, станут ещё мощнее и проще.</p>
21
<p>- В 2023-м дизайнеры попробуют нейронки - и как инструмент для вдохновения, и как быстрый, и, следовательно, дешёвый генератор альтернативных вариантов для своих макетов. Задача погенерить вариантики перестанет быть оверкиллом для большинства дизайнеров. А сервисы, которые предоставляют доступ к мощностям рабочих моделей, станут ещё мощнее и проще.</p>
22
<p>Можно сказать, что мы на пороге открытия нового профессионального направления - prompt engineer или prompt designer. Единственное, в чём я не уверен, так это в том, что prompt останется единственным интерфейсом к нейронкам.</p>
22
<p>Можно сказать, что мы на пороге открытия нового профессионального направления - prompt engineer или prompt designer. Единственное, в чём я не уверен, так это в том, что prompt останется единственным интерфейсом к нейронкам.</p>
23
Интерфейсы, сгенерированные нейросетью<em>Изображение: MidJourney / i3sN /<a>DTF</a></em><p>Дизайн-лид в <a>Osome</a>, практикующий волшебник</p>
23
Интерфейсы, сгенерированные нейросетью<em>Изображение: MidJourney / i3sN /<a>DTF</a></em><p>Дизайн-лид в <a>Osome</a>, практикующий волшебник</p>
24
<p>- Так как я состою в жюри международного конкурса, то по воле судьбы просматриваю и оцениваю тысячи работ.</p>
24
<p>- Так как я состою в жюри международного конкурса, то по воле судьбы просматриваю и оцениваю тысячи работ.</p>
25
<p>Типографика в 2022-м надёжно закрепила место за отдельным UI-приёмом, который может не только передать нужный характер и вайб, но и верно расставить акценты. Советую поизучать<a>Readymag Websites of the Year 2022</a> - там есть много хороших работ, где дизайнеры используют акцидентные шрифты.</p>
25
<p>Типографика в 2022-м надёжно закрепила место за отдельным UI-приёмом, который может не только передать нужный характер и вайб, но и верно расставить акценты. Советую поизучать<a>Readymag Websites of the Year 2022</a> - там есть много хороших работ, где дизайнеры используют акцидентные шрифты.</p>
26
Сайт платформы Mushrooms<em>Изображение: Ksenia Kovsharova /<a>Readymag</a></em>Сайт Growth Marketing Mastermind<em>Изображение: Daniil Golubev /<a>Readymag</a></em><p>Продакт-оунер дизайн-системы "Ростелекома"</p>
26
Сайт платформы Mushrooms<em>Изображение: Ksenia Kovsharova /<a>Readymag</a></em>Сайт Growth Marketing Mastermind<em>Изображение: Daniil Golubev /<a>Readymag</a></em><p>Продакт-оунер дизайн-системы "Ростелекома"</p>
27
<p>- В этом году мне особенно нравится использование естественных, более материальных цветов в оформлении веб-сайтов и интерфейсов. Кислотные, диджитальные синие цвета надоели бесконечно.</p>
27
<p>- В этом году мне особенно нравится использование естественных, более материальных цветов в оформлении веб-сайтов и интерфейсов. Кислотные, диджитальные синие цвета надоели бесконечно.</p>
28
<p>Посмотрите на <a>linktr.ee</a>с приятной гаммой. В самом начале сайта нас встречает приятная глазу зелёная заливка. Обратите внимание на простую, но яркую анимацию с эффектом параллакса. Эту натуральность интерфейса поддерживают скруглённые шейпы и устойчивая типографика.</p>
28
<p>Посмотрите на <a>linktr.ee</a>с приятной гаммой. В самом начале сайта нас встречает приятная глазу зелёная заливка. Обратите внимание на простую, но яркую анимацию с эффектом параллакса. Эту натуральность интерфейса поддерживают скруглённые шейпы и устойчивая типографика.</p>
29
<em>Скриншот: сайт<a>linktr.ee</a>/ Skillbox Media</em><p>"<a>Студия Луч</a>" делает диджитал, но на своём сайте использует спокойные пастельные цвета и большие скруглённые шейпы.</p>
29
<em>Скриншот: сайт<a>linktr.ee</a>/ Skillbox Media</em><p>"<a>Студия Луч</a>" делает диджитал, но на своём сайте использует спокойные пастельные цвета и большие скруглённые шейпы.</p>
30
<p>Ещё сильно цепляют приятные анимации микровзаимодействий и интерактив.</p>
30
<p>Ещё сильно цепляют приятные анимации микровзаимодействий и интерактив.</p>
31
<em>Скриншот: сайт "<a>Студия Луч</a>" / Skillbox Media</em><p>Ещё мне нравится<a>Potion</a>. Обратите внимание на анимацию появления текста в первом блоке, а также физику падающих тегов, которые можно крутить/вертеть/кидать по экрану.</p>
31
<em>Скриншот: сайт "<a>Студия Луч</a>" / Skillbox Media</em><p>Ещё мне нравится<a>Potion</a>. Обратите внимание на анимацию появления текста в первом блоке, а также физику падающих тегов, которые можно крутить/вертеть/кидать по экрану.</p>
32
<em>Скриншот: сайт<a>Potion</a>/ Skillbox Media</em><p><strong>Дарья Прокуда:</strong></p>
32
<em>Скриншот: сайт<a>Potion</a>/ Skillbox Media</em><p><strong>Дарья Прокуда:</strong></p>
33
<p>- Кастомные курсоры, микроанимации при наведении и саунд-эффекты, добавление музыки в проекты - это всё то, что может передать клиенту полный спектр эмоций, захватить его внимание надолго и произвести впечатление. Это легко отследить на сайте проекта "<a>Мир коренных народов</a>" Джимми Нельсона. Пространство сайта и интерфейса имеет глубину и перестаёт быть плоским, что даёт огромную вариативность в сторителлинге и навигации.</p>
33
<p>- Кастомные курсоры, микроанимации при наведении и саунд-эффекты, добавление музыки в проекты - это всё то, что может передать клиенту полный спектр эмоций, захватить его внимание надолго и произвести впечатление. Это легко отследить на сайте проекта "<a>Мир коренных народов</a>" Джимми Нельсона. Пространство сайта и интерфейса имеет глубину и перестаёт быть плоским, что даёт огромную вариативность в сторителлинге и навигации.</p>
34
<em>Скриншот: сайт<a>Jimmy Nelson</a>/ Skillbox Media</em>Проект "Мир коренных народов"<em>Скриншот: сайт<a>Jimmy Nelson</a>/ Skillbox Media</em><p><strong>Дарья Прокуда:</strong></p>
34
<em>Скриншот: сайт<a>Jimmy Nelson</a>/ Skillbox Media</em>Проект "Мир коренных народов"<em>Скриншот: сайт<a>Jimmy Nelson</a>/ Skillbox Media</em><p><strong>Дарья Прокуда:</strong></p>
35
<p>- Да, это тоже про эмоции, как и микровзаимодействия, но иллюстрации буквально захватили внимание всех крупных сервисов и компаний. Они добавляют ту необходимую крафтовость, наивность и рукотворность, что позволяет стереть границу между диджиталом и реальным миром. Как никогда становятся актуальными японский стиль и графика.</p>
35
<p>- Да, это тоже про эмоции, как и микровзаимодействия, но иллюстрации буквально захватили внимание всех крупных сервисов и компаний. Они добавляют ту необходимую крафтовость, наивность и рукотворность, что позволяет стереть границу между диджиталом и реальным миром. Как никогда становятся актуальными японский стиль и графика.</p>
36
Иллюстрации с сайта японского агентства недвижимости Friends<em>Изображение:<a>finders-tokyo.co.jp</a></em><p><strong>Дарья Прокуда:</strong></p>
36
Иллюстрации с сайта японского агентства недвижимости Friends<em>Изображение:<a>finders-tokyo.co.jp</a></em><p><strong>Дарья Прокуда:</strong></p>
37
<p>- Я бы хотела подсветить две вещи: это швейцарская графичность и чистота, она сейчас соперничает с яркостью и эмоциональностью новой волны любви к хиппи и ретро. Но эта оппозиция как будто не только разграничивает использование визуальных приёмов относительно готовности клиентов воспринимать тот или иной стиль, но и делит на прогрессивных новаторов и тех, кто отдаёт долг традициям.</p>
37
<p>- Я бы хотела подсветить две вещи: это швейцарская графичность и чистота, она сейчас соперничает с яркостью и эмоциональностью новой волны любви к хиппи и ретро. Но эта оппозиция как будто не только разграничивает использование визуальных приёмов относительно готовности клиентов воспринимать тот или иной стиль, но и делит на прогрессивных новаторов и тех, кто отдаёт долг традициям.</p>
38
Портфолио Дженис Фирин<em>Скриншот: сайт<a>Janice Feryn</a>/ Skillbox Media</em><em>Скриншот: сайт<a>Kampong Gelamorous</a>/ Skillbox Media</em><p>Я могу предсказать, что противостояние точно закончится в 2023-м, так как уже видно взаимное проникновение двух оппозитных графических приёмов:</p>
38
Портфолио Дженис Фирин<em>Скриншот: сайт<a>Janice Feryn</a>/ Skillbox Media</em><em>Скриншот: сайт<a>Kampong Gelamorous</a>/ Skillbox Media</em><p>Я могу предсказать, что противостояние точно закончится в 2023-м, так как уже видно взаимное проникновение двух оппозитных графических приёмов:</p>
39
<em>Скриншот: сайт<a>Museum of Online Artifacts Almanac</a>/ Skillbox Media</em><p><strong>Артём Кожевников:</strong></p>
39
<em>Скриншот: сайт<a>Museum of Online Artifacts Almanac</a>/ Skillbox Media</em><p><strong>Артём Кожевников:</strong></p>
40
<p><strong>- </strong>В индустрии продолжаются неутихающие разборки двух школ. По одну сторону остаётся богатая, умудрённая опытом типографская школа, по другую - молодая школа веба с целой кучей всякого экспериментального дизайна. Сталкиваясь, они обогащают друг друга, штуки из книг, журналов и плакатов встраиваются в веб, а приёмы из интерактивного пространства органично заезжают в печать. Просто следите за этим.</p>
40
<p><strong>- </strong>В индустрии продолжаются неутихающие разборки двух школ. По одну сторону остаётся богатая, умудрённая опытом типографская школа, по другую - молодая школа веба с целой кучей всякого экспериментального дизайна. Сталкиваясь, они обогащают друг друга, штуки из книг, журналов и плакатов встраиваются в веб, а приёмы из интерактивного пространства органично заезжают в печать. Просто следите за этим.</p>
41
<p>Веб всё больше будет стараться быть похожим на мобильный App, и в UI, и в UX. Это не будет Mobile First, скорее - своеобразная симуляция мобилки.</p>
41
<p>Веб всё больше будет стараться быть похожим на мобильный App, и в UI, и в UX. Это не будет Mobile First, скорее - своеобразная симуляция мобилки.</p>
42
Концепт сайта для проекта Strapped Archives. Строгая книжная типографика внутри веб-сайта<em>Изображение:<a>HOLOGRAPHIK®</a>/ Hrvoje Grubisic /<a>Dribbble</a></em><p><strong>Дарья Прокуда:</strong></p>
42
Концепт сайта для проекта Strapped Archives. Строгая книжная типографика внутри веб-сайта<em>Изображение:<a>HOLOGRAPHIK®</a>/ Hrvoje Grubisic /<a>Dribbble</a></em><p><strong>Дарья Прокуда:</strong></p>
43
<p>- Глобальным трендом также стали коллаборации брендов для усиления метафор. Так, например, вы можете относительно вашего стиля подобрать себе плейлист:</p>
43
<p>- Глобальным трендом также стали коллаборации брендов для усиления метафор. Так, например, вы можете относительно вашего стиля подобрать себе плейлист:</p>
44
<em>Скриншот: сайт<a>Spotify</a>/ Skillbox Media</em><p><strong>Артём Кожевников:</strong></p>
44
<em>Скриншот: сайт<a>Spotify</a>/ Skillbox Media</em><p><strong>Артём Кожевников:</strong></p>
45
<p>- No-code в 2023-м снова попробует отъесть огромную долю рынка. К Tilda, Readymag и Webflow, который сейчас просто на диком хайпе из-за новой маркетинговой стратегии, активно подтягивается Framer Sites. Ждём, когда же Figma выпустит свой паблишер и научится выводить макеты в веб одной кнопкой.</p>
45
<p>- No-code в 2023-м снова попробует отъесть огромную долю рынка. К Tilda, Readymag и Webflow, который сейчас просто на диком хайпе из-за новой маркетинговой стратегии, активно подтягивается Framer Sites. Ждём, когда же Figma выпустит свой паблишер и научится выводить макеты в веб одной кнопкой.</p>
46
<p>Кстати, Figma, если ты это читаешь, знай - мы тут, если честно, уже заждались =)</p>
46
<p>Кстати, Figma, если ты это читаешь, знай - мы тут, если честно, уже заждались =)</p>
47
Сайт, свёрстанный на Webflow без программирования<em>Изображение: Allen Z /<a>Webflow</a></em><p><strong>Артём Кожевников:</strong></p>
47
Сайт, свёрстанный на Webflow без программирования<em>Изображение: Allen Z /<a>Webflow</a></em><p><strong>Артём Кожевников:</strong></p>
48
<p>- Всё проще становится 3D. Многие достойные рабочие инструменты сразу ориентированы на работу в вебе. Эти факторы также открывает доступ к этой технологии для широкой аудитории. Я бы назвал этот тренд Easy-Cheap-Web-3D. Ещё в 3D в тренде генеративная графика, ноды в Blender, TouchDesigner, Houdini, Unreal Engine 5, быстрый дизайн тридэшек из ассетов.</p>
48
<p>- Всё проще становится 3D. Многие достойные рабочие инструменты сразу ориентированы на работу в вебе. Эти факторы также открывает доступ к этой технологии для широкой аудитории. Я бы назвал этот тренд Easy-Cheap-Web-3D. Ещё в 3D в тренде генеративная графика, ноды в Blender, TouchDesigner, Houdini, Unreal Engine 5, быстрый дизайн тридэшек из ассетов.</p>
49
3D-концепт дрона Tesla<em>Изображение:<a>Orizon</a>/<a>Angel Villanueva</a>/<a>Dribbble</a></em><p><strong>Ольга </strong><strong>Лопатина:</strong></p>
49
3D-концепт дрона Tesla<em>Изображение:<a>Orizon</a>/<a>Angel Villanueva</a>/<a>Dribbble</a></em><p><strong>Ольга </strong><strong>Лопатина:</strong></p>
50
<p>- Есть набор трендов, который не меняется уже года три: крупная экспериментальная типографика (желательно кинетическая), микроанимации, темизация, минимализм, брутализм (или необрутализм), использование 3D, иммерсивный скролл. В плане UI работу 2021-го и 2022-го почти невозможно отличить.</p>
50
<p>- Есть набор трендов, который не меняется уже года три: крупная экспериментальная типографика (желательно кинетическая), микроанимации, темизация, минимализм, брутализм (или необрутализм), использование 3D, иммерсивный скролл. В плане UI работу 2021-го и 2022-го почти невозможно отличить.</p>
51
<p>Все очень ждут, когда произойдёт революция AR и VR - но в этом году долгожданного прорыва не случилось. Web 3.0, о котором все говорят, пока в зачаточном состоянии.</p>
51
<p>Все очень ждут, когда произойдёт революция AR и VR - но в этом году долгожданного прорыва не случилось. Web 3.0, о котором все говорят, пока в зачаточном состоянии.</p>
52
<p>Самое главное - делать то, что тебе нравится. Любишь классные 3D - учись Blender, нравится минимализм и брутализм - смотри больше референсов, анализируй и пробуй повторить. Practice makes perfect.</p>
52
<p>Самое главное - делать то, что тебе нравится. Любишь классные 3D - учись Blender, нравится минимализм и брутализм - смотри больше референсов, анализируй и пробуй повторить. Practice makes perfect.</p>
53
<p><strong>Дарья Прокуда:</strong></p>
53
<p><strong>Дарья Прокуда:</strong></p>
54
<p>- Я верю, что 2023-й год будет временем эмоций, сила их сейчас велика, поэтому точно в палитре стоит обращать внимание на то, как вы можете усилить эффект от взаимодействия с интерфейсом, дополнить его и расширить своё влияние на клиента. Не зря последние годы все говорят про фиджитал и стирание границ для пространства интерфейса, а также о мультисенсорном опыте.</p>
54
<p>- Я верю, что 2023-й год будет временем эмоций, сила их сейчас велика, поэтому точно в палитре стоит обращать внимание на то, как вы можете усилить эффект от взаимодействия с интерфейсом, дополнить его и расширить своё влияние на клиента. Не зря последние годы все говорят про фиджитал и стирание границ для пространства интерфейса, а также о мультисенсорном опыте.</p>
55
<p><strong>Артём Кожевников:</strong></p>
55
<p><strong>Артём Кожевников:</strong></p>
56
<p>- Успешный дизайнер в 2023-й, в какой бы организации он ни работал, будет использовать всё, о чём я говорил выше. А это я ещё не сказал об After Effects и обязательных базовых знаниях маркетинга, бизнеса, копирайтинга и редактуры, продаж и переговоров. Это обусловлено тем, что порог в профессию продолжает неукоснительно снижаться, а значит, конкурентное преимущество будут иметь специалисты, которые освоили больше навыков, чем другие коллеги по цеху. В общем, в новом году снова важно быть T-shaped. Загвоздка лишь в том, что в нашей профессии эта верхняя перекладина всё растёт и растёт. С другой стороны, в этом и есть вся прелесть профессии =)</p>
56
<p>- Успешный дизайнер в 2023-й, в какой бы организации он ни работал, будет использовать всё, о чём я говорил выше. А это я ещё не сказал об After Effects и обязательных базовых знаниях маркетинга, бизнеса, копирайтинга и редактуры, продаж и переговоров. Это обусловлено тем, что порог в профессию продолжает неукоснительно снижаться, а значит, конкурентное преимущество будут иметь специалисты, которые освоили больше навыков, чем другие коллеги по цеху. В общем, в новом году снова важно быть T-shaped. Загвоздка лишь в том, что в нашей профессии эта верхняя перекладина всё растёт и растёт. С другой стороны, в этом и есть вся прелесть профессии =)</p>
57
<p><strong>Денис Пушкарь:</strong></p>
57
<p><strong>Денис Пушкарь:</strong></p>
58
<p>- Из года в год я повторяю одно и то же - дизайнеру нужно использовать голову. Тренды - это хорошо, но надо понимать, какие из них хорошие, какие бесполезные, и с умом использовать только те, которые помогают решить задачу.</p>
58
<p>- Из года в год я повторяю одно и то же - дизайнеру нужно использовать голову. Тренды - это хорошо, но надо понимать, какие из них хорошие, какие бесполезные, и с умом использовать только те, которые помогают решить задачу.</p>
59
<p>Добавлю, что всё больше дизайнерам надо мыслить не только дизайном, но ещё и разработкой, если мы говорим об интерфейсах. Знание основ фронтенда очень сильно помогает в работе: в выборе технологий и в общении с командой. А ещё это хорошее ограничение: сделать дизайн так, чтобы было круто, но и на проде устройство не превращалось в раскалённую печку от обилия анимаций, 3D и прочего.</p>
59
<p>Добавлю, что всё больше дизайнерам надо мыслить не только дизайном, но ещё и разработкой, если мы говорим об интерфейсах. Знание основ фронтенда очень сильно помогает в работе: в выборе технологий и в общении с командой. А ещё это хорошее ограничение: сделать дизайн так, чтобы было круто, но и на проде устройство не превращалось в раскалённую печку от обилия анимаций, 3D и прочего.</p>
60
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>
60
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>