Тренды и новинки в мире CSS и веб-дизайна

Аватарка пользователя Woanerges Woanerges

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

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

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

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

***

Если включать “режим Ванги” и пытаться предсказать, что изменится в веб-дизайне в течение 2024 года, нелишним будет оглянуться на события 2023. Тренды, наметившиеся в минувшем году, так или иначе лежат в трёх основных плоскостях — это технологии (или, если хотите, инструменты веб-дизайна), стиль и организация труда.

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

Про инструменты

Сервисы на базе нейросетей по созданию дизайна сайтов для не-дизайнеров стали заметной тенденцией 2023 года. Среди прочих я бы отметил Durable, Craftum и Unicorn Platform.

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

Изучайте инструменты по созданию сайтов с помощью AI

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

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

Используйте инструменты на основе нейронных сетей, которые упростят и ускорят работу

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

Ещё одна понятная история — редактор text to interface, когда сервис типа Galileo AI на основе текстового запроса генерирует интерфейс, редактируемый внутри Figmа. Выявить UX-проблемы помогает UXArmy — отличный инструмент, который с помощью тепловых карт покажет места с шероховатостями в UX.

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

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

Например, шлем Meta Quest 3 от Meta (признана в РФ террористической организацией) наделал много шума. Мало кто ожидал от него чего-то выдающегося. Однако за свои деньги он предложил пользователям опыт, который они точно захотят распространять на всё большее количество сценариев использования. Apple Vision Pro вызвал не меньше споров в профессиональном сообществе.

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

Изучайте гайды для создания интерфейсов в смешанной реальности

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

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

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

Про стиль

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

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

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

Кстати, нельзя не отметить интересный инструмент, который объединяет нейронные сети и 3D-графику — это Magestic. Он позволяет генерировать 3D-иконки для интерфейсов. Ну и, конечно, уже полюбившийся и зарекомендовавший себя сервис — Spline. Сегодня неприлично называть себя веб-дизайнером, не поиграв с ним. И да, без Blender или аналогов будет всё сложнее убеждать заказчиков и работодателей в том, что ваш стиль актуален.

Про организацию

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

Развивайте навыки работы в распределённой команде, учитесь селф- и тайм-менеджменту

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

Работайте над собственным брендом и становитесь более универсальными

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

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

CSS
Веб-дизайн
1190