Я из поколения десктоп-софта. От Windows 95 до Windows 7 я рос на преимущественно офлайн-приложениях, которые управлялись мышью и клавиатурой — задолго до планшетов и смартфонов. В последнее время я скучаю по одной конкретной части той эпохи: по консистентности дизайна. В этом эссе я хочу рассказать про идиоматический дизайн, подчеркнуть важность гомогенных интерфейсов и предложить мысль, что мы потеряли что-то важное.

• Идиоматический дизайн — это набор настолько распространённых решений, что и пользователи, и разработчики применяют их «не задумываясь». Чекбокс «Запомнить меня» — каноничный пример: никто не делает выпадающий список или текстовое поле для этого вопроса.
• Десктоп-эра (Windows 95–7) держалась на гомогенных интерфейсах: File / Edit / View, подчёркнутые буквы для шорткатов вроде Alt + F, статус-бар с состоянием, слова вместо иконок. Идиомы диктовали ОС и её GUI-библиотеки.
• Веб-эра — это эра гетерогенных интерфейсов. Figma и Linear — два лучших энтерпрайз-инструмента сегодня — не разделяют ни одной иконки и ни одного шортката. Даже внутри Google: Gmail, GSuites и Google Docs — три разных опыта.
• Причины разрушения идиом: переход на мобильные (паттерны для тач-экрана пришлось переизобретать), и то, что современный фронтенд пишут не на голом HTML, а на React + npm-пакетах, где идиомы теряются на каждой итерации.
• Apple — главный выживший пример идиоматического дизайна в наше время. Эффект «it just works» строится на том, что iOS навязывает третьим приложениям свои шрифты, кнопки, жесты. То же делает Substack для авторов: ноль настроек, всегда выглядит одинаково.
• Практический вывод для разработчика: следовать HTML/CSS-идиомам, не переизобретать `` через React, не ломать back-button браузера, предпочитать слова иконкам, и понятность — красоте.

Идиомы дизайна

Допустим, вы заходите на сайт, и он спрашивает: «вы хотите остаться залогиненным?». Есть множество способов задать этот вопрос: текстовое поле, в которое можно ввести «да» или «нет»; выпадающий список с вариантами «Запомнить меня» и «Выйти при закрытии окна». Но в реальности это всегда чекбокс. Почему?

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

Гомогенные интерфейсы

Чекбокс — это ещё и часть интерфейса. Через него вы взаимодействуете с системой и вводите данные. Интерфейс тем лучше, чем меньше думанья он требует: будь то руль автомобиля или онлайн-форма — если на разбирательство уходит хоть какое-то время, это плохо. Когда вы взаимодействуете со множеством вещей, вы хотите гомогенных интерфейсов с консистентным опытом. Если вы выучили, что Cmd + C — это «копировать», вы хотите, чтобы это работало везде. Никто не хочет помнить, что в одних случаях нужно Ctrl + Shift + C, а в других правый клик → «копировать».

Но мы пришли именно к этому. Софт ушёл в интернет, и интерфейсы перестали быть гомогенными вообще. Сотни способов выбрать дату, ввести номер банковской карты, сделать любую банальную операцию. Шорткаты в каждом приложении свои. Способов взаимодействия столько, что их нельзя ни запомнить, ни выучить. Использование веб-приложений в 2023-м — это бесконечное упражнение «где у этой штуки то, что мне нужно?».

Эра десктоп-софта

Для контраста: одной из сильных сторон десктоп-эры была высокая консистентность интерфейсов через идиомы дизайна. Посмотрите на типичный скриншот из Windows 2000 — Microsoft Word.

Визуально это слегка уродливо и устарело: всё прямоугольное, шрифт так себе, цвета тусклые. Но интерфейс делает несколько вещей по-настоящему правильно.

• Структура меню «Файл / Правка / Вид…» была стандартной. В Adobe Photoshop или Microsoft Excel — без разницы, вы знали, что «Сохранить» лежит в «Файле», «Отменить» в «Правке», «Полный экран» в «Виде» и так далее.
• Меню навигируется с клавиатуры. У каждого пункта есть подчёркнутая буква: F в File, N в New. Это шорткаты. Нажимаете Alt + F, открывается меню «Файл», нажимаете N — создаётся новый файл. И мощным пользователям удобно, и шорткаты легко учить.
• Статус-бар внизу показывает всё про текущее состояние: страницу, столбец, количество слов, идёт ли запись правок, в каком вы режиме (вставки или замены) и так далее.
• Пункты меню подписаны словами. Слова, не иконки, — основной интерфейс к действиям. Иконки используются только там, где смысл очевиден. Весь интерфейс не оставляет места для воображения. На скриншоте нет «интересно, а что эта кнопка делает?» — вы знаете, как этим пользоваться, даже если никогда раньше не пользовались.

Возможно, вы не знаете, что значат метки REC, TRK, OVR в статус-баре. Тогда вам помог бы ещё один стандартный паттерн: всплывающие подсказки при наведении мыши, которые объясняют, что эта штука делает.

Что критично — эти идиомы дизайна использовались не только в Microsoft Word, а вообще во всей экосистеме Windows. Посмотрите на экран выхода из Windows XP. Каждая кнопка визуально явно кнопка и подписана прямо тем, что она делает. У каждой подчёркнутая буква для шортката. Разве не приятно?

Эра десктоп-софта была эрой гомогенных интерфейсов — возможно потому, что операционная система и её GUI-библиотеки диктовали огромные пласты дизайна, и эти ограничения подталкивали разработчиков к конформным паттернам.

Стоит упомянуть, что последние десятилетия Microsoft вместе с релизами Windows публиковала несколько-сотен-страничные жёстко предписывающие гайды по тому, как делать идиоматические приложения. Один из недавних примеров — Windows Apps Design.

Эра браузерного софта

Эра браузерного софта — это эра гетерогенных интерфейсов. Возьмите два моих любимых веб-приложения: Figma и Linear.

Я намеренно беру утилитарный энтерпрайз-софт и не сравниваю его с Facebook, Twitter и подобными — это были бы яблоки и апельсины.

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

Мы в эпохе индивидуально хорошо сделанных и полезных веб-приложений, и все они уникальны. Даже в продуктах одной и той же компании опыт гетерогенный: пользоваться Gmail — это совсем не то же самое, что пользоваться GSuites, и совсем не то же самое, что Google Docs. В сумме это очень фрустрирует. Отсутствие гомогенных интерфейсов означает, что я провожу большую часть своего цифрового времени не в продуктивном потоке, а тыкая по экрану и спрашивая себя: «можно ли по этому кликнуть? откроется ли это в новой вкладке? сработает ли кнопка „назад" в браузере?». Жуть.

Эта негомогенность — по двум причинам.

Переход на мобильные

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

Современный фронтенд-разработчик живёт в культуре копирования и переиспользования модульных компонентов, поэтому копировать-вставлять плохие паттерны и закреплять их — очень легко. После 10+ лет такого подхода поколение за поколением фронтендеров деградировало качество UI/UX-дизайна.

Недостаточно идиом за пределами HTML

Если бы все следовали одним и тем же идиомам, интерфейсы бы выглядели довольно консистентно. В ранние годы интернета сильные идиомы были: гиперссылки на другие страницы — синие подчёркнутые, фиолетовые если уже посещали. Прекрасно. Сегодня каждый сайт — это собственная угадайка о том, как стилизованы элементы интерфейса. Это ссылка? Может быть.

Может удивлять, что современный веб-дизайн настолько неидиоматичен — ведь стандарты HTML/CSS очень предписывающие. Проблема в том, что хотя стандарты для написания HTML существуют, его никто не пишет. Все пишут React в TypeScript или последний фреймворк. Импортируют бесчисленные npm-пакеты. Всё это проходит через сложный билд-процесс и выдаёт что-то, что бежит в браузере.

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

Фронтенд-разработчики не делают ничего неправильного. Браузеры сегодня очень мощные и предлагают универсальные API, которые позволяют делать почти всё, если подходить креативно. Например, Figma не следует ни одной HTML-идиоме, потому что в ней нет HTML. Она написана на WebAssembly; команда на cutting edge-реализации десктоп-стиля софта в браузере. Конечно, это ломает HTML-as-document-модель веб-страницы. Кнопка «назад» в браузере, шорткаты и так далее идут лесом, пока заново выстраивается парадигма взаимодействия человека и компьютера.

Короче, веб-идиом дизайна мало, потому что фронтенд-разработка движется слишком быстро. Инженеры заняты тем, что возможно, а не вопросами полировки — и правильно. Многопользовательская коллаборация в реальном времени гораздо ценнее шорткатов для опытных пользователей. А поскольку существует бесконечное количество и фронтенд-пакетов, и форматов взаимодействия, навязывать единые идиомы на такое большое пространство очень тяжело. Должно пройти время, чтобы передний край остыл, чтобы лучшие паттерны проявились и стали идиоматическими.

Хуже того: даже на техническом уровне правильные идиомы часто пропускают разработчики, которые гонят к финишной черте. Я видел в open source-кодовых базах <span> с обработчиком onclick вместо тега <a>. Это хаос, и это ломает скрин-ридеры и другие средства доступности.

Успех идиоматического дизайна

И всё же некоторые из самых успешных продуктовых организаций сегодня агрессивно навязывают свои идиомы дизайна и достигают какой-то гомогенности интерфейсов.

Apple — отличный пример. Мы говорили про Microsoft прошлого, но Apple сегодня двигает резко бескомпромиссную дизайн-систему. Общая библиотека шрифтов, кнопок, цветов и её консистентность через все нативные приложения и устройства Apple создали мощный эффект подражания для сторонних приложений. Даже когда вы пользуетесь сторонним приложением на iPhone, взаимодействие через клавиатуру, pinch-to-zoom и так далее контролируется iOS. Это большая часть эффекта Apple «оно просто работает». Сильный, со вкусом сделанный, идиоматический дизайн — в ядре успеха Apple.

Что интересно про «оно просто работает»-эффект — он заставляет пользователей доверять дефолтам и избегать кастомизации. Похожая динамика на платформах вроде Substack, где у меня как у автора нет возможности выбрать шрифт или даже подчеркнуть текст. Но ограничивающие дефолты выставлены со вкусом, и это отлично работает. Дизайн-принципы Substack и Apple набирают распространение по мере успеха этих продуктов: дизайнеры смотрят на них как на удачные примеры. Эти решения становятся идиомами через две вещи: (1) люди сходятся на них как на хорошем дизайне, и (2) частоту использования в сообществе.

Что с этим делать

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

1. Изучайте и следуйте идиомам HTML/CSS, когда возможно. Например, ссылка должна быть подчёркнутой, цветной, с курсором-пальцем при наведении и написана как тег <a>.
2. Избегайте JavaScript-переизобретений базовых HTML-элементов: например, React-компонент Button вместо стилизованного <button>.
3. Изучайте и следуйте идиомам браузера, когда возможно. Кнопка «назад» должна всегда работать. Копирование-вставка URL должны приводить пользователя к тому же интерфейсу. Ctrl+Click по навигационному элементу должен открывать его в новой вкладке.
4. Если отклоняетесь от общих идиом — убедитесь, что ваш дизайн полностью внутренне консистентен и хотя бы «идиоматичен» внутри вашей организации.
5. Предпочитайте слова иконкам. Используйте только иконки, понятные универсально.
6. Если сомневаетесь — делайте визуальные элементы очевидными. Никогда не должно возникать вопроса, кнопка это или таб.
7. Предпочитайте то, что легко понять, тому, что визуально красиво.
8. Если зашли в тупик — обратитесь к двум типам ресурсов: лучшим сайтам с дизайном, которые вы знаете, и книгам по интерфейсному дизайну прошлых десятилетий. Большинство проблем интерфейсного дизайна сегодня — не новые, а повторы исторических, у которых есть решённые аналоги в прошлом.

Я мечтаю о дне, когда каждый датапикер или форма ввода банковской карты в интернете будут абсолютно одинаковыми — когда после 30 лет итеративной разработки и миллионов попыток мы наконец сойдёмся на лучшей. Я мечтаю о будущем, в котором в каждом веб-приложении Ctrl+Click будет открывать ссылку в новой вкладке. Это было бы хорошо.

От переводчика

Эссе написано в 2023 году, но за два с половиной года консистентности в вебе не прибавилось — скорее наоборот. ИИ-сгенерированные интерфейсы и v0/Cursor-style фронтенд-генерация только увеличили число способов сделать одно и то же: каждый промпт даёт чуть новый <Button> с уникальным API.

Из практически применимого для российских команд: совет «следуйте HTML-идиомам» снижает не только риск сломать UX, но и число npm-зависимостей — а значит, и риск supply-chain атак, и порог входа для новых разработчиков. Особенно ценно, когда команда меняется быстрее, чем проект.

Оригинал эссе: essays.johnloeber.com. Сайт автора: johnloeber.com.

Раньше у Ostrovok! Tech не было своей айдентики — визуал собирали из разных элементов основного бренда. В 2025 году, на фоне обновления бренда работодателя, команда решила разработать отдельный визуальный стиль для Tech-направления.

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

Команда за месяц разработала новую айдентику и провела редизайн YouTube и Хабра.

Задача: разработать собственный стиль Ostrovok! Tech без отрыва от бренда работодателя

У технического направления Ostrovok! не было собственного визуального стиля. Для оформления контента (постов, статей или видео) дизайнеры заимствовали элементы из айдентики бренда работодателя. Но правил, которые бы объясняли, как использовать эти компоненты для Ostrovok! Tech, не существовало. Из-за отсутствия единого подхода и шаблонов каждый креатив собирался с нуля — в результате все визуалы выглядели по-разному и непоследовательно.

Техническому бренду понадобился полноценный стиль, который подчеркнет его основные преимущества, сохранит связь с брендом работодателя, и при этом визуально отделит Tech-направление от основного бренда.

Параметры проекта

• Команда: команда бренда Ostrovok! Tech, арт-директор и дизайнер
• Срок: команда за месяц разработала айдентику и провела редизайн YouTube и Хабра
• Цвета: чёрный (20%), серебряный (40%), синий (40%)
• Элементы: 3D-объекты, фото с IT-командой, буква «О!», термины и шутки разработчиков
• Применение: Телеграм (посты), Хабр (статьи), YouTube (оформление канала и видео), мерч

Визуальная система: шаблоны для быстрого производства

Новая айдентика — это система готовых элементов и правил:

Цвета с чёткими пропорциями

→ Чёрный — 20% (технологичность)

→ Серебряный — 40% (инженерный подход)

Визуальные элементы

→ 3D-объекты

→ Фото с IT-командой

→ Буква «О!»

Шаблоны

→ Телеграм (посты), Хабр (статьи)

→ YouTube (оформление канала и видео)

→ Мерч

Три главные сложности

🔴 Проблема: сделать отдельную айдентику, но не потерять связь с брендом работодателя Ostrovok!

✅ Решение: оставили 3D-объекты, фотостиль и букву «О!», добавили новые смыслы, цвета и графические приёмы

Сохранили визуальную базу из бренда работодателя, но добавили в айдентику чёрный, серебряный и элементы, связанные с IT.

🔴 Проблема: чёрный и серебро могут сделать айдентику слишком мрачной

✅ Решение: ограничили использование цветов по процентам

Чёрный — не более 20% материалов, синий и серебряный — по 40%. Это позволило сохранить технологичность без мрачности.

🔴 Проблема: внутренние шутки могут оттолкнуть внешнюю аудиторию

✅ Решение: нейтральные макеты с небольшими «пасхалками»

Сделали достаточно понятные материалы для внешней аудитории, но добавили «пасхалки» для своих.

Эта айдентика — про наших разработчиков: смелых, энергичных и тех, кто любит менять правила игры. Мы собрали это в фирменный визуальный язык Ostrovok! Tech — понятный внешней аудитории и свой для команды.

Реклама. ООО «Бронирование Гостиниц», ИНН 7703389880, erid: 2W5zFGbhSD7

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

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

Зачем детям дизайн сайтов и Фигма

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

Основные возможности Фигмы:

1. Работа в браузере. Не нужно скачивать и устанавливать сложное программное обеспечение. Достаточно иметь компьютер со средними характеристиками или даже планшет с выходом в интернет и современным браузером, таким как Google Chrome или Яндекс.Браузер.
2. Совместная работа в реальном времени. Это одна из самых сильных сторон Figma. Несколько человек могут одновременно работать над одним проектом, видя изменения друг друга мгновенно, как в Google Документах. Ребенок может вместе с другом или командой на школьном проекте рисовать макет сайта, обсуждать идеи в комментариях прямо на полях и сразу вносить правки.
3. Создание интерактивных прототипов. Фигму используют для дизайна сайтов, потому что с ее помощью можно не просто нарисовать статичную картинку кнопки, а сделать ее функциональной. С помощью инструмента Prototype можно связать экраны между собой, задать реакцию на нажатие, чтобы при клике на кнопку происходил переход на другой экран, как в настоящем приложении.
4. Огромная библиотека бесплатных ресурсов. В Figma есть бесплатная библиотека, где дизайнеры со всего мира делятся своими наработками. Ребенок может найти и скопировать в свой проект тысячи готовых, профессионально сделанных элементов: иконки, наборы кнопок, карточки товаров, мокапы (макеты устройств для демонстрации дизайна).

Польза Фигмы для школьников:

• Для детей это инструмент для дизайна сайта школьного проекта или личного блога. Вместо скучного шаблона можно самостоятельно спроектировать уникальный макет для сайта о своем хобби, исследовательской работе или отчете о летней практике.
• Создание макета мобильного приложения для стартапа. У многих подростков есть идеи для полезных приложений. Figma позволяет превратить эти идеи в визуальный прототип, который можно показать другим, чтобы объяснить замысел.
• Оформление презентаций и инфографики. Инструменты Figma для работы с текстом, фигурами и композицией позволяют создавать стильные, современные слайды или плакаты, которые будут выгодно выделяться на школьной конференции или конкурсе.
• Старт в UI/UX-дизайне. UI (User Interface) — это пользовательский интерфейс, внешний вид, а UX (User Experience) — удобство использования. Figma — основной инструмент в этой профессии. Понимание логики и принципов проектирования интерфейсов дает подростку серьезное преимущество и помогает разобраться, интересен ли ему веб-дизайн.

10 лучших курсов по Фигме и дизайну сайтов для детей и подростков

Мы собрали топ из 10 курсов веб-дизайна для детей в Figma. В обзоре каждого курса есть основная информация: рекомендованный возраст, формат и длительность, навыки, которые получит ученик, итоговый проект и важные особенности. Это поможет вам оценить, какая программа лучше всего соответствует интересам и целям вашего ребенка.

1. Курс веб-дизайна для детей от 9 до 13 лет — Пиксель

Этот онлайн-курс создан специально для младших и средних школьников, которые делают первые шаги в цифровом дизайне. Основная цель — познакомить с интерфейсом Figma и Tilda в игровой и понятной форме, без сложной теории. Занятия проходят в небольших группах, а значит, преподаватель уделит внимание каждому.

Программа построена от простого к сложному: сначала дети изучают базовые инструменты (фигуры, текст, заливка), потом учатся создавать композиции из готовых элементов, а затем собирают свои первые макеты — например, экраны мобильного приложения, страницы сайтов. Дети изучат не только инструменты Figma, но и всю логику работы дизайнера: анализ целевой аудитории, UX и UI, презентацию проекта заказчику. По итогам выдается сертификат, но главное — у ребенка будут готовые проекты для портфолио.

Курс состоит из 3 модулей, длительность каждого — от 1,5 до 3 месяцев.

2. Курс веб-дизайна для детей и подростков 10-15 лет — GeekSchool

Эта программа подойдет для детей и подростков самого разного уровня: от новичков в дизайне до ребят, которые рассматривают дизайн как возможную будущую профессию. Под руководством практикующих дизайнеров ученики проходят полный цикл создания интерфейса: от брифа и скетчей до интерактивного прототипа и дизайн-системы. Формат включает практические вебинары, разбор домашних заданий с персональной обратной связью и работу над проектами в командах. Итогом становится полноценное портфолио, например, с дизайном образовательного приложения или интернет-магазина, и сертификат об окончании курса.

Курс длительный и рассчитан на 8 месяцев.

3. Курс веб-дизайна с нуля для детей 10-15 лет — Coddy

Курс предлагает сбалансированный подход, совмещая теорию современного веб-дизайна и интенсивную практику в Figma — что так важно для новичков. На занятиях разбираются ключевые принципы: сетка и композиция, работа со шрифтами и цветом, адаптивность макетов. Большое внимание уделяется этапу прототипирования — созданию «скелета» будущего интерфейса перед добавлением графики. Дети выполнят несколько проектов возрастающей сложности, и по окончании курса у них будет не только сертификат, но готовые работы, которые можно сразу использовать в своем портфолио.

Длительность курса — от 6 месяцев.

4. Дизайн сайтов и приложений с нуля для детей 11-17 лет — Foxford

Это курс в видеозаписи, каждое занятие состоит из теории, вебинара и домашнего задания, которое проверяет опытный преподаватель. Программа подойдет как новичкам, так и тем, кто уже имеет базовый опыт. В рамках курса последовательно создается 3 сложных проекта: лендинг, интерактивный макет сайта и макет мобильного приложения. Итогом становится не только сертификат, но и несколько завершенных, презентабельных работ, которые демонстрируют владение Фигмой на уверенном уровне.

Длительность — 24 занятия.

5. Веб-дизайн для детей 10-15 лет — Skillbox

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

Длительность— 8 месяцев.

6. Курс веб-дизайна для детей от 12 лет — Пиксель

Этот курс рассчитан на учеников средних и старших классов, которые готовы к глубокому погружению в тему. Основное внимание уделяется профессиональным техникам работы в Figma: созданию и использованию компонентов, работе с продвинутыми стилями (стили цвета, текста, эффектов), построению сложных адаптивных макетов с помощью Auto Layout. Программа насыщенная, сконцентрированная в том числе на проектировании пользовательского интерфейса (UI), пользовательского опыта (UX) и типографике. Ученики изучают современные тенденции в дизайне, учатся создавать визуально цельные и стильные работы. Финальным проектом часто становится дизайн концептуального приложения или сайта с полным набором экранов и состояний элементов.

Длительность курса — от 4,5 до 9 месяцев.

7. Figma. Веб-дизайн для сайтов и приложений для детей от 7 лет — KiberOne

На курсе ученики осваивают Figma: они разработают полноценный дизайн-макет многостраничного сайта, научатся продумывать структуру, типографику, создавать адаптивную верстку. Обучение проходит в интерактивном формате с упором на практику, что помогает детям быстро освоить профессиональный инструмент. Курс по Фигме в KiberOne можно пройти и как один из модулей образовательной траектории, и отдельно.

7. Бесплатный курс по работе в Figma для начинающих на платформе Tilda.School

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

Продолжительность курса — 15 уроков.

8. Старт в веб-дизайне для детей от 11 лет — курс учебного центра «1С»

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

Общая длительность — 4 часа.

9. Дизайнер в IT для детей и подростков 8−16 лет — Rebotica

Курс построен не только вокруг изучения инструментов, но и вокруг главной задачи: помочь ребенку исследовать свои интересы, раскрыть творческий потенциал и понять, чем он хочет заниматься в будущем. В программе широкий спектр задач IT-дизайнера: от создания графики для соцсетей и простых иллюстраций до основ UI/UX-дизайна сайтов и приложений. Обучение индивидуальное, один на один с преподавателем.

Курс рассчитан на 1-2 года.

10. Курс веб-дизайна для детей от 7 до 17 лет — EasyCode

Универсальный курс веб-дизайна, подходящий для школьников любого возраста. Программа построена поэтапно: от основ композиции до профессионального проектирования интерфейсов в Figma. Дети получат основные навыки, необходимые для создания любых цифровых проектов, а не только веб-сайтов. Эта база, включающая работу с векторной графикой, слоями и макетами, станет прочным фундаментом для освоения более сложных инструментов, например, Unity и Blender, что открывает пути в геймдизайн и 3D-моделирование.

Длительность курса — 38 занятий.

Как выбрать подходящий курс по дизайну сайтов для детей: гид для родителей

Рассказываем, на что обратить внимание, чтобы выбрать курс веб-дизайна, подходящий ребенку:

Возраст и начальный уровень ребенка

Это самый важный фактор. В программах для младшей аудитории (10-13 лет) акцент сделан на интерактивность, игровые элементы и быстрое получение результата, чтобы удержать интерес. На них дети часто начинают с самых азов интерфейса. Курсы для подростков (14-18 лет) предполагают большую самостоятельность, более глубокое погружение в теорию и серьезную проектную работу, нацеленную на пополнение портфолио.

Но ориентироваться только на возраст тоже неправильно. Оцените навыки ребенка, и если он никогда не открывал Figma, ему подойдет курс «с нуля», даже если по возрасту он попадает в группу 14+.

Цель обучения

• Для общего развития и творчества подойдут вводные или обзорные курсы по дизайну в Фигме. Их задача — заинтересовать и дать базовые навыки.
• Для конкретного проекта, например, создать дизайн для сайта школьного проекта или канала в соцсетях, ищите узконаправленные курсы.
• Для пробы в профессии или пополнения портфолио выбирайте профессионально ориентированные программы с UI/UX в программе. Они имеют большую длительность, дают системные знания. После них ребенок будет гарантированно иметь несколько серьезных завершенных работ в портфолио.

Формат проведения занятий

Здесь нужно учитывать характер и расписание ребенка.

• Живые вебинары (онлайн-курсы в группе) подходят для детей, которым важна дисциплина, обратная связь в реальном времени и общение со сверстниками. Однако такой формат требуют соблюдения расписания.
• Видеоуроки в записи с поддержкой куратора — максимально гибкий формат. Ребенок может заниматься в удобное время и прямо во время урока пересматривать сложные моменты. Важно, чтобы была проверка домашних заданий и возможность задавать вопросы.
• Обратите внимание на интенсивность обучения: количество занятий в неделю и их длительность. Нагрузка должна быть посильной, чтобы не отбить интерес и не мешать основной учебе.

Наличие и качество итогового проекта

Узнайте, что конкретно создадут ученики к концу курса. Хорошо, если ребенок сделает не один дизайн сайта, а несколько разноплановых проектов (например, лендинг + мобильный экран + интерактивный прототип). Уточните, можно ли будет использовать его проект в портфолио.

Квалификация и опыт преподавателя

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

Возможность посетить бесплатный пробный урок или получить демо-доступ

Это самый надежный способ оценить курс. Бесплатный пробный урок позволяет и вам, и ребенку:

• увидеть интерфейс учебной платформы,
• оценить манеру общения и профессионализм преподавателя,
• понять, насколько понятно и интересно подается материал.

Побывав на пробном уроке, вы сможете принять окончательное решение, основанное на личном опыте, а не только на описании.

Часто задаваемые вопросы

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

С какого возраста ребенок может изучать дизайн сайтов в Фигме?

Программа Figma интуитивно понятна, и начать знакомство с ней можно уже в 9-12 лет, особенно если ребенок активно пользуется компьютером и проявляет интерес к дизайну или созданию презентаций. Для этого возраста есть специальные курсы, где материал подается в игровой форме с упором на практику и быстрый результат. Более серьезное, системное изучение с карьерной перспективой лучше начинать в 13-15 лет, когда подросток уже умеет работать самостоятельно и у него сформированы навыки аналитического мышления.

Нужен ли ребенку талант к рисованию?

Нет, для дизайна сайтов в Фигме ребенку не нужны профессиональные навыки рисования. Современный дизайн интерфейсов — это больше работа с композицией, типографикой (искусством работы со шрифтами) и цветовыми сочетаниями. Кроме того, в Фигме есть готовые компоненты, иконки и шаблоны, которые может использовать ребенок. Для дизайна в Фигме гораздо важнее развитое логическое и пространственное мышление, чувство вкуса и внимание к деталям. Умение рисовать от руки может быть приятным бонусом для создания уникальных иллюстраций, но оно не обязательно.

Чем Figma отличается от Photoshop? Почему для дизайна сайтов лучше она?

Это инструменты для разных задач.

• Adobe Photoshop — это классический растровый редактор для обработки фотографий, создания сложных коллажей и графики, где важна работа с каждым пикселем.
• Figma — это инструмент для проектирования и прототипирования интерфейсов. Ее основные преимущества для этой задачи — интерактивность и совместная работа в онлайне.

Figma бесплатна?

Для обучения и некоммерческого использования Figma полностью бесплатна. Возможностей стартового плана более чем достаточно для школьника (три проекта в рабочем пространстве, неограниченное количество личных файлов, вся основная функциональность).

Достаточно ли ребенку курсов веб-дизайна, чтобы начать зарабатывать?

Это реально, но лучше говорить об этом как о перспективе, а не гарантированном результате сразу после курса. После завершения качественной программы у подростка будет базовое портфолио и понимание процесса — и дальше все зависит от его собственных усилий. Для выхода на профессиональный уровень потребуется время на самостоятельное совершенствование навыков и постоянное пополнение портфолио. Курс дает фундамент и направление, а профессиональный рост строится на личной практике.

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

Главный вывод, который можно сделать из нашего обзора, — правильный курс нужно выбирать под конкретного ребенка. Для одного важна игровая форма и быстрый результат, для другого — системность и глубина, для третьего — возможность попробовать себя в разных ролях. Универсального «лучшего» курса не существует, зато есть множество качественных программ, которые помогут сделать первые шаги — от коротких и бесплатных до многомесячных профессиональных образовательных траекторий.

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

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

Современный дизайнер — не просто «художник». Это создатель, инженер впечатлений и стратег. Он соединяет творческое видение с логикой, эмпатию к пользователю — с пониманием технологий. Он отвечает на вопросы: как сделать взаимодействие с продуктом простым и приятным? Как через визуал рассказать историю? Как превратить идею в осязаемый, работающий цифровой объект?

В этой статье мы разберем пять направлений в графическом дизайне, которые точно понравятся детям:

• Геймдизайн и концепт-арт
• Цифровая иллюстрация и комиксы
• Моушн-дизайн и анимация
• Веб-дизайн и UX/UI
• 3D-моделирование

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

Геймдизайн и концепт-арт

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

Концепт-арт — это фундамент визуального стиля игры. Концепт-художник не создает финальную графику, а отвечает на вопрос: «Как это будет выглядеть?». Он переносит идеи сценаристов и дизайнеров в первые визуальные образы: эскизы персонажей с их характером и историей, зарисовки невероятных локаций, дизайн футуристического оружия или магических артефактов. Его задача — задать атмосферу и визуальный тон всему проекту.

Геймдизайн — это проектирование самой «начинки» игры. Геймдизайнер — архитектор игрового опыта. Он разрабатывает правила, механики (например, как работает прыжок или система улучшений), баланс сил, продумывает миссии и то, как игрок будет взаимодействовать с миром. Его работа — это сочетание творчества, логики и понимания психологии: что сделает игру увлекательной, справедливой и вызывающей желание вернуться.

С чего можно начать первые шаги? Для развития навыков концепт-художника — освоить простые цифровые инструменты для рисования. Бесплатные приложения для планшетов, например, Procreate для iOS, отлично подойдут для первых экспериментов с созданием персонажей и эскизов окружения.

Для понимания основ геймдизайна — начать с игровых конструкторов, где не требуется писать сложный код. Платформы Scratch и Roblox Studio позволяют собирать собственные 3D-миры и настраивать простую физику.

Курсы геймдизайна и графического дизайна для детей, чтобы развиваться дальше:

Курс «3D-моделирование для детей в Roblox»

Курс «Создаем свои игры с нуля: Scratch»

Цифровая иллюстрация и комиксы

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

Иллюстратор создает изображения, которые живут на экранах. Это может быть:

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

Главное отличие от просто «рисования на компьютере» — это проектный подход. Здесь художник работает не только над красотой кадра, но и над тем, чтобы изображение решало задачу: передавало эмоцию, рассказывало часть истории, соответствовало стилю бренда или привлекало внимание в ленте соцсети.

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

Первые программы:

• Krita — полностью бесплатная и профессиональная программа для ПК, идеальна для начала.
• Procreate — интуитивное и популярное приложение для iPad, ставшее стандартом для многих иллюстраторов.
• Adobe Fresco — отличный вариант, фокусирующийся на имитации реальных художественных материалов (акварель, масло).

Когда ребенок освоил азы и хочет двигаться в графическом дизайне дальше — создавать законченные работы, развивать собственный стиль, понимать основы композиции и цветоведения в цифре — на помощь приходят структурированные курсы, например такие:

Курс «Графический дизайн для детей и подростков в GIMP, Adobe Photoshop и Illustrator»

Курс «Рисование в Procreate»

Моушн-дизайн и анимация

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

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

2D/3D-анимация — это классическая «мультипликация» в цифре. Здесь создаются целые анимационные фильмы, сериалы, рекламные ролики, анимированные персонажи для игр и образовательных проектов. Аниматор — это актер, который оживляет персонажа, продумывая каждое движение, мимику и жест, чтобы зритель поверил в его историю.

Отличный старт в 2D — программы для покадровой анимации. Flipaclip на смартфоне или планшете позволяет легко создавать короткие мультики, рисуя каждый кадр. Это наглядно учит основам движения и тайминга.

Основы моушн-графики можно освоить в большинстве онлайн-редакторов (например, в Canva), которые имеют простые инструменты для анимации текста и графики. Это помогает понять базовые принципы: как объекты появляются, двигаются и исчезают.

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

Курсы для погружения в эту область графического дизайна для детей:

Курс «2D-анимация Moho для школьников»

Курс «3D-моделирование в Blender»

Веб-дизайн и UX/UI

Это направление графического дизайна — для детей, которые не просто используют сайты и приложения, а задумываются, как они устроены. Если ваш ребенок когда-либо говорил: «Здесь кнопку нужно сделать ярче», «Мне неудобно искать здесь информацию» или «А давай придумаем, как улучшить это приложение», — у него уже есть важнейшее качество для этой сферы: внимание к пользовательскому опыту.

В чем разница между веб-дизайном и UX/UI? Хотя эти понятия тесно связаны, они отвечают за разные этапы создания цифрового продукта.

UX (User Experience — пользовательский опыт) — это логика и удобство. UX-дизайнер продумывает, как пользователь будет достигать своей цели: найти товар, заказать услугу, прочитать статью. Он анализирует потребности, строит простые и понятные пути (сценарии), создает схемы и прототипы, чтобы взаимодействие было интуитивным. Это работа аналитика и психолога.

UI (User Interface — пользовательский интерфейс) — это внешний вид и визуальное восприятие. UI-дизайнер берет логичную схему от UX-специалиста и «одевает» ее: подбирает гармоничные цвета и шрифты, рисует кнопки и иконки, расставляет акценты, создает целостный и эстетичный визуальный стиль. Это работа художника и типографа.

Веб-дизайн — это практическое применение навыков UI/UX для создания внешнего вида и структуры веб-сайтов.

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

Лучше всего начать с перепроектирования чего-то знакомого. Предложите детям создать в Figma:

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

Специализированные курсы графического и веб-дизайна для детей:

Курс «Веб-дизайн для детей»

Курс «Дизайн интерфейсов (UI / UX)»

3D-моделирование

Это направление графического дизайна открывает детям дверь в мир, где творчество обретает объем и физическую форму. Если ребенок увлекается конструированием, архитектурой, персонажами из игр или фильмов, то 3D-моделирование позволит ему не просто нарисовать, а построить свой объект в цифровом трехмерном пространстве — будто используя конструктор с безграничными возможностями.

3D-дизайнер создает математические (полигональные) объемные модели объектов. Эти модели становятся основой для множества цифровых продуктов:

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

Работа идет поэтапно: создание каркаса (сетки), его детализация, наложение текстур и материалов, настройка освещения. Это сложный, но невероятно увлекательный процесс, сочетающий художественное видение с пониманием формы и пространства.

Самый простой старт — онлайн-платформа Tinkercad от Autodesk. Это интуитивный веб-сервис, где модели создаются путем сложения и вычитания простых геометрических фигур (кубов, сфер, цилиндров), что идеально для понимания основ объемного мышления и быстрого создания первых моделей для 3D-печати.

Следующий инструмент, который стоит освоить — Blender. Это уже переход на профессиональный уровень. У него более сложный интерфейс, но он открывает доступ ко всем этапам создания 3D-контента: моделирование, скульптинг (цифровая лепка), текстурирование, анимация и рендеринг. Начать можно с десятков бесплатных уроков для начинающих на YouTube.

Специализированные курсы по 3D-моделированию:

Курс «3D-моделирование для подростков в Blender»

Курс «3D-моделирование в Tinkercad для детей от 8 до 12 лет»

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

Меня зовут Анна Труфанова, я Head of Design в НЛМК ИТ. Сегодня я расскажу, как нам удалось измерить эффективность преимущественно творческой работы.

Первые сомнения

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

Кроме того, у команды возник скепсис. Идея «оцифровать творчество» воспринималась как сигнал о недоверии. Дизайнеры опасались, что будут выглядеть бездельниками, если значительная часть времени уйдёт на поиск референсов, генерацию идей или долгие обсуждения — процессы, которые не всегда дают мгновенный осязаемый результат, но напрямую влияют на качество конечного продукта.

Наконец, первые варианты реализации задачи оказались нереалистичными. Предложения вроде анализа всех Jira-тасков и выявления закономерностей требовали бы месяцев ручной работы, параллельно с текущими проектами. Объем накопившихся данных делал задачу почти невыполнимой: только по одному направлению за год появлялось больше сотни новых задач, а таких направлений в компании десятки.

Поиск решения

Я начала с того, чтобы выгрузить все задачи команды за прошлый месяц из Jira в Excel и собрать их в группы по смыслу: задачи по баннерам и креативам в одну группу, «элементы дизайн-системы» — в другую, макеты ― в третью, «тестирование гипотез» ― в четвертую и так далее.

Уже через четыре часа перед глазами была система из восьми категорий.

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

Но это все еще выглядело слишком абстрактно: например, один дизайнер в пересчете на 24 часа провел ревью 194 макетов, второй создал 39 новых, третий отрисовал почти 150 графиков. Что делать с этими цифрами?

Через некоторое время «пазл сложился»: число артефактов влияет на затраченное время. Так решилась проблема с тем, что у каждого дизайнера в команде свой профиль. Для этого заложили в оценку все форматы работ ― и матрица стала универсальной.

Как только методологию согласовали, мы с командой сели и подробно, в деталях, описали каждый вид работ. Оценки обосновали реальной практикой, а кроме того, избавились от размытых категорий вроде «поиска референсов» ― всё это уже учтено в работе. Изначально казалось, что на такую систему уйдут месяцы, а она появилась меньше чем за неделю.

Как все выглядит на практике

Первое, что изменилось в нашем подходе, — мы стали измерять трудоемкость задач, а не ушедшее на них время. Механика такая:

• в каждой задаче появляется метка с категорией активности — допустим, «Корректировка_макетов»;
• когда задача берется в работу, мы сразу прикидываем ее масштаб по нашей шкале — от «Small» до «Large».

Большой плюс — дизайнеру теперь не приходится засекать время на подбор цветовой схемы. От него требуется лишь качественно закрыть задачу из текущего спринта.

А вот дальше начинается волшебство. Когда у нас накапливается информация формата «кто + что делал + сколько времени», складывается полноценная картина происходящего.

У нас в компании работает собственная AI-платформа (там и внешние модели, и свои нейросети). Мы скармливаем ей выгрузку в Excel из Jira за месяц, применяем нужные фильтры — и получаем аналитику под любой запрос.

! Важный момент: в расчет идут только задачи с проставленными метками, без учета отпусков и больничных.

Например, мы видим, что один дизайнер почти все время (97%) посвятил отрисовке и правкам макетов. У второго 87% ушло на доработки. Третий занимался созданием нового (63%) и ревью чужих работ (25%).

Портрет среднестатистического дизайнера

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

• Больше всего времени уходит на правки. Около 47% рабочего времени команда тратит на корректировку уже существующих макетов. Это самая объемная часть работы — что логично, учитывая количество итераций и согласований.
• На втором месте — создание с нуля. 39% времени дизайнеры работают над новыми макетами. Тут и исследование, и референсы, и первые наброски.
• Ревью занимает значимую долю. На проверку качества реализации чужих работ уходит 14% времени. Казалось бы, немного, но на практике это показывает, что мы серьезно относимся к контролю качества и взаимопомощи внутри команды.

Теперь можно копать глубже и считать среднюю производительность по каждой категории (делим часы на число задач с определенной меткой). Так становится видно, какие задачи для конкретного человека идут легко, а где он «буксует». Это дает понимание того, кому какие задачи лучше отдавать и в каких компетенциях дизайнерам стоит прокачаться.

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

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

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

Цифры вместо эмоций

Раньше разговоры о сроках с руководителями проектов выглядели так:

— Почему вы планируете потратить на эту задачу три дня? Это долго!

— Невозможно спрогнозировать, сколько времени уйдет на поиск оптимального решения.

Такие диалоги ни к чему не приводили.

Теперь все изменилось, и мы можем дать ответ по существу: «Эта задача относится к категории L по доработке макетов, средний показатель команды — 8 часов на такую задачу, у меня ушло 7,5 часов — все в пределах нормы».

Итоги

У дизайнеров появилась система для аргументации своей загруженности. Теперь разговор с бизнесом идет на понятном им языке и ценность нашей работы видна не только нам.

Что будем делать с этим дальше? Отслеживать, как именно ИИ влияет на скорость нашей работы и какие задачи он реально ускоряет. Но об этом я расскажу в следующий раз.

Помимо низкого приоритета, ситуацию усугубляет распространенный миф:

«Доступность нужна лишь небольшой группе людей»

Давайте сразу развеем это заблуждение. Проблемы с доступностью касаются не только людей с инвалидностью, но и:

• Пожилых пользователей;
• Людей с временными травмами (например, со сломанной рукой);
• Тех, кто пользуется сайтом в неидеальных условиях (яркое солнце или плохая погода).

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

К тому же, руководство WCAG многим кажется сложным и объёмным документом, что заставляет откладывать изучение.

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

Как люди с ограничениями жизнедеятельности пользуются цифровыми сервисами?

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

Скринридеры (NVDA, VoiceOver, Orca)

Скринридер — это программа, которая с помощью синтеза речи или шрифта Брайля представляет пользователю содержимое экрана. Например, в случае шрифта Брайля — в форме рельефно-точечного шрифта.

Скринридер работает не с отрисованной страницей, а с деревом доступности, которое строится на основе семантической HTML-разметки. Чем семантичнее вёрстка, тем точнее скринридер представит контент пользователю.

Строго говоря, «скринридер» — это жаргонизм. В официальных русскоязычных документах (в частности, ГОСТ-Р 52872-2019) этот класс вспомогательного программного обеспечения называется «программа экранного доступа»

Клавиатура

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

В этом случае пользователи полагаются на логичный порядок перемещения фокуса (клавиша Tab — переместиться вперёд, Shift+Tab — вернуться назад) и возможность управлять сложными компонентами (меню, слайдерами) с помощью стрелок и других клавиш.

Пример хорошей поддержки прямого клавиатурного управления можно найти в Web-версиях Яндекс Музыки и на Кинопоиске: в плеере нажатие клавиши k приостанавливает и возобновляет воспроизведение, а курсорные стрелки отвечают за перемотку и изменение громкости

Увеличение экрана

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

• Масштабирование страницы в браузере;
• Программы увеличения экрана;
• Коррекция цветовой палитры;
• Изменение внешнего вида указателей;
• Озвучивание текстовой информации при помощи синтезатора речи;
• Пользовательские стили со своими шрифтами и цветами.

Совет: Прежде чем браться за сложные инструменты, протестируйте интерфейс собственноручно: попробуйте пройтись по сайту только с помощью клавиатурного фокуса и проверьте, как он ведёт себя при масштабировании до 200%. Это даст вам понимание о ключевых проблемах с доступностью.

Теперь перейдём к инструментам, которые помогут автоматизировать ручные проверки.

Важно отметить: автоматизированные инструменты находят только 30-40% всех проблем цифровой доступности. ​​Отлично для начала, но дальше идеально — парное экспертное тестирование.

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

Lighthouse (от Google)

Lighthouse — простой и популярный инструмент, встроенный прямо в Chrome.

Для запуска Lighthouse нужно:

• Открыть браузер;
• Открыть консоль разработчика (F12);
• Перейти во вкладку Lighthouse;
• Выбрать категорию Accessibility;
• Нажать «Analyze page load».

Схожий функционал можно найти во всех основных браузерах:

• Firefox — Accessibility Inspector
• Safari — Audit
• Microsoft Edge — Accessibility Checker

После запуска Lighthouse соберёт отчёт с оценкой от 0 до 100 баллов и списком проверенных критериев, разделенных на три группы:

• Passed audits: что работает правильно;
• Opportunities: рекомендации по улучшению;
• Diagnostics: дополнительные советы, не влияющие напрямую на оценку.

Затем Lighthouse рассортирует проблемы по категориям:

• Навигация: доступность с клавиатуры, логичный порядок фокуса;
• ARIA: правильное использование ARIA-атрибутов;
• Цвет и контраст: достаточность контраста для слабовидящих;
• Семантика и структура: правильность HTML-разметки;
• Имена и метки: наличие описательных текстов для элементов форм и ссылок;
• Прочее: рекомендации согласно лучшим практикам.

Accessibility Insights (от Мicrosoft)

Accessibility Insights — это open source-инструмент от Microsoft выпущенный в 2019 году, который предлагает комплексное решение для поиска и устранения проблем.

Accessibility Insights предоставляет два вида аудита:

• FastPass: быстрый аудит для ежедневного использования, который способен найти критические проблемы сайта за считанные минуты;
• Assessment: глубокий аудит на соответствие стандартам WCAG 2.1 Level AA предназначенный для тестировщика или разработчика.

Его ключевое преимущество — обучающие элементы. Он не просто находит ошибку, но и объясняет причину проблемы и как её исправить. Также он помогает удобно создавать тикеты в трекере (например, Jira), включая описание, рекомендации и стандарт WCAG.

Accessibility Insights — полноценная экосистема доступности. Отлично подходит для команд, которые хотят глубоко разобраться в теме и встроить a11y в процесс разработки.

WAVE

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

Инструмент доступен как веб-сервис и как браузерное расширение.

WAVE помечает элементы на странице цветными иконками:

• Красные (Errors): критические ошибки, которые с высокой вероятностью нарушают доступность.
• Желтые (Alerts): предупреждения о возможных проблемах, требующих ручной проверки.
• Зеленые (Features): подсвечивают элементы, которые реализованы правильно.
• Синие (Structural Elements): показывают структурные и семантические элементы HTML5.
• Иконки контрастности — показывают результаты проверки контраста текста и фона.

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

IBM Accessibility (от IBM)

IBM Accessibility — это не просто инструмент, а целая экосистема. Она включает в себя принципы, практики и инструменты для всех этапов жизненного цикла продукта — от проектирования до разработки и тестирования.

Из конкретных инструментов для разработчиков IBM предлагает:

• Браузерные расширения для Chrome, Firefox, Edge;
• Пакеты для встраивания в CI/CD (Java, NPM и Cypress).

IBM Accessibility подойдёт крупным компаниям, желающим системно внедрить доступность на всех этапах работы — от проектирования и разработки до тестирования и поддержки.

Библиотеки компонентов

Готовые библиотеки с уже продуманной доступностью избавляют от необходимости реализовывать сложную логику управления фокусом и ARIA-атрибутами с нуля.

Обычно такие библиотеки содержат в себе:

• Набор headless-компонентов с правильным ролями и ARIA-атрибутами;
• Поддержку управления фокусом и навигацией через клавиатуру;
• Набор хуков для кастомной поддержки пользовательский действий.

Пример библиотек:

• Для React — Reakit, React Aria;
• Для Vue — Vuetify, Quasar, Vue Material;
• Для Angular — Angular Material.

A11y плагин для Storybook

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

A11y плагин для среды разработки

Интегрировать проверку доступности можно прямо в процесс написания кода. Это помогает отлавливать ошибки на самом раннем этапе. В больших компаниях такие плагины уже неотъемлемая часть процесса разработки.

Вот основные из них:

• React: eslint-plugin-jsx-a11y для React;
• Vue: eslint-plugin-vuejs-accessibility;
• Angular: Codelyzer и angular-eslint.

Заключение

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

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

И главное: не забывайте тестировать доступность с реальными пользователями. Ни один автоматический инструмент не заменит обратной связи от человека.

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

Также можно посмотреть логи сессии, где использовались accessibility инструменты для доступа к сайту и увидеть, где именно возникали проблемы.

Под «логами» обычно понимают технические файлы, которые создаются автоматически и содержат технические сообщения.

В то же время нет инструментов, которые позволяют WEB-странице определить, запущены ли в операционной системе вспомогательные технологии, т.е. сайт (в отличие от нативного мобильного приложения) про скринридер не знает.

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

Когда и зачем нужно сжимать фото

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

Критерии выбора программ

При отборе сервисов, приложений и утилит мы ориентировались на такие параметры:

• возможность задать точный файловый объем;
• поддержание исходного качества — без потери резкости или цвета, изменения ширины, высоты;
• доступность популярных расширений — JPG, PNG, TIFF и других;
• удобный и логичный интерфейс;
• возможность удалить лишние метаданные;
• работа без подключения к интернету (для десктопного ПО и приложений на смартфон);
• возможность графически показать, каким будет результат оптимизации, то есть предварительно открыть снимок;
• наличие бесплатной версии или разумной стоимости лицензии;
• пакетная обработка файлов;
• дополнительные опции — обрезка, фильтры, переконвертация.

Онлайн сервисы для сжатия фото

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

Фоторика

Ссылка: https://photo-editor.ai/

Стоимость: условно-бесплатно, но по цене от 395 руб. в месяц можно открыть дополнительные функции вроде тонкой цветокоррекции и премиум-фильтров

Платформа: веб

Регистрация: не обязательна, но без нее не будет доступна часть объектов, например некоторые клипарты и шрифты

Русский язык: есть

Поддерживаемые форматы: JPG, PNG, BMP

Фоторика — это онлайн-сервис для фотообработки, где многие действия выполняются с помощью искусственного интеллекта. Инструмент выполняет целый ряд задач: от настройки цвета и кадрирования до автоматического удаления фона. Вся обработка проходит в несколько кликов — достаточно добавить JPEG, BMP или PNG на сайт, и редактор покажет список доступных, простых в использовании инструментов.

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

Плюсы:

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

Минусы:

• нет функции массового сжимания — каждую картинку придется обрабатывать отдельно;
• сервис не позволяет изменять или сохранять метаданные.

ILoveIGM

Ссылка: https://www.iloveimg.com/ru/compress-image

Стоимость: бесплатный тариф без службы поддержки и с рекламой, платная версия от 620 руб. в месяц

Платформа: веб

Регистрация: есть, но не обязательна

Русский язык: есть

Поддерживаемые форматы: JPG, PNG, GIF, SVG

Пользователь может загружать десятки объектов одновременно и запускать пакетное ужатие. Интерфейс переведен на русский язык, в нем доступны подсказки и встроенные инструкции, поэтому разобраться в сервисе можно без опыта.

Уменьшение происходит автоматически, без ручной настройки: ILoveIMG сам определяет оптимальный баланс между разрешением и весом. Это особенно удобно при подготовке снимков для публикации в интернете — итоговое фото остается резким, даже если исходный файл занимал сотни мегабайт.

Плюсы:

• можно загружать фото с Dropbox и Google Drive;
• после сеанса можно сразу перейти к другим действиям: преобразованию формата, изменению размеров или нанесению вотермарка;
• инструмент вставляет логотипы в готовые фотоснимки.

Минусы:

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

Watermarkly

Ссылка: https://watermarkly.com/ru/how-to-compress-an-image/

Стоимость: бесплатная версия с водяным знаком, платная от 990 руб. в год

Платформа: веб

Регистрация: нет

Русский язык: есть

Поддерживаемые форматы: JPG, PNG и GIF

Можно вручную задать уровень сжатия файлов и сразу оценить результат в режиме предпросмотра. Благодаря этому пользователь сам решает, что важнее в конкретном случае — четкость или вес. Используются современные форматы, включая JPG, PNG, GIF.

Компрессия происходит прямо в браузере: контент не загружается на сервер, так что и с конфиденциальностью проблем не будет. При необходимости можно одновременно добавить вотермарк — без переключения между инструментами.

Плюсы:

• есть вставка картинки по ссылке;
• есть импорт исходников из облачных хранилищ;
• поддерживает массовую загрузку .

Минусы:

• при добавлении вотермарков нельзя задать параметры прозрачности;
• иногда во время пакетного уменьшения может не измениться один снимок и его нужно вылавливать вручную;
• не сохраняется EXIF — метаданные очищаются после экспортирования.

Optimizilla

Ссылка: https://imagecompressor.com/ru/

Стоимость: бесплатно

Платформа: веб

Регистрация: нет

Русский язык: есть

Поддерживаемые форматы: JPEG, GIF, PNG

Сервис автоматически подбирает алгоритм под каждый объект. Можно обрабатывать до 20 элементов одновременно. Запускается даже на слабом железе, так как интерфейс легкий и не перегружен скриптами. Результат до/после показывается через ползунок — видно, насколько меняется качество.

Плюсы:

• сильное уменьшение размера изображений — до 90% от оригинала без значительных артефактов;
• есть пакетный режим с загрузкой ZIP-файла;
• подходит для слабых устройств, не требует много ресурсов на обрабатывание.

Минусы:

• нет ручной донастройки — можно только принять результат;
• отсутствует экспортирование в альтернативные расширения — только JPG, GIF и PNG;
• нельзя сохранить или удалить EXIF-данные: геометки, настройки камеры, авторскую информацию;
• при добавлении большого объема снимков возможны недолгие подвисания.

ResizePixel

Ссылка: https://www.resizepixel.com/ru/compress-image/

Стоимость: бесплатно

Платформа: веб

Регистрация: нет

Русский язык: есть

Поддерживаемые форматы: JPG, PNG, GIF

Позволяет указать точные характеристики в пикселях до начала процесса. Это пригодится, если визуал нужно подогнать под конкретную платформу. Есть кадрирование с выбором соотношения сторон — например, 1х1 или 16х9. Интерфейс минималистичен, адаптирован под смартфоны. Можно уменьшить вес картинки, не изменяя высоту и ширину.

Плюсы:

• можно установить сжатие в процентном соотношении от текущего;
• доступен поворот, отражение снимка по вертикали или горизонтали;
• интерфейс на русском.

Минусы:

• нет наложения вотермарка или логотипа в процессе;
• визуально сравнить файлы до и после до запуска компрессии нельзя;
• без регулировки резкости.

Программы для пакетного сжатия изображений

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

FastStone Photo Resizer

Ссылка: https://www.faststone.org/

Стоимость: бесплатно для некоммерческого использования, есть платная версия за 34,95$

Платформа: Windows

Русский язык: нет

Поддерживаемые форматы: JPEG, JPEG2000, PNG, GIF, BMP, TIFF, PCX, TGA, WMF, EMF, ICO и другие

Все действия — без выхода из текущего окна. Кроме популярных типов расширений поддерживаются и более редкие вроде CUR или PPM с возможностью конвертации в другие форматы, включая JPEG и TIFF. Редактор позволяет работать сразу с сотнями элементов, целыми папками. Перед применением любых правок доступно превью, а при необходимости можно откатить действие. Можно наносить логотип или текст, указывать DPI.

Плюсы:

• есть функция сравнения объектов с синхронным масштабированием — пригодится при подборе лучших кадров из серии;
• можно наложить на изображение собственный водяной знак;
• возможен поиск по тексту в имени файла.

Минусы:

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

ФотоМАСТЕР

Ссылка: https://photo-master.com/

Стоимость: пробный период 5 дней, далее от 990 руб.

Платформа: Windows, macOS

Русский язык: есть

Поддерживаемые форматы: RAW, JPG, PNG, TIFF

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

Интерфейс построен таким образом, что каждое действие требует минимум шагов. Функции облегчения как таковой нет, но объем можно снизить за счет подгонки размеров и формата при экспорте. Дополнительно можно обрезать кадр, повернуть, наложить текст и применить виньетку.

Плюсы:

• есть коррекция геометрии — устранение искажений, завала горизонта;
• предусмотрена возможность редактировать определенные области — например, только лицо или фон;
• встроена галерея художественных эффектов — HDR, виньетка, ретро, уменьшение контраста и других параметров.

Минусы:

• нет на Linux.

Caesium

Ссылка: https://saerasoft.com/caesium

Стоимость: бесплатно, но есть функция доната разработчикам

Платформа: Windows, macOS

Русский язык: есть

Поддерживаемые форматы: JPG, PNG, TIFF, WebP

После сеанса видно, как изменилась картинка — есть прямое сравнение «до и после» с отображением качества сжатия и объема. Экспортирует элементы с сохранением исходной структуры каталогов. Программа предлагает настройку качества для JPEG, TIFF, WebP и PNG — шаг изменения составляет 1%, что встречается крайне редко. Бесплатна, без ограничений, рекламы и вотермарков.

Плюсы:

• удобные слайдеры для изменения качества;
• не требует установки дополнительных библиотек или кодеков;
• реализована поддержка с Unicode — можно сжимать фото с кириллическими названиями.

Минусы:

• нет встроенного просмотра EXIF и других метаданных перед ужатием;
• нет преобразования в другие форматы можно только уменьшить размер.

FILEMinimizer Pictures

Ссылка: https://balesio.com/fileminimizerpictures/eng/index.php

Стоимость: бесплатно

Платформа: Windows

Русский язык: нет

Поддерживаемые форматы: JPG, GIF, BMP, TIFF, PNG, EMF

Позволяет уменьшать вес изображений без изменения расширения — расширение остается прежним, например, JPG. Может ужимать до 500 элементов одновременно. Программа совместима с TIFF, BMP и другими менее распространенными расширениями. Алгоритм анализирует структуру: распознает текстуры и цвета, сжимает каждый элемент отдельно. Исходники сохраняются, оптимизированные копии получают новые имена.

Плюсы:

• можно создавать оптимизированные версии файлов без перезаписи оригиналов с отдельным именованием;
• уменьшение размеров до 98% от исходного;
• сжимать можно сразу галереями или архивами.

Минусы:

• нельзя ставить плагины для расширения списка форматов;
• не показывает предварительный результат — не получится оценить потерю качества заранее;
• интерфейс не переведен полностью — часть пунктов только на английском.

Light Image Resizer

Ссылка: https://www.obviousidea.com/windows-software/light-image-resizer/

Стоимость: бесплатная версия без пакетного режима, платная от 29.99€

Платформа: Windows

Русский язык: есть

Поддерживаемые форматы: JPEG, GIF, BMP, TIFF

Поддерживается объединение снимков в PDF, формирование ZIP-архивов. Программа позволяет отсортировать, переименовать файлы, наложить на них пользовательский вотермарк. Поддерживается предварительный просмотр, оптимизация резкости, гаммы. Можно делать скриншоты с автоматическим OCR чтобы извлекать из снимков текст.

Плюсы:

• есть создание пользовательских профилей с настройками для постоянного использования;
• готовы шаблоны для оптимизации под отправку по почте и другие задачи;
• возможен поворот, отзеркаливание по вертикали или горизонтали.

Минусы:

• неудобное изменение масштаба в режиме предпросмотра;
• не сохраняются EXIF-данные после экспорта;
• с российских карт не получится купить полную версию.

Лучшие мобильные приложения для сжатия фото

Как уменьшить размер фото без потери качества на Андроид или Айфон? Мобильные приложения для JPEG сжатия удобны, когда нужно быстро ужать снимок прямо на смартфоне — в поездке, на съемке или перед публикацией. Они просты в использовании, не занимают много места и часто поддерживают экспорт в современные форматы вроде WEBP.

Сжать изображение — MB в KB

Ссылка: https://play.google.com/store/apps/details?id=com.psoffritti.compress.image

Стоимость: бесплатная версия с рекламой, платная от 2799 руб

Платформа: Android

Регистрация: нет

Русский язык: есть

Поддерживаемые форматы: JPG, GIF, BMP

Приложение даст прописать точный итоговый вес — в килобайтах. Это полезно, если нужно загрузить фотографию в систему с лимитами. Для покупателей PRO-версии доступно сохранение метаданных. При сжимании нескольких JPEG для каждого можно выбрать, нужно ли заменять им оригинал. Интерфейс предельно упрощен: минимум кнопок, никакой рекламы и сложных вкладок, есть подсказки. Есть кнопка, позволяющая поделиться файлом в социальных сетях или отправить его по почте.

Плюсы:

• есть пакетный режим;
• есть автоориентации без ручных настроек;
• есть слайдер для установки уровня компрессии.

Минусы:

• много рекламы;
• в базовой версии не сохраняются метаданные;
• не поддерживает конвертацию в другие форматы, кроме сохранения текущего.

JPEG Image Compressor & Resize

Ссылка: https://play.google.com/store/apps/details?id=com.jpeg.image.compressor

Стоимость: бесплатная версия без пакетного режима и с рекламой, платная от 899 руб. в год

Платформа: Android

Регистрация: нет

Русский язык: есть

Поддерживаемые форматы: JPG, GIF, BMP

Умеет автоматически уменьшать пиксельные размеры файла в трех вариантах — маленький, средний или большой. Встроенный редактор предлагает функции обрезки и поворота. Есть конвертер в HEIC, WEBP, PNG, JPG.

Плюсы:

• можно собрать изображения в PDF;
• присутствует встроенный просмотрщик;
• каждое фото получает имя — исходные данные не теряются.

Минусы:

• нельзя задать точный целевой вес в бесплатной версии;
• без оплаты удаляется все данные EXIF;
• при большом количестве файлов возможна задержка между этапами процесса.

Что выбрать для сжатия фотографий

Из всех протестированных решений особенно стоит выделить ФотоМАСТЕР — это фоторедактор с широкими возможностями и высокой точностью при компрессии. Он подойдет для ретуши, подготовки фотоснимков к распечатке или выгрузке в интернет. Также стоит обратить внимание на Caesium — эта утилита пригодится тем, кто хочет детально управлять характеристиками и работать с большим количеством изображений.

Если вы не хотите устанавливать софт на компьютер или смартфон, попробуйте онлайн-редактор и конвертер Фоторика — он дает уменьшить вес файлов, не жертвуя разрешением, прямо в браузере.

А если вы ищете приложение для сжатия фото, обратите внимание на хорошие мобильные сжиматели вроде JPEG Image Compressor & Resize — они простые, легкие и подходят для оптимизации снимков, сделанных на смартфон.

Что не так с японскими сайтами

Рассмотрим основные особенности, которые кажутся нам непривычными.

Визуальный перегруз: много текста, мало воздуха. Японские сайты часто выглядят нагроможденными. Баннеры, всплывающие окна, ссылки создают ощущение хаоса. Блоки плотно прижаты друг к другу, нет «воздуха». Для пользователей, привыкших к минимализму и чистому интерфейсу, это может показаться устаревшим или даже нечитабельным.

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

Устаревшие технологические решения. Немало сайтов всё ещё работают на старых CMS, не адаптированы под мобильные устройства и используют элементы флеш-дизайна или устаревший HTML-код. Это может объясняться консерватизмом в разработке, а также тем, что многие компании по-прежнему ориентируются на десктопный трафик.

Яркие цвета и изображения низкого качества. В палитре японских сайтов часто используются резкие и контрастные цвета. Вместо профессиональных фото и современных иллюстраций можно увидеть сжатые .jpg, пиксельные иконки, клипарты. Это придаёт сайту винтажный стиль или даже китч, по крайней мере, в глазах западного пользователя.

Ключевые факторы и причины

Лингвистические. Японский язык сильно отличается от западных языков по структуре и визуальному восприятию. Иероглифы позволяют выразить больше смысла в меньшем количестве знаков, поэтому текст кажется более сжатым. Это приводит к высокой плотности контента: на небольшой площади страницы можно разместить гораздо больше информации, чем на латинице. Пользователи привыкли к плотным, насыщенным блокам текста и не ощущают перегрузки так, как это воспринимают, например, носители английского или русского языков.

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

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

По словам автора YouTube-канала «Японец Коки», японцы предпочитают, чтобы 70% сайта составлял текст, а 30% — изображения, в то время как европейцы привыкли к обратной ситуации: 70% картинок и 30% текста. Когда же японцы видят западные минималистичные сайты, они относятся к ним с недоверием, так как им нужно максимум информации о товаре или услуге.

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

Технологический сектор Японии испытывает серьёзный кадровый голод, пишет Bloomberg. Поэтому часто за сайт отвечает один человек. Это приводит к тому, что приоритет отдаётся функциональности и информативности, а не эстетике.

Технические. Веб-разработка в стране часто опаздывает за мировыми трендами. Причина — в приверженности к старым системам: до сих пор нередки случаи использования Internet Explorer 6 и Windows XP в государственных или корпоративных структурах. Поддержка современных фреймворков и адаптивной вёрстки внедряется медленно, особенно на сайтах, ориентированных на внутреннюю аудиторию.

Ещё одна техническая проблема — ограниченность шрифтов для нелатинских языков. Стандартный набор для шрифтов английского языка содержит около 230 глифов, то есть графических представлений символов. Для японского языка из-за трех различных систем письма и бесчисленных кандзи — китайских иероглифов, которые используют в современной японской письменности. — нужны 7000-16 000 глифов или даже больше. Поэтому создание нового шрифта на японском языке требует гораздо больше времени, чем для шрифтов на латинице. Кроме того, японские шрифты весят в разы больше латинских, поэтому медленно загружаются. В итоге на выбор есть на так уж много шрифтов. Часто дизайнеры вообще используют текст в виде изображений. Это нарушает адаптивность сайта и увеличивает вес страницы.

Сравнение японских и российских сайтов

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

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

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

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

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

Есть и различия в тональности: российские сайты все чаще делают акцент на эмоциональной вовлечённости, для чего используют человечные тексты, юмор, креатив.

Японские тексты обычно формальны, используют клише и уважительный язык, даже если речь идёт о молодёжной аудитории.

Что стоит российским сайтам позаимствовать у японских

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

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

Японские сайты демонстрируют уважение к привычкам и времени пользователя и не пытаются быть модными. Там редко встретишь радикальные редизайны без объяснения. Платформы развиваются медленно, но стабильно, с минимальными потрясениями для пользователей.

Вместо заключения

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

Как всё устроено обычно и что в этом не так

Если вы хоть раз писали современное веб-приложение, то наверняка шли по классической схеме: фронт на Vue или React, бэк на Laravel, Express или чем-то подобном. Между ними REST API. Иногда вместо REST используют GraphQL. Вроде всё по канону, но на практике возникает куча лишних проблем.

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

Плюс техническая возня. CORS, токены, CSRF-защита — всё это надо настраивать, поддерживать и отлаживать. А ещё ведь хочется, чтобы проект нормально индексировался поисковиками. Тогда подключаются Nuxt, Next, пререндеринг, мета-теги и куча других инструментов.

Inertia.js — простое решение, которое сработало

В какой-то момент я наткнулся на Inertia.js, и это был очень приятный сюрприз. Inertia — это не библиотека или фреймворк в привычном смысле. Это клей, который соединяет Laravel и Vue (или React), позволяя строить полноценные интерфейсы без отдельного API.

Фронтенд работает как обычное SPA, а бэк продолжает жить как Laravel-приложение: маршруты, контроллеры, middleware — всё привычно. Вместо return view() используем Inertia::render(), передаём данные, и они попадают напрямую во Vue-компонент как props.

То есть вы работаете в едином стеке. Валидация, авторизация и маршрутизация на сервере, без дублирования. Нет проксей, CORS и прочих сложностей. Просто Laravel отдаёт Vue-компоненты, и всё это отлично работает вместе. Интерфейс ведёт себя как SPA, но архитектура проще.

Если сравнивать с Livewire, то подход другой. В Livewire основной акцент на рендеринг HTML на сервере и обмен данными через AJAX. В случае с Inertia весь интерфейс строится на Vue или React, но без отдельной REST-инфраструктуры.

Пример на практике

Вот как это выглядит в реальном коде.

В контроллере Laravel просто пишем:

На фронте есть компонент Users/Index.vue, который принимает данные как props. Это всё. Не нужно писать отдельный API, сериализовывать данные, обрабатывать запросы вручную. Просто работаем с контроллером и компонентом.

Адреса страниц остаются стандартными, как в Laravel. Например, по маршруту /users Laravel отдаёт страницу, где Vue-компонент рендерит список пользователей. Переходы происходят быстро и без перезагрузки, как в SPA.

Что я получил в реальной работе

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

API как таковой просто исчез. А вместе с ним исчезли и проблемы с CORS, CSRF, токенами и заголовками. Всё работает как в монолите. Если возникает ошибка, ты сразу видишь, где именно она произошла. Не нужно прыгать между фронтом и бэком, выискивая источник бага.

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

С SEO и SSR тоже стало проще. Поскольку рендер идёт на сервере, контент виден поисковикам, а настройка метатегов и пререндеринг выполняются привычными средствами Laravel.

И, пожалуй, главный плюс — всё работает единообразно. Авторизация, сессии, валидация, ошибки — всё в одной системе, без дублирования. Это упрощает отладку и снижает количество багов.

Когда Inertia может не подойти

Как и любой инструмент, Inertia не универсален. Он отлично показывает себя, когда фронт и бэк разрабатываются вместе, в рамках одного репозитория и одной команды. В таком случае он просто идеален.

Но если у вас фронтенд и бэкенд разделены по командам и живут в разных проектах — лучше выбрать REST или GraphQL. Inertia для такой архитектуры не подходит.

Также он не заменяет полноценный API. Если вам нужен мобильный клиент или вы планируете отдавать данные сторонним приложениям — API придётся реализовать отдельно.

И ещё один момент. Если вы собираетесь использовать Nuxt или Next.js для SSR — Inertia здесь не поможет. У него свой подход, который не интегрируется с этими фреймворками.

Так что всё зависит от задач.

Итог

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

И главное — не нужно прыгать между двумя мирами. Порог входа очень низкий. Начать можно хоть с одной страницы.

Мой совет: попробуйте Inertia на небольшом проекте. Например, сделайте личный кабинет, блог или список задач. Скорее всего, вам понравится. Мне — точно зашло.

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

1. CodeCamp

В канале тонна новостей о программировании, полезные инструменты, например, онлайн-конструктор ПК, и топовые нейросети. Часто появляются разборы моделей и фич, которые еще не стали мейнстримом, как в посте про сискарту Claude-4 или редкие нейросервисы. Из фишек CodeCamp — рубрика «ночное-полезное» с краткими заметками о прикольных фичах.

Перейти: @codecamp

2. Эксплойт

Внутри канала — актуальные новости из мира технологий, айти и диджитал и не только, а еще — подборки инструментов и нейронок. Также вы найдете советы, например, как усилить резюме или правильно сидеть за компом, и шпаргалки по разным технологиям. Сами новости подаются с сарказмом и юмором: «Сначала собери, потом приручи», — так рассказали о новом Лего.

Перейти: @exploitex

3. Веб-страница

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

Перейти: @tproger_web

4. Этичный хакер

Вас взломали! Хотя нет, не сегодня. Кстати, канал «Этичный хакер» как раз пишет о том, как обезопасить себя от разных атак, а также рассказывает о популярных и не очень хакерских группировках. Внутри — новости, подборки инструментов и разборы, включая гайды по Tor, Sherlock или атакам на шифрование.

Перейти: @hack_less

5. Цифровой журнал

В канале пишут о трендах в айти и нейросетях с мемами и шутками. Здесь можно найти как полезные промпты, так и подборки фреймворков и короткие обзоры на сервисы, которые упрощают работу с ИИ и технологиями в целом. Из последнего — пост про ИИ-агента Manus, с помощью которого можно вести 50 аккаунтов одновременно.

Перейти: @chatgptv

6. IT Юмор

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

Перейти: @ithumor

7. IT мероприятия России / ITMeeting / IT Events

Канал-агрегатор с актуальными IT-событиями России с фокусом на deep dive, сложных кейсах и архитектурных решениях. Авторы каждый день отбирают мероприятия для сеньоров в разных направлениях: Backend, Frontend, DevOps, Data Science/AI, Security, Cloud, Mobile и Management. Среди анонсов — конференции, митапы, воркшопы, интенсивы и хакатоны. В общем, все то, что нужно опытным айтишникам, чтобы найти нетворкинг, прокачать экспертизу и оставаться в курсе новостей комьюнити.

Перейти: @iteventsrus

8. ITeach

Здесь опытные прогеры рассказывают про скрытые IT-фишки, делятся инсайтами по кибербезопасности, лайфхаками для гаджетов и анонсируют бесплатные IT-мероприятия по всей России. В ITeach сеньоры могут узнать о последних угрозах и разных IT-фишках, которые можно применять в работе. Например, как скрыть конфиденциальную информацию на экране с помощью расширения Blur It или как не попасться на мошенников в сервисах такси.

Перейти: @iteach_ru

9. Отзывы об IT Компаниях

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

Перейти: @nazarov_interviews

10. Библиотека программиста

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

Перейти: @proglib

Вместе с экспертами Kursfinder я изучила более 20 предложений и выбрала 17 лучших онлайн-курсов по геймдизайну. В статье они представлены в виде подборок для удобства поиска. В начале я собрала 10 программ, которые, на мой взгляд, наиболее качественные. Если ни один из этих курсов не подходит вам, ознакомьтесь с дополнительным списком из трех программ. В конце статьи вы найдете подборку бесплатных материалов. Полный список курсов по теме можно найти в каталоге Kursfinder.

ТОП-10 лучших курсов по геймдизайну в 2026 году

1. Геймдизайн. Концепт игры от Skillbox — лучший курс по основам разработки концептов для игр, включая создание механик и истории.
2. Профессия Геймдизайнер от GeekBrains — программа по подготовке специалистов в области геймдизайна с фокусом на проектирование игр и их развитие.
3. Профессия Геймдизайнер с нуля до PRO от Skillbox — интенсивное обучение, которое охватывает все этапы создания игр, от концепта до реализации.
4. Геймдизайнер от XYZ School — онлайн-курс по основам геймдизайна и разработки игр, включая создание увлекательных механик и баланса.
5. Профессия геймдизайнер от Contented — вариант для тех, кто хочет стать геймдизайнером и научиться создавать успешные игровые проекты.
6. Онлайн-курс по геймдизайну мобильных игр от Onskills — курс ориентирован на создание мобильных игр и разработку игровых механик для мобильных платформ.
7. Геймдизайн и разработка игр от Международной академии бизнеса IAB — программа сочетает теорию геймдизайна и практическую разработку игр.
8. Курсы геймдизайна от Onskills — обучение геймдизайну с нуля — от базовых концепций до сложных игровых систем.
9. Геймдизайн для детей от BKC — курс для детей, который вводит их в основы геймдизайна и помогает развить творческое мышление.
10. Геймдизайн. Базовый курс от Realtime — начальный курс по основам геймдизайна, включая создание игровых механик и концептуальную разработку.

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

Онлайн-курсы по геймдизайну

1. Геймдизайн. Концепт игры | Skillbox

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

• Стоимость: 104 628 рублей
• Длительность: 3 месяца
• Формат обучения: видеоуроки, тестирования, проекты, домашняя работа
• Сертификат: сертификат установленного образца

Кому подойдет:

• новичкам;
• специалистам из смежных профессий.

Преимущества:

• доступ навсегда;
• скидка 40%;
• курс в подарок;
• бесплатная консультация;
• персональная обратная связь;
• проекты в портфолио;
• стажировка в игровой студии.

Недостатки:

• ограниченное время на скидку.

Программа обучения:

• Создаем свою игру
• Определяем целевую аудиторию
• Создаем увлекательный сюжет
• Определяем способы монетизации игры
• Анализируем игру
• Разрабатываем стратегию развития игры
• Подводим итоги

Ознакомиться с полной программой >>>

2. Профессия Геймдизайнер | GeekBrains

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

• Стоимость: 192 312 рублей
• Длительность: 8 месяцев
• Формат обучения: вебинары, видеоуроки, домашние задания, тестирования
• Сертификат: сертификат установленного образца

Кому подойдет:

• новичкам;
• тем, кто уже начал работать в данной сфере.

Преимущества:

• скидка до 45%;
• два курса на выбор в подарок;
• повышенная скидка от менеджера;
• помощь с трудоустройством;
• бесплатная консультация.

Недостатки:

• ограниченное количество мест на потоке.

Программа обучения:

• Разработка игры
• Стажировка в компании GameBox
• Level Design
• Геймдизайн. Баланс игры
• Основы разработки игр
• Заработок в играх
• Создание документации

Ознакомиться с полной программой >>>

3. Профессия Геймдизайнер с нуля до PRO | Skillbox

Освойте искусство создания оригинальных игровых концепций в различных жанрах и разработки увлекательного игрового процесса. Вы будете работать с Unity и UE5, научитесь гармонично сочетать игровые механики и систему прокачки. Научитесь удерживать внимание игроков и создавать увлекательные игровые сценарии. После завершения основных программ и формирования портфолио сможете претендовать на позицию младшего разработчика. Школа поможет вам найти работу и подготовиться к собеседованию.

• Стоимость: 156 922 рубля
• Длительность: 8 месяцев
• Формат обучения: видеоуроки, тестирования, проекты, домашняя работа
• Сертификат: сертификат установленного образца

Кому подойдет:

• новичкам с нуля.

Преимущества:

• доступ навсегда;
• скидка 40%;
• курс в подарок;
• бесплатная консультация;
• персональная обратная связь;
• проекты в портфолио.

Недостатки:

• ограниченная скидка на рассрочку.

Программа обучения:

• Разработка игры
• Стажировка в компании GameBox
• Level Design
• Геймдизайн. Баланс игры
• Основы разработки игр
• Заработок в играх
• Создание документации

Ознакомиться с полной программой >>>

4. Геймдизайнер | XYZ School

Освойте искусство разработки игровых механик, научитесь работать с документацией, создавать продуманные уровни и погружаться в атмосферу, максимально приближенную к реальным условиям работы геймдизайнера. После завершения обучения вы будете готовы начать карьеру в игровой индустрии. Программа разработана опытными профессионалами, которые работали над созданием таких игр, как Assassin’s Creed: Valhalla и Atomic Heart.

• Стоимость: от 149 500 рублей
• Длительность: 13 месяцев
• Формат обучения: вебинары, видеоуроки, тестирования, практика, домашние задания
• Сертификат: диплом или сертификат об обучении

Кому подойдет:

• новичкам с нуля.

Преимущества:

• скидка 50%;
• выгодная рассрочка;
• дополнительная скидка за оплату целиком;
• несколько тарифов на выбор.

Недостатки:

• некоторым обучение покажется долгим.

Программа обучения:

• Разработка игрового дизайна
• Создание повествовательного дизайна
• Проектирование уровней с помощью OUTBLOCK

Ознакомиться с полной программой >>>

5. Профессия геймдизайнер | Contented

Освойте навыки анализа рынка, оформления документов, работы с игровыми движками, настройки баланса игры, продвижения и поддержки проекта. Приобретите больше опыта, создавая прототипы игр на заданную тему в сжатые сроки. Это позволит вам расширить портфолио новыми проектами. Также будете много играть и разовьете насмотренность.

• Стоимость: 149 832 рубля
• Длительность: 9 месяцев
• Формат обучения: вебинары, воркшопы, видеоуроки, тестирования
• Сертификат: сертификат

Кому подойдет:

• тем, кто хочет создавать инди-игры;
• тем, кто желает совмещать хобби с работой;
• тем, кто хочет систематизировать знания.

Преимущества:

• портфолио из более 40 работ;
• грант 20 000 рублей на курс;
• бесплатная консультация;
• помощь с трудоустройством.

Недостатки:

• не во всех тарифах есть блоки работы с Blender.

Программа обучения:

• Вхождение в профессию
• Как разработать интересную игру
• Команда и стадии создания игры
• Позиционирование и уникальность
• Анализ и улучшение механик
• Тестирование и проверка предположений

Ознакомиться с полной программой >>>

6. Онлайн-курс по геймдизайну мобильных игр | Onskills

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

• Стоимость: от 1 900 рублей
• Длительность: 11 уроков
• Формат обучения: видеоуроки, практика
• Сертификат: сертификат

Кому подойдет:

• новичкам;
• создателям игр на ПК;
• геймерам;
• художникам;
• разработчикам.

Преимущества:

• выгодная рассрочка;
• бесплатный урок;
• неограниченный доступ к теории;
• отличная техническая помощь.

Недостатки:

• нет вебинаров.

Программа обучения:

• Знакомство с профессией
• Представление идей
• Написание истории
• Создание прототипов
• Разработка механик
• Достижение баланса
• Анализ данных

Ознакомиться с полной программой >>>

7. Геймдизайн и разработка игр | Международная академия бизнеса IAB

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

• Стоимость: 11 400 рублей
• Длительность: 250 ак.часов
• Формат обучения: видеоуроки, практика
• Сертификат: диплом с международным приложением

Кому подойдет:

• новичкам.

Преимущества:

• обучение можно начать бесплатно;
• гибкий график;
• помощь в поиске работы.

Недостатки:

• мало технической поддержки.

Программа обучения:

• Основы геймдизайна
• История развития игр
• Жанры и их особенности
• Основные термины
• Создание игровых ассетов
• Разработка уровней и сцен
• Баланс и сложность

Ознакомиться с полной программой >>>

8. Курсы геймдизайна | Onskills

Обучение геймдизайнеров с нуля и получение сертификата. Узнайте, как создавать игры, которые будут увлекательными и популярными. Станьте частью сообщества GameDev с помощью Onskills. Смотрите лекции в удобное время. Доступ к курсу и всем его обновлениям останется у вас навсегда.

• Стоимость: от 1 900 рублей
• Длительность: 11 уроков
• Формат обучения: видеоуроки, практика
• Сертификат: сертификат

Кому подойдет:

• новичкам;
• создателям игр на ПК;
• геймерам;
• художникам;
• разработчикам.

Преимущества:

• выгодная рассрочка;
• бесплатный урок;
• неограниченный доступ к теории;
• отличная техническая помощь.

Недостатки:

• иногда возникают технические сбои.

Программа обучения:

• Знакомство с профессией
• Представление идей
• Написание истории
• Создание прототипов
• Разработка механик
• Достижение баланса
• Анализ данных

Ознакомиться с полной программой >>>

9. Геймдизайн для детей | BKC

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

• Стоимость: 5 760 рублей
• Длительность: по запросу
• Формат обучения: вебинары, практика
• Сертификат: сертификат

Кому подойдет:

• детям 10–12 лет.

Преимущества:

• подарки первым 30 ученикам;
• скидка 10%;
• оплата мат.капиталом.

Недостатки:

• не указано время обучения.

Программа обучения:

• Разработка платформера
• Улучшение возможностей игры
• Дизайн уровней и растительность
• Интеграция программного кода
• Неожиданные события и трудности

Ознакомиться с полной программой >>>

10. Геймдизайн. Базовый курс | Realtime

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

• Стоимость: 14 000 рублей
• Длительность: 20 часов
• Формат обучения: вебинары, практика
• Сертификат: не указан

Кому подойдет:

• специалистам различных профессий;
• тем, кто хочет попасть в сферу разработки игр.

Преимущества:

• помощь с трудоустройством;
• выгодная стоимость;
• сжатые сроки.

Недостатки:

• не предусмотрена выдача сертификата.

Программа обучения:

• Современное состояние игровой индустрии
• Направления геймдизайна
• Виды игр и их особенности
• Жанры игр и их характеристики
• Способы распространения игр

Ознакомиться с полной программой >>>

Еще 3 курса по геймдизайну

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

• Геймдизайн от Алгоритмики. В процессе игры ребенок самостоятельно разрабатывает сюжет и создает образы персонажей. На каждом уроке дети знакомятся с новыми английскими словами, понятиями из игровой индустрии и основами тайм-менеджмента.
• Гейм-дизайн и разработка компьютерных игр от Центра обучающих технологий. В ходе обучения студенты освоят не только создание игр с помощью Unity, но и приобретут знания в области оптимизации приложений для различных платформ, геймдизайна, монетизации и продажи игр.
• Геймдизайн: как делать игры, которые нравятся и приносят деньги от AppTractor. Вы познакомитесь с множеством примеров реальных компаний и игр. Более того, у вас будет возможность пообщаться с лекторами напрямую после каждой лекции и задать им вопросы по теме, а также получить консультацию или рекомендацию.

Бесплатные курсы по геймдизайну

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

1. Введение в игровую индустрию — Skillbox

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

Главное о курсе:

• один месяц обучения;
• 17 видео в программе.

2. Антипедагогика: Боги и герои — Stepik

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

Главное о курсе:

• 54 урока;
• пять часов четыре минуты видео;
• 104 теста.

3. Технологии и компьютерные игры — Stepik

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

Главное о курсе:

• 24 урока;
• три часа 11 минут видео;
• 53 теста;
• шесть интерактивных задач.

4. Геймдизайн и его приемы — XYZ School

Все о создании игр: от отдельных элементов и методов до идей и концепций известных создателей.

Главное о курсе:

• философия геймдизайна;
• контрольные точки;
• как стимулируют игроков;
• баланс в играх.

Интересная информация о профессии

Геймдизайнер — это специалист, который создает игровые концепции, разрабатывает правила и механику игр, чтобы обеспечить увлекательный игровой процесс. Вот несколько интересных фактов о профессии геймдизайнера:

• Многогранность профессии. Специалист может заниматься не только разработкой игр, но и тестированием игровых механик, анализом данных, созданием нарратива (повествования) в игре, взаимодействием с командой разработчиков для реализации идей.

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

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

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

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

• Разнообразие проектов. Геймдизайнеры могут работать над различными типами игр, включая мобильные, консольные, компьютерные и онлайн-игры. Это позволяет им приобретать разнообразные навыки и опыт.

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

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

• Необходимость проработки деталей. Даже мелкие детали в игре могут существенно повлиять на впечатление от нее. Поэтому специалисты часто тратят много времени на проработку мелочей.

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

Чем занимается

Основные задачи геймдизайнера:

Разработка механик

• Придумывает, как игрок будет взаимодействовать с миром (движение, бой, диалоги, экономика и т. д.).

• Балансирует сложность, чтобы игра была и интересной, и справедливой.

Создание игрового мира и контента

• Продумывает уровни, квесты, сюжетные повороты (часто вместе с нарративным дизайнером).

• Определяет, какие предметы, враги и способности появятся в игре.

Проектирование игровой экономики

• Рассчитывает, как игрок будет получать ресурсы, тратить их и прогрессировать.

• В мобильных играх — разрабатывает системы монетизации (донаты, боевые пропуска и т. д.).

Работа с документацией

• Составляет GDD (Game Design Document) — «библию» игры, где прописаны все механики и правила.

• Объясняет команде (художникам, программистам), как все должно работать.

Тестирование и итерации

• Играет в ранние версии, ищет баги и «неудобные» моменты.

• Меняет параметры (например, урон оружия или скорость передвижения), чтобы игра стала увлекательнее.

С какими специалистами работает геймдизайнер?

• Художники — чтобы визуал соответствовал геймплею.
• Программисты — чтобы механики правильно работали в коде.
• Продюсеры — чтобы уложиться в сроки и бюджет.
• Тестировщики — чтобы находить и исправлять ошибки.

Примеры решений геймдизайнера:

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

Чем геймдизайнер НЕ занимается?

• Не рисует концепты (это работа концепт-художников).
• Не анимирует персонажей (это делают аниматоры).
• Не программирует (но может писать простые скрипты для прототипов).

Если коротко: геймдизайнер — это архитектор игры. Он отвечает за ее «удобство», баланс и удовольствие от процесса.

Навыки, необходимые для работы

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

Hard Skills (Технические навыки)

Проектирование игровых механик:

• Умение придумывать и описывать правила, системы и взаимодействия (например, боевую систему, экономику, прокачку).

• Понимание баланса (например, как сделать игру сложной, но не несправедливой).

Работа с инструментами:

• Документирование: написание GDD (Game Design Document), таблиц баланса, схем взаимодействий.

• Прототипирование: базовое владение Unity, Unreal Engine, Godot или даже Tabletop Simulator (для настолок).

• Анализ данных: чтение метрик (в мобильных играх — retention, monetization).

Знание игровых жанров и трендов:

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

• Умение анализировать успешные/провальные игры и выявлять причины их качества.

Основы смежных дисциплин:

• Базовое понимание программирования (логика, простые скрипты на C#, Python или визуальные скрипты).

• Основы психологии игрока (мотивация, теория вознаграждения, поведенческие паттерны).

Soft Skills (Гибкие навыки)

Креативность и логика:

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

• Умение видеть систему целиком: как механики влияют друг на друга.

Коммуникация и работа в команде

• Четкое объяснение своих идей художникам, программистам, продюсерам.

• Умение принимать критику и дорабатывать дизайн под требования проекта.

Аналитическое мышление:

• Способность разбирать игры на «составляющие» и понимать, почему они работают (или нет).

• Любовь к тестированию и итерациям — геймдизайн это постоянные правки.

Тайм-менеджмент и адаптивность:

• Работа в условиях жестких сроков (особенно перед релизом).

• Готовность переделывать систему с нуля, если она не работает.

Дополнительные плюсы

• Опыт в моддинге или создании небольших игр (хоть на GameMaker или Roblox).

• Участие в Game Jams (например, Ludum Dare) — ценится в резюме.

• Знание игровых движков (даже на базовом уровне).

• Навыки гейм-аналитики (A/B-тесты, метрики F2P-игр).

Какие бывают специализации в геймдизайне (системный, левел, нарративный и т. д.)?

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

Системный геймдизайнер

Чем занимается: проектирует сложные игровые системы — боевую механику, экономику, прокачку, инвентарь.

Пример: расчет урона, стоимости предметов, скорости прогресса.

Важно: аналитическое мышление, понимание математики и логики.

Левел-дизайнер

Чем занимается: создает уровни, локации, расставляет врагов и объекты.

Пример: проектирование карты в шутере или лабиринта в RPG.

Важно: чувство темпа, понимание «потока» игры (flow).

Нарративный дизайнер

Чем занимается: работает с сюжетом, диалогами, лором, квестами.

Пример: написание ветвящихся диалогов в Mass Effect.

Важно: навыки сторителлинга, иногда — сценарное мастерство.

Экономический дизайнер

Чем занимается: балансирует внутриигровую валюту, цены, донат в F2P-играх.

Пример: система «гемов» в Clash of Clans.

Важно: знание Excel, теория игр.

UX/UI-дизайнер в играх

Чем занимается: проектирует интерфейсы, подсказки, меню.

Пример: удобное колесо быстрого доступа в Skyrim.

Важно: понимание юзабилити, работа в Figma/Adobe XD.

Технический геймдизайнер

Чем занимается: связующее звено между дизайнерами и программистами, пишет скрипты.

Пример: настройка ИИ врагов через Blueprint в Unreal Engine.

Важно: базовые навыки программирования.

Другие ниши:

Контент-дизайнер — создает предметы, способности, персонажей.

Мета-дизайнер — проектирует долгосрочную мотивацию (например, сезоны в Fortnite).

Как выглядит типичный рабочий день геймдизайнера?

Расписание сильно зависит от стадии проекта (препродакшн, активная разработка, полиш перед релизом) и типа студии (AAA, инди, мобильная разработка). Но общий шаблон выглядит так:

Утро (2–3 часа)

Синк-митинг с командой

• Обсуждаются текущие задачи, проблемы, планы на день.

• Вопросы от программистов (Как должна работать эта механика?).

• Правки от продюсера (Нужно ускорить прогрессию).

Проверка новых билдов

• Тестирование вчерашних изменений: не сломала ли новая механика старые системы?

• Заведение багов в трекер (Jira, Trello).

День (4–5 часов)

Проектирование и документация

• Доработка GDD (Game Design Document) — описание новых механик.

• Создание таблиц баланса в Excel (урон, цены, скорость прокачки).

• Прототипирование в Unity/Unreal (если техдизайнер — настройка скриптов).

Совещания

• С художниками — согласование визуала под геймплей.

• С нарративным дизайнером — интеграция квестов в систему.

• С продюсером — отчет по срокам.

Итерации по фидбеку

• Правка механики после тестов: например, уменьшение сложности босса.

• Переписывание диалогов по замечаниям сценаристов.

Вечер (2–3 часа)

Тестирование и фиксы

• Играет в текущую сборку, ищет дизайнерские косяки:

• Подготовка задач на завтра.

Креатив в тишине (если есть силы)

• Придумывание новых идей для игры.

• Анализ конкурентов (Как в Elden Ring сделали прогрессию оружия?).

Нюансы для разных ситуаций

• В начале проекта — больше митингов, мозговых штурмов, создание прототипов.

• Перед релизом — аврал, правки по 100 раз, стресс (Кранч).

• В инди-командах — геймдизайнер часто сам лезет в движок, рисует схемы на салфетках.

• В мобильных играх — копание в аналитике (почему игроки уходят на 3-м уровне?).

Какие самые распространенные мифы о профессии?

«Геймдизайнер только играет в игры»

На деле: 10% игры, 90% — документы, таблицы, встречи и правки.

«Нужно уметь рисовать/программировать»

Реальность: это плюс, но не обязательно. Главное — понимать принципы дизайна.

«Геймдизайнер — главный по идеям»

Правда: идеи — 1% работы. 99% — их реализация, тестирование и доработка.

«Достаточно любить игры»

Факт: нужно анализировать их, понимать, почему они работают (или нет).

«В индустрии берут только с опытом»

На самом деле: начать можно с моддинга, Game Jams или QA.

Какие инструменты и движки используют геймдизайнеры?

Движки

• Unity — для мобильных и инди-игр (C#-скриптинг).

• Unreal Engine — для AAA (визуальные скрипты Blueprint).

• Godot — легкий аналог Unity для 2D.

Документирование

• Google Docs/Notion — для GDD.

• Excel/Google Sheets — для баланса (формулы, графики).

• Miro/Figma — схемы механик, интерфейсов.

Тестирование

• Jira/Trello — трекинг задач.

• DevTools движков — дебаг механик.

Аналитика (в F2P):

Firebase/GameAnalytics — метрики игроков.

Как нейросети и AI изменят геймдизайн?

Геймдизайн уже начал трансформироваться под влиянием ИИ, и в ближайшие 5–10 лет изменения станут еще более радикальными. Вот ключевые направления:

Автоматизация рутины

Генерация контента

• Уровни и локации: ИИ (как Procedural Generation 2.0) сможет создавать уникальные, но сбалансированные уровни по запросу (сгенерируй подземелье в стиле Dark Souls).

• Персонажи и диалоги: нейросети (например, ChatGPT) будут писать ветвящиеся диалоги, адаптируя их под стиль игры.

• Текстуры и 3D-модели: инструменты вроде MidJourney/Stable Diffusion ускорят создание концептов.

Баланс и тестирование

• AI-тестеры будут находить базы и дисбаланс быстрее людей.

• Динамическая балансировка: ИИ подстроит сложность под навыки игрока в реальном времени.

Новые возможности для дизайнеров

Прототипирование за минуты

• Генерация готовых механик по описанию (сделай систему крафта как в Skyrim, но с элементами алхимии).

• ИИ-помощники (типа Copilot для геймдизайна) будут предлагать решения:

• Как сделать босса сложным, но не нечестным?
• Какая экономика подойдет для мобильной RPG?

Персонализированный геймплей

• Адаптивные сюжеты, где ИИ меняет историю под действия игрока.

• Уникальные враги, созданные на основе стиля игры пользователя.

Будущее профессии

• Геймдизайнер 2.0 — это куратор ИИ, а не рабочая лошадка.

• Появятся новые специализации:

• AI-дизайнер — настройка нейросетей под нужды игры.
• Промт-инженер — мастер формулировок для генеративного ИИ.

• Инди-разработка выиграет: маленькие команды смогут делать контент уровня AAA.

Где и как учиться

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

Высшее и специальное образование

Университеты и колледжи

Игровые вузы и факультеты

Некоторые учебные заведения предлагают программы по геймдизайну, разработке игр или интерактивному дизайну. Обучение обычно включает:

• Основы геймдизайна (механики, баланс, нарратив).

• Работу с игровыми движками (Unity, Unreal Engine).

• Программирование для дизайнеров (логика, скриптинг).

• Командные проекты (создание игр в группах).

Смежные специальности

Если нет узкопрофильных программ, подойдут:

• Компьютерные науки / Программирование (полезно для технического дизайна).

• Психология / Маркетинг (понимание поведения игроков).

• Литература / Сценарное мастерство (для нарративного дизайна).

Онлайн-университеты и курсы

Многие платформы предлагают структурированные программы от основ до продвинутых тем:

• Курсы по геймдизайну (механики, баланс, документация).

• Специализации по игровым движкам (Unity, Unreal, Godot).

• Интенсивные программы с менторской поддержкой.

Самообразование

Книги и теория

Базовые знания можно получить из книг, например:

• Основы геймдизайна (механики, циклы вовлеченности).

• Психология игроков (мотивация, reward-системы).

• Анализ игр (разбор успешных и провальных проектов).

Практика и создание игр

• Game Jams (соревнования по созданию игр за 48–72 часа).

• Моддинг (изменение существующих игр, например, карты для Warcraft 3, моды для Skyrim).

• Инди-разработка (небольшие проекты на Unity, Ren'Py, RPG Maker).

Игровые движки и инструменты

• Unity, Unreal Engine, Godot — для прототипирования.

• Figma, Miro — для схем и документирования механик.

• Trello, Notion — для организации работы.

Сообщество и нетворкинг

• Форумы и Discord-серверы (обсуждение дизайна, поиск команды).

• Конференции и митапы (GDC, DevGAMM, локальные ивенты).

• Портфолио и блоги (публикация разборов игр, своих проектов).

Опыт работы и старт карьеры

Стажировки и Junior-позиции

• Тестирование игр (QA) → понимание багов и игровых систем.

• Ассистент геймдизайнера → помощь в балансе и документации.

• Левел-дизайн / Нарративный дизайн → узкие роли с ростом в геймдизайн.

Инди-студии и пет-проекты

Многие начинают с некоммерческих проектов, чтобы набрать опыт.

Как выбрать путь?

• Если хотите структуру → курсы, университеты.

• Если готовы к самообучению → книги + практика (Game Jams, моддинг).

• Если нужен быстрый вход в индустрию → стажировки в QA или инди-команды.

Заработная плата

Размер оплаты труда специалиста по разработке игр определяется его опытом и местом работы. В столице, например, недавно пришедшие в профессию могут рассчитывать на доход до 70 000 рублей в месяц, работники со средним уровнем квалификации — от 70 000 рублей, а профессионалы — от 205 000 рублей. Чтобы получить актуальную информацию о зарплатах и вакансиях, стоит обратиться к специализированным ресурсам по поиску работы, таким как hh.ru. На этих сайтах вы сможете найти предложения от прямых работодателей, которые указывают требования и условия оплаты труда.

Заключение

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

Подборки по схожим темам:

1. Лучшие курсы по разработке игр
2. Лучшие курсы по Веб-дизайну

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

Графические редакторы на ПК

Если вы работаете с большими объемами иллюстраций или не хотите зависеть от скорости интернета, обратите внимание на варианты ниже.

Krita

Krita ― кроссплатформенное ПО для создания графики с нуля. Имеет настраиваемое рабочее пространство: окна с ненужными инструментами легко скрыть или открыть рядом с редактируемым файлом рисунок-референс. Программа напоминает Adobe Photoshop и функциями ― например, можно работать над иллюстрациями слоями.

Стоимость: бесплатно.

ОС: Windows, macOS, Linux.

Плюсы:

• легко настроить уровень растушевки и размытия, отрегулировать расстояние между мазками;
• более 120 видов кистей, можно загрузить варианты из Photoshop или создать новые варианты;
• встроенные фильтры: Blur, Edge Detection, Artistic и т. д.;
• есть модуль работы с текстом.

Минусы:

• сложный функционал для начинающих иллюстраторов;
• нет инструментов для цветокоррекции.

Для кого: опытных художников.

GIMP

Еще одна программа для графических дизайнеров продвинутого уровня. В GIMP, как и в предыдущем редакторе, есть достойный набор кистей и карандашей. С помощью инструмента «Штамп» можно аккуратно без артефактов поправить или убрать фрагмент на готовой картинке. ПО открывает файлы разного формата, такие как PDF, JPEG, GIF, PNG. Здесь можно создавать продукты разного масштаба: от небольшой цифровой иконки до макета билборда.

Стоимость: бесплатно.

ОС: Windows, macOS, Linux.

Плюсы:

• встроенный модуль для базовой ретуши: коррекция яркости и цвета, баланс белого, выравнивание линии горизонта;
• можно дополнять основной функционал с помощью плагинов;
• есть поддержка слоев.

Минусы:

• громоздкий интерфейс;
• нет «умных» опций;
• отсутствуют инструменты для продвинутой ретуши.

Для кого: графическим дизайнерам, профессиональным фотографам.

ФотоМАСТЕР

Программа для ПК ФотоМАСТЕР открывает не только файлы популярных форматов типа JPEG, но и исходники. Снимки можно стилизовать при помощи эффектов, таких как «Солнечные лучи», «Тонирование», «Свечение» и т. д. Придать фотокарточке особое настроение помогут и красочные фильтры: «Ретро», «Детализация», «Фото 60-х». Есть большая библиотека 3D Lut с достойным выбором шаблонов для цветокоррекции. Доступна опция пакетного редактирования.

Стоимость:

• пробный период — 5 дней;
• «Стандарт» — 690 руб./год;
• «Профи» — 1980 руб., бессрочная лицензия;
• «Два в одном» — 2480 руб., бессрочная лицензия.

ОС: Windows, macOS.

Плюсы:

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

Минусы:

• в версии macOS пока недоступна опция замены неба.

Для кого: пользователям любого уровня, UI-дизайнерам, коммерческим фотографам.

Sketch

Sketch ― один из лучших графических редакторов для создания адаптивного дизайна на разные типы устройств. На одном рабочем пространстве можно сразу открывать и верстать разные файлы. Возможна совместная работа нескольких над выбранным проектом. У приложения есть собственное облачное хранилище.

Стоимость:

• пробный период — 30 дней;
• стандартный тариф — $10 в месяц;
• бизнес-подписка — $22 в месяц;
• годовое обслуживание — $120.

ОС: macOS.

Плюсы:

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

Минусы:

• не принимает оплату из РФ;
• нет версии на Windows;
• интерфейс на английском языке.

Для кого: UI-дизайнеров.

ФотоМОНТАЖ

ФотоМОНТАЖ ― редактор для создания креативных изображений. В этом помогут встроенные фильтры, эффекты и маски. Для каждого отдельного слоя настраивается прозрачность, указывается режим наложения. У софта есть блок для профессионального ретуширования, который включает такие инструменты, как «Цветокоррекция», 3D Lut, «Виньетирование», «Кривые».

Стоимость:

• пробный период — 5 дней;
• «Стандарт» — 690 руб., бессрочная лицензия;
• «Премиум» — 990 руб., бессрочная лицензия;
• «Профи» — 1470 руб., бессрочная лицензия.

ОС: Windows.

Плюсы:

• быстрая замена заднего плана на вариант из библиотеки софта;
• настраиваемые кисти: размер, сила нажатия, объем растушевки;
• яркие эффекты: «Пленочное зерно», «Эффект кино», «Солнечные лучи»;
• пресеты для виртуального макияжа, есть пластика лица.

Минусы:

• устанавливается только на Windows.

Для кого: коммерческих фотографов и любителей, дизайнеров интерфейсов.

Inkscape

Inkscape — пример софта для векторных рисунков. Позволяет создавать новые изображения как с нуля, так и при помощи программных режимов — кривых Безье, Спиро. Линиями можно нарисовать сложные иконки, орнаменты, персонажей. Помимо этого, геометрические фигуры — прямоугольники, спирали, эллипсы, многоугольники. Можно объединить несколько форм в один фрагмент, клонировать и на выходе получить сложный узор. Открытый программный код позволяет дописать функционал под задачи конкретного пользователя.

Стоимость: бесплатно.

ОС: Windows, macOS, Linux.

Плюсы:

• работа с отдельными фрагментами: наклон, вращение, изменение размеров — вручную или через заданные параметры;
• перемещение, блокировка отдельных слоев или конкретных деталей на них;
• выбор цветового пространства, например, RGB, HSL для заливки предметов;

• есть история действий — можно отменить изменения до выбранного шага.

Минусы:

• медленно редактирует крупные файлы;
• зависает во время работы на компьютерах с небольшой оперативной памятью;
• не может самостоятельно преобразовать цветовое пространство для вывода на печать.

Для кого: иллюстраторов, веб-дизайнеров.

Онлайн-сервисы для графического дизайна

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

Photopea

Photopea — онлайн-двойник Adobe Photoshop. Сервис практически точно дублирует верхнюю панель с разделами и левую боковую с инструментами. Графику можно располагать как на одном слое, так и на разных. Для каждого из них, кроме бэкграунда, настраивается прозрачность и режим наложения.

Стоимость: бесплатно.

Регистрация: не нужна.

Плюсы:

• несколько вариантов для выделения нужных фрагментов: обычное, прямолинейное, магнитное лассо, «Волшебная палочка» и т. д.;
• возможности для оформления текста: добавление изгиба, фона обводки, искажение по вертикали и горизонтали;
• параметрическая настройка кистей: нажим, прозрачность, размер, можно выбрать один из вариантов отрезков в программе и нарисовать узоры, симметричные выбранной линии.

Минусы:

• реклама в правой части экрана;
• нет ИИ-функций.

Для кого: дизайнеров интерфейса, фотографов-ретушеров.

Fotor

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

Стоимость:

• бесплатно — ограниченный функционал;
• Fotor Pro — 690 руб./мес. или 2899 руб./год;
• Fotor Pro + — 1490 руб./мес. или 6599 руб./год.

Регистрация: нужна через аккаунты Google, Apple, Facebook* (заблокирован на территории РФ), электронную почту.

Плюсы:

• каталог макетов на разные тематики: «Еда», «Лого», «Игры», «Музыка» и т. д.;
• ручная обработка и автокоррекция изображения на базе встроенной нейросети;
• доступные шаблоны для презентаций, обложек для соцсетей, можно передвигать, менять, удалять отдельно выбранную часть, например текст или иконку-картинку;
• ИИ-совершенствование портретов — коррекция фигуры, маскировка недостатков на лице.

Минусы:

• в free-версии на готовый результат накладывается водяной знак;
• мало возможностей нейросети в бесплатном тарифе;
• нет поддержки слоев.

Кому подойдет: фотографам-ретушерам, цифровым дизайнерам.

SUPA

SUPA — одна из графических программ для дизайнеров начального уровня. Макеты конструктора заточены под маркетплейсы, такие как Яндекс. Маркет, Wildberries, OZON. Поэтому здесь можно сделать сразу и инфографику для товара, и карточки с изображением. Помимо этого, в конструкторе есть все для оформления визиток, цифровых баннеров, также доступна предварительная подготовка продукции к печати.

Стоимость:

• бесплатно — ограниченный функционал;
• «Премиум» — 415 руб./мес.;
• «Индивидуальный» — по запросу.

Регистрация: нужна через аккаунты «Яндекса», «ВКонтакте», Google, Apple, Facebook* (заблокирован на территории РФ), электронную почту.

Плюсы:

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

Минусы:

• нет ручной цветокоррекции;
• премиум-шаблоны, стоковые фото доступны только после оплаты подписки.

Для кого: контент-менеджерам, маркетплейсов, junior-дизайнер.

PicMonkey

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

Стоимость:

• демопериод — 7 дней;
• «Базовый» — $7,99/мес. или $72/год;
• «Профи» — $12,99/мес. или $120/год;
• «Бизнес» — $23/мес. или $228/год.

Регистрация: нужна через аккаунты Google, Apple, Facebook* (заблокирован на территории РФ), электронную почту.

Плюсы:

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

Минусы:

• не поддерживает российские платежные системы;
• многие интересные опции доступны только в платной версии;
• интерфейс на английском языке.

Кому подойдет: контент-менеджерам.

Эй, тизер!

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

Стоимость:

• бесплатно — с ограничениями;
• 1 месяц — 490 руб.;
• 3 месяца — 1290 руб.;
• годовая подписка — 3990 руб.

Регистрация: нужна, через аккаунт «ВКонтакте», электронную почту.

Плюсы:

• простой интерфейс;
• есть папка для черновиков или проектов, которые на стадии разработки — «Моментальные макеты»;
• вариации для фоновой заливки, есть доступ к стоковым снимкам.

Минусы:

• небольшое число заготовок в месяц в free-версии;
• маленький выбор декораций;
• нет параметрической ретуши.

Для кого: графическим дизайнерам, контент-менеджерам.

Резюмируем

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

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

Разные специалисты оценивают видеохостинги по-своему: дизайнеры – интерфейс, айтишники – API и производительность, маркетологи – инструменты продвижения. Но их объединяет одно: большие сомнения насчет платформ.

Главная страница и поиск: где удобнее смотреть видео

VK Видео

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

VK Видео глубоко интегрирован в экосистему «ВКонтакте», что логично: пользователи уже привыкли к соцсети, и переходить на новый сервис им не нужно. Все в одном месте – удобно.

Но у этого подхода есть и минусы. Главная страница хостинга перегружена контентом соцсети. Видео тонут в потоке мемов, репостов, рекламы и случайных рекомендаций.

Поиск работает по логике «ВКонтакте»: анализирует весь контент соцсети, а не только видео. В результате, даже при точном запросе пользователи получают не только ролики, но и случайные посты, стримы или устаревший контент.

Поиск должен не просто перебирать базу, а учитывать контекст и поведение пользователя. Узнайте меня лучше, попробуйте предложить что-то еще – возможно, меня это заинтересует.

По его мнению, лучший вариант – персонализация и фильтры. Например, при поиске по слову «космос» система должна уточнять: интересны ли фильмы, подкасты или научные передачи?

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

Например, создать отдельные блоки: «Популярное», «На основе ваших просмотров», «Недосмотренное», «Тренды». Так пользователь сможет сам выбрать, что ему важно, а не пробираться через хаос рекомендаций.

Rutube

С точки зрения анализа аудитории, Rutube набрал около 9 миллионов дневной аудитории (по Mediascope). Люди приходят смотреть шоу и сериалы, грубо говоря, используют видеохостинг как телевизор.

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

Поиск работает формально: вводите запрос – получаете список без фильтрации и тегов. Ошибки приводят к странным результатам. Например, запрос «Апачи апачи» может выдать бессистемную подборку роликов.

Поиск – базовая функция. Он должен работать по умолчанию, а не быть лотереей. Было бы неплохо при поиске выдавать уточняющие фильтры: «подкасты», «фильмы», «шоу». Это проще и быстрее, чем заставлять человека четко формулировать запрос.

Авторы жалуются, что их видео редко всплывают в общей выдаче, и приходится кидать прямые ссылки.

Результаты поиска нужно структурировать: отдельно показывать каналы, видео, плейлисты. Добавить историю запросов и интерактивные подсказки, чтобы все работало логично

Минимализм и функциональность: где золотая середина?

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

VK Видео: перегруз контентом

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

Главную страницу VK Видео нужно переработать: убрать лишний контент, сделать персонализацию и динамическую ленту

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

Главная проблема VK Видео — нет четкой структуры и фильтров. Пользователь получает слишком много несортированной информации, что мешает ему быстро находить нужный контент.

Rutube: минимализм, доведенный до крайности

Rutube, наоборот, страдает от обратной проблемы. После редизайна он стал выглядеть современно, но в погоне за «чистым» дизайном ушел в крайности. Пространство между блоками слишком велико, текстовые элементы теряются на темном фоне, а главная страница больше похожа на постер кинотеатра, чем на площадку для поиска контента.

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

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

Загрузка и модерация

VK Видео

Главный козырь VK Видео — автоматический импорт с YouTube. Не нужно вручную перетаскивать сотни роликов, сервис сам всё загрузит в ваш профиль. Экономит время, нервы и терабайты трафика.

Ручная загрузка тоже проста: название, описание, кнопка «Загрузить» — готово. Лимит в 5 Гб может быть проблемой для создателей длинных вебинаров и курсов, но большинству хватает. Модерация почти незаметна: проверили — опубликовали. Иногда с задержками, но без бюрократии.

Из минусов — непредсказуемые блокировки. Если контент «на грани» — политика, авторские права, спорные темы — ролик могут снести без объяснений. Четких правил нет, авторам остаётся только гадать, что пошло не так.

Rutube

Здесь щедрые лимиты: до 25 Гб и 300 минут видео без потери качества. Идеально для стримов, длинных интервью и документалок. Но за объём платишь временем — модерация может длиться от нескольких часов до суток. Если аккаунт новый и без верификации, ждать можно ещё дольше.

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

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

VK Видео — видеохостинг или соцсеть? Rutube — ТВ или комьюнити?

VK Видео

VK Видео официально вывели в отдельное приложение, но в сознании пользователей оно всё ещё часть «ВКонтакте». Это даёт платформе мощный охват: ролики легко распространяются через ленты друзей и группы. Но есть и обратная сторона — сервис теряет собственное лицо, растворяясь в соцсетевом потоке.

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

VK Видео независим технически, но практически не ощущается самостоятельной платформой. Что с этим делать?

• Редизайн, который отличит сервис от ВКонтакте и усилит ощущение уникального продукта;
• Автономные рекомендации, завязанные не на соцсетевых группах, а на интересах зрителя;
• Чёткий брендинг и маркетинг, позиционирующий VK Видео как конкурента YouTube, а не просто «раздел ВК».

Rutube

Rutube делает ставку на онлайн-ТВ, но забывает о вовлечённости пользователей. Главная страница напоминает афишу сериалов, а не пространство для общения. В результате зрители потребляют контент, но не остаются на платформе.

Rutube не воспринимается как соцсеть, он пассивен: пользователи только потребляют контент, а не взаимодействуют с платформой.

YouTube и TikTok удерживают аудиторию не только контентом, но и активной средой: лайки, подписки, комментарии, коллаборации. Rutube же остаётся статичным. Чтобы стать больше, чем просто интернет-ТВ, ему нужно:

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

Если VK Видео хочет быть YouTube, ему нужен более самостоятельный образ. Если Rutube хочет быть чем-то большим, чем ТВ, ему нужно развивать комьюнити. Пока оба сервиса ищут свою роль, но играют на разных полях.

Каким должен быть идеальный видеохостинг в 2025 году

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

Персонализация: видео должно находить зрителя само

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

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

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

Скорость

Видеохостинг не должен заставлять зрителя ждать. Открываешь приложение — и видео сразу работает. Медленные загрузки, перегруженные интерфейсы и сложные навигации снижают вовлечённость (тем более, с этим мы уже столкнулись на YouTube).

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

Простота — не урезанный функционал, а удобная подача. На идеальной платформе поиск срабатывает моментально, а нужный контент доступен в пару кликов.

Вовлеченность: видео — не про пассивный просмотр

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

Сегодня видео — не просто просмотр. Это эмоции, вовлечение, участие

Лучшие примеры таких взаимодействий уже есть:

• Реакции в реальном времени (как на Twitch).
• Возможность отвечать видео на видео (как в TikTok).
• Социальные механики обсуждения (как на YouTube).

Но и этого мало. Видеохостинг будущего должен пойти дальше: интерактивные видео с разными сценариями, голосование за контент в реальном времени, обсуждения, встроенные прямо в видеоплеер.

Экосистема, а не просто платформа

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

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

Это означает:

• Продуманную монетизацию: авторам выгодно загружать контент, а зрителям — его поддерживать.
• Интеграцию с другими сервисами: например, возможность продолжать смотреть видео на разных устройствах без потери контекста.
• Контент-оповещения: уведомления о новых видео от любимых авторов, персонализированные рекомендации.

VK Видео vs Rutube: где смотреть, а где зарабатывать

Для обычного пользователя

Если вы хотите просто смотреть сериалы, кино или шоу, оцените, что для вас важнее:

• VK Видео дает привычную соцсетевую среду, где можно делиться роликами с друзьями, собирать лайки и комментировать их в одном окне. Удобно, если у вас уже есть круг общения во «ВКонтакте». Но реклама иногда выскакивает внезапно, да и весь этот соцмедиа-поток может мешать, если вы просто хотите «лечь на диван и смотреть кино».
• Rutube ощущается как онлайн-ТВ. Если вам нравится пролистывать передачи и собственные шоу сервиса, а длинные фильмы и сериалы в высоком качестве — ваша главная цель, Rutube закрывает эту потребность. Однако будьте готовы, что с поиском придется побороться, а комментарии — это отдельный квест.

В целом, для простого домашнего просмотра обе платформы подойдут. VK Видео спасает любителей социального взаимодействия, а Rutube — фанатов нелегальных сериалов (спорные моменты с авторскими правами).

Для компаний и авторов, которые планируют стримить и выкладывать обучающие видео

• VK Видео здесь удобен: если у вас уже есть сообщество во «ВКонтакте», люди будут видеть стримы сразу в ленте. Плюс можно сохранить запись эфира, вернуть зрителей к повторам, без проблем вести рубрики и иметь все под одной учеткой. Минус в том, что какая-то сложная аналитика и фильтры по контенту могут отсутствовать. И если вы планируете выкладывать длинные вебинары по 3–4 часа, помните про ограничение в 5 Гб.
• Rutube дает больше возможностей: можно грузить длинные форматы (до 300 минут) почти без сжатия, сохранять качество и даже устраивать закрытые трансляции. Но долгое одобрение видео (если вы не верифицированный канал) и неочевидный путь к статистике усложняют жизнь. Если у вас в планах четкий график с точным выходом роликов, готовьтесь загружать все заранее и планировать публикации.

Обе платформы предлагают разные сценарии использования. VK Видео интегрирован в соцсетевую экосистему и удобен для быстрого распространения контента. Rutube больше ориентирован на профессиональное видеовещание и долгосрочные проекты. Но без экспериментов не узнаешь, что действительно сработает для вашей аудитории.

Впервые идея создать приложение для подбора меню появилась в начале 2024 года. На тот момент в моей жизни было две главные проблемы:

• Я работала в Учи.ру, где мы писали браузерную игру на чистом JS, поэтому я очень скучала по реакту.
• Мне надоело придумывать, что готовить. Из-за этого мы с мужем перешли на готовые рационы. Но, во-первых, питаться только доставками дорого. А во-вторых, всё равно приходилось мыть посуду, потому что мы сознательные разработчики, которые сортируют мусор и сдают пластик в переработку.

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

Подготовка

Первое, что я сделала — набросала схему в FigJam. Здесь отметила, какие функции обязательно должны быть в MVP, а какие войдут в следующие версии проекта (v1.5, v2 и даже v3).

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

Чтобы ничего не забыть, все задачи отмечала в Notion, а когда он закрылся, перешла в AnyType. Кому-то он нравится больше, но лично мне не хватило возможности переносить таски из одного столбика в другой (или я просто не поняла, как это делать). Поэтому в скором времени планирую переезд в Obsidian.

Кое-что по технарю

Для разработки я выбрала эти инструменты:

• Библиотека: ReactJS. Думаю, пояснения будут излишни.
• Стор: Redux Toolkit. Много раз видела его в вакансиях, но ни разу с ним не работала, поэтому было интересно пощупать на практике.
• Базы данных: Supabase — аналог Firebase. Тоже взяла впервые.
• Сборка: Vite, потому что он быстрый и классный.
• Деплой: Vercel. В отличие от GitHub Pages может делать всё за одно нажатие кнопки.

Ещё хотела использовать UI-библиотеку, но так как приложение небольшое, то решила не тащить лишние килобайты и сверстать всё сама.

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

Как работают алгоритмы

Основа приложения — это три главных экрана:

• рецепты,
• холодильник,
• список покупок.

Работает это просто: я заполняю раздел «Холодильник» и отмечаю, какие продукты уже есть дома, а приложение подбирает подходящие рецепты из базы данных.

Например, сейчас в базе есть рецепты шакшуки, авокадо-тоста или гранолы с фруктами. При этом для шакшуки у меня есть 67% ингредиентов, для тоста — ровно половина, а для гранолы — только 33%. Поэтому идём по пути наименьшего сопротивления и выбираем на завтрак яйца. А недостающий перец автоматически отправляется в список покупок.

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

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

Немного проблем

В процессе работы было несколько трудностей:

• Нехватка времени. Я начала делать приложение на новогодних каникулах, а потом они кончились, и свободного времени не осталось.
• Лень. Если честно, заполнять базу данных рецептами довольно муторно, поэтому со временем мы снова перешли на доставку готовых рационов.
• Странности с Supabase. На бесплатном тарифе база данных замораживается, если не пользоваться ей неделю. Потом можно опять активировать, но я думаю перейти на Nitra, чтобы ни от кого не зависеть.
• Уход от плана. В какой-то момент я настолько вошла во вкус, что забыла про свои схемы и черновики. В итоге актуальная версия приложения очень отличается от той, что была запланирована.

Планы на будущее

Сейчас приложение на этапе MVP, но есть много идей, куда и как его можно развивать. Вот что точно хочу сделать в будущем:

• Общий список покупок. Чтобы там были не только продукты, но и другие вещи. Думаю, будет логично хранить всё в одном месте.
• Генерация меню на несколько дней. Это упростит процесс покупок, и не придётся лишний раз ходить в магазин.
• Внесение блюда в базу данных через интерфейс. Надеюсь, это решит мою проблему с ленью, и я найду силы и время добавить в приложение все рецепты.
• Тёмная тема. Она уже готова, нужно просто подключить.

Ещё думаю над тем, чтобы вывести приложение в паблик и дать возможность всем желающим подключить свою базу данных. С open-source всё сложнее — пока не настолько доверяю людям, чтобы дать им возможность решать, что будет у меня на завтрак 🙂

Зачем делать пет-проект

Пет-проект — это классный способ прокачать свои навыки. Если у вас тоже есть своя задумка, рекомендую не откладывать её в долгий ящик. С помощью пет-проекта вы можете:

• Решить свою актуальную проблему, как это сделала я. С одной стороны — сняла головную боль с придумыванием блюд, с другой — вернулась к любимому реакту.
• Поработать с новыми технологиями, которые хочется пощупать, но нет возможности в основном проекте.
• Попробовать себя в новых ролях. Если на работе вы только разработчик, то здесь одновременно аналитик, архитектор, проджект-менеджер, тестировщик и дизайнер;
• Пополнить резюме. Новый опыт и технологии точно пригодятся на собеседованиях.

Вместе с экспертами Kursfinder я рассмотрела около 100 образовательных программ и составила рейтинг из 53 курсов по UI/UX-дизайну. В статье вы найдете подборку 10 лучших, по моему мнению, программ, 18 курсов для начинающих, еще 10 уроков — по UI/UX-инструментам, а также 15 бесплатных вариантов обучения. Полный список курсов по UI/UX — в нашем каталоге.

ТОП-10 лучших курсов по UI/UX дизайну в 2026 году

1. UX/UI-дизайнер от Bang Bang Education — 10 работ для портфолио, включая мобильные и веб-интерфейсы.
2. Профессия «UX/UI-дизайнер» от «Нетологии» — идеальная программа для обучения с нуля.
3. UX/UI-дизайнер Plus от Bang Bang Education — быстрый рост до уровня middle.
4. Дизайнер интерфейсов от «Яндекс Практикума» — обилие практики.
5. UX/UI-дизайнер от GeekBrains — поддержка в трудоустройстве.
6. Профессия: UX/UI-дизайнер от ProductStar — 70% практики и хорошо организованное комьюнити.
7. UI/UX-дизайнер (430) от АНО «НИИДПО» — оплачиваемая стажировка у партнеров.
8. Профессия UX/UI-дизайнер от Contented — сильное портфолио для солидных работодателей.
9. UX/UI-дизайнер от «Логомашины» — обучение на реальных проектах.
10. Профессия UX/UI-дизайнер с нуля до PRO от Contented — практика на реальных кейсах.

UX/UI-дизайн — креативная и престижная профессия. Специалист должен быть одновременно мастером IT-технологий и психологом, понимающим предпочтения и интересы аудитории. UI/UX курсы онлайн подойдут как новичкам в этом направлении, так и опытным веб-дизайнерам и веб-разработчикам, желающим расширить профессиональные навыки, освоить новую сферу деятельности. Также курсы могут оказаться полезны маркетологам, проектным менеджерам, бизнесменам, которые желают самостоятельно оптимизировать собственные веб-продукты.

Онлайн-курсы по UI/UX-дизайну

1. UX/UI-дизайнер | Bang Bang Education

Разработкой учебной программы занимались мастера из AIC и samokat.tech. Вы научитесь создавать дизайнерские концепции, разрабатывать дизайн веб-сайтов и приложений, исследовать тенденции UX, делать framework и wireframe, ознакомитесь с инструментами no-code. Учебу можно совмещать с работой, на освоение материала в неделю требуется 10–12 часов. На защите диплома присутствуют потенциальные заказчики и работодатели, поэтому учащимся дается уникальный шанс их заинтересовать.

• Стоимость: базовый тариф — 125 100 р. (4 170 р. в месяц при 30-месячной рассрочке), оптимальный тариф — 167 850 р. (5 595 р.), индивидуальный тариф — 354 600 р. (11 820 р.)
• Длительность: 10 месяцев
• Формат обучения: видеолекции по 20–30 минут, проверяемые преподавателями самостоятельные задания по каждой теме, вебинары
• Сертификат: диплом

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

Преимущества:

• гибкое расписание, позволяющее заниматься в индивидуальном темпе;
• индивидуальная связь с мастерами из компаний-партнеров;
• помощь в поиске работодателя;
• 10 работ по созданию мобильных и веб-интерфейсов для портфолио;
• проверка самостоятельных работ не дольше 3 дней;
• преподаватели, прошедшие обучение от BBE;
• возврат 13% налога;
• возможность оплаты юрлицом;
• возможность поменять курс.

Недостатки:

• невозможность забрать деньги при отказе от обучения при прохождении половины курса;
• бесплатный доступ к материалам только на полгода после учебы.

Программа обучения:

• визуальный дизайн;
• интерактивный дизайн;
• анализ UX;
• создание интерфейсов мобильных устройств;
• цифровой продукт.

Ознакомиться с полной программой >>>

2. Профессия «UX/UI-дизайнер» | Нетология

Программу курса разработали специалисты ведущих студий цифрового дизайна. Можно выбрать одно из двух направлений обучения: базовое — освоение основных знаний и навыков UX/UI для быстрого старта на фрилансе или удаленной работе, расширенное — более глубокое погружение в профессию для получения высокооплачиваемой должности. Вы сможете попрактиковаться на настоящих кейсах от партнеров онлайн-курса: сети «ВкусВилл», Okko, МТС.

• Стоимость: базовый курс — 136 100 р. (3 979 р. при 36-месячной рассрочке), расширенный — 187 100 р. (5 470 р.)
• Длительность: 9 либо14 месяцев в зависимости от направления
• Формат обучения: лекции, практические упражнения по 8–10 часов в неделю, записанные вебинары, воркшопы
• Сертификат: диплом

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

Преимущества:

• 6–12 проектов для портфолио;
• поддержка вплоть до трудоустройства;
• получение достаточных для начала работы навыков уже через 4 месяца от старта обучения;
• обретение большого практического опыта, индивидуального и командного;
• возможность участвовать в оплачиваемых партнерских проектах;
• возврат денег при отказе от обучения.

Недостатки:

• начало обучения с запуском потока;
• не всегда хорошая обратная связь.

Программа обучения:

• как освоиться в цифровом дизайне;
• программные инструменты;
• UI-дизайн;
• UX, копирайтинг;
• командная деятельность;
• анализ предпочтений пользователей;
• работа в Tilda;
• 3D-графика;
• анимация;
• карьера, менеджмент.

Ознакомиться с полной программой >>>

3. UX/UI-дизайнер Plus | Bang Bang Education

На курсе вы научитесь разрабатывать дизайнерские концепции, создавать дизайн сайтов и мобильных приложений, делать UX-анализ, строить и проверять продуктовые гипотезы, презентовать решения. Освоите framework, wireframe, инструменты no-code, методы Agile, Scrum, метрики продуктов, маркетинг и брендовое позиционирование. Познакомитесь с программами Tilda, Figma, Webflow. Обучаясь по 10–12 часов в неделю, быстро достигните профессионального уровня middle.

• Стоимость: базовый тариф — 161 550 р. (5 380 р. в месяц при 30-месячной рассрочке), оптимальный тариф — 204 300 р. (6 810 р.), индивидуальный тариф — 404 550 р. (13 485 р.)
• Длительность: год и 2 месяца
• Формат обучения: лекции в форме видео по 15–30 минут, практика в виде вебинаров, разбор самостоятельных упражнений
• Сертификат: диплом

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

Преимущества:

• портфолио из 12 проектов;
• практика на настоящих кейсах;
• преподаватели — практикующие дизайнеры из престижных компаний;
• помощь в поиске работы, подготовка к собеседованию;
• обучение в комфортном формате;
• защита диплома в присутствии потенциальных работодателей;
• возврат 13% налога от стоимости обучения;
• возможность оплаты обучения работодателем;
• возможность поменять курс на другой.

Недостатки:

• невозможность вернуть деньги при отказе от курса после прохождения половины программы;
• нерегулярные обновления программы;
• сохранение доступа к материалам без оплаты лишь полгода после завершения учебы.

Программа обучения:

• основы UI;
• проектирование;
• UX-исследование;
• дизайн интерфейсов гаджетов;
• разработка цифрового продукта;
• дипломная практика.

Ознакомиться с полной программой >>>

4. Дизайнер интерфейсов | Яндекс Практикум

Вы можете выбрать базовый или расширенный курс. Во втором случае доучитесь до уровня middle. Учебная программа разбита на спринты — трехнедельные интервалы, после каждого из которых нужно выполнить проект, проверяемый затем преподавателем. График занятий гибкий, только воркшопы проходят по расписанию, также проекты нужно сдавать вовремя. Вы освоите Figma, Tilda, программы Adobe.

• Стоимость: базовый курс — 139 000 р. (17 000 р. в рассрочку на 9 месяцев), расширенный — 199 000 р. (18 500 р. в месяц)
• Длительность: 9 месяцев
• Формат обучения: лекции, практика в интернет-учебнике, воркшопы
• Сертификат: диплом

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

Преимущества:

• первые 6 часов лекций бесплатные;
• свежая учебная программа, обновляемая через каждые полгода;
• помощь в поиске работодателя или в организации фриланса в течение 7 месяцев после учебы;
• 5 крупных проектов разной направленности для портфолио;
• обилие практических занятий;
• включение в программу работу с нейросетями;
• возможность взять каникулы;
• возможность оплаты обучения вашим работодателем;
• возврат денег за остаток не пройденного до конца курса;
• вычет 13%.

Недостатки:

• для начала обучения нужно ждать старт потока;
• не всегда качественная организация учебного процесса.

Программа обучения:

• введение в специальность (бесплатные лекции);
• аудитория, визуальный контакт;
• композиция, сетки;
• типографика, работа с текстом;
• цвет, изображения;
• анализ аудитории;
• разработка интерфейса;
• анимация, иконки, UI Kit;
• принципы адаптивности;
• работа в цифровом продукте;
• UX-копирайтинг;
• визуализация информации;
• Figma;
• After Effects;
• MVP на Tilda.

Ознакомиться с полной программой >>>

5. Профессия «UX/UI-дизайнер» | GeekBrains

Программа курса составлена двумя школами — GeekBrains и Skillbox, поэтому занятия проходят на двух платформах. Вы научитесь исследовать пользовательские запросы, анализировать конкурентов, работать с UserFlow, готовить макеты, проводить аудит интерфейса, создавать дизайн веб-сайтов и приложений, оптимизировать продукты по сведениям метрик. Освоите многие графические инструменты. Средняя загруженность учащихся — 4–5 часов в неделю.

• Стоимость: 3 872 р. при 36-месячной рассрочке
• Длительность: до 3 лет
• Формат обучения: уроки в режиме live в мини-группе по расписанию, видеолекции в записи с теорией, практика по реальным заданиям
• Сертификат: да

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

Преимущества:

• 8 практических занятий на настоящих кейсах;
• всесторонняя помощь в поиске работы с возвратом денег, если устроиться не получится;
• бесплатные консультации эксперта;
• ответ от кураторов в течение суток после отправки выполненного задания;
• актуальность учебных материалов;
• возврат 13% оплаты в виде налогового вычета;
• рассрочка без первоначального взноса и скрытых начислений.

Недостатки:

• начало учебы со стартом потока;
• не всегда качественная работа сотрудников техподдержки и кураторов.

Программа обучения:

• Figma;
• веб-дизайн;
• UX-дизайн;
• дизайн сервисов;
• дизайн продуктов;
• аналитика UX;
• Adobe Photoshop;
• After Effects.

Ознакомиться с полной программой >>>

6. Профессия: UX/UI-дизайнер | ProductStar

Для удобного прохождения курса предусмотрена платформа ProductStar, где собраны все лекции, тренажеры, самостоятельные упражнения, чаты. Вы освоите Figma и Tilda, научитесь проектировать визуальную составляющую интерфейса, создавать эффективные и удобные для работы системы, верстать веб-сайты, писать скрипты. На занятия нужно отводить по 8–10 часов в неделю.

• Стоимость: стандартный тариф — 112 320 р. (5 200 р. в месяц при 24-месячной рассрочке), продвинутый тариф — 131 320 р. (6 104 р.), тариф премиум — 213 935 р. (9 904 р.)
• Длительность: 10 месяцев
• Формат обучения: проверяемые самостоятельные задания, вебинары
• Сертификат: диплом, подтверждающий профессиональную переподготовку

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

Преимущества:

• помощь в трудоустройстве с возвратом денег, если найти работу не удастся;
• преподаватели — практикующие специалисты солидных компаний;
• возможность перевестись на другой курс в течение 2 месяцев;
• помощь в поиске проектов с заработком уже в начале обучения;
• беспроцентная рассрочка;
• регулярно обновляемая учебная программа;
• стажировка в компаниях-партнерах;
• 13% налоговый вычет;
• возможность оплаты курса работодателем.

Недостатки:

• вебинары по расписанию;
• не всегда своевременная проверка самостоятельных заданий.

Программа обучения:

• Figma, Tilda;
• система дизайна;
• UI-дизайн;
• дизайн мобильных приложений;
• мышление дизайнера;
• прогрессивный UX;
• исследования, аналитика;
• верстка, ее инструменты.

Ознакомиться с полной программой >>>

7. UI/UX-дизайнер (430) | АНО «НИИДПО»

Вы научитесь создавать удобные и понятные пользователям интерфейсы веб-сайтов и приложений для гаджетов, модернизировать их, исследовать пользовательское поведение, анализировать конкурентов, искать заказчиков, работать в команде и как фрилансер. Овладеете навыками разработки прототипов UX/UI, анимации в Figma, сайтов на базе Tilda.

• Стоимость: 94 300 р. (рассрочка 5 240 р. на 18 месяцев)
• Длительность: 8,5 месяца (есть возможность ускоренного обучения за 7 месяцев)
• Формат обучения: текстовые и видеолекции, практические упражнения, вебинары, консультации, тесты
• Сертификат: диплом института о профессиональной переподготовке + сертификаты по вебинарам

Кому подойдет: всем, кто желает освоить престижную профессию с нуля. При наличии опыта в веб-дизайне курс поможет стать более компетентным и востребованным специалистом, устроиться в солидную российскую или зарубежную IT-компанию.

Преимущества:

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

Недостатки:

• сохранение доступа к учебным материалам только после успешного прохождения курса.

Программа обучения:

• введение в профессию;
• лендинг в Figma, композиция, прототип;
• UI-дизайн лендинга, концепция графики;
• основы веб-дизайна;
• прототип магазина;
• контент веб-сайта, Adobe Photoshop для дизайнера интерфейса;
• анимация, завершение проекта;
• дизайн на Tilda;
• лендинг, магазин, многостраничный сайт на Tilda;
• работа с мобильными приложениями, проектирование, прототип, UI-дизайн;
• аналитика, UX-исследования;
• продуктовый подход в мобильном приложении, прототип и визуальная концепция;
• дизайнерский бренд;
• практикум.

Ознакомиться с полной программой >>>

8. Профессия UX/UI-дизайнер | Contented

🎁Используйте эксклюзивный промокод «kursfinder5», чтобы получить скидку 5% на курсы школы.

Курс разработан совместно с международным дизайнерским агентством Cuberto. Для успешного освоения профессии UX/UI-дизайнера обучение нужно проходить по 6–10 часов в неделю. В этом случае уже с 4 месяца учебы можно будет браться за первые оплачиваемые проекты. Для удобства обучения предусмотрена специальная платформа, где у вас будет индивидуальный доступ к материалам и лекциям, туда же вы будете загружать выполненные самостоятельные работы для проверки преподавателем.

• Стоимость: базовый тариф — 3 886 р. в месяц при 36-месячной рассрочке, оптимальный тариф — 5 390 р. в месяц, тариф VIP — 9 020 р. в месяц
• Длительность: 8,5 месяца
• Формат обучения: короткие видеолекции, самостоятельные задания с двухэтапной проверкой (преподавателем и сокурсниками)
• Сертификат: диплом или сертификат

Кому подойдет: программа последовательно вводит в профессию, информация предельно доступна для понимания, поэтому учиться можно начинать с нулевыми знаниями в дизайне. В этом случае после обучения вы сможете работать в статусе Junior. Если опыт в дизайне у вас уже есть, курс поможет структурировать и дополнить знания, ознакомиться с новыми техниками и методами.

Преимущества:

• 6 работ для портфолио;
• хорошая обратная связь;
• закрытое комьюнити;
• доступность учебных материалов навсегда;
• возможность взять каникулы;
• стажировка, конкурсы, хакатоны.

Недостатки:

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

Программа обучения:

• основы дизайна интерфейсов;
• погружение в UX/UI;
• специализация;
• дипломный проект;
• Adobe Illustrator;
• Cinema 4D.

Ознакомиться с полной программой >>>

9. UX/UI-дизайнер | Логомашина

В основе программы курса — симулятор реального проекта «Крутые студии». Команда учащихся создает проект для настоящего заказчика, что позволяет до окончания учебы вникнуть в специфику работы. Вы научитесь создавать лендинги, магазины, корпоративные сервисы, проектировать и оптимизировать интерфейсы, проводить исследования для понимания пользовательских требований и предпочтений, прорабатывать сценарии, взаимодействовать с заказчиками. Освоите инструменты Adobe Photoshop, Figma, Miro, Tilda.

• Стоимость: 5 167 р. в месяц
• Длительность: год и 1 месяц
• Формат обучения: лекционные записи для просмотра в любое время, воркшопы, вебинары с экспертами, индивидуальные разборы самостоятельных работ
• Сертификат: диплом

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

Преимущества:

• регулярное обновление программы, в том числе и в 2026 году;
• стажировка, подготовка к собеседованиям;
• индивидуальный подход к учащимся;
• качественное общение с преподавателями в формате видео на протяжении всей учебы;
• возможность регулировки сложности самостоятельных заданий;
• бесплатная онлайн-библиотека учебных материалов;
• развитое сообщество учащихся, где можно задать вопросы и найти поддержку;
• возврат 13% налога.

Недостатки:

• помощь в поиске работодателя только при соблюдении целого ряда условий.

Программа обучения:

• введение в тему;
• дизайн цифровых систем;
• оформление веб-сайтов;
• создание интерфейсов;
• гибкость навыков и психология.

Ознакомиться с полной программой >>>

10. Профессия UX/UI-дизайнер с нуля до PRO | Contented

🎁Используйте эксклюзивный промокод «kursfinder5», чтобы получить скидку 5% на курсы школы.

В разработке курса участвовало международное дизайнерское агентство Cuberto. Вы получите индивидуальный доступ к занятиям и учебным материалам на специальной платформе, заниматься будете по 6–10 часов в неделю. Программа сконструирована так, что первые оплачиваемые проекты сможете брать уже через 4 месяца от начала обучения. Вы освоите большой перечень инструментов: Figma, Adobe After Effects, Adobe Illustrator, Blender, Miro, Cinema 4D, Notion, ProtoPie.

• Стоимость: базовый тариф — 5 883 р. в месяц при 36-месячной рассрочке, оптимальный — 8 907 р. в месяц, VIP-тариф — 12 206 р. в месяц
• Длительность: 14 месяцев
• Формат обучения: видеоуроки, самостоятельные задания, проверяемые в 2 этапа (преподавателем и сокурсниками)
• Сертификат: диплом о профессиональной переподготовке или сертификат

Кому подойдет: курс рассчитан на новичков, программа начинается с основ профессии с постепенным переходом к сложным темам. Дизайнерам смежных направлений онлайн-курс тоже будет полезен для получения новых знаний, расширения компетенции.

Преимущества:

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

Недостатки:

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

Программа обучения:

• основы дизайна интерфейсов;
• изучение UX/UI;
• дизайн веб-сайтов;
• дизайн мобильных приложений;
• стажировка;
• UX-исследования;
• системный дизайн;
• визуализация 3D;
• прокачка навыков, дипломная работа.

Ознакомиться с полной программой >>>

Еще 18 курсов по UI/UX-дизайну с нуля

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

• UX-дизайнер с нуля до PRO от Skillbox — курс для тех, кто в общих чертах знаком в Figma, желает получить образование в сфере дизайна. Обучение длится 6 месяцев. В портфолио по окончанию будет 4 работы, а завершающий проект — настоящий кейс от компании.
• UX/UI-дизайнер: сайты PRO от UPROCK School — объемная учебная программа, сконструированная так, что уже через 5–5 месяцев вы сможете брать заказы на уровне junior-мастера. А в конце обучения достигнете уровня middle и даже senior. Уроки обновляются примерно через каждые 3 месяца.
• UX/UI-дизайн: продвинутый уровень от Loftschool — курс из 12 моделей, рассчитанный на дизайнеров из других сфер, которым хочется расширить компетенцию. За 6 недель обучения вы создадите собственный проект для портфолио — интерфейс мобильного приложения. В конце обучения получите сертификат, а учебные материалы останутся в доступе навсегда.
• Онлайн-курс UX-дизайна от HEDU (irs.academy) — 12 уроков, которые будут полезны дизайнерам из других сфер, бизнесменам, маркетологам. Занятия проходят в форме вебинаров, плюс предусмотрены самостоятельные упражнения. После защиты проекта вы получите сертификат.
• Продуктовый дизайн от UPROCK School — обширная учебная программа с емкими видеоуроками и практическими заданиями, которые детально проверяют и разбирают преподаватели. Учебный материал обновляется через каждые 2–3 месяца.
• Профессия UX/UI-дизайнер с нуля за 9 недель от Contented — интенсивный курс с загруженностью 6–8 часов в день. Заниматься предстоит в мини-группе, а в чате можно общаться с экспертами. Курс включает более 160 часов практики, предусмотрена программа трудоустройства.
• UX UI Дизайнер от «Знанио» — курс, подразумевающий самостоятельное обучение в комфортном для вас режиме. В конце получите сертификат. Есть возможность стажировки у партнеров, передачи им вашего резюме на рассмотрение.
• Онлайн-курс по UI и UX-дизайну от Onskills — курс для новичков, дизайнеров из других областей, бизнесменов, желающих самостоятельно развивать свой проект. Программа состоит из видеоуроков, практических занятий, консультаций. Первый урок бесплатный, в конце получите сертификат.
• Курс веб-дизайна UX/UI для новичков от Академии BELHARD — программа из 14 занятий, дающая азы профессии. Уроки проходят по расписанию в небольших группах. В конце обучение вы получите сертификат и можете рассчитывать на содействие карьерного центра в трудоустройстве.
• Дизайн интерфейсов в Figma от Pentaschool — курс по продвинутому освоению редактора. Вы создадите портфолио из макетов лендинга и мобильного приложения, получите сертификат. В личном кабинете смотрите видеолекции, выполняете практические задания, общаетесь с преподавателями, изучаете предлагаемые вспомогательные материалы.
• Курс Веб Дизайн в Figma. Основы UI UX дизайна на практике от beONmax — практический курс для обучения с нуля. Вы научитесь работать в графическом редакторе, создадите презентации для размещения в международном сообществе дизайнеров. Программа включает 91 задание, 85 видеолекций.
• UX/UI-дизайн от Московского Института Технологий и Управления — аккредитованная дистанционная программа бакалавриата для студентов, желающих расширить знания. Обучение длится 4,5 года. В завершение выпускники получают диплом государственного образца.
• UX/UI-дизайнер с 0 до Middle+ от UPROCK School — учебная программа, совмещенная со стажировкой, подразумевает выполнение проектов в студиях и компаниях. Материал регулярно обновляется, хорошо организована помощь с трудоустройством. У школы свыше 50 партнеров, искать работу можно уже через 4 месяца обучения, есть возможность устроиться в зарубежную компанию.
• UX/UI-дизайнер от «Айтилогии» — 7-месячный онлайн-курс, состоящий из записанных видеолекций, проверочных самостоятельных заданий, консультаций. Первые проекты как фрилансер можно брать уже с середины обучения, а в конце вы получите сертификат, сможете рассчитывать на помощь в трудоустройстве.
• Дизайнер интерфейсов (UX/UI-дизайнер) от Международной академии бизнеса IAB — дистанционная программа с самым новым материалом на высокотехнологичной платформе. Обучение занимает 252 часа, в конце вы получите диплом с международным приложением и сертификатом.
• Дизайн интерфейсов от «Профессионального стандарта» — дистанционный 3-месячный курс, составляющий 520 часов. Обучение соответствует ФГОС, вас будет вести индивидуальный куратор. Учебный материал изложен предельно простым языком, доступным для новичков.
• UI/UX-дизайнер 2.0 от Игоря Джазова — 3-месячный онлайн-курс с видеоуроками, проверяемой практикой, консультациями. Вы сделаете 3 проекта для портфолио, получите диплом, получите помощь в составлении резюме, станете уверенным junior-специалистом.
• Дизайн интерфейсов в программе Adobe XD от «Специалиста» — открытая программа по изучению новой перспективной программы для веб-разработчиков. Длительность курса — 16 академических часов + 8 часов самостоятельной работы.

Еще 10 курсов по инструментам UI/UX-дизайна

Программных инструментов для цифрового дизайна множество, необязательно знать их все, достаточно освоить несколько и совершенствоваться в них. Самый распространенный и универсальный инструмент Figma, а другие программы расширяют ее функциональность, позволяют ускорить и оптимизировать работу. Например, Adobe Illustrator удобен для создания иконок, символов. Без специальных программ UI/UX-дизайнеру не обойтись, они база для его работы, как холст и краски для художника, а я предлагаю несколько хороших курсов для знакомства с ними:

• Основы Figma: с нуля до первого макета от Bang Bang Education — онлайн-курс, позволяющий приступить к обучению в любой момент. Вы научитесь создавать макеты в популярном графическом редакторе, получите практические навыки для уверенного старта в профессии.
• Курс Adobe Illustrator CC для начинающих от Pentaschool — 2-месячная учебная программа по освоению графического редактора на базовом уровне. Вы научитесь создавать иконки, визитки, иллюстрации. В конце получите удостоверение о повышении квалификации.
• Figma: базовый курс от Bang Bang Education — 12-месячный курс, начинающийся по завершению набора потока. Вы узнаете главное о графическом редакторе, его настройках под конкретные задачи, методах работы.
• Курс Adobe Illustrator. Продвинутый уровень от Profileschool — 8 видеозаписей, 7 онлайн-занятий, 16 самостоятельных заданий. Вы создадите продвинутое портфолио, научитесь создавать графику любой сложности.
• Figma от Contented — программа в формате видеолекций и практики по освоению графического редактора с нуля. Вы получаете 2 проекта в портфолио, учебные материалы доступны навсегда.
• Уроки Figma с нуля от itProger — курс, который научит вас создавать UI/UX-дизайн для веб-проектов и мобильных приложений, обеспечит уверенные навыки работы в графическом редакторе. Программа состоит из 8 уроков.
• Курс Illustrator от Contented — освоение главного инструмента векторной графики. Программа представлена видеоуроками и практикой. Вы создаете 5 работ для портфолио, получаете учебный материал в пользование навсегда.
• Онлайн-курс по работе с Adobe Illustrator от HEDU (irs.academy) — детальный и объемный курс из 30 уроков. Занятия проходят в формате вебинаров, также предусмотрены самостоятельные задания, а в конце вы защищаете собственный проект.
• Adobe Photoshop с нуля от Contented — месячный курс по освоению популярного и универсального графического редактора. Занятия проходят в формате видеолекций и практики. Вы получаете 4 проекта в портфолио и доступ к учебным материалам навсегда.
• Онлайн-курс по Adobe Illustrator от Onskills — объемный курс, состоящий из видеоуроков, практических занятий, консультаций, защиты диплома. Вы научитесь создавать иллюстрации, макеты, символы айдентики, в конце получите сертификат.

Бесплатные курсы по UI/UX-дизайну

Бесплатные занятия по UI/UX-дизайну могут стать отличным стартом в профессии. Они дадут общее представление об этой специальности, и вы сможете решить, продолжать ли обучение. Предлагаю 15 курсов UI/UX-дизайна в свободном доступе, которые также заслуживают внимания.

1. Как стать UX/UI-дизайнером: создаем свой первый сайт — Нетология

Вы узнаете основы UX/UI-дизайна, выполните практическую работу — создадите лендинг. Курс подойдет для новичков, графических дизайнеров из смежных областей, продакт-менеджеров. Учебная программа состоит из 2 блоков: основы UX-дизайна и основы UI-дизайна.

Главное о курсе:

• старт обучения в любое время;
• формат видеолекций;
• обучаться можно с нуля.

2. Уроки по UX/UI дизайну — UPROCK School

Видеолекции от дизайн-директора UPROCK. Каждый урок — детально разбираемое практическое занятие.

Главное о курсе:

• 60 видеолекций;
• длительность записей от 2 минут до 1,5 часа;
• широкий тематический охват.

3. Обучение основам работы в Figma с нуля — Нетология

Это практический курс по освоению базовых инструментов графического редактора. А для закрепления полученных знаний предусмотрены практические занятия.

Главное о курсе:

• 2 практических задания в портфолио;
• старт занятий в любое время;
• можно обучаться с нуля;
• 3 видеолекции;
• сертификат.

4. UX/UI-дизайн: Старт — UPROCK School

Короткие, но емкие видеолекции. Оптимальны для введения в профессию, чтобы понять ее специфику.

Главное о курсе:

• 9 видеоуроков;
• длительность 3–7 минут.

5. UX/UI-дизайн и аналитика — Stepik

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

Главное о курсе:

• 10 уроков;
• 14 тестов;
• 3 интерактивные задачи.

6. Учебник по UX/UI-дизайну — UPROCK School

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

Главное о курсе:

• текстовый формат материала;
• большая библиотека полезных статей для начинающих.

7. Народный и практичный курс по Figma — Stepik

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

Главное о курсе:

• формат видеолекций + самостоятельные задания;
• программа сформирована по принципу прогрессивного усложнения;
• 19 уроков.

8. UX/UI Design — ITVDN

Это вводная бесплатная лекция к основному курсу от ITVDN. Вы получите базовые представления о цифровом дизайне, узнаете о функциях и обязанностях дизайнера, о разнице между UX и UI.

Главное о курсе:

• лекция в формате видео с примерами;
• длительность почти 9 минут.

9. UX/UI дизайнер — Тони Емельянов

Продуктовый дизайнер на своем канале рассказывает о UI, UX, мобильном дизайне, анимации, 3D-дизайне и многих других вещах, которые будут полезны начинающим. Раз в неделю блогер разбирает в прямом эфире работы учащихся курса, а сами уроки публикует 1–2 раза в неделю.

Главное о курсе:

• на курсе проходят программы Figma, After Effects, Cinema 3D;
• разная длительность видео, в основном 1,5–3 часа.

10. Основы UI/UX дизайна — ITVDN

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

Главное о курсе:

• 2 видеолекции;
• длительность 16 минут и 30 минут.

11. Как стать UI/UX дизайнером за 10 шагов с нуля — Алексей Поляков

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

Главное о курсе:

• емкое видео с качественным контентом;
• длительность 13 минут.

12. Дизайн и верстка мобильной версии сайта в Tilda — Игорь Джазов

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

Главное о курсе:

• бесплатная лекция в формате видео для обучения с нуля;
• длительность 30 минут.

13. Бесплатный курс по UI/UX-дизайну — Юзкейс

Специалист Виталий Яковлев дает уроки цифрового дизайна. Вы узнаете о программе Figma и ее аналоге, освоите принципы и правила дизайна, поймете, как успешно войти в профессию и стать высокооплачиваемым специалистом.

Главное о курсе:

• 12 видеороликов;
• длительность от 2 минут до 2,5 часа.

14. UI-дизайнер: практические навыки дизайнера интерфейсов — Содействие занятости

Этот курс — проект Министерства труда и соцзащиты, направленный на поддержку в старте карьеры. Обучение в режиме онлайн ведется по всей стране на базе ВУЗов. Вы должны оставить заявку на портале «Работа России», загрузить документы, получить согласие работодателя, пройти профориентацию в Центре занятости населения, подписать договоры с образовательным центром и работодателем.

Главное о курсе:

• 144 часа занятий;
• обучение 2 месяца;
• 8 тематических блоков.

15. Курсы по UX/UI Design — DesignLab

Курсы ведет блогер Александр Гайдай. Видеолекции записаны без монтажа, чтобы зрители чувствовали себя словно на настоящем занятии. Специалист знакомит с этапами разработки проектов, делится секретами работы и интернет-ресурсами.

Главное о курсе:

• видеозаписи создания интерфейсов;
• 23 видео разной длительности.

Заключение

За последние пять лет значительно выросла популярность UX/UI-дизайна. Это направление стало одним из самых востребованных в IT-сфере, при том, что навыки программирования для работы в большинстве случаев не требуются. Однако специалисту без опыта рассчитывать на высокую зарплату не стоит. Например, доход стажера в Москве составляет всего 15 000 рублей. Больше шансов получить высокооплачиваемое место, если подготовить портфолио. Поэтому на курсах UI/UX-дизайна ставится акцент на практических занятиях, основанных на реальных проектах, которые можно продемонстрировать будущему работодателю. Набравшись опыта в течение 3–6 лет, на должности middle-специалиста вы будете зарабатывать 150 000 рублей в месяц.

Подборки по схожим темам:

1. Лучшие курсы по созданию сайтов
2. Лучшие курсы веб-разработчика
3. Лучшие курсы HTML и CSS

Если вы уже обучались на одном из перечисленных курсов, поделитесь своими впечатлениями в комментариях. Возможно, вы знаете и другие достойные программы обучения. Буду благодарна, если вы также расскажете о них.

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

№1. Минимализм Бриттани Чан

Ее портфолио brittanychiang.com пример того, как простое, но эффектное решение может выглядеть круто. Удобная навигация, строгие цвета и структурированные кейсы захватывают внимание.

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

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

№2. Типографика Патрика Дэвида

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

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

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

№3. Креатив Джека МакДэйда

Яркий и необычный дизайн jackmcdade.com показывает, что если вы хотите что-то нескучное — делайте. Джек говорит, что ему надоели скучные сайты — поэтому свой он сделал таким ярким и креативным.

Но для креативного дизайна нужны навыки. Чтобы сделать что-то необычное:

• Обучитесь основам дизайна. Даже базовые знания о композиции, типографике и цветах помогут вам создавать более профессиональные сайты.
• Сотрудничайте с дизайнером. Если вы не уверены в своих силах или хотите чего-то по-настоящему уникального, работа с талантливым дизайнером может стать лучшим решением. Это инвестиция в то, как вы себя представляете миру.

Идея, которую можно забрать для своего портфолио: добавьте элемент неожиданности или индивидуальности. Например, расскажите историю о себе нестандартным способом. Вместо привычного «‎Обо мне» добавьте интерактивную таймлайн-анимацию, которая ведет пользователя через вашу карьеру.

№4. Образовательный контент Джоша Комо

Джош использует joshwcomeau.com не только как портфолио, но и как платформу для обучения. Он показывает свои навыки через полезные статьи и проекты. Уникальный стиль и внимание к деталям превращают его сайт в магнит для разработчиков и потенциальных клиентов.

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

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

№5. Интерактив Юрия де Паула

Сайт iuri.is с множеством двигающихся элементов.

Одна из фишек — отсылка к игре Марио. Листая портфолио, встречается небольшая игра, где можно прыгнуть и выбить монетку.

Такая игровая механика не только показывает навыки разработки и креативности, но и придает портфолио индивидуальность.

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

Что можно добавить:

• Микроигры. Это может быть простая викторина или забавная анимация. И, конечно, делайте игру визуально привлекательной.
• Интерактивные элементы, на которые пользователи могут влиять: кнопки, анимации, изменения цвета и текста.

№6. Еще интерактивы Адама Хетвига

На сайте www.adamhartwig.co.uk много интерактивных элементов. Меню сверху помогает переходить на нужные страницы. Дизайн минимальный, фокус на цвете и как будто нарисованных от руки простых элементах. Сайт показывает, как можно создавать интерактивный опыт, не перегружая дизайн.

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

№7. Игра Бруно Симона

Если в портфолио №5 игра была лишь маленькой частью, то в случае с Бруно все гораздо масштабнее. Разработчик ведет клиента сначала на сайт с игрой — можно управлять машиной с помощью стрелок на клавиатуре, чтобы немного поразвлекаться. А еще есть звуковое сопровождение.

Играя, можно попасть на площадки с соцсетями и кейсами разработчика.

Тем временем в правой нижней части экрана висит приглашение на обучение — получилось очень нативное приглашение, которое не расценивается как рекламное.

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

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

Стоит ли делать такой масштабный формат? Если вы фронтендер и ищете работу, делать огромную игру может показаться слишком сложным. Но если вы верите в свои силы и готовы к этому, это может быть классным способом показать, на что вы способны. Если у вас немного времени, не обязательно делать большую игру. Можете создать небольшую версию или просто интерактивный проект, который все равно покажет ваши навыки.

Хорошее портфолио — это не просто набор проектов, а история получения навыков и подхода к разработке. Убедитесь, что сайт:

• Визуально чистый и удобный.
• Показывает лучшие работы.
• Имеет фишки, которые выделяют среди конкурентов.

Берите лучшие идеи из примеров выше, добавляйте свою изюминку и получайте заслуженные офферы.

Вместе со специалистами онлайн-агрегатора Kursfinder я проанализировала более 60 предложений по обучению, чтобы отобрать 37 лучших программ, включая бесплатные и дополнительные уроки. Еще больше курсов по веб-дизайну вы сможете найти в нашем каталоге.

ТОП-10 лучших курсов по веб-дизайну в 2026 году

1. Веб-дизайнер с нуля от Sky Pro — продвинутый курс с возможностью трудоустройства в процессе обучения.
2. Профессия Веб-дизайнер от Skillbox — программа обучения с большим количеством практики и проектных работ.
3. UX/UI дизайнер Plus от Bang Bang Education — курс с гарантированной стажировкой в Т-Банке, Авито и Redis Agency.
4. UX/UI дизайн от Нетологии — экспертная программа с двумя траекториями обучения.
5. UX/UI: проектирование пользовательского интерфейса от Bang Bang Education — экспресс-курс для быстрого погружения в UX/UI-дизайн для новичков и практиков.
6. Профессия Веб-дизайнер от Нетологии — расширенная программа для новичков и практиков в веб-дизайне.
7. Веб-дизайнер от Яндекс Практикум — практико-ориентированный курс с персональной поддержкой карьерных консультантов.
8. Веб-дизайнер от АНО «НИИДПО» — программа профессиональной переподготовки с оплачиваемой стажировкой.
9. Профессия Веб-дизайнер от Eduson Academy — ускоренный курс для быстрого старта в профессии.
10. Профессия Веб-дизайнер от GeekBrains — экспертная программа с большим количеством проектных работ.

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

Онлайн-курсы по веб-дизайну

1. Веб-дизайнер с нуля | Sky Pro

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

К концу курса, помимо диплома и портфолио, вы сможете рассчитывать на профессиональную поддержку в трудоустройстве от Центра Карьеры. Вам будет доступно неограниченное количество консультаций с HR-специалистами до того момента, пока вы не устроитесь на работу. Онлайн-школа гарантирует трудоустройство своих студентов в течение 6 месяцев после выпуска.

• Стоимость: от 8 944 рублей в месяц
• Длительность: от 4 месяцев
• Формат обучения: теоретические материалы, практика на реальных кейсах, проектные работы, индивидуальные консультации от экспертов
• Сертификат: есть

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

Преимущества:

• большое количество практических заданий в разных форматах;
• пожизненный доступ к теоретическим материалам, практикумам, учебным обновлениям и нетворкинг-чату;
• два тарифа для разных целей обучения - стандартный и индивидуальный;
• индивидуальные консультации от преподавателей по проектной работе;
• изучение продвинутых инструментов веб-разработки - Figma, Tilda, CSS, HTML и других;
• помощь в поиске работы или оплачиваемой стажировки;
• возможность трудоустройства на вакансии от компаний-партнеров в процессе обучения.

Недостатки:

• доступно только групповое обучение (размер группы зависит от тарифного плана).

Программа обучения:

• Введение в современный веб-дизайн
• Проектирование статичного баннера с помощью Figma
• Знакомство с инструментами Adobe Photoshop
• Разработка макета дизайна для пользовательского сайта
• Создание простого и сложного лендинга на Tilda
• Изучение HTML и CSS в веб-разработке
• Принципы позиционирования и развития брендинга в сети

Ознакомиться с полной программой >>>

2. Профессия Веб-дизайнер | Skillbox

Один из лучших курсов по веб-дизайну от известной онлайн-школы предлагает большое количество практикумов и возможность выбора интересующего направления профессионального развития. Вас ждет более 15 проектов на основе реальных кейсов от заказчиков и общение с опытными экспертами. Вы научитесь проектировать макеты в Figma, оформлять сайты в Tilda, создавать рекламные постеры в Photoshop и добавлять анимации в графику с помощью Adobe After Effects. Содержание курса и изучаемые темы можно настроить под свои цели - вы можете изменить уровень сложности и решать только те бизнес-задачи, которые вас интересуют.

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

• Стоимость: 10 382 рублей в месяц
• Длительность: 12 месяцев
• Формат обучения: теория в видеокурсах, обратная связь от экспертов, практические задания, проектные работы
• Сертификат: есть

Кому подойдет: новичкам в веб-разработке; практикующим IT-специалистам из разных сфер; людям, которые хотят реализовать свой творческий потенциал в перспективном направлении.

Преимущества:

• более 15 проектов для портфолио;
• гарантия трудоустройства или возврата денежных средств;
• большое количество практики на заданиях, приближенных к реальной работе веб-дизайнера;
• подробная обратная связь по практическим заданиям от кураторов;
• интерактивный тренажер для работы с Figma;
• неограниченный доступ к контенту, в том числе после завершения курса;
• дополнительные учебные блоки в подарок.

Недостатки:

• долгие ответы от преподавателей по домашним заданиям.

Программа обучения:

• Figma с нуля до профессионального уровня
• Дизайн макетов веб-сайтов в Tilda
• UX-дизайн с нуля до уверенного владения
• Возможности и инструменты Adobe Photoshop
• Курсы на выбор: проектная работа в Readymag, знакомство с After Effects Adobe Illustrator с нуля, 3D-дизайн в Blender
• Бонусные курсы без практики
• Дополнительные учебные блоки

Ознакомиться с полной программой >>>

3. UX/UI дизайнер Plus | Bang Bang Education

Курс обучения веб-дизайну онлайн нацелен на подготовку компетентных UX/UI-дизайнеров, которые умеют проектировать удобные интерфейсы для сайтов и мобильных приложений. Вы познакомитесь со спецификой трех популярных типов дизайна - визуального, интерактивного и продуктового, научитесь проводить UX-исследования и разрабатывать уникальные цифровые продукты для пользователей. В процессе обучения у вас будет возможность пройти оплачиваемую стажировку в крупных компаниях: Т-Банк, Авито и Redis Agency. Вы попрактикуетесь в решении реальных задач и будете работать над созданием интерактивных проектов и продвинутых сервисов.

Во всех тарифных планах доступен бонусный курс лекций по трудоустройству. Вы получите подробные чек-листы по составлению резюме и подготовке портфолио, а также сможете посетить онлайн-вебинары и воркшопы с карьерными консультантами и опытными UX/UI-дизайнерами.

• Стоимость: от 359 000 рублей за курс (или от 11 967 рублей в месяц)
• Длительность: 14 месяцев
• Формат обучения: видеоуроки, практика на интерактивных заданиях, проектные работы, обратная связь от преподавателей
• Сертификат: есть

Кому подойдет: людям, которые хотят научиться веб-дизайну с нуля; начинающим и продвинутым IT-специалистам, которые хотят развиваться в новом направлении.

Преимущества:

• 12 уникальных проектов для портфолио;
• большое количество практики и оплачиваемая стажировка в процессе обучения;
• подробная и быстрая обратная связь от наставников по домашним заданиям и проектным работам;
• несколько тарифных планов под разные цели подготовки - базовый, оптимальный и индивидуальный;
• интерактивный тренажер Figma и учебная подписка на сервис;
• воркшопы, индивидуальные консультации с карьерными специалистами и прочие бонусы в расширенных тарифах.

Недостатки:

• высокая стоимость обучения, особенно при полной оплате курса;
• ограниченные возможности базового тарифного плана.

Программа обучения:

• Основы UI-дизайна, визуализация веб-проектов
• Интерактивный дизайн и создание многофункционального веб-сервиса
• Проведение UX-исследований
• Дизайн интерфейсов для мобильных приложений
• Создание цифрового продукта
• Принципы эффективного продуктового дизайна

Ознакомиться с полной программой >>>

4. UX/UI дизайн | Нетология

Объемный курс по веб-дизайну для начинающих дизайнеров поможет вам освоить актуальную профессию для работы в прогрессирующих компаниях или на фрилансе. На выбор доступно две траектории обучения: базовая - для уверенного старта, и расширенная - для усиленной практики на проектах от реальных заказчиков. Вы освоите от 6 до 9 инструментов продвинутого веб-дизайнера, включая Figma, Adobe Photoshop, Adobe Illustrator, Holst и другие. Научитесь создавать удобные и многофункциональные интерфейсы для сайтов и мобильных приложений.

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

• Стоимость: от 238 772 рублей за курс (или от 6 632 рублей в месяц)
• Длительность: от 9 до 14 месяцев
• Формат обучения: теоретические материалы, вебинары с экспертами, домашние задания, проектные работы
• Сертификат: есть

Кому подойдет: новичкам в веб-разработке; IT-специалистам, которые хотят освоить новое направление и сменить профиль деятельности.

Преимущества:

• две траектории обучения на выбор - базовая и расширенная;
• более 200 часов практики с обратной связью от экспертов;
• учебные проекты и реальные кейсы от МТС, Okko и ВкусВилла для портфолио;
• школа практики и дистанционная стажировка после завершения базового курса;
• изучение актуальных инструментов веб-разработки - от Adobe Photoshop до Figma;
• помощь с поиском работы и доступ к вакансиям от партнеров образовательной платформы;
• дополнительные модули по нейронным сетям, английскому языку и работе на фрилансе в подарок.

Недостатки:

• высокая стоимость всех тарифных планов.

Программа обучения:

• Введение в Adobe Photoshop и Adobe Illustrator
• Знакомство с Figma: опции сервиса и создание первых дизайн-макетов
• Ключевые принципы UX и UI-дизайна
• Основы эффективного UX-копирайтинга
• Работа над командными проектами
• Создание многофункциональных сайтов на Tilda
• 3D-графика для пользовательских интерфейсов в Cinema 4D
• Анимация интерфейсов с помощью After Effects
• Карьерное развитие веб-дизайнера

Ознакомиться с полной программой >>>

5. UX/UI: проектирование пользовательского интерфейса | Bang Bang Education

Ускоренный курс для тех, кто хочет быстро разобраться в продуктовом дизайне. За 3,5 месяца интенсивного обучения вы пройдете путь работы UX/UI-дизайнера - от анализа технического задания до презентации модели интерфейса мобильного приложения. Вас ждет насыщенная программа и разнообразный формат занятий: онлайн-воркшопы с экспертами, теоретические и практические вебинары, кейсы и индивидуальные консультации. Вы будете работать над совместными проектами в небольших группах - это поможет вам развить важные soft-skills.

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

• Стоимость: 69 000 рублей за курс (или 6 900 рублей в месяц)
• Длительность: 15 недель
• Формат обучения: интерактивные воркшопы со спикерами, теоретические и практические вебинары, записи лекций, проектная работа
• Сертификат: есть

Кому подойдет: графическим дизайнерам; UX/UI-дизайнерам Junior или Middle уровня; людям, которые хотят сменить профессию и погрузиться в веб-разработку с нуля.

Преимущества:

• насыщенное обучение - вебинары, воркшопы, записи лекций, консультации с экспертами;
• взаимодействие с преподавателями на всех этапах обучения и быстрая обратная связь;
• бесплатная консультация по содержанию курса и прочим вопросам обучения;
• подписка на Figma на весь период обучения;
• спикеры программы - ведущие специалисты из дизайн-индустрии.

Недостатки:

• нет помощи в поиске работы и гарантий трудоустройства.

Программа обучения:

• Постановка задачи в веб-разработке
• Подготовка к проведению исследования
• Разработка идеи дизайна
• Функциональное и цифровое проектирование
• Работа с текстовым контентом
• Сетка и композиция
• Формы и таблицы
• Защита дипломной работы

Ознакомиться с полной программой >>>

6. Профессия Веб-дизайнер | Нетология

Курс с двумя траекториями обучения для новичков и практикующих специалистов. В рамках базового тарифа вы освоите особенности создания дизайн-макетов в Figma и получите базовые навыки веб-разработчика для быстрого старта в профессии. Расширенный курс позволит вам углубиться в продвинутые инструменты, которые используются в проектировании сложных интерфейсов для сайтов и мобильных приложений, и выйти на новый уровень дохода. В зависимости от выбранной траектории обучения, вам предстоит выполнить от 5 до 11 проектов для портфолио на основе реальных ТЗ от компаний - создание лендинга, сайта на Tilda, анимаций и другие.

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

• Стоимость: от 146 140 за курс (или от 3 653 рублей в месяц)
• Длительность: от 6 до 12 месяцев
• Формат обучения: теоретические материалы, практические задания с проверкой и обратной связью, проектные работы и кейсы от Lamoda, МТС и ВсеИнструменты
• Сертификат: есть

Кому подойдет: новичкам в веб-дизайне; опытным IT-специалистам, которые хотят усовершенствовать свои навыки и научиться создавать сложные веб-проекты.

Преимущества:

• от 5 до 11 индивидуальных проектов для портфолио;
• реальные кейсы от партнеров программы - МТС, Lamoda и ВсеИнструменты.ру;
• изучение широкого набора продвинутых инструментов - Adobe Photoshop, Adobe Illustrator, Figma, After Effects и Cinema 4D;
• базовая и расширенная траектории обучения на выбор;
• помощь с поиском работы или оплачиваемой стажировки;
• бонусные модули по английскому языку и нейронным сетям в веб-разработке.

Недостатки:

• ограниченные возможности базовой траектории обучения.

Программа обучения:

• Основы и опции языка Swift, типы данных, константы и переменные;
• Работа с множествами, кортежами и массивами;
• Операторы в Swift;
• Ключевые циклы в Swift;
• Функции, классы, замыкания, методы и структуры в Swift;
• Практика создания и редактирования программных кодов;
• Работа над индивидуальными проектами.

Ознакомиться с полной программой >>>

7. Веб-дизайнер | Яндекс Практикум

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

• Стоимость: от 129 000 рублей за курс (или от 15 500 рублей в месяц)
• Длительность: 9 месяцев
• Формат обучения: теоретические материалы в интерактивном учебнике, онлайн-воркшопы с преподавателями-практиками, задания для самостоятельной работы с проверкой
• Сертификат: есть

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

Преимущества:

• изучение Figma, Tilda, Adobe Photoshop и других инструментов для разработки веб-дизайна;
• 6 проектов для портфолио и проектная работа по индивидуальной идее в расширенном тарифе;
• помощь с трудоустройством и поиском заказов на фрилансе в течение 7 месяцев после выпуска;
• работа над заданиями от реальных заказчиков;
• дополнительные модули по нейронным сетям и инновациям в работе веб-дизайнера в подарок.

Недостатки:

• высокие ежемесячные платежи при оплате курса частями.

Программа обучения:

• Знакомство с профессией веб-дизайнера
• Работа с целевой аудиторией и принципы визуальной коммуникации
• Сетки и композиция
• Работа с текстовым контентом и основы композиции
• Работа с изображениями и цветокоррекцией
• Введение в UX-дизайн
• Сетки, лендинги и вайрфреймы
• Типографика и растровая графика
• Создание адаптивного дизайна
• Добавление анимации в веб-проект
• Нейронные сети для быстрой генерации графических объектов

Ознакомиться с полной программой >>>

8. Веб-дизайнер | АНО «НИИДПО»

Программа профессиональной переподготовки, с помощью которой вы освоите IT-специальность веб-дизайнера, научитесь создавать качественный дизайн для сайтов и приложений и сможете начать карьеру в прогрессирующей сфере. Опытные UX/UI-дизайнеры расскажут вам, как с помощью сайта и веб-приложения можно повысить узнаваемость бренда, и разберут основные инструменты продвинутого веб-разработчика: Tilda, Figma, Adobe Photoshop, Adobe After Effects и другие.

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

• Стоимость: 145 200 рублей за курс (или от 4 525 рублей в месяц)
• Длительность: 9 месяцев
• Формат обучения: видеолекции, текстовые материалы, онлайн-воркшопы с экспертами, тестирования, практические задания
• Сертификат: есть

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

Преимущества:

• групповые онлайн-занятия с “живым” общением с преподавателями;
• гарантия трудоустройства или получения первых заказов на фрилансе;
• сопровождение от личного наставника на всех этапах обучения;
• интересные практические задания с индивидуальной проверкой и обратной связью от экспертов;
• неограниченный доступ к учебным материалам после успешного окончания курса;
• специальные модули для развития soft-skills: навыков коммуникации, самоорганизации и работы с с заказчиками.

Недостатки:

• программа предусматривает интенсивное обучение, которое может показаться сложным для новичков.

Программа обучения:

• Знакомство с профессией веб-дизайнера
• Разработка лендинга в Figma ;
• UX-дизайн лендинга
• Принципы создания продающего дизайна веб-сайта
• Adobe Photoshop в работе веб-дизайнера
• Создание многофункционального интернет-магазина с нуля
• Проведение UX-исследований и аналитика проектов
• Добавление анимации с помощью Adobe After Effects
• Развитие личного бренда практикующего дизайнера
• Создание 3D-графики в Cinema 4D

Ознакомиться с полной программой >>>

9. Профессия Веб-дизайнер | Eduson Academy

Экспертный курс с усиленной практикой поможет вам освоить навыки продвинутого веб-дизайнера за 4 месяца и начать работать удаленно - в IT-компании, digital-агентстве или на фрилансе. В процессе прохождения программы вам предстоит решить большое количество профильных задач и поработать над 8 крупными проектами, которые можно будет добавить в портфолио. Вы научитесь анализировать аудиторию цифрового продукта, работать с композицией и типографикой, а также создавать качественный дизайн с помощью Adobe Photoshop, Adobe Illustrator, Tilda, Figma и других инструментов.

После того как вы завершите обучение на курсе, вы сможете пройти реальную стажировку у партнеров образовательной площадки - UP MARKET, SERTIVIT или KRASOTKAPRO. Это отличная возможность для того, чтобы пополнить портфолио дополнительными проектами, завести полезные знакомства и получить предложение на дальнейшее трудоустройство.

• Стоимость: 19 958 рублей в месяц
• Длительность: 4 месяца
• Формат обучения: видеолекции, практические задания, проектные работы
• Сертификат: есть

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

Преимущества:

• возможность прохождения реальной стажировки после завершения курса;
• 8 проектных работ для портфолио под руководством экспертов;
• полный набор продвинутых инструментов - Adobe Photoshop, Adobe Illustrator и других;
• год персональной поддержки куратора по вопросам обучения и работы с инструментами веб-дизайнера;
• 13 масштабных заданий для отработки навыков;
• неограниченный доступ к теоретическим и практическим материалам, в том числе к будущим обновлениям.

Недостатки:

• высокая стоимость рассрочки.

Программа обучения:

• Введение в сферу современного веб-дизайна
• Предварительной анализ целевой аудитории и потенциальных конкурентов
• Знакомство с графическими редакторами
• Работа с типографикой и модельными сетками
• Цветокоррекция и инструменты UI-дизайна
• Структуризация веб-сайта и настройка пользовательского интерфейса
• Проектирование сайтов с помощью Tilda
• Карьерное развитие веб-дизайнера и поиск первых заказов на фрилансе

Ознакомиться с полной программой >>>

10. Профессия Веб-дизайнер | GeekBrains

Расширенный курс по веб-дизайну для тех, кто хочет научиться создавать интересные и запоминающиеся сайты и мечтает работать на удаленке. Вы получите все навыки, необходимые для работы веб-дизайнером на junior-позиции: разработка лендингов и многостраничных сайтов, создание дизайн-макетов для мобильных приложений, добавление анимаций в интерфейсы и другие.

В процессе решения практических заданий освоите профильные программы и сервисы - от Tilda и Figma до Readymag и Adobe After Effects. К концу обучения в вашем портфолио будет более 15 уникальных проектов, среди которых: постер для фильма, дизайн социальной сети, лендинг для мероприятия и так далее. Карьерные консультанты расскажут вам, как правильно оформить резюме, помогут подготовиться к собеседованиям, а также предоставят доступ к закрытым каналам с вакансиями от партнеров образовательной площадки.

• Стоимость: от 7 187 рублей в месяц
• Длительность: от 12 месяцев
• Формат обучения: теория в видеоуроках, онлайн-воркшопы с экспертами по расписанию, реальные задачи от заказчиков, интерактивные тренажеры, обратная связь от преподавателей
• Сертификат: есть

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

Преимущества:

• усиленная практика на реальных заданиях от компаний-заказчиков;
• неограниченный доступ к видеоурокам с теорией;
• онлайн-занятия с экспертами по расписанию;
• более 15 проектов для портфолио;
• три тарифных плана для разных целей подготовки - от базового до расширенного индивидуального;
• гарантия трудоустройства;
• карьерные консультации с HR-специалистами по вопросам поиска работы;
• дополнительные курсы по использованию Blender и Readymag в веб-разработке.

Недостатки:

• консультации с куратором-эксперты доступны только в индивидуальных тарифах.

Программа обучения:

• Изучение опций и инструментов Figma
• Введение в современный веб-дизайн
• Основы продвинутого UX-дизайна
• Применение Photoshop в разработке веб-сайтов
• Проектирование и публикация сайта с помощью Tilda
• Знакомство с возможностями Blender и Readymag

Ознакомиться с полной программой >>>

Еще 17 дополнительных курсов по веб-дизайну

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

• UX/UI дизайнер от Bang Bang Education. Практико-ориентированная программа обучения нацелена на подготовку продвинутых дизайнеров, которые умеют создавать удобные интерфейсы для любых целей бизнеса. Вы узнаете, что представляет собой визуальный и интерактивный дизайн, научитесь проводить UX-исследования, создавать интерфейсы для мобильных устройств и разрабатывать цифровые продукты. Для отработки профессиональных навыков вам будет предоставлена практика на задачах от реальных заказчиков.
• Профессия UX/UI-дизайнер от Skillbox.ru. Объемная программа обучения по основам современного UX/UI-дизайна. Курс предусматривает не только знакомство с азами популярной профессии, но и практику работы с продвинутыми инструментами. Вы узнаете, как создать качественный и привлекательный дизайн с помощью Figma, Adobe Photoshop и Adobe After Effects. К концу обучения у вас будет портфолио из 8 проектов, а также структурированный трек по трудоустройству.
• Профессия:UX/UI-дизайнер от ProductStar. Вводный курс для начинающих дизайнеров, который поможет разобраться в специфике написания кодов на Java, а также научит вас создавать многофункциональные веб-приложения и работать с MySQL и Git. Программа использует практический подход и нацелена на трудоустройство студентов в процессе обучения. Вам предстоит выполнить несколько бизнес-кейсов, создать индивидуальный проект и защитить его перед комиссией профессиональных UX/UI-дизайнеров.
• Профессия Веб-дизайнер (UX/UI) от Бруноям. Базовый курс, с помощью которого вы сможете погрузиться в веб-дизайн и освоить интересную профессию с нуля за 5 месяцев. По инструкциям экспертов вы научитесь создавать удобные сайты и приложения разной специализации - от одностраничных проектов до полноценных лендингов. К концу обучения соберете портфолио из двух масштабных работ - сайта сервиса подписки на автомобиль и главной страницы образовательной площадки.
• Профессия: Веб-дизайнер от Interra. Экспресс-курс для тех, кто хочет сменить сферу деятельности, получить творческую специальность и начать зарабатывать удаленно. В процессе обучения вы научитесь работать с продвинутыми инструментами веб-дизайнера - Figma, Adobe Illustrator, Adobe Photoshop, Adobe After Effects и Tilda. После завершения основной программы вам будет предоставлен доступ к курсу с руководствами по трудоустройству и полезными рекомендациями от HR-специалистов.
• Веб-дизайнер с нуля до профи от Международной Школы Профессий. Практический курс, на котором вы научитесь проектировать адаптивный дизайн сайта и структурные элементы пользовательского интерфейса. Вы освоите языки HTML и CSS, а также узнаете, какие задачи в работе веб-дизайнера можно решить с помощью Adobe Photoshop, Adobe Illustrator и Adobe After Effects. За весь период обучения вы выполните 2 редизайна существующих сайтов, разработаете фирменный стиль для собственного проекта и смоделируете пользовательский интерфейс для мобильного приложения. Все эти работы пойдут в портфолио, которое вы сможете показать потенциальным работодателям.
• Профессия Веб-дизайнер от Contented.ru. Образовательная программа позволит вам научиться создавать сайты с уникальным дизайном и продуманным UX с нуля. Содержание курса построено таким образом, чтобы вы постепенно погружались в специфику профессии. В каждом занятии есть практические задания для тренировки навыков разработки запоминающегося и структурированного UX-дизайна. В процессе обучения вам также предстоит создать 6 проектных работ - по редизайну и индивидуальному дизайну сайтов.
• Веб-дизайнер от Логомашины. Экспертный курс, с помощью которого вы сможете углубленно разобраться в современном дизайне и начать зарабатывать уже спустя 4 месяца после начала обучения. Вас ждет большое количество практики, а также 9 проектов для портфолио. Вы научитесь работать с Figma, Tilda, Adobe Photoshop и Miro, а также получите комплексную поддержку в трудоустройстве: составите портфолио, подготовитесь к собеседованиям и проанализируете вакансии от компаний-партнеров вместе с HR-специалистами.
• Профессия Веб-дизайнер от PentaSchool. Программа в формате “2 в 1”, на которой вы познакомитесь с профессией веб-дизайнера, а также узнаете, как использовать нейронные сети в работе над проектами. Курс нацелен на усиленную практику - вы создадите более 8 проектных работ для портфолио, а также сможете попасть на стажировку к партнерам образовательной платформы. На каждом этапе вас будет сопровождать команда специалистов, которые помогут решить возникающие трудности и определить трек будущего карьерного развития.
• Профессия дизайнера с карьерной поддержкой и грантом от Yudaev School. Курс с карьерной поддержкой и грантом поможет вам получить востребованную профессию дизайнера за 9 месяцев обучения. Вы научитесь с нуля проектировать пользовательские интерфейсы для сайтов и мобильных приложений. Узнаете, как дизайн помогает бизнесу привлечь новых клиентов и увеличить продажи. Попрактикуетесь в работе над кейсами от реальных заказчиков и сможете добавить их в портфолио.
• Веб-дизайнер от MDA. Практико-ориентированная программа обучения, основанная на проверенной методологии от профессиональных менторов. Вас ждет большое количество заданий для самостоятельной работы, живые воркшопы с экспертами, а также уникальная школа стажеров, в которой вы сможете получить реальный опыт работы с заказчиками. Уже спустя 2-3 месяца обучения будете уверенно владеть профессиональными инструментами веб-дизайнера - Figma, Adobe Photoshop, Tilda и другими, и сможете брать первые заказы на фрилансе.
• Профессия Веб-дизайнер от О'Смысле. Экспресс-курс для новичков и junior-дизайнеров, спикеры которого расскажут об основных инструментах, используемых в разработке удобных и функциональных интерфейсов. Вы обучитесь созданию дизайна в Adobe Photoshop и Figma, верстке сайтов в конструкторе Tilda, добавлению анимаций и SEO-оптимизации проектов, а также поймете, как правильно презентовать продукт и увеличить средний чек.
• UX/UI легенда от WAYUP. Интерактивный курс от практикующих специалистов поможет вам получить знания и навыки, необходимые для уверенного старта в UX/UI-разработке. Содержание программы построено вокруг практикумов, в процессе решения которых вы научитесь создавать дизайн для лендинга, корпоративного сайта, интернет-магазина и мобильного приложения. В конце обучения вы вместе с экспертами онлайн-площадки подготовите резюме и портфолио для размещения на Behance.
• Дизайнер в IT для детей и подростков от Rebotica. Онлайн-курс с индивидуальным обучением, целевая аудитория которого - дети и подростки в возрасте 7-14 лет. Участники узнают, как развить в себе дизайн-мышление, освоят азы векторной графики, а также научатся работать с профильным программным обеспечением - Adobe Photoshop и Adobe Illustrator. А для лучшего усвоения материала в программе предусмотрены практикумы для самостоятельной работы. Уже к концу обучения ребенок сможет создавать визуальный контент для социальных сетей и иллюстрировать персонажей.
• Своя Web-студия за 55 дней от Михаила Русакова. Авторский курс, эксперт которого расскажет, как быстро освоить ключевые навыки дизайна сайтов и пользовательских приложений и открыть собственную Web-студию меньше чем за 2 месяца. Из этой программы вы узнаете, как найти продвинутых специалистов, научиться работать с заказчиками, разработать четкий план развития бизнеса и преодолеть психологические проблемы современного предпринимательства. К концу обучения вы спроектируете макет собственного сайта и разберетесь, как разместить его в интернете.
• Веб-дизайнер. Профессиональный курс: дизайн и анимация интерфейса от УрИПКиП. Программа профессиональной переподготовки для тех, кто хочет построить карьеру в IT-направлении, освоить творческую профессию и зарабатывать в удаленном формате. В процессе обучения вам предстоит создать минимум 8 проектов сайтов и мобильных приложений под руководством экспертов. На курсе у вас будет возможность пройти стажировку в реальных IT-компаниях и получить ценный опыт работы с заказчиками. Студенты, которые покажут высокие результаты в обучении, могут рассчитывать на получение офера на трудоустройство.
• Профессия «Веб-дизайнер» от Yodiz School. Вводный курс, на котором вы пройдете полный путь становления в профессии веб-дизайнера. Под руководством практикующих специалистов и с еженедельной обратной связью освоите с нуля основные программы для создания визуального контента: Figma, Adobe Photoshop, Adobe Illustrator, Adobe Animate. На основе кейсов от реальных заказчиков разработаете более 12 уникальных проектов для портфолио и дальнейшего трудоустройства. Лучшие студенты получат офер на стажировку в штате образовательной площадки или в дизайн-студиях партнеров.

Бесплатные курсы по веб-дизайну

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

1. Билет в профессию «Веб-дизайнер» — Логомашина

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

Главное о курсе:

• знакомство с инструментами популярного визуального редактора Figma;
• участие в онлайн-эфирах и возможность просмотра записи трансляций;
• подарки для прокачки soft- и hard-skills для участников онлайн-трансляций;
• именной электронный сертификат для каждого слушателя.

2. Какую профессию выбрать в дизайне — Яндекс Практикум

Бесплатный курс от Яндекса, с помощью которого вы сможете выбрать подходящую вам профессию в веб-дизайне. Вы узнаете разницу между motion-дизайнером, графическим дизайнером, 3D-дизайнером и специалистами других, смежных направлений. Вводная программа поможет вам понять, какие навыки нужны для профессиональной деятельности в области веб-дизайна, какие задачи предстоит решать, и как начать карьерное развитие в этом направлении. Дополнительно вы получите доступ к другому мини-курсу, на котором подробнее узнаете об основах изучаемой специальности и сможете создать свой первый дизайнерский проект.

Главное о курсе:

• 2 часа интересных и полезных материалов от профессиональных веб-дизайнеров;
• неограниченный доступ к обучающим материалам с любого устройства;
• возможность продолжить изучение профессии на дополнительном мини-курсе.

3. Старт в профессии: веб-дизайнер — Interra

Вводная программа обучения для тех, кто хочет развиваться в востребованной профессии, создавать продвинутые проекты и подробно разобраться в современной цифровой среде. Содержание курса включает записи онлайн-трансляций уроков и домашние задания для отработки профессиональных навыков. За четыре дня обучения узнаете, в чем заключается работа веб-дизайнера, познакомитесь с базовыми инструментами Figma, разберетесь в типографике и композиции, создадите свой первый проект. На завершающем занятии вы получите подробные руководства по вопросам поиска работы и карьерного развития в индустрии дизайна сайтов и приложений.

Главное о курсе:

• обучение в формате просмотра записей онлайн-трансляций и решения домашних заданий;
• для новичков в веб-дизайне и владельцев бизнеса;
• авторские руководства по теме трудоустройства и карьерного роста в индустрии веб-разработки.

4. Веб-дизайнер: взрывной старт — WAYUP

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

Главное о курсе:

• 4 дня обучения под руководством наставника;
• изучение инструментов Figma и создание первого проекта для портфолио;
• электронный сертификат по результатам обучения;
• создание индивидуальной стратегии профессионального развития и заработка в индустрии дизайна.

5. Создадим и анимируем крутой веб-дизайн для сайта — Дизайн вместе с Alice K

Ускоренный курс для новичков и практикующих веб-дизайнеров с небольшим опытом работы. Автором программы является практикующий UX/UI-дизайнер с 15-летним опытом разработки коммерческих проектов разного масштаба. В рамках прохождения интенсива вы научитесь работать с базовыми инструментами современного дизайнера и создадите свой первый проект - пользовательский интерфейс для небольшого информационного сайта.

Главное о курсе:

• знакомство с востребованной профессией и ключевыми инструментами веб-дизайнера;
• самостоятельное проектирование пользовательского интерфейса для сайта с нуля.

6. Веб-дизайн. Старт карьеры на удаленке — Skills PRO

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

Главное о курсе:

• три учебных пособия в подарок;
• создание мини-проекта - дизайна интерфейса сайта;
• полезные руководства по поиску работы на удаленке, общению с заказчиками и увеличению доходов.

7. Веб-дизайн — Skillbox

Бесплатная образовательная программа от популярной онлайн-школы поможет вам разобраться, какими знаниями и навыками необходимо обладать, чтобы стать востребованным веб-дизайнером. Обучение включает в себя 9 видеороликов, каждый из которых длится около двух часов. Вы познакомитесь с Figma и спроектируете собственный лендинг, а также разберете нестандартные варианты создания дизайна. Автор курса также расскажет об особенностях эффективной коммуникации с заказчиками, научит вас объективно оценивать свои работы и подскажет, как выйти на новый уровень дохода.

Главное о курсе:

• 9 обучающих видеороликов общей длительностью около 20 часов;
• основы веб-дизайна с использованием Figma: проектирование и визуализация сайта;
• разбор проектов и портфолио профессиональных дизайнеров;
• рекомендации по общению с заказчиками и увеличению доходов.

8. Как открыть свою Web-студию — Михаил Русаков

Авторский курс от продвинутого эксперта-практика с опытом разработки сайтов и пользовательских приложений более 10 лет. В ходе изучения программы вы узнаете, как взаимодействовать с заказчиками, выбрать подходящих специалистов, размещать созданные веб-сайты в интернете и продвигать свою Web-студию. Для того чтобы получить методические материалы, необходимо указать свое имя и действующий адрес электронной почты - на него придет ссылка на курс.

Главное о курсе:

• подробное руководство по запуску и продвижению Web-студии с нуля;
• рекомендации от эксперта по профессиональному развитию и быстрому увеличению заработка в сфере дизайна.

9. Как стать UX/UI-дизайнером: создаем свой первый сайт — Нетологии

Интенсив по основам UX/UI-дизайна, созданный известной платформой дистанционного образования совместно с прогрессирующей IT-компанией. На этом курсе вы узнаете об особенностях современного UX/UI-дизайна, а также попробуете самостоятельно смоделировать прототип веб-сайта по инструкциям от эксперта. В конце обучения вы получите полезный чек-лист, который поможет вам определиться с наиболее подходящим форматом работы - удаленно в IT-компании или на фрилансе.

Главное о курсе:

• доступ к методическим материалам неограниченное время;
• отработка профессиональных навыков на практике - создание прототипа и UI-дизайна сайта по инструкциям;
• доступ в закрытое коммьюнити для общения со студентами и экспертами.

Заключение

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

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

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

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

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

Что касается гайдлайнов лидеров индустрии — можно черпать из них идеи, но не стоит делать все по шаблону. У каждого продукта свои задачи и особенности интерфейса. Пользовательский путь и UX/UI отличаются. Сделать хорошо, жестко следуя чужой инструкции, не получится.

Самое главное — это не правила, а чтобы результат выглядел гармонично.

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

При разработке мы учитывали JTBD — на какие «работы» пользователь «нанимает» корпоративный мессенджер и как много времени в нем проводит.

Ключевые моменты, которые мы определили на старте

Зафиксировали правила глубины. Глубина в темной теме регулируется цветом — чем темнее элемент, тем «дальше» в перспективе он ощущается. Это естественная природа света: если свет падает на стопку книг, то лучше всего будет освещена верхняя книга. Точно такой же принцип должен быть в приложении — это делает интерфейс объемным и гармоничным.

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

Приглушили некоторые цвета — например, цвета кнопок. В темной теме цвета из светлой темы выглядели слишком контрастными, поэтому мы сделали их более приглушенными. Из параметра HSL взяли яркость L (Lightness) и сделали ее на 6 пунктов меньше.

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

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

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

Например, есть поп-овер, фон которого должен быть непрозрачным. Если присвоить ему прозрачный белый, то элементы под поп-овером будут просвечиваться.

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

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

Когда общая концепция и цветовой профиль темной темы были согласованы, началась активная работа над макетами приложения.

В сумме нужно было «перекрасить» 2500 экрано-состояний для десктопа и мобильных устройств.

Разработка темной темы для мобильных приложений

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

В соответствии с локациями, весь процесс разработки был расписан по дням.

Работа шла итерационно:

1. Отдел дизайна готовил определенный набор локаций приложения в темных цветах — по несколько вариантов для каждой локации.
2. Дизайнеры собирались на созвон-ревью и тестировали прототипы в Figma, вносили исправления, затем снова тестировали.
3. Финальные макеты попадали к инженерам для верстки. В это время отдел дизайна готовил следующие локации.
4. По готовности верстки начинались живые тесты — а вместе с ними улучшение и доработка интерфейса.

Верстка, живые тесты и доработка

Мы начали с бокового меню и обычного чата, потому что это базовые локации приложения.

Когда iOS-разработчики сверстали первые локации темной темы и залили их в TestFlight, к тестированию подключили уже всю команду темной темы. Чтобы понять работоспособность идеи, нужно какое-то время с ней «пожить» — использовать несколько дней в разных условиях и при разном освещении.

Мы тестировали в утренние часы, в полдень и в темное время суток. Дома, в офисе, в кофейне, в торговом центре, на улице — словом, везде, где может оказаться человек с телефоном. Нужно было учесть все возможные условия освещенности.

Все идеи собирались в отдельном чате, после чего команда отбирала их и реализовывала. Если в ходе тестирования появлялись баги и артефакты, билд возвращался к дизайнерам и разработчикам. Мы повторяли итерации, пока не получился идеальный конечный результат для каждой локации мессенджера.

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

Например, тусклые кнопки в экране участников стали ярче — было FFFFFF 2%, стало 10%.

На устройствах Android тестировали отдельно, поскольку там немного другая цветопередача по сравнению с iOS. Нам было важно, чтобы тема одинаково хорошо смотрелась и на IPS матрицах с низким разрешением и слабой яркостью, и на OLED флагманских устройств — в любое время суток и при любом освещении.

Мы заметили, что на OLED-дисплеях во время скролла некоторые особо темные элементы «дрожали» — визуальная вибрация раздражала восприятие. На таких дисплеях нет черных пикселей, из-за чего отображение глубоких темных оттенков идет с едва заметной задержкой. Поэтому в некоторых местах пришлось слегка снизить контрастность.

Изменения для фона и текста, к которым мы пришли в результате тестирований:

1. Увеличили яркость текста сообщений в чате — подняли непрозрачность до 85%. Изначально мы взяли 70% от чистого белого для текста в чате, но потом заметили, что текст теряется в интерфейсе.
2. Увеличили яркость имен в чате до 100% — только в ходе живых тестов и многочисленных сравнений мы поняли, что так расстановка акцентов выглядит сбалансированнее.
3. Оставили яркость текста в боковом меню, как была — 70% для названий и 30% для сокращенного текста последнего сообщения.
   
4. Оставили один и тот же цвет 1C1C1C для фона бокового меню и чата. Этот оттенок черного дал легкий коричневатый отлив — на самом деле, в нем нет никаких примесей, но такой оптический эффект сделал фон более мягким и спокойным.
5. Зафиксировали общую иерархию непрозрачности элементов и их насыщенности. Такие правила мы вывели для мобильных устройств:
   

• Высокое выделение текста — самый яркий, важный и заметный оттенок на экране, его непрозрачность должна быть от 70 до 100%.
• Текст с низким акцентом — текст, который передает информацию с самым небольшим приоритетом относительно прочих (сноска, подсказка и т.д.), его непрозрачность должна быть от 30 до 50%.
• Текст для неактивных состояний — непрозрачность должна быть от 15 до 20%.

В завершении менее насыщенное форматирование текста — те цвета, что используются в светлой теме, было слишком контрастные и яркие.

Нюансы свайпа

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

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

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

• Когда пользователь находится в боковом меню, справа выглядывает часть чата — она светлее, чем фон бокового меню. Мы сделали непрозрачность этого кусочка чата 3%, а сверху положили дополнительный слой 2% от белого, чтобы чат не сливался с боковым меню.

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

Таким образом, мы сохранили и нужные цвета фона, и эффект «наезжания» чата на боковое меню.

Цвета ссылок, упоминаний и бейджей

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

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

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

Затемнение под поп-апом

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

В темной теме контрастность работает иначе. В чате используется белый текст и насыщенные относительно темного фона голубые цвета ссылок. Даже с умеренной плотностью они перетягивают на себя много внимания. Легкое затемнение не работает — нужно накладывать дополнительную подложку под поп-ап. Мы подняли уровень затемнения (черный цвет 000000) с 50% до 80%.

Так темное на темном смотрится гармонично, а ощущение акцентов не теряется.

Постепенно, шаг за шагом, мы прорабатывали каждый элемент приложения.

Спустя месяц наша команда сделала около 1200 экрано-состояний темной версии Compass для мобильных устройств.

Разработка десктопной версии темной темы

Когда мобильная карта темной темы была готова, мы перешли к десктопу — и сделали целых две цветовых схемы.

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

Темная тема на десктопе получилась теплой с коричневым оттенком — цвет фона #1С1С1С. Нам стало интересно, как это будет выглядеть в более холодных тонах. Мы сделали альтернативную версию, добавив в нее синеву, получился цвет #1C1E20.

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

В новой версии поменяли всю цветовую схему десктопа — от фона до оттенков других элементов.

Настройка текста и цветов в десктопе

Холодная тема показалась нам лучшим решением, и мы приступили к изменению текста:

Сильнее приглушили яркость текста в чате — до 70%

Цвет текста с той же прозрачностью, как в мобильной версии (85%), выглядел в десктопе более резким из-за большой площади экрана. На большом экране глаз поглощает больше света, глядя на белый цвет. Высокая концентрация белого цвета мешала сконцентрироваться на тексте и вызывала визуальное «дрожание», поэтому нужно было снизить контраст фона и текста.

По той же причине изменили непрозрачность для имен в чате до 80%. В отличие от мобильных устройств, 100% яркость имен выглядела резко и подавляла другие элементы.

Яркость названий чатов в боковом меню сделали 80%, тогда как в мобильной версии было 70%. А вот текст последнего сообщения в меню оставили таким же — 30%.

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

Цвета фона в десктопном приложении мы оставили однородными, разделив боковое меню и чат тонкой темной полоской. Добавление других синих оттенков вызывало визуальную дисгармонию.

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

Тесты проводились на десятках мониторов — от ретины дисплеев MacBook до офисных ЖК-панелей.

В этом участвовала вся команда темной темы: дизайнеры, PO, PM, QA и CEO компании. По результатам тестов мы вносили изменения в дизайн, меняли оттенки и контрастность.

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

Тогда мы решили вернуться к теплому варианту темной темы с некоторыми изменениями:

1. Убрали однородность фона — для фона чата мы оставили цвет #1С1С1С, а боковое меню покрасили в цвет #212121. Так цвет бокового меню стал светлее. Это помогло не только разделить рабочее окно на две зоны, как в светлой теме, но и сфокусировать внимание пользователя на чате, поскольку он темнее.
2. Подняли яркость текста в чате с 70% до 75%.
3. Снизили яркость для имен в чате с 80% до 75%.

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

Поп-апы и ховеры

Затемнение под поп-апами на десктопе мы сделали более плотными, чтобы сохранить иерархию — так же, как в мобильной версии темной темы.

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

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

Экраны онбординга

Попутно мы изменили и экраны онбординга — приветственные заставки, которые пользователь видит только один раз перед регистрацией с телефона.

Путь пользователя начинается раньше, чем он попадает в интерфейс. Онбординг — это первое, что он увидит в нашем мессенджере.

Дизайнеры создали несколько альтернативных макетов в Figma — в итоге выбрали вариант с приглушенными тонами и более контрастной разметкой. Так получилось гармонично интегрировать онбординг в общий стиль темной темы.

Переход на переменные и создание финальной палитры

Зачем? Чтобы разработчики сказали «спасибо», а вся команда могла автоматизировать смену тем.

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

Отдел дизайна предложил перейти на переменные — вместо конкретных цветовых значений в коде использовать общие обозначения цвета. Например, переменная background содержит в себе два цвета — он будет отображаться либо как #FFFFFF для светлой темы, либо как #1C1C1C для темной темы.

С переходом на переменные наша цветовая палитра стала выглядеть так:

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

Например, красная кнопка имеет один цвет для светлой темы, а при изменении темы на темную появляется другой оттенок красного. Но в коде она всегда называется просто «красная кнопка».

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

Работа с переменными — не из легких. Но это тот случай, когда вложенные усилия многократно окупятся в будущем.

Это очень объемная работа — запрограммировать суммарно более двух тысяч экранов так, чтобы цвета автоматически переключались в зависимости от темы. При этом на десктопе и мобилке разные оттенки, и у каждого цвета по 2-3 варианта.

В iOS и MacOS разработчики тоже используют подход с динамическими цветами. Вместо жёстких цветов в коде там определен набор переменных. И меняя значения этих переменных в настройках темы, пользователь полностью меняет цветовую схему всей ОС.

Итоги

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

А еще мы лишний раз убедились, что командная работа — залог успеха любого проекта.

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

React решил эти проблемы. Разработчики получили виртуальный DOM, который ускорял отрисовку веб-страниц. Благодаря компонентам стало удобнее верстать сайты и веб-приложения, а реактивность помогла эффективнее внедрять интерактивные элементы. Да, рeact действительно крутой, однако он не лишён недостатков в сравнении с некоторыми более новыми фреймворками.

При написании статьи консультировался с Денисом Черновым, ведущим разработчиком платформенной команды Спортмастера (а то я чуть не убил Реакт), а также Мишей Родштейном, руководителем разработки в Дизайн-бюро «Интуиция», и Александром Гузенко, руководителем фронтенд-разработки отдела R&D в крупной европейской компании (к сожалению, под NDA).

Почему разработчики ищут замену React?

Спорный JSX

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

Пример JSX кода:

Такой код немного хуже читается, чем обычные решения на HTML + JS, и может сбивать с толку новичков. Но стоит сделать ремарку, что некоторым разработчикам он нравится.

Виртуальный DOM как устаревший подход к оптимизации

DOM — еще одна крутая фишка React, которая со временем стала недостатком на фоне других фреймворков. Когда пользователь взаимодействует с интерактивным элементом, на его стороне сперва рендерится виртуальный DOM, после чего он сравнивается с главным DOM и перезаписывает данные на сервере.

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

Зависимость от сторонних библиотек

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

В итоге мы получаем крутой инструмент, но с недостатками в виде не самого чистого кода, весомого бандла, зависимости от сторонних библиотек, трудностей в поддержке и не самой быстрой реализации рендеринга DOM.

Краткое знакомство с Svelte и SolidJS

Что такое Svelte: основные принципы, чем выделяется

Производительность из-за компиляции

Философия Svelte сводится к тому, чтобы получать больше за счет меньшего. Как и в случае с React, Svelte не совсем фреймворк. Разработчики позиционируют его как компилятор, и это именно так.

Благодаря компиляции кода, проекты на Svelte получаются более производительными и меньше весят. Здесь не нужны костыли в виде виртуального DOM.

Отсутствие JSX-кода и модифицированный HTML

Код в Svelte пишется на HTML, CSS и JS, причем HTML здесь модифицированный. Например, при верстке мы можем использовать директивы:

• bind: для двустороннего связывания данных (например, <input bind:value={name} />).
• on: для добавления обработчиков событий (например, <button on:click={handleClick}>).
• class: для условного добавления классов (например, <div class:active={isActive}>).

Вот пример простого кода — он создает интерактивный интерфейс, который реагирует на ввод пользователя и переключение состояния:

Значение в поле ввода связано с переменной name при помощи bind:value. Когда пользователь вводит текст, значение name обновляется, и это изменение отражается в приветствии ниже.

Инкапсуляция стилей

В Svelte поддерживается инкапсуляция стилей на уровне самого компилятора. Если мы определяем стили внутри компонента, то они будут работать только в рамках него.

Например:

Svelte при компиляции присваивает атрибутам внутри элемента идентификатор — так он реализует инкапсуляцию стилей.

Вот пример идентификатора для тега «p»:

А вот для стилей:

Если нам нужно, чтобы стиль был глобальным, то нужно использовать :global:

Анимации из коробки

Если в react анимации и переходы можно подключить только через сторонние библиотеки, то в Svelte они уже доступны из коробки.

Здесь есть:

• fade — плавное появление/исчезновение элемента за счет изменения прозрачности.
• fly — плавное перемещение элемента с одного места в другое (можно указать направление и расстояние).
• scale — изменение размера элемента, создаёт эффект увеличения или уменьшения.
• slide — плавное скольжение элемента с одного края экрана в другой (например, слева или сверху).
• draw — анимация, которая используется для рисования элементов, например, для SVG-изображений.
• blur — плавное размытие элемента, создаёт эффект фокусировки/размытия.

Пример анимации с использованием fly:

В этом примере элемент будет плавно перемещаться по горизонтальной оси (ось X), когда он появляется на экране.

По умолчанию анимации в Svelte работают локально, внутри компонента, как и стили. Но их можно сделать глобальными при помощи директивы :global:

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

SolidJS: чем уникален, ключевые особенности

Компиляция вместо VDOM

SolidJS похож на React. Тут тоже есть компоненты, реактивность и JSX. Но в отличие от своего старшего собрата он не поддерживает VDOM. Это здесь просто не нужно по той же причине, что и в Svelte. SolidJS более эффективно компилирует проект в чистый JS-код. В итоге страница рендерится быстрее, чем при работе в React с его виртуальным DOM.

Гранулярная реактивность

Реактивность в SolidJS работает при помощи сигналов. Сигналы хранят в себе данные и отслеживают их изменения. Если данные меняются, то происходит рендер только тех участков компонентов, с которыми эти сигналы связаны. Сам компонент целиком не рендерится в DOM, только его часть.

Пример кода с сигналами:

Здесь мы перерисовываем только элемент с данными внутри кнопки, а не саму кнопку. Так мы избегаем избыточной отрисовки лишних элементов интерфейса и оптимизируем производительность.

Реактивные хранилища

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

Пример создания реактивного хранилища:

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

Сравнение: Svelte, SolidJS и React

Производительность

Проблемы реактивности в React

Реактивность в React реализована таким образом, что у нас обновляется не весь DOM, а только конкретный компонент через виртуальный DOM. В свое время это было прорывным решением. Если пользователь кликнул по кнопке, то у него изменялся не весь сайт, а только эта кнопка.

С выходом SolidJS и Svelte появились более производительные решения рендеринга интерактивных элементов. Всё благодаря компиляции кода без VDOM. Из-за такой реализации работы с DOM SolidJS и Svelte показывают большую производительность в бенчмарках.

Сравниваем производительность SolidJS, Svelte и React в бенчмарках

Для сравнения фреймворков я взял результаты тестов из бенчмарка js-framework-benchmark results для Chrome 130.0.6723.58. Использовались следующие версии фреймворков:

• Solid 1.8.15
• Svelte 5.0.5
• React 18.2.0

Результаты тестов записаны в миллисекундах. В качестве режима отображения выбрано медианное значение. Когда мы видим запись 38.8 ± 0.2, она означает, что есть погрешность в 0.2 миллисекунды и разброс может быть от 38.6 до 39.

Общая производительность

Видно, что SolidJS — самый производительный из всей троицы. Следом идет Svelte с незначительным отставанием. React гораздо более медленный, в некоторых тестах он многократно уступает другим фреймворкам.

Несмотря на такое существенное превосходство Solid и Svelte над React в производительности, стоит учитывать, что речь идет о миллисекундах. В большинстве проектов такая разница будет не очень заметной.

Работа с памятью

React во всех случаях занимает память ощутимо больше, чем Svelte и SolidJS. Svelte незначительно, но уступает Solid.

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

Удобство разработки

Простота синтаксиса

Новичкам удобнее всего будет работать в Svelte. Там используется хоть и модифицированный, но более понятный HTML, CSS и JS. Благодаря этому код выглядит чище и проще.

Еще одно преимущество Svelte — декларативный подход к разработке. Мы просто прописываем, что хотим показать в интерфейсе, а все манипуляции выполняются под капотом.

Вот пример кода на Svelte, который создает простой счетчик:

Такой код выглядит минималистичным, его легко читать и поддерживать.

А вот реализация на JSX в React:

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

Теперь сравним с реализацией в SolidJS:

Здесь реактивность работает из коробки, поэтому код выглядит чуть более удобным, чем в React. Но JSX синтаксис по-прежнему проигрывает в массивности и читаемости.

Svelte более удобный для разработки с точки зрения поддержки, читаемости чем React или Solid. К нему будет проще привыкнуть чем к фреймворкам где используют JSX. SolidJS более компромиссное решение. Здесь все под капотом, поэтому код немного лаконичнее, чем в React, но менее гибкий.

Менеджер состояний

В React управление состоянием традиционно строится на хуках, таких как useState и useReducer.

React обновляет компоненты при изменении состояния, используя виртуальный DOM, чтобы определить минимально необходимые изменения в реальном DOM. Это эффективно, но не идеально, так как виртуальный DOM требует дополнительных вычислений.

Переменные в компоненте Svelte до 5-ой версии автоматически становились реактивными. Но с пятой версии мы можем гибко управлять реактивностью при помощи специальных функций — рун.

Рассмотрим более подробно код из предыдущего примера со Svelte:

Здесь мы используем руну state(). Она хранит данные, которые автоматически обновляют интерфейс.

SolidJS использует fine-grained reactivity, подобно Svelte, но с еще более детальным контролем. SolidJS отслеживает зависимости на уровне отдельных переменных, обновляя только те части DOM, которые зависят от изменения переменной.

В этом примере Solid перерисовывает только текст внутри кнопки, а не всю кнопку при изменении данных:

SolidJS более тонко работает с состояниями и реактивностью, чем Svelte и React. Зато в последних есть возможность более гибко их настраивать.

Экосистема, документация и трудоустройство

Зрелость React против развивающихся экосистем

React гораздо популярнее, чем SolidJS и Svelte. По данным Statista, React используют 39.5% веб-разработчиков. По своей популярности он уступает только NodeJS с его 40.8% (судя по данным, опрашиваемые могли выбрать несколько вариантов ответов). Для сравнения у Svelte 6.5%, а у SolidJS — 1.2%.

На React кодят больше. Это значит, что под него проще найти учебные материалы и получить ответы на вопросы на форумах. А у работодателей — более широкий пул кандидатов.

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

Документация ко всем трём фреймворкам переведена на русский. В целом при подготовке статьи и сборе материалов чувствовалось, что о React есть много информации на русском, о Svelte меньше, а про SolidJS — в разы меньше.

Трудоустройство

На момент написания статьи React упоминают в 2669 вакансиях на hh.ru. Сотрудников без опыта рассматривают в 128 вакансиях. Кстати, в 270 вакансиях зачем-то хотят высшее образование :)

На Svelte нашлось только 43 вакансии и ни одной без опыта.

По запросу «SolidJS» нашлось 508 вакансий. Но многие из них точно не целевые и подразумевают не этот фреймворк. Пример нецелевой вакансии:

Скорее всего, под SolidJS реальных вакансий будет примерно столько же, как и под Svelte, если не меньше.

Ключевые преимущества для разных задач

Svelte лучше подходит для небольших проектов

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

SolidJS отличный выбор для высоконагруженных интерфейсов

Благодаря более точечной реактивности и компилируемости отлично подходит для проектов с высоко нагруженными интерфейсами.

Например, в дашбордах, графиках или редакторах (аналогичных Figma) SolidJS быстро реагирует на изменения данных, сохраняет плавность интерфейса даже под большой нагрузкой.

React — по-прежнему оптимальное решение, но не всегда лучшее

React все ещё подходит для большинства проектов, просто разработка на нем может быть дольше и сложнее из-за JSX. Также его не стоит использовать для проектов, которые предполагают работу в регионах с плохим интернет-соединением или слабым железом.

Мнения экспертов

Большинство старых проектов Бюро сделаны на экспрессе + разный JS на фронте. Такой стек сложно поддерживать и развивать. Поэтому мы начали делать новые проекты на Свелт. Задача была как можно плавнее перевести ребят с разными навыками на современный стек. В итоге проекты на Свелт запускаются гораздо проще и работают в разы быстрее. Это всех подкупает.

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

Что касается действующих проектов, я не вижу смысла переезжать на Свелт с Реакта. Вообще не вижу смысла «на скаку» менять фреймворк. У нас был переезд проекта на Свелт, продлился год, и это было непросто. Но мы уткнулись в ограничения старой системы, и нам нужно было их решать.

Смена фреймворка — слишком большой слом налаженных процессов. Это всегда очень больно и долго, и, как правило, того не стоит.

И Svelte, и SolidJS обгоняют React по скорости и весят меньше. В частности, не последнюю роль в этом играет отсутствие Virtual DOM. Но для меня это важно только как часть кругозора. Если у вас в приложении наблюдаются проблемы с производительностью на React, с огромной долей вероятности в этом виноват плохой код, а не сама библиотека. Да, Реакт практически обязывает тащить за собой кучу дополнительных библиотек на все случаи жизни, которые также могут быть проблемой в производительности. Но в целом разница в скорости в пару десятков миллисекунд незаметна. Если у компании/команды есть экспертиза в React и его экосистеме — переходить на другие инструменты без сильной причины (просто для более красивых циферок) не вижу смысла.

Совсем другое дело, когда вы заранее знаете, что ваше приложение обещает быть тяжелым с точки зрения нагрузки или у конечных пользователей слабое железо (например, если вы выпускаете приложение на рынки Африки или Индии, для вас это актуально, тем более если им будут пользоваться с мобильных устройств). Но и здесь я бы не стал слепо отказываться от React’a — у него всё же есть много совместимых библиотек, легче найти решение проблемы. А вот с другими инструментами дела могут обстоять иначе, и не факт, что в лучшую сторону. Да, вы можете получить выигрыш в циферках производительности и веса сборки, но можно наступить на много граблей во время разработки, что сведет все преимущества на нет.

В целом я считаю важным периодически осваивать новые фреймворки и библиотеки, такие как Svelte и SolidJS. У них есть свои преимущества, и о них важно знать. Так, в моменты, когда стоит реализовать именно эти преимущества, вы сможете проявить себя, предложив новый инструмент. Более того, это позволяет поддерживать свой кругозор, как специалиста, и осваивать новые подходы. Рано или поздно эти знания могут пригодиться и в проектах на том же самом React или в любом другом решении. Просто знать, что можно и как разрабатывать — сильно повышает экспертизу разработчика!

Стоит ли уходить с React?

Зависит от проекта и ваших личных планов. Новичкам лучше оставаться на React — под него заточено большинство вакансий. Проект под SolidJS или Svelte будет найти сложнее, а на React уже написано много решений, которые надо поддерживать.

Для более опытных разработчиков Svelte будет лаконичным выбором, если они работают с небольшими проектами, но, опять же, React здесь тоже сгодится. SolidJS подойдет для создания веб-приложений и сайтов с высоконагруженными интерфейсами.

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

А какие фреймворками для разработки интерфейсов используете вы?

Совместно с экспертами Kursfinder я проанализировала около 70 программ от ведущих онлайн-школ, чтобы выделить 35 лучших, включая бесплатные варианты. В статье мы также даем уникальные промокоды на дополнительную скидку на обучение. Полный перечень актуальных курсов по созданию сайтов представлен в нашем каталоге.

ТОП-10 лучших курсов по созданию сайтов в 2026 году

1. Создание сайтов с нуля от Sky Pro — лучший тренинг для начинающих.
2. Сайт-визитка в Readymag от Bang Bang Education — лучшее экспресс-обучение.
3. Создание сайтов на Tilda от Sky Pro — программа по запуску своего проекта в кратчайшие сроки.
4. Дизайнер сайтов на Tilda от Skillbox — отличный вариант для бизнесменов.
5. Создание сайтов на Tilda от ProductStar — сопровождение ментора на всех этапах.
6. Создание сайтов для детей от Skysmart — обучение для детей от 10 лет по персональному графику.
7. Дизайн сайтов от Coddy School — лучшее обучение для детей в мини-группах.
8. Создание сайта в Figma от Interra — практический курс по созданию макетов сайтов.
9. Верстальщик сайтов от Международной Школы Профессий — идеальная программа для освоения HTML/CSS.
10. Создание сайтов от Onskills — отличные уроки для быстрого развития веб-сайтов на популярных платформах.

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

Онлайн-курсы по созданию сайтов

1. Создание сайтов с нуля | Skypro

Используйте промокод "kursfinder", чтобы получить скидку 10% на любой курс школы.

Программа обучения по созданию сайтов с нуля охватывает верстку с использованием HTML, CSS и JavaScript, настройку веб-серверов и их управление, а также интеграцию веб-аналитики для мониторинга производительности сайтов. Вы также научитесь работать с популярными библиотеками и фреймворками JavaScript. Одной из особенностей тренинга является использование GPT для генерации кода. Преподаватели, среди которых опытные frontend-разработчики Михаил Черемухин-Рерберг и Алексей Кадочников, будут делиться реальными задачами из своей практики, помогая студентам готовиться к реальной работе в веб-разработке.

• Стоимость: 199 332 рубля
• Длительность: 10 месяцев
• Формат обучения: онлайн-занятия, домашние задания, тестирование
• Сертификат: да

Кому подойдет: тем, кто хочет с нуля освоить ключевые навыки веб-разработки и научиться создавать сайты на профессиональном уровне.

Преимущества:

• структурированная программа, охватывающая основы HTML, CSS, JavaScript и фреймворки;
• практика на реальных задачах
• поддержка в подготовке резюме и портфолио;
• полезные советы от кураторов;
• инструкции по самостоятельному созданию сайтов.

Недостатки:

• длительное обучение.

Программа обучения:

• HTML, CSS
• Популярные библиотеки
• Использование GPT

Ознакомиться с полной программой >>>

2. Сайт-визитка в Readymag | Bang Bang Education

Используйте промокод "kursfinder", чтобы получить скидку 5000 рублей на все профессии или 1500 рублей на курсы дороже 15000 рублей.

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

• Стоимость: 4800 рублей
• Длительность: 9 дней
• Формат обучения: записи лекций, практические задания, тест
• Сертификат: да

Кому подойдет: дизайнерам, которые хотят расширить свои навыки и научиться создавать стильные сайты-визитки на платформе Readymag.

Преимущества:

• возможность общения и поддержки в комьюнити;
• регулярные скидки на обучение;
• краткосрочный интенсив с практическим проектом;
• доступ к материалам на 6 месяцев после курса.

Недостатки:

• доступ к материалам ограничен 6 месяцами;
• не подойдет для углубленного изучения.

Программа обучения:

• Оформление сайта
• Обложки и слайдеры
• Меню, формы и кнопки

Ознакомиться с полной программой >>>

3. Создание сайтов на Tilda | Skypro

Используйте промокод "kursfinder", чтобы получить скидку 10% на любой курс школы.

Курс предназначен для тех, кто хочет научиться создавать современные и функциональные сайты без глубоких знаний программирования. В программе курса: работа с платформой Tilda, создание адаптивных дизайнов, настройка SEO-параметров и интеграция с внешними сервисами. Обучение проходит в онлайн-формате с практическими заданиями и поддержкой опытных наставников, что позволяет студентам получить необходимые навыки для самостоятельной разработки сайтов.

• Стоимость: от 4 046 рублей в рассрочку на 36 месяцев
• Длительность: 2 месяца
• Формат обучения: онлайн-лекции, домашние задания, итоговый проект
• Сертификат: да

Кому подойдет: тем, кто хочет научиться создавать сайты на платформе Tilda — идеальном инструменте для быстрого запуска кастомизированных веб-проектов.

Преимущества:

• быстрое обучение;
• практическая направленность с созданием реальных проектов;
• поддержка наставников и помощь специалистов;
• навыки работы с популярной платформой Tilda, без необходимости программирования.

Недостатки:

• подходит только для работы на платформе Tilda.

Программа обучения:

• Введение в веб-дизайн
• Знакомство с платформой Tilda
• Создание структуры сайта
• Дизайн и оформление
• Адаптивная верстка

Ознакомиться с полной программой >>>

4. Дизайнер сайтов на Tilda | Skillbox

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

• Стоимость: от 41 000 рублей
• Длительность: 4 месяца
• Формат обучения: записи лекций, практические задания, итоговый проект
• Сертификат: диплом установленного образца

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

Преимущества:

• три месяца бесплатной подписки на Tilda
• доступ к материалам навсегда;
• практика на реальных брифах от заказчиков;
• рассрочка на оплату.

Недостатки:

• отсутствие индивидуальных консультаций.

Программа обучения:

• Знакомство с Tilda
• Основные блоки
• Работа с контентом

Ознакомиться с полной программой >>>

5. Создание сайтов на Tilda | ProductStar

Предлагает глубокое погружение в разработку сайтов на платформе с акцентом на практическое использование инструментов. Вы научитесь работать с блоками Tilda, структурировать информацию и создавать визуально привлекательный контент. Программа также охватывает возможности кастомизации с помощью сторонних сервисов, что позволяет разработчикам создавать уникальные проекты. Она включает изучение работы с CRM и настройку форм для сбора данных, а также погружение в Zero Block, где можно создавать полностью оригинальные блоки.

• Стоимость: от 156 492 рублей
• Длительность: 2 месяца
• Формат обучения: онлайн-лекции, домашние задания, тесты
• Сертификат: да

Кому подойдет: специалистам, желающим углубиться в работу с платформой Tilda.

Преимущества:

• доступ к обновлениям навсегда;
• помощь в трудоустройстве;
• практическая направленность с созданием реальных проектов;
• гибкий онлайн-формат.

Недостатки:

• отсутствие программирования для более сложных проектов.

Программа обучения:

• Подключение домена к сайту на конструкторе Tilda
• Создание страниц на основе базовых блоков конструктора
• Редактирование zero-блоков
• Подбор цветов и шрифтов
• Отрисовывание элементов интерфейса и настройка анимации

Ознакомиться с полной программой >>>

6. Создание сайтов для детей | Skysmart

Это обучение по созданию сайтов включает основы HTML, CSS и JavaScript, что позволит ученикам самостоятельно разрабатывать веб-страницы и публиковать их в интернете с помощью GitHub Pages. Она поможет детям развить логическое мышление и навыки работы с кодом, а также познакомит их с основами веб-дизайна. Программа состоит из 32 практических занятий, где дети под руководством опытных преподавателей создают реальные проекты, которые можно добавить в портфолио.

• Стоимость: от 6667 рублей
• Длительность: от 1 месяца
• Формат обучения: записи уроков, домашние задания, тестирование
• Сертификат: да

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

Преимущества:

• геймификация учебного процесса;
• бесплатный вводный урок;
• большой набор практических заданий;
• возможность оплаты материнским капиталом.

Недостатки:

• высокая стоимость индивидуальных занятий.

Программа обучения:

• Базовые web-технологии
• HTML и CSS
• Базовый JavaScript
• Фронтенд приложений

Ознакомиться с полной программой >>>

7. Дизайн сайтов | Coddy School

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

• Стоимость: от 6800 рублей
• Длительность: от 48 часов
• Формат обучения: онлайн-занятия, практические задания, итоговый проект
• Сертификат: да

Кому подойдет: подросткам в возрасте от 11 до 16 лет, которые хотят освоить основы веб-дизайна и научиться создавать собственные сайты.

Преимущества:

• подходит для начинающих без опыта программирования;
• скидка при оплате большого пакета уроков;
• поддержка преподавателя и наставника.

Недостатки:

• возрастные ограничения (10–15 лет).

Программа обучения:

• Веб-дизайн
• Блоки и новые элементы
• Zero Block
• Анимация и формы
• Работа с ТЗ

Ознакомиться с полной программой >>>

8. Создание сайта в Figma | Interra

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

• Стоимость: от 10 000 рублей
• Длительность: от 4 часов
• Формат обучения: записи лекций, домашние задания, тесты
• Сертификат: да

Кому подойдет: тем, кто уже имеет опыт в смежных digital-профессиях или владельцам бизнеса, которые хотят освоить основы веб-дизайна для создания визуально привлекательных и функциональных сайтов.

Преимущества:

• практическое обучение с проектами;
• доступ к дополнительным материалам и видеоурокам;
• предусмотрена помощь в составлении портфолио.

Недостатки:

• нет поддержки по трудоустройству после окончания.

Программа обучения:

• Основы профессии веб-дизайнера и создание прототипов посадочных страниц
• Знакомство с интерфейсом
• Изучение композиции и типографики

Ознакомиться с полной программой >>>

9. Верстальщик сайтов | Международная Школа Профессии

Включает как теоретическую базу, так и практику на реальных проектах — участники смогут разрабатывать сайты по готовым макетам и адаптировать их под различные устройства. Большое внимание уделяется созданию пользовательских веб-приложений и освоению современных методов верстки. Тренинг также подготавливает к работе на фрилансе, помогая будущим верстальщикам ориентироваться в требованиях клиентов. Ведет его Григорий Логвин — специалист с более чем 10-летним опытом в веб-разработке, который будет сопровождать вас на всех этапах обучения.

• Стоимость: 34 300 рублей
• Длительность: 3 месяца
• Формат обучения: онлайн-лекции, практические задания, итоговый проект
• Сертификат: да

Кому подойдет: тем, кто хочет научиться создавать адаптивные и функциональные сайты с использованием HTML, CSS и JavaScript.

Преимущества:

• учащиеся могут задавать вопросы и получать помощь от профессионалов;
• доступ к онлайн-материалам и возможность пересмотра уроков;
• качественная обратная связь от менеджеров.

Недостатки:

• фиксированное время вебинаров;
• рассрочка доступна только от одного банка.

Программа обучения:

• HTML, CSS, JavaScript
• Блочная верстка сайта
• Создание макета на Flexbox
• Работа с GitHub

Ознакомиться с полной программой >>>

10. Создание сайтов | Onskills

Подходит как начинающим IT-специалистам, так и тем, кто стремится расширить свои возможности на фрилансе или в веб-дизайне. Программа обучения созданию и продвижению сайтов с нуля охватывает ключевые инструменты, такие как HTML, CSS, JavaScript и PHP. Она будет полезна и для предпринимателей, которые планируют открытие собственного бизнеса по разработке сайтов. Студенты получат сертификат по окончании обучения, что повысит их конкурентоспособность на рынке труда.

• Стоимость: 5200 рублей
• Длительность: от 3 дней
• Формат обучения: записи лекций, домашние задания, итоговый проект
• Сертификат: да

Кому подойдет: для тех, кто хочет освоить профессию в IT-сфере с нуля, получив базовые навыки разработки, верстки и работы с контентом.

Преимущества:

• качественная проверка домашних заданий;
• индивидуальный формат обучения;
• поддержка в составлении резюме и портфолио.

Недостатки:

• поддержка доступна только в будние дни с 5:00 до 13:00 по Москве.

Программа обучения:

• Виды сайтов
• Создание макетов и дизайн
• Наполнение текстом
• HTML и PHP
• Структура страницы
• Компоновка объектов
• Интерактивность

Ознакомиться с полной программой >>>

Еще 16 дополнительных курсов по созданию сайтов

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

• Твой первый сайт (практикум по созданию HTML сайта и его размещению) от Знанио. Обучение созданию сайтов с нуля начинается с основ языка HTML, что включает в себя разбор структуры веб-документа, базовой разметки текста, вставки изображений и гиперссылок. Студенты научатся использовать основные теги HTML для создания простой структуры веб-страницы, что станет хорошей базой для дальнейшего изучения. После освоения HTML курс переходит к стилизации страниц с помощью CSS, где будут изучены такие аспекты, как выбор цветов, шрифтов, добавление фонов и работа с селекторами.
• Создаем сайт, который будет продавать 24/7 от 1PS. Студенты научатся выбирать между сайтом и лендингом, исходя из специфики их бизнеса, а также узнают о современных трендах в дизайне. Особое внимание уделено выбору CMS — системы управления контентом, подходящей для вашего проекта. Важной частью программы является изучение основ веб-аналитики и UX-дизайна, что поможет сделать сайт удобным и эффективным. Тренинг также включает блок по составлению грамотного технического задания (ТЗ) для разработчиков, что ускорит процесс создания сайта.
• Создание сайта с нуля | Полноценная верстка сайта от itProger. Тренинг сфокусирован на создании полного шаблона сайта, с применением вышеуказанных технологий. Участники смогут создать полноценный сайт, который будет адаптироваться под различные устройства, а также научатся добавлять интерактивные элементы с помощью JavaScript и jQuery. Особенность тренинга — практическая работа с проектом, который станет частью портфолио, однако темы, связанные с серверной стороной и базами данных, не рассматриваются.
• Веб-разработчик от Skillbox. Программа построена на основе методики 4C/ID, которая позволяет студентам быстрее усваивать материал и эффективно применять его на практике. Уже через пять дней студенты начинают сдавать свои первые домашние задания, а благодаря новому формату обучения тратят на 23% меньше времени на освоение материала. Курс позволяет добавить в портфолио на 30% больше работ, чем в старом формате, что увеличивает шансы на успешное трудоустройство.
• Веб-разработчик от Eduson Academy. Программа охватывает все основные аспекты, начиная с основ HTML и CSS и заканчивая продвинутыми технологиями, такими как JavaScript, React и основы backend-разработки. Студенты смогут создать несколько проектов для портфолио, которые будут полезны при поиске работы. Преподаватели — эксперты из таких компаний, как Yandex, Mail.ru и Х5 Retail Group, что гарантирует высокий уровень обучения. Eduson Academy активно сотрудничает с крупнейшими работодателями, такими как Газпром, Сбер и РЖД, что повышает шансы на трудоустройство после завершения обучения.
• Веб-разработчик: быстрый старт в профессии от GeekBrains. Тренинг включает создание современных веб-приложений на Python с использованием Django и Flask, а также верстку страниц на HTML и CSS. Важная часть обучения — работа с файлами, обработка исключений и тестирование. Студенты изучат как синхронный, так и асинхронный код, что поможет им адаптироваться к различным задачам в профессиональной среде. Обучение ведут лидеры IT-индустрии, что гарантирует получение актуальных знаний и навыков.
• Веб-разработчик от Skypro. Особенностью уроков является практическая работа с Git и GitHub, что готовит студентов к работе в реальных проектах с использованием современных инструментов разработчика. В процессе обучения также будут изучены React и основы backend-разработки. Студенты работают под руководством наставников и кураторов. Тренинг длится около 10 часов в неделю и завершается получением диплома о профессиональной переподготовке.
• Веб-разработчик с нуля от Бруноям. Учащиеся начнут с основ верстки на HTML и CSS, изучат JavaScript для создания функционала, а также освоят работу с сервером с помощью PHP. В ходе обучения студенты создадут несколько проектов для портфолио, что поможет им стать востребованными специалистами. Для начинающих тренинг станет отличным стартом, позволяя овладеть базовыми навыками и подготовиться к работе в IT-компаниях или агентствах. Более опытные специалисты смогут расширить свои возможности, взяв на себя новые проекты или сменив специализацию.
• Веб-разработчик с нуля от Skillfactory. В программе особое внимание уделяется TypeScript, React и Laravel — навыкам, которые в 2022 году составили 70% запросов на рынке труда. Даже если у вас нет технического бэкграунда, вы сможете успешно пройти обучение благодаря структурированной и доступной программе. Для студентов курс станет отличным стартом, позволяющим уже к окончанию курса найти первую работу в IT-сфере. Помимо теории, вы будете заниматься практическими задачами, что поможет вам уверенно войти в профессию веб-разработчика. Skillfactory предоставляет обучение, которое готовит к высоким стандартам индустрии.
• Web-разработчик от Компьютерной Академии TOP. Программа включает обучение работе с графическими редакторами, такими как Adobe Photoshop, для создания макетов сайтов, а также изучение HTML5 и CSS3 — ключевых инструментов современного веб-дизайна. Вы также научитесь адаптировать верстку под разные браузеры и устройства, что крайне важно для кроссбраузерной совместимости. Академия TOP уверена, что стать веб-разработчиком может каждый, кто готов проявить дисциплину и усердие.
• Web-разработчик на Python от Otus. Django значительно упрощает создание сложных веб-приложений и делает работу над проектами быстрее и эффективнее. Программа подходит для junior-разработчиков и тех, кто хочет углубить знания в Python. Вы изучите синтаксис языка, работу с SQL, HTML и системой контроля версий Git, что позволит вам уверенно управлять проектами. Тренинг также включает в себя практическую работу с базами данных и основами написания поддерживаемого кода, что важно для профессиональной разработки веб-приложений.
• Веб-разработчик от LoftSchool. Программа включает изучение всех ключевых элементов веб-разработки, начиная с основ JavaScript, таких как переменные, функции и объекты, и заканчивая модульным программированием и работой с системами контроля версий, такими как Git. Вы также освоите использование GitHub для размещения своих проектов и работы в команде. Большое внимание уделяется практике, что позволяет вам закрепить знания на реальных проектах и получить необходимый опыт для работы в веб-разработке.
• Веб-разработчик от beONmax. Обучение разработке сайтов проходит полностью дистанционно и включает последовательные видеоуроки, которые охватывают все ключевые этапы создания веб-сайтов и приложений. Оно подходит как для новичков, так и для опытных верстальщиков, благодаря актуальной информации о современных технологиях, включая обновления за 2019 год. Особенностью является то, что в конце вы получите несколько реальных макетов для самостоятельной работы, что позволит закрепить полученные знания на практике.
• Web-разработка от Nordic IT School. В программе обучения акцент сделан на изучение верстки с использованием HTML и CSS, что позволит вам создавать визуально привлекательные и функциональные страницы. Она также охватывает JavaScript, который отвечает за интерактивность сайтов, и PHP — один из главных языков программирования для серверной части. В процессе обучения вы познакомитесь с популярными фреймворками и сопутствующими технологиями.
• Web-программист от центра «Специалист». Программа обучения состоит из шести блоков, каждый из которых постепенно усложняется, начиная с самых основ. Вы начнете с изучения HTML и CSS, перейдете к JavaScript, а затем освоите PHP и работу с базами данных MySQL. Программа отличается большим количеством практических заданий, лабораторных работ и самостоятельного обучения, что помогает усваивать сложный материал эффективно.
• Буткемп: Web3-разработчик от Moscow Coding School. Вы начнете с основ JavaScript, затем освоите такие современные фреймворки, как React, и углубитесь в мир децентрализованных приложений (dApp) на базе блокчейна Ethereum. Тренинг также включает работу с фреймворками Ethers.js, wagmi, Hardhat и Foundry, что даст вам необходимые инструменты для взаимодействия с блокчейном и смарт-контрактами. На протяжении 6 месяцев вы будете учиться онлайн, затрачивая от 10 до 15 часов в неделю, и по завершении обучения сможете создать полноценное приложение с использованием технологий Web3.

Бесплатные курсы по созданию сайтов

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

1. Первые шаги в JavaScript: создаем сайт от Нетологии

Обучение подходит новичкам, которые хотят получить первые практические навыки в работе с языком JavaScript и библиотекой Vue.js, а также научиться взаимодействовать с API. Преподаватели — эксперты из ведущих российских компаний Яндекс, Сбер и Авито. Тренинг также предоставляет поддержку от кураторов, что делает процесс обучения продуктивным.

Главное о курсе:

• изучение JavaScript с нуля;
• практическая работа с Vue.js и API;
• знакомство с платформой Replit.

2. Как создать сайт в Readymag от Нетологии

Преподаватель Янина Рапацкая, UX/UI дизайнер и преподаватель Школы дизайна НИУ ВШЭ, подробно расскажет об особенностях работы с платформой, поделится ключевыми правилами создания качественного веб-дизайна и предложит полезные лайфхаки для самостоятельного изучения. Участники узнают, как сделать свои страницы на Readymag запоминающимися и эффективными для продвижения.

Главное о курсе:

• преподаватель — UX/UI дизайнер из НИУ ВШЭ;
• пошаговое руководство и лайфхаки;
• примеры использования платформы и их разбор.

3. Создай свой первый сайт на HTML и CSS от WebPromoExperts

Программа бесплатного самостоятельного обучения по созданию сайтов с нуля

охватывает все основные этапы: от установки редактора кода до публикации готового сайта в сети. В процессе обучения вы научитесь пользоваться редактором VS Code, работать в Figma и верстать многостраничные сайты с адаптацией под мобильные устройства. Этот тренинг станет идеальным стартом для тех, кто хочет стать профессиональным веб-разработчиком, предложив доступные и простые шаги для создания современного и функционального сайта.

Главное о курсе:

• работа с редактором кода VS Code и графическим редактором Figma;
• создание адаптивного сайта для планшетов и смартфонов;
• оптимизация сайта под Retina и 4K экраны.

4. Создание динамического веб-сайта от Loftschool

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

Главное о курсе:

• обучение основам PHP и JavaScript;
• практика работы с AJAX и базами данных;
• знакомство с формами и их обработкой.

5. Как стать UX/UI-дизайнером: создай свой первый сайт от Нетологии

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

Главное о курсе:

• помощь в определении профессионального пути в UX/UI;
• возможность структурировать знания о задачах UX/UI-дизайна;
• полезен для графических дизайнеров, желающих расширить свои компетенции.

6. Web-программист: с нуля до первых проектов от проекта «Открытое образование»

Вы начнете с изучения основ HTML и CSS, что является основой для верстки веб-страниц, и перейдете к использованию фреймворка Bootstrap для создания адаптивного дизайна. Дальше вы будете изучать создание клиент-серверных приложений с помощью Node.js, Vue.js и PostgreSQL. Такой системный подход к обучению позволит вам получить все необходимые навыки для работы над полноценными веб-проектами.

Главное о курсе:

• основы HTML и CSS;
• верстка с использованием Bootstrap;
• знакомство с Node.js и Vue.js.

7. Веб-программирование от Skillbox

Ведущий тренинга, опытный разработчик Даниил Пилипенко, шаг за шагом познакомит вас с современными веб-технологиями, начиная с основ HTML и заканчивая языками программирования PHP и JavaScript. Вы научитесь верстать простые сайты и поймете, какая из областей — frontend или backend — вам более интересна. Он идеален для тех, кто хочет быстро погрузиться в веб-разработку и получить базовые навыки, необходимые для дальнейшего обучения или работы в этой сфере.

Главное о курсе:

• знакомство с HTML, PHP и JavaScript;
• практика в верстке сайтов;
• определение интересов в frontend или backend программировании.

8. Веб-разработка для начинающих: HTML и CSS от Stepik

Вы узнаете, как работает интернет и как создавать веб-страницы с использованием языков HTML и CSS. Тренинг включает домашние задания и мини-проекты, что позволяет вам самостоятельно практиковаться и проверять свои навыки. Вы также познакомитесь с основными инструментами веб-разработчика, такими как редакторы кода и отладчики, что поможет вам в дальнейшем углубленном изучении веб-технологий.

Главное о курсе:

• изучение HTML и CSS;
• деплой созданных веб-страниц в интернет;
• практические домашние задания и мини-проекты.

9. Знакомство с фронтендом от HTML Academy

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

Главное о курсе:

• практическое изучение HTML, CSS и JavaScript;
• создание интерактивных элементов на страницах;
• знакомство с инструментами разработчика (консоль).

Заключение

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

Мы также создали для вас подборку по схожим темам:

• ТОП-32 курса PHP-разработчиков: бесплатное и платное онлайн-обучение программированию на PHP с нуля
• ТОП-25 курсов 1С программирования: онлайн-обучение для 1С программистов с нуля
• ТОП-40 курсов Javascript: бесплатное и платное онлайн-обучение с нуля для программистов

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

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

Нейроморфный дизайн становится всё более популярным благодаря своей способности предлагать более персонализированный опыт. Концепт основан на изучении человеческого мозга и попытках перенести его принципы работы на ИИ.

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

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

Откуда ноги растут

Благодаря активному развитию AI, ML и BigData, мир увидел появление новых мета-трендов, которые существенно улучшили взаимодействие пользователей с системами. ИИ и МО стали чуть ли не главными инструментами в разработке интерфейсов.

Искусственный интеллект автоматизирует анализ данных о поведении пользователя, выявляя его предпочтения и привычки. Кроме того, ИИ может анализировать контекст использования устройства (геолокация, тип устройства, да даже уровень заряда).

Машинное обучение позволяет разработчикам заранее учитывать возможные действия и реакции пользователей на различные изменения в интерфейсе. Это особенно актуально для игр или образовательных платформ.

BigData даёт целые массивы информации о пользователях и их взаимодействиях с системами. Анализ этих данных позволяет выявлять скрытые закономерности и тренды, которые невозможно заметить при обычных методах обработки информации. Например, адаптивные интерфейсы могут анализировать время использования приложения разными группами пользователей и оптимизировать дизайн под их конкретные нужды: так работает плашка «Включить тёмную тему?» в Яндексе в определённое время суток — так работает автоматическая смена яркости телефона.

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

Нейроморфный дизайн

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

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

Нейроморфный дизайн уже активно используется: например, Siri, Google Assistant, Алиса используют элементы нейроморфного подхода для распознавания речи и адаптации ответа под конкретного пользователя. Они способны анализировать предыдущие запросы и предлагать более «правильные» ответы на основании предыдущих запросов. Помните, как у кого-то Алиса отвечает грубо, у кого-то шутит? Это всё — про нейроморфный дизайн в глобальном смысле.

Ещё концепция используется в системах прогнозирования потребностей пользователей в приложениях для электронной коммерции. Такие системы используют данные о предыдущих покупках и поведении клиента для персонализированных рекомендаций. Пользователь получает не просто список товаров, а именно те предложения, которые максимально соответствуют его интересам. Так работает не только e-comm, но и приложения, которыми мы пользуемся каждый день: Яндекс.Музыка, Spotify, приложения для изучения языков, карты и системы навигации.

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

Биоинформатика

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

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

Нейроморфизм + биоинформатика

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

И это уже работает:

• Приложения для фитнеса используют комбинацию сенсоров для отслеживания физической активности и состояния здоровья. На основе этих данных они предлагают персонализированные советы по тренировкам.
• Некоторые видеоигры адаптируют сложность на основе эмоционального состояния игрока, определяемого через сенсоры.
• Современные автомобили могут анализировать уровень усталости водителя через показатели внимания или реакции, предлагая перерывы или изменяя режимы работы ассистентов. Например, если убрать руки с руля в Tesla, машина автоматически начнёт замедляться и сама припаркуется в разрешённом месте.

Вопросы этики и безопасности

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

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

Биометрические данные уникальны для каждого человека, а их утечка может иметь куда более серьезные последствия по сравнению с паролями или обычными данными аккаунта. Использование таких данных должно быть прозрачным: пользователи должны иметь полное понимание того, какие данные собираются и как они будут использоваться. И если раньше мы не глядя нажимали «Ок» при возникновении плашки «Мы собираем cookie», то в будущем, вероятно, появится плашка «Мы собираем информации о том, как вы глазами просматриваете наш сайт/приложение».

Будущее: новое общество или восстание машин

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

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

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

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

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

• Хороший дизайн вызывает доверие аудитории. Понятная навигация, гармоничная цветовая схема и проработанные детали показывают пользователю, что вы позаботились о его удобстве и положительном опыте уже на самом первом этапе. Это формирует ожидание столь же добросовестной работы после обращения за вашими услугами или товаром.
• Дизайн влияет на конверсию. Чем проще и приятнее оформить заказ на сайте, тем с большей вероятностью пользователь это сделает. Имеют значение количество блоков, размер и расположение кнопок, вид форм для сбора данных, использование отрицательного пространства.
• Дизайн сайта может влиять на его SEO-оптимизацию. Поисковые системы лучше ранжируют страницы с хорошо организованным контентом, понятной навигацией и оптимизированными изображениями. В свою очередь, это привлекает на сайт больше органического трафика.
• Дизайн сайта — важный элемент брендинга. Выбор стиля, шрифтов и цветовой схемы формирует в головах пользователей определенный образ компании.

Почему дизайн должен быть оригинальным

Дизайн — это средство подтолкнуть пользователя к определенному действию: покупке, регистрации, посещению мероприятия.

Задача сайта Apple — продавать гаджеты в высоком ценовом сегменте. Поэтому в центре всего дизайна изображения продукта — крупные, показанные с нескольких сторон 3D-модели новейших телефонов и смарт-часов. Apple не нужно объяснять, кто они и что предлагают — сильный бренд компании говорит сам за себя.

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

• Дизайн должен отражать бренд. Сайт не существует в вакууме — это лишь один из каналов коммуникации бренда с аудиторией. Следовательно, он должен соответствовать бренд-платформе, уникальной для каждой компании и проекта.
• Дизайн должен соответствовать продукту. Хорошо, если можно показать товар лицом, как делает Apple. Но если вы продаете цифровые товары или услуги, придется искать другие визуальные решения. Фотографии, иллюстрации, минималистичные графические элементы — выбор зависит от характера бренда, от ниши, от целевой аудитории. Это справедливо и для подбора цветовой схемы — черный фон магазина детской одежды вряд ли привлечет клиентов и повысит продажи, хотя у Apple он выглядит роскошно и футуристично.
• Дизайн должен соответствовать аудитории. Покупатели люксовых товаров, вчерашние подростки и инженеры в поисках оборудования на производство вряд ли сойдутся во мнении о том, что такое хороший дизайн сайта. Для каждой из этих групп и сотен других принципиально важны будут совершенно разные вещи — это стоит принимать во внимание, работая над дизайном.

Как создать уникальный стиль сайта

Соберите информацию

Прежде чем приступить к разработке дизайна, важно узнать:

1. Кто целевая аудитория сайта? Какие ее потребности закрывает продукт?
2. К какому действию мы хотим привести пользователей сайта?
3. Кто конкуренты заказчика?
4. Какие ограничения на нас накладывает платформа бренда?

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

Определитесь со стилем

Существует множество направлений и стилей веб-дизайна, для которых характерны разные визуальные решения, но общепризнанной классификации пока нет. Перечислим несколько распространенных, с которых можно начать творческий поиск.

Флэт или плоский дизайн

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

Метро или карточный стиль

Минималистичный и современный стиль впервые использовала в интерфейсах своих продуктов компания Microsoft в 2010 году. Его отличительная черта — размещение блоков информации в простых геометрических формах, «на карточках». Как правило, в этом стиле используют простые шрифты без засечек и уделяют внимание анимации. Такой дизайн хорошо смотрится на разных цифровых устройствах.

Минимализм

Ровно то, что написано на упаковке — минимум декоративных элементов, много свободного пространства, 2–3 нейтральных цвета, простота навигации. Ничего лишнего.

Брутализм

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

Неоклассика

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

Рисованный стиль

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

Фестивальный стиль

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

Референсы

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

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

Референсы можно условно разделить на стилевые и функциональные. Первые задают общее направление дизайна: настроение, стиль, цвета, формы. Вторые показывают удачные решения конкретных задач. Функциональным референсом может быть дизайн блока на сайте или расположение кнопки.

Другой подход к классификации референсов — разделение на «референсы для заказчика» и «референсы для себя».

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

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

Где искать референсы для веб-сайтов

Referest — библиотека скриншотов сайтов, мобильных приложений и отдельных UX-элементов.

Made on Tilda — галерея сайтов, сделанных с помощью конструктора.

Made with Readymag — коллекция лучших сайтов, собранных на платформе.

Lapa Ninja — коллекция дизайнерских решений для лендингов.

Siteinspire — витрина веб-сайтов со всего мира.

Landingfolio — галерея посадочных страниц.

Обсудите дизайн с заказчиком

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

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

Как сделать сайт образовательной организации по всем правилам, на примере Московской государственной академии хореографии рассказывает Андрей Свинцов, исполнительный директор Morizo. На официальном сайте МГАХ удалось объединить изящество балета, жесткие образовательные стандарты, более 500 страниц документов и уложить творческие порывы в программную логику.

Общие требования к содержанию, актуальные с 1 сентября 2024

Содержание и структуру сайтов образовательных учреждений — от детских садов до академий — регламентируют Федеральный закон об образовании, два постановления Правительства РФ, один приказ Минобрнауки и два приказа Рособрнадзора, один из них вступил в силу 1 сентября. Здесь нет места вольности. Меню сайта должно содержать разделы:

• Основные сведения,
• Структура и органы управления образовательной организацией,
• Документы,
• Образование,
• Руководство,
• Педагогический состав,
• Материально-техническое обеспечение и оснащенность образовательного процесса.
• Доступная среда,
• Стипендии и меры поддержки обучающихся,
• Платные образовательные услуги,
• Финансово-хозяйственная деятельность,
• Вакантные места для приема (перевода) обучающихся,
• Международное сотрудничество,
• Организация питания в образовательной организации.

Если учреждение работает по федеральным образовательным стандартам, добавляется подраздел «Образовательные стандарты и требования».

Решение — несколько уровней меню

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

МГАХ работает более 250 лет, у академии есть история, стиль и статус. Для ее сайта команда разработчиков выбрала минималистичный дизайн со сдержанными благородными цветами, большим количеством «воздуха» и с четкой, понятной структурой. При этом главная страница во многом напоминает балетную постановку на сцене Большого театра. Есть «вторая линия» — верхнеуровневое меню по всем требования законодательства, «первая линия» — меню для посетителей сайта с полезной информацией, далее «солисты» — видео, анимированный слайдер с фактами об академии и интерактивный блок истории в пределах первых двух скроллов. В качестве «либретто» — быстрые ссылки на самые востребованные страницы сайта, так пользователи в пару кликов находят нужные сведения.

Декорации или визуалы — эффектная, но массивная часть сайта. Для ускорения загрузки страниц разработчики использовали JPEG 2000, JPEG XR и WebP. Такие форматы изображений подгружаются быстрее и потребляют вдвое меньше трафика по сравнению со стандартными PNG и JPEG. Сейчас в зависимости от расположения сервера десктопная загрузка сайта занимает от 0,257 до 1,059 сек.

Требования к обязательной документации

На сайте в открытом доступе размещаются 13 подразделов в разделе «Документы»: устав, свидетельство о государственной аккредитации с приложениями, правила внутреннего трудового распорядка, коллективный договор, результат самообследования (показатели эффективности по всем направлениям деятельности), предписания контролирующих органов, правила приема, режим занятий, формы контроля успеваемости, порядок перевода, приостановления обучения для несовершеннолетних и локальные нормативные акты. Еще более 20 документов могут понадобиться и на других отдельных страницах сайта, все должны быть с электронной подписью. На обновление любых данных отводится не более 10 дней.

Вариант реализации — цифровое хранилище

До модернизации интернет-ресурс МГАХ содержал более 500 страниц. Разработчики отказались от постраничного размещения, радикально изменили архитектуру сайта и создали систему управления большим количеством данных. Теперь все необходимые документы размещены в цифровом хранилище, оттуда их легко привязать к нужному контенту с помощью перекрестных ссылок. Система хранения упростила навигацию на сайте, сократила количество страниц в 2,2 раза. Для учебного заведения было важно, чтобы при замене устаревшего документа на новый, все страницы автоматически начинали ссылаться на обновленный файл. Цифровое хранилище решает и эту задачу.

Обязательные требования по HTML-разметке

Для успешного аккредитационного мониторинга необходима качественная HTML-разметка. Она должна полностью соответствовать методическим рекомендациям и требованиям законодательства, успешным результатом проверки считаются 100%. Специалисты, обновлявшие сайт, проставляли на сайте тэги с атрибутами (itemprop=”addRef”) точно по методическим рекомендациям. В каждом разделе указаны от 2 до 18 таких идентификаторов — по ним система проверяет соответствие требованиям законодательства. Результат автоматического мониторинга составил 100%.

Доступность информации и инклюзивность

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

Наполнение сайта и работа с контентом

В учебных заведениях не всегда есть технические специалисты для работы с сайтом, поэтому управление контентом должно быть интуитивно понятным и быстрым, а значит, нужен удобный инструмент для контент-менеджера. Команда проекта создала для МГАХ новую систему администрирования на базе «1С-Битрикс». У ответственного за сайт сотрудника появился каталог из 64 модулей и 11 справочников, где просто управлять всеми видами информации без знания html. Один и тот же контент при необходимости можно разместить в нескольких разделах одновременно. Для лонгридов разработали специальный конструктор с инфоблоками и шаблонами верстки под фото и видео. Время на администрирование сайта сократилось втрое.

Сайт образовательной организации — это задачка со звездочкой: жесткие требования законодательства, работа с массивом данных, разные целевые аудитории от абитуриентов до проверяющих органов. Девять месяцев непрерывной, сложной работы дали результат: сайт МГАХ получился содержательным, легким и эффектным. Таким, как любят в балете и в сфере образования.

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

В качестве примеров я буду использовать свой сайт на Django.

Если вы хотите перейти с nocode-сайта на самописный, изучите пошаговый гайд по миграции на Python Django.

Что такое margin и padding

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

Большая разница между ними в том, что margin автоматически сворачивается, а padding — нет.

Margin

Чтобы задать внешние отступы со всех сторон, указываем их размер в пикселях (или в других юнитах):

Кстати, вот основные единицы измерения в CSS для повторения:

• px (пиксели): 1px соответствует одному экранному пикселю;
• cm / mm / in: санти- / миллиметры, дюймы;
• em: относительно шрифта родительского элемента. Например, если шрифт родителя 16px, то 2em будет равно 32px;
• rem: относительно шрифта корневого элемента. Если размер корневого шрифта 16px, то 2rem будет равно 32px;
• % (проценты): относительно родительского элемента. Например, если ширина родителя 1000px, то 50% будет 500px;
• vh / vw (viewport height / width): 1vh равен 1% от высоты области просмотра (viewport);
• vmin / vmax: 1vmin / 1vmax равен 1% от меньшего / большего из двух измерений (ширины или высоты) области просмотра.

Отдельные значения для каждой стороны задаются постфиксами top / right / bottom / left:

Центрирование

Чтобы разместить посередине блоковый элемент горизонтально, можно использовать постфиксы left / right:

Перекрытие соседей

Иногда требуется сдвинуть элемент ближе к соседу:

↑ Как меняется положение текстовых блоков, если margin = 0 или < 0.

Padding

Вот основной способ задания внутренних отступов:

Отдельные значения для каждой стороны задаются аналогично: постфиксами top, bottom, right, left. В целом синтаксис почти одинаковый.

Значение padding можно задавать также в процентах относительно ширины родительского элемента, что полезно для адаптивного дизайна.

Почему не работает margin

Убедитесь, что элемент является блочным, поскольку margin «дружит» только с блоками (div, p, h1-6, ul, ol. li, table, header, footer, section, article, nav).

Margin добавляет пространство вне родительского элемента

Решение: дописываем свойство overflow:auto к div’у страницы.

Как увеличить пространство между колонками в таблице?

Внедряем padding-right:

margin дочернего элемента двигает родителя

Обновляем свойства второго:

Заключение

Эти свойства CSS создателям удалось сделать прозрачными и без подводных камней: по статистике, треды на Stack Overflow на эти темы закрываются быстрее других топиков.

На последок: с визуализатором блоков в Chrome Dev Tools вёрстка стилей значительно проще.

Цвета и графика

Веб-дизайн постоянно эволюционирует, отражая тенденции в дизайнерском мире. В то время, как Pantone объявил главный цвет 2024 года — им стал 13-1023 Peach Fuzz, нежный персиковый — в разработке сайтов отмечается тренд на яркие акценты. Яркими тонами выделяют CTA (call to action), важные сообщения, побуждая посетителей остаться на странице и совершить нужное действие. А градиенты повышают привлекательность интерфейсов и элементов фирменного стиля.

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

Дизайн, ориентированный на UX

UX (User Experience) — дизайн взаимодействия с пользователями становится главным фокусом и не планирует отступать от того, чтобы быть в тренде. Эта неизменная тенденция будет актуальна, наверное, всегда. Ведь завладеть вниманием посетителей сайта не так просто, и если на первый взгляд визуально сайт привлекателен, а по факту неудобен, то все усилия напрасны.

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

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

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

Искусственный интеллект — тренд или необходимость?

Повсеместный тренд во всех сферах жизни — использование искусственного интеллекта. ИИ развивается, появляются сервисы и веб-интерфейсы, которые по текстовому запросу рисуют изображения, логотипы и сайты за минуту. Многие считают, что все идет к тому, что ИИ заменит дизайнеров. Но на самом деле пока ИИ способен только помочь повысить эффективность работы.

Искусственный интеллект не умеет работать с большими многостраничными сайтами и интернет-магазинами, не умеет выстраивать логику, делать консистентный и интересный дизайн в фирменном стиле. Пока что все результаты использования искусственного интеллекта либо шаблонные (плагины в Figma), либо неприменимо креативные (Midjourney). Чтобы победить в битве за востребованность с искусственным интеллектом, достаточно следить за развитием ИИ и применять его в части задач для ускорения работы. Например, удаление фона у иллюстрации или создание абстрактного изображения для постов. Даже функция плагина в Figma, про которую выше написано как «шаблонный результат», может помочь быстро сделать прототип для тестирования или презентации заказчику идей по структуре сайта.

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

Автор: Мария Симонова, дизайнер Activica digital production

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

Кто такой графический дизайнер

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

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

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

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

Чем занимается графический дизайнер и какие задачи выполняет

Примеры некоторых задач, которые выполняет графический дизайнер:

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

Пример работы графического дизайнера

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

Задачи, которые выполнял графический дизайнер в этом проекте, включали:

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

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

• Доработка выбранной концепции: после того как компания выбрала одну из предложенных концепций, дизайнер доработал ее, учитывая все пожелания и требования заказчика. Он также создал набор фирменных элементов, таких как визитки, бланки, конверты и т.д., чтобы все они соответствовали новому логотипу и фирменному стилю.

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

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

Какие плюсы и минусы профессии графический дизайнер

Плюсы

• Креативность: дизайнер может проявлять свою творческую натуру и создавать уникальные визуальные образы.
• Широкий спектр задач: профессионал может работать над разнообразными проектами, что дает ему возможность постоянно расти и улучшать свои навыки.
• Удаленная работа: многие специалисты работают удаленно, что позволяет работать из любой точки мира.
• Высокая оплата труда.
• Графический дизайнер может стать фрилансером и работать на себя.

Минусы

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

Какая зарплата у графического дизайнера

Junior графические дизайнеры в России зарабатывают около 50 000 рублей. А специалисты с большим портфолио и опытом могут зарабатывать от 170 000 рублей и больше.

Заработная плата графического дизайнера может варьироваться в зависимости от региона. Например, в Москве и Санкт-Петербурге зарплата может быть выше.

Обучение профессии графического дизайнера на курсе от MDA

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

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

• На курсе вы изучите основные принципы дизайна, работу с цветом, шрифтами, композицией и другими элементами графического дизайна. Вы научитесь создавать логотипы, фирменные стили, упаковку товаров, рекламные материалы и многое другое.

• Обучение в формате онлайн-занятий позволяет вам учиться так, как удобно вам. Вы сможете задавать вопросы преподавателям и получать обратную связь по своим работам.

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

Что будет на программе

• Разработка уникального стиля компании: от первоначального задания до полной реализации.
• Создание брендбука и гайдлайнов: определение визуального кода бренда и паттернов дизайна.
• Управление вниманием через композицию: баланс, динамика, визуальный ритм.
• Создание осмысленного бренда: определение позиционирования и основных атрибутов бренда.
• Работа в дизайн-программах: Illustrator, Photoshop, InDesign, Figma.
• Верстка сложных макетов: использование модульной сетки, иерархии и стилей текста.
• Оформление работ и поиск заказчиков: создание кейсов, упаковка портфеля, работа на фрилансе и поиск заказчика.
• Презентация своего проекта: защита перед клиентом, обоснование концепции.

Обучают по образовательной лицензии.

Это значит, что вы можете:

• вернуть 13% стоимости программы, оформив налоговый вычет,
• получить сертификат об успешном окончании программы.

Государственная лицензия № Л035-01298-77/00769377.

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

Реклама ООО «Стратеджик Инсайтс», LjN8KBk4h

Сегодня мы немного окунемся в историю введения и развития CSS Grid и Flexbox, а также рассмотрим, как эти технологии влияют на современные методы создания веб-макетов, какие у них преимущества и недостатки, и самое главное – какие технологии их заменят в будущем.

Немного истории

В начале 2000-х, когда веб-разработка ещё только набирала обороты, основными инструментами для создания макетов были таблицы и фреймы. Однако, к 2010 году использование таблиц для макетирования упало с 90% до менее чем 30%, уступая место более гибким методам, таким как позиционирование на основе float.

Однако, эти методы имели свои недостатки. Таблицы ограничивали творческие возможности дизайнеров и усложняли поддержку, а float-элементы, хотя и предоставляли больше гибкости, создавали сложности с адаптивным дизайном и порядком элементов. Это приводило к увеличению времени разработки и сложности кода. Исследование, проведенное в 2014 году, показало, что примерно 50% времени разработки веб-страницы тратилось именно на борьбу с ограничениями макета.

Flexbox и CSS Grid, две революционные технологии в мире веб-дизайна, были разработаны и внедрены разными людьми и организациями в разное время.

Развитие CSS и введение Flexbox в 2009 году кардинально изменили подход к созданию макетов. Flexbox предложил простой и мощный способ управления макетом, особенно в плане выравнивания и распределения пространства между элементами.

Flexbox был официально внедрен в рабочий черновик спецификации CSS в 2009 году World Wide Web Consortium (W3C). Первоначальная спецификация была написана Табом Аткинсом Jr. (работал в Google) и другими разработчиками.

Начиная с 2011 года, основные браузеры начали внедрять поддержку Flexbox, хотя полная поддержка во всех основных браузерах была достигнута только к 2015 году.

Работа над CSS Grid началась в 2012 году как способ устранения ограничений Flexbox в создании двумерных макетов. Идея состояла в том, чтобы предоставить более эффективный и гибкий способ для создания сложных макетов с несколькими строками и колонками.

CSS Grid был официально внедрен в спецификацию CSS W3C в 2017 году. Одним из ключевых разработчиков спецификации CSS Grid является Рейчел Эндрю (известная в профессиональных кругах эксперт по веб-разработке).

К 2017 году большинство основных браузеров обеспечили поддержку CSS Grid, что способствовало его широкому применению в веб-разработке.

Взгляд на статистику использования этих технологий показывает их растущую популярность. Согласно данным из отчета “State of CSS 2023”, более 80% веб-разработчиков регулярно используют Flexbox, а CSS Grid используют уже 70%.

Основные принципы и возможностиFlexbox

Flexbox (официальное название – CSS Flexible Box Layout) работает по принципу контейнера и элементов. Разработчики определяют flex-контейнер, внутри которого дочерние элементы (flex-элементы) могут быть гибко распределены по основным и поперечным осям.

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

Flexbox обеспечивает отличную поддержку адаптивного дизайна. С его помощью можно создавать макеты, которые легко адаптируются под различные размеры экранов и устройств, что особенно важно, учитывая, что по данным Statista, в 2023 году доля мобильного трафика в интернете составила около 54%.

Частые примеры использованияFlexbox

• Навигационные меню. Flexbox идеально подходит для создания горизонтальных или вертикальных навигационных меню, которые нуждаются в центрировании элементов или распределении пространства между ними (к примеру, можно посмотреть меню в шапке на моем сайте).
• Карточки продуктов. В электронной коммерции Flexbox используется для выравнивания карточек продуктов, гарантируя, что все карточки имеют одинаковый размер и порядок, независимо от количества контента внутри каждой карточки.
• Футеры и заголовки. Создание универсальных футеров и заголовков, которые требуют распределения элементов и выравнивания, также является сильной стороной Flexbox.

Основные характеристики ивозможности CSS Grid

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

CSS Grid ввел концепцию фракционных единиц (fr), позволяющих разделить доступное пространство на доли, что значительно упрощает создание гибких макетов, адаптирующихся под разные размеры экрана.

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

Примеры использования CSS Grid

• Онлайн-галереи и портфолио. CSS Grid позволяет легко создавать сложные галереи изображений с различными размерами элементов, обеспечивая гармоничное и эстетически привлекательное распределение контента. Например, для фотографа или художника это означает возможность создать портфолио, где работы разных размеров и форматов смотрятся естественно и гармонично.
• Новостные сайты и блоги. С использованием CSS Grid, можно создавать сложные макеты с множеством столбцов и строк, которые идеально подходят для размещения разнообразного контента на новостных сайтах. Например, на главной странице новостного сайта можно удобно расположить статьи, рекламные блоки, видео и анонсы мероприятий, используя различные шаблонные области для каждого типа контента.
• Электронная коммерция. Интернет-магазины, использующие CSS Grid, могут создавать более гибкие и адаптивные страницы продуктов. Например, макет страницы может автоматически корректироваться в зависимости от количества и размера продуктов, обеспечивая лучший пользовательский опыт и удобство навигации.

Прошлое vs реальность

Чтобы вы примерно поняли, насколько Flexbox и Grid упростили работу верстальщиков, представим себе обычный листинг интернет-магазина.

Что делает разработчик сейчас

1. CSS Grid для основной структуры. Страницу можно разделить на несколько основных областей (шапка, основное содержание, боковая панель, подвал) с помощью CSS Grid. Каждая область задается как сеточная ячейка в двумерной сетке, что позволяет легко управлять расположением и размерами этих областей.
2. Flexbox для внутреннего контента. Внутри каждой секции можно использовать Flexbox для выравнивания и распределения элементов, таких как список товаров. Это позволяет элементам гибко адаптироваться к разным размерам экранов, обеспечивая отличный UX как на мобильных устройствах, так и на десктопах.

Как делали олды

1. Ранее для создания основной структуры страницы часто использовались таблицы. Это приводило к неупорядоченному и чрезмерно сложному HTML-коду, ограничивало гибкость дизайна и затрудняло реализацию адаптивных макетов.
2. Чтобы выстроить товары в ряды и колонки, разработчики использовали float. Этот метод требовал дополнительного кода для корректного расположения элементов и часто вызывал проблемы с переполнением контента, требуя дополнительных усилий для поддержания структуры макета.

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

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

Конечно, верстальщики пытались находить выходы из ситуаций (к примеру, использовали clearfix hack), но кода тогда ставало чуть ли не в 2 раза больше.

Взгляд в будущее

Можно с уверенностью говорить, что CSS Grid и Flexbox будут оставаться ведущими инструментами для создания макетов в ближайшие несколько лет. Это обусловлено их мощностью, гибкостью и широкой поддержкой современными браузерами.

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

• Развитие CSS-стандартов. CSS продолжает развиваться, и в будущем мы можем ожидать новых свойств и возможностей, которые еще больше упростят и улучшат процесс создания макетов. Например, новые формы CSS-логики (например, CSS Container Queries) уже обсуждаются и разрабатываются, что позволит создавать еще более адаптивные и реактивные макеты.
• Улучшения в области доступности и производительности. Будущее веб-дизайна также будет сосредоточено на улучшении доступности и производительности веб-страниц. Это приведет к появлению новых стандартов, которые будут влиять на то, как мы создаем макеты.
• Искусственный интеллект и автоматизация. Развитие ИИ и машинного обучения приведет к появлению инструментов, которые автоматически оптимизируют макеты или предлагают улучшения, основанные на анализе пользовательского поведения и доступности.

• Веб-компоненты и модульный дизайн. Продолжающаяся популяризация веб-компонентов и стремление к модульности в дизайне 100% повлияют на подходы к макетированию. Возможно, будущее лежит в еще более декомпозированных и повторно используемых макетах.
• Технологии виртуальной и дополненной реальности. Развитие VR и AR создаст новые возможности и вызовы для веб-дизайнеров и разработчиков. Это потребует новых подходов к верстке, которые учитывают трехмерное пространство и взаимодействие пользователя.

Дмитрий Евсеенков

Около 4.5% населения Земли имеют особенности в восприятии цветов.

Около 8% мужского населения имеют разные типы дальтонизма (против 0.5% женского населения с дальтонизмом).

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

Механизм цветового зрения

Цветочувствительный орган зрения – это сетчатка глаза.

Сетчатка состоит из палочек и колбочек.

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

Колбочки могут воспринимать цвета при ярком освещении. Разные типы колбочек ответственны за свой диапазон цвета.

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

Дальтонизм, или цветовая слепота, возникает тогда, когда чувствительность колбочек определенного цвета снижена или отсутствует.

Кроме этого, если нарушена работа палочек, то говорят о “куриной слепоте” – человек плохо видит в условиях низкой освещенности.

Типы цветовой слепоты

Самый распространенный тип цветовой слепоты – это дейтеранопия, или нечувствительность к зеленому цвету. Несколько менее распространена нечувствительность к красному (протанопия,) и очень редко встречается сине-желтая слепота – тританопия.

Рассмотрим, как люди с каждым типом цветовой слепоты видят мир, на примере красочной картинки:

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

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

Протанопия (нечувствительность к красному): низкая чувствительность к цветам красных оттенков. Зеленые колбочки в некоторой мере чувствительны к красным оттенкам, но сильно уступают по этому параметру красным колбочкам; у людей же с протанопией снижена или отсутствует именно чувствительность красных колбочек к красному. Поскольку красный цвет находится на границе видимого спектра, то красные оттенки могут восприниматься людьми с протанопией как темные и менее насыщенные, чем они есть на самом деле.

Тританопия (нечувствительность к синему): это нарушение часто сопровождается куриной слепотой. Синий цвет воспринимается не только синими колбочками, но и палочками, у которых в дневном ярком свете пик чувствительности смещается в фиолетовую область. Люди с тританопией имеют генетическую аномалию, которая нарушает синтез пигментов, ответственных за чувствительность к синему и очень часто – также и за сумеречное зрение. Люди с тританопией имеют трудности не только с различием синего и зеленого цветов, но и очень часто желтого, красный могут воспринимать как более темный, а синие и фиолетовые оттенки – как темные или серые.

Ахроматопсия: полная цветовая слепота. Бывает палочковая (отсутствуют колбочки) и колбочковая (разные цвета воспринимаются как один цветовой тон, фоторецепторы не способны определить длину волны и интенсивность сигнала). В случае палочковой ахроматопсии зрение имеет повышенную чувствительность к свету. Палочки имеют высокую чувствительность и отвечают за сумеречное зрение, поэтому воспринимаемая картинка нередко “засвечена”.

Интересный факт! Пигмент, ответственный за сумеречное зрение, – родопсин – находится в палочках.

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

Родопсин в палочках также связан с восприятием синего цвета: при дневном освещении максимум его чувствительности приходится на фиолетовую область. Поэтому тританопия (слепота к синему цвету) очень часто сопровождается куриной слепотой, так как нарушен синтез родопсина.

Как дальтоники видят окружающий мир

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

Кроме этого, существуют и представители животного мира – тетрахроматы: некоторые виды птиц и пчел также чувствительны к ультрафиолетовому спектру световых волн.

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

Вернемся к дальтонизму: такая мутация как дейтеранопия (сниженная чувствительность к зеленому) встречается нередко, в то время как наше взаимодействие с окружающим миром очень часто построено на том, что мы должны уметь различать красный и зеленый цвета.

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

Рассмотрим несколько примеров того, как дальтоники видят привычные многим интерфейсы:

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

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

3. Распространенный паттерн – использование зеленого, желтого и красного цветов – на самом деле непонятен для дальтоников:

4. Цветовая дифференциация веток метро не всегда понятна дальтоникам:

Стандарты доступности

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

• сниженная острота зрения,
• полное отсутствие зрения,
• сниженная мобильность,
• сниженная острота слуха,
• сниженное внимание (например, при вождении автомобиля).

Один из сводов рекомендаций по проектированию доступных интерфейсов – это WCAG (Web Content Accessibility Guidelines), в этом своде содержатся конкретные рекомендации по созданию доступных интерфейсов, а также стандартизированы различные уровни доступности:

А – минимальное соответствие стандартам: интерфейс визуально различим, действия, доступные в интерфейсе, явно обозначены.

АА – среднее соответствие стандартам: достаточная контрастность для людей с особенностями цветового восприятия, поддержка вспомогательных технологий (голосовые помощники, диктовка и т.п.).

ААА – максимальное соответствие стандартам доступности: высокая контрастность и читаемость, полная поддержка цветовой слепоты и особенностей цветового восприятия, наилучшая доступность интерфейсов для вспомогательных технологий и ассистентов.

Хорошие практики проектирования интерфейсов

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

Рассмотрим несколько хороших практик, инструментов и паттернов проектирования:

1. Проверять интерфейсы на симуляторах цветовой слепоты

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

Также есть плагины для Figma, с помощью которых можно проверить макеты на этапе их разработки.

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

2. Проверять контраст и читаемость текста

Слишком мелкий или неконтрастный текст сложно читать.

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

Проверка на контрастность и читаемость текста и элементов интерфейса будет не лишней в любом случае. Сделать это можно с помощью сервиса.

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

Выше у нас уже фигурировали скрины приложения для мониторинга качества воздуха – проверив его интерфейс в этом сервисе, мы видим, что он слабо контрастен даже для людей с полноценным зрением:

3. Избегать определенных цветовых сочетаний

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

4. Использовать текстовые подсказки в обозначении цветов

Дальтоники не оценят возможность выбирать цвет одежды в интернет-магазине только по палитре цветов: многие цвета выглядят одинаково или слабо различимо.

Хорошая практика в этом случае – использовать также текстовые подсказки для обозначения цветов.

5. Использовать не только цветовую индикацию, но и иконки, текстуры

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

6. Проверять, что интерфейс различим и контрастен в черно-белом варианте

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

Заключение

Особенности цветового восприятия – врожденные. Люди с такими особенностями не знают, как видят мир обычные люди, поэтому не могут объяснить, что именно они не очень хорошо видят.

Внедрение практик проектирования доступных интерфейсов улучшает общий пользовательский опыт, делая системы интуитивно более понятными и эффективными для разнообразной аудитории.

Что почитать:

1. Как видит мир дальтоник
2. Доступность: улучшаем пользовательский опыт для людей с нарушением цветового восприятия

Веб-дизайнер Илья Пронин в колонке для 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 развивается быстрее, чем когда-либо. Новые функции, появившиеся в нашем распоряжении за несколько лет с момента появления Flexbox и Grid (и те, которых мы ждем в будущем), меняют и способы написания CSS. В этой статье Geoff Graham рассказывает, какие нововведения оказали самое большое влияние на его текущие методы работы с CSS, а какие не изменили ничего (по крайней мере, пока).

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

Но так ли уж сильно все эти изобретения отразились на способе, которым вы пишете CSS? Новые функции, безусловно, повлияли на то, как я пишу CSS сегодня, но, возможно, не так радикально, как я ожидал.

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

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

Позвольте мне перечислить эти перемены.

Все больше и больше контейнерных запросов (Container Queries)

Скажу так: мне никогда не нравилось писать медиавыражения для адаптивных макетов. Контент по-разному реагирует на ширину области просмотра в зависимости от компонента, в котором размещен. А балансировка контента в одном компоненте всегда приводит к балансировке контента и в других компонентах, вызывая путаницу медиавыражений в, казалось бы, произвольных точках останова. Вложение медиавыражений в селектор с помощью Sass сделало это более приемлемым, но не настолько, чтобы мне действительно “нравилось” каждый раз переписывать и изменять существующие запросы, когда мне передают новый дизайн с изменениями в пользовательском интерфейсе.

Контейнерные запросы (Container Queries) – это именно то, что мне нужно. Теперь я могу ограничивать дочерние элементы контейнера и полагаться на его размер, чтобы определить, когда происходит сдвиг макета, не обращая внимания на другие окружающие компоненты.

Еще одна вещь, которая мне нравится в контейнерных запросах, – это их ‘CSS-подобие’. Определение контейнера непосредственно в селекторе соответствует естественному синтаксису свойств и значений и помогает мне избежать необходимости предварительно вычислять математические параметры для определения точек разрыва.

Я всё ещё использую медиавыражения для создания адаптивных макетов, но обычно оставляю их для ‘больших’ макетов, составленных из контейнеров. Точки разрыва более предсказуемы (и на самом деле можно более явно нацеливаться на конкретные устройства), когда нет необходимости учитывать, что происходит внутри каждого отдельного контейнера.

Подробнее о контейнейрных запросах:

1. CSS Containment Module Level 3 (W3C)
2. “A Primer On CSS Container Queries”, Stephanie Eckles
3. “CSS Container Queries: Use-Cases And Migration Strategies”, Adrian Bece
4. “A Cornucopia of Container Queries”, Geoff Graham

Группировка стилей в слоях

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

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

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

Подробнее о каскадных слоях:

1. “A Complete Guide to CSS Cascade Layers”, Miriam Suzanne
2. “Getting Started With CSS Cascade Layers”, Stephanie Eckles
3. CSS Cascading and Inheritance Level 5 (W3C)
4. “Cascade Layers Are Coming To Your Browser”, Una Kravets

:is() и :where()

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

Почему? Потому что в :is() специфичность определяется не основным селектором, а наиболее конкретным селектором в списке аргументов.

Селектор .list дает первому набору правил более высокий балл специфичности, что означает, что он «превосходит» второй набор правил, даже если первый набор правил находится выше в каскаде.

С другой стороны, особенностью :where() является старый нулевой балл, поэтому он не добавляется к общему баллу любого селектора, на котором находится. На самом деле не имеет значения, что находится в его аргументе. По той же причине, по которой я использую :is() для увеличения специфичности, я использую :where() для ее уменьшения. Мне нравится, когда специфичность в целом низкая, потому что я все равно хочу, чтобы каскад работал с минимальным сопротивлением, и :where() позволяет добиться этого, особенно при определении глобальных стилей.

Прекрасным примером является обертывание :not() внутри :where(), чтобы :not() не повышал специфичность:

Взятые вместе, :is() и :where() не только помогают управлять специфичностью, но и уменьшают когнитивную нагрузку на ‘именование’ вещей.

Я из тех людей, которые до сих пор любят синтаксис BEM, но именование – как раз одна из самых сложных в нем вещей. Часто оказываюсь в ситуации, когда не хватает подходящих имен, чтобы описать функцию элемента и его отношение к окружающим элементам. Специфичные возможности :is() и :where() позволяют мне реже зависеть от замысловатых имен классов и больше использовать селекторы элементов вместо этого.

Подробнее о :is() И :where()

1. “CSS-Tricks Almanac: :is()”, Geoff Graham
2. “CSS-Tricks Almanac: :where()”, Chris Coyier
3. “Is “is” Useful?”, Chris Coyier
4. “Using The Specificity Of :where() As A CSS Reset”, Mojtaba Seyedi

Новый синтаксис функции цвета

Обновленный синтаксис для цветовых функций, такой как rgb() и hsl() (а также развивающийся oklch() и oklab()), не является прямо таки уж сногсшибательным новшеством, но действительно упрощает определение значений цветов.

Во-первых, мне больше не приходится прибегать к rgba() или hsla(), когда мне нужно значение альфа-канала. Фактически я всегда использовал их, независимо от того, нужен ли мне альфа-канал, потому что не хотел тратить время на выбор версии.

Да, нужно дополнительно прописывать a, / и 1, зато не приходится думать о том, какую функцию использовать.

Но обновленный цветовой синтаксис похож на медоеда: ему все равно. Его не волнует лишняя буква a в имени функции. Его даже запятые не волнуют.

Так что да, это определенно изменило мой способ написания цветов в CSS. А новые цветовые пространства oklch() и oklab(), которые теперь полностью поддерживаются браузерами, я жду с нетерпением!

Подробнее о возможностях CSS color 4:

1. CSS Color Module Level 4 (W3C)
2. “A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH”, Michelle Barker
3. “Using HSL Colors In CSS”, Ahmad Shadeed
4. “A Whistle-Stop Tour Of 4 New CSS Color Features”, Chris Coyier

Выявление пользовательских предпочтений

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

Однако самое сильное влияние на мой CSS оказал запрос prefers-reduced-motion. Это первое, о чем я думаю, когда проект включает анимации и переходы с использованием CSS. Мне нравится идея того, что уменьшение движения не означает полное отключение анимации, поэтому я часто использую prefers-reduced-motion, чтобы замедлить всё, когда это необходимо. Это означает, что у меня есть что-то подобное (обычно в слое каскада для базовых стилей):

Подробнее о запросах пользовательских предпочтений:

1. “Respecting Users’ Motion Preferences”, Michelle Barker
2. “Designing With Reduced Motion For Motion Sensitivities”, Val Head
3. “A DRY Approach To Color Themes In CSS”, Christopher Kirk-Nielsen
4. “A Complete Guide to Dark Mode on the Web”, Adhuham

Определение цветовых палитр

Я использовал переменные для определения и назначения цветов с тех пор, как начал работать с Sass, и был в восторге, когда появились пользовательские свойства CSS. Я давал цветам в палитре общие имена, прежде чем передавать их переменным с более функциональными именами.

Я до сих пор так делаю, но теперь я абстрагирую вещи еще дальше, используя цветовые функции в проектах с большими палитрами:

Небольшой перебор с абстрагированием? Возможно. Но для проектов, в которых может быть десять разных оттенков красного, оранжевого, желтого и так далее, приятно иметь такой уровень тонкой настройки для манипуляций с ними. Возможно, больше контроля дает color-mix(), который я просто еще не исследовал.

Подробнее об определении цветовых палитр

1. “Simplify Your Color Palette With CSS Color-Mix()”, Daniel Yuschick
2. “How To Configure Application Color Schemes With CSS Custom Properties”, Artur Basak
3. “CSS Color Manipulation Functions, Please Save Us From The CSS Custom Property Gotcha”, Chris Coyier

Что я не использую

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

CSS-Вложение

Я очень его жду, потому что это может стать переломным моментом, когда я полностью откажусь от Sass в пользу ванильного CSS. На момент написания этой статьи Firefox ожидает его поддержки, так что это может быть уже не за горами.

Стилевые запросы

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

:has()

Я определенно буду использовать это, когда появится поддержка в Firefox. До тех пор я просто поигрался с этим сам и наслаждался тем, как экспериментируют другие. Без полной поддержки, однако, влияния на способ, которым я пишу CSS, это не оказало. Но ожидаю, что это произойдет, потому что возможность выбирать родительский элемент на основе содержащегося в нем дочернего элемента не может быть плохой идеей, правда?

Динамические единицы просмотра

Начиная с того момента, когда они получили широкую поддержку в конце 2022 года, я начал внедрять их в свои стили. Как и в случае с запросами стиля, вижу ограниченное применение — особенно при установке элементов на полную высоту на мобильном устройстве. Так что вместо того, чтобы использовать height: 100vh, я все чаще пишу height: 100dvh. Думаю, это повлияло на то, как я пишу CSS, пусть и незначительно.

Синтаксис диапазона медиавыражений

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

Цветовые пространства OKLCH и OKLAB

Функция oklch() определенно станет моей основной функцией для работы с цветами. Она получила широкую поддержку в марте этого года, и у меня было всего несколько месяцев на ее изучение, и пока нет проектов, в которых можно было бы ее использовать. Но с течением времени я ожидаю, что она станет самым популярным способом определения цветов в моем CSS.

Единственная проблема, которую я вижу, касается того, что oklch() несовместим с другой интересной для меня функцией цветов, а именно…

color()

Она теперь имеет широкую поддержку, начиная с мая 2023 года! Это слишком ново, чтобы немедленно использовать его в моем повседневном CSS, но можно быть уверенным, что это произойдет. Возможность работать с любым цветовым пространством, будь то sRGB, Display P3 или Rec2020, намного удобнее, чем использовать конкретные функции цвета, по крайней мере для цветов в цветовых пространствах с каналами RGB (поэтому color() несовместима с oklch() и другими цветовыми пространствами, не являющимися RGB).

Я не в восторге от значений RGB, потому что их трудно понять, в отличие, от HSL. Уверен, что в большинстве случаев всё равно буду использовать oklch() или hsl() именно по этой причине. Жаль, что мы не можем делать что-то подобное:

Вместо этого мы должны сделать так:

The confusing thing about that is it’s not like Display P3 has its own function like OKLCH:

Мы вынуждены использовать color() для подключения к Display P3. Это противоречит OKLCH/OKLAB, где мы вынуждены использовать эти конкретные функции.

Возможно, однажды у нас появится глобальная функция color(), которая будет поддерживать их все! А до тех пор мой CSS будет использовать как color(), так и специальные функции, такие как oklch(), и решать, какая из них лучше всего подходит для того, над чем я работаю.

Также добавлю в эту корзину функцию color-mix(), поскольку она получила полную поддержку одновременно с функцией color(). Я пока не использую ее регулярно, но обязательно поиграю с ней – вероятно, для создания цветовых палитр.

Почетные упоминания

Было бы настоящим подвигом прокомментировать каждую новую функцию CSS, появившуюся за последние пять лет или около того. Когда речь идет о функциях, которые я не использую в повседневной работе, лейтмотивом звучит, что они слишком новы или им не хватает поддержки браузера. Это не означает, что я не буду их использовать (вероятно, буду!), но пока что всего лишь наблюдаю за ними с интересом или просто весело провожу время, экспериментируя с ними.

Сюда включаются:

• тригонометрические функции;
• положение якоря;
• анимации, связанные с прокруткой;
• initial-letter;
• и ;
• переходы между видами;
• ограниченные стили.

А вы? Вы ведь, наверное, сейчас сами используете CSS не так, как пять лет назад, верно? Меняете ли вы свой подход к работе с каскадом? Пишете ли больше обычного CSS, без использования препроцессоров? А как насчет типографии, контроля за межстрочным интервалом и масштабом? Расскажите мне или, лучше, продемонстрируйте, как в настоящее время вы используете CSS.

Зачем понадобились единицы svh, lvh и dvh

Единицы области просмотра были введены в CSS аж в 2012 году, и с тех пор почти ничего в стандартах изменилось. Для того, чтобы создать адаптивный дизайн, мы использовали единицы измерения vh, vw, vmin, vmax.

1. vh (Viewport Height) представляет процент от высоты видимой области (viewport). Например, если установить свойству height элемента значение 50vh, то этот элемент будет занимать 50% высоты видимой области страницы.
2. vw (Viewport Width) представляет процент от ширины видимой области (viewport). Например, если установить свойству width элемента значение 25vw, то этот элемент будет занимать 25% ширины видимой области страницы.
3. vmin (Viewport Minimum) использует наименьшее значение между высотой и шириной видимой области. Например, если высота видимой области меньше ширины, то 1vmin будет эквивалентно 1% высоты видимой области.
4. vmax (Viewport Maximum) использует наибольшее значение между высотой и шириной видимой области. Например, если высота видимой области больше ширины, то 1vmax будет эквивалентно 1% высоты видимой области.

Зато за эти 11 лет сильно изменились интерфейсы: единицы измерения vh, vw, vmin, vmax не учитывали адресные строки на мобильном устройстве, которые отличаются в разных браузерах.

К примеру, в Safari адресная строка располагается внизу окна, а под ней находятся кнопки навигации. В то же время в мобильной версии Chrome внизу окна располагаются кнопки навигации, а адресная строка висит сверху.

Из за этой разницы в интерфейсах возникали трудности в верстке. Если мы используем 100vh, элементы сайта сверстаются по высоте окна, не учитывая интерфейс браузера.

Допустим, вам нужно сверстать кнопку, которая попросит пользователя принять пользовательское соглашение. Используя vh, вы легко могли попасть в ситуацию, когда ваша кнопка скрывается за поисковой строкой.

Чтобы решить эту проблему, в CSS ввели новые единицы измерения. Это svh, lvh и dvh.

Что такое svh, lvh, dvh

Вот, что значат новые единицы измерения:

1. svh представляет высоту области просмотра, когда пользовательский интерфейс адресной строки еще не уменьшил свой размер. svh отвечает за то содержимое страницы, которое вы будете видеть, когда интерфейс адресной строки растянут до максимума.
2. lvh представляет высоту области просмотра после того, как пользовательский интерфейс адресной строки уменьшил свой размер. lvh отвечает за то содержимое страницы, когда пользовательский интерфейс сжат до минимума.
3. dvh использует любое из значений svh или lvh в зависимости от того, уменьшен ли интерфейс адресной строки. dvh просчитывает переходные состояния между максимальным и минимальным размером UI в браузере.

svh, lvh и dvh поддерживаются всеми распространенными браузерами.

О том, как новые единицы измерения решают проблему vh, хорошо рассказал Александр Ламков в своем блоге на YouTube:

Заключение

Надеемся, svh, lvh и dvh значительно облегчат вашу работу. Если вы уже внедрили новые единицы измерения в свои продукты, расскажите о впечатлениях! :)

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

Атомарный веб-дизайн (Atomic Design) – сравнительно новый подход к дизайну интерфейсов, который позволяет дизайнерам и разработчикам структурировать и организовывать элементы дизайна на самом базовом уровне. Он помогает создавать гибкие, масштабируемые интерфейсы, доступные для всех пользователей независимо от их устройств или предпочтений.

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

• Фокус на задачах: атомарный дизайн ориентирован на решение конкретных задач и удовлетворение потребностей пользователей. Важно определить, какие задачи стоят перед продуктом и как он будет использоваться.
• Простота и ясность: стремление, соответственно, к простоте и ясности и уход от сложных и запутанных интерфейсов. Каждый элемент дизайна должен быть понятным, легко заменяемым и функциональным.
• Гибкость и адаптивность: продукт может адаптироваться к различным условиям использования и потребностям пользователей.
• Эффективность и производительность: создание продуктов, которые работают быстро и эффективно, используя минимальное количество ресурсов.

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

Все начинается с малого, а именно с атомов. Атомы – основные элементы, на которых строится интерфейс: форма кнопок, шрифты, заголовки, система отступов, сетка и т.п. Они должны соответствовать основе “Простота и ясность”. Быть легкими в восприятии, понятными и легко заменяемыми при необходимости.

Далее из атомов мы создаем молекулы. Это уже не просто детали интерфейса, а единый работающий механизм. Молекулы – это полноценные элементы UI-дизайна, с которыми мы можем в дальнейшем строить страницы. Например, кнопка.

Из молекул, в свою очередь, создаются организмы – это уже крупные части дизайна интерфейсов, сочетание атомов и молекул вместе. На этой стадии становится понятно, как будет выглядеть интерфейс. Например, это может быть header или карточка товара.

Далее – шаблоны. Это несколько организмов, собранных в один дизайн. Например, мы берем поисковую строку, блок социальных сетей, фильтры, карточки и меню. Все это складывается в прототип, на основе которого можно выстроить каркас HTML.

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

Может показаться, что UI-кит и есть атомарный дизайн, но это не так. С виду они похожи, но имеют совершенно разные цели.

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

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

В целом, атомарный дизайн – это отличный подход к созданию эффективных и красивых интерфейсов. Он позволяет создавать уникальные и функциональные элементы, которые вместе образуют гармоничное целое. Это работа с системой изнутри, а не поверхностный дизайн. Думаю, благодаря этой методологии можно создавать детальные и стильные интерфейсы, которые будут очень гибки и понятны для пользователя. Если вы еще не пробовали этот подход, рекомендую вам поэкспериментировать с внедрением его в своих проектах.

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

Этапы создания интерфейса

1. Исследование. Его проводят аналитики или менеджеры проектов. Они могут привлекать дизайнеров, но из-за ограниченности ресурсов делают это не так часто. Этот этап позволяет понять, какие проблемы и задачи должен решить корпоративный сервис, а после — сформулировать гипотезы, каким должен быть интерфейс и его наполнение. Важно изучить бизнес-процессы компании и учесть потребности различных групп пользователей: администраторы, менеджеры, сотрудники.
2. Проектирование. Далее дизайнеры работают с пользовательскими сценариями и выделенными на предыдущем этапе гипотезами, задачами и проблемами. Они создают эскизы и элементы дизайна, согласовывают их с заказчиком и готовят макеты и прототипы.
3. Разработка. Когда макеты утвердил заказчик, они передаются разработчикам. На этом этапе концепция становится реальным продуктом: создается код, интегрируется дизайн и разрабатываются необходимые функции.
4. Тестирование. Тесты позволяют выявить проблемы и недоработки, внести необходимые коррективы. Кроме выявления багов, на этом этапе важно провести UX-тестирование на реальных пользователях, чтобы оценить удобство сервиса. Как правило, если исследование и проектирование проведены качественно, то не потребуется много доработок.
5. Внедрение. Далее сервис интегрируется в корпоративные системы или публикуется для доступа сотрудников. Необходимо обеспечить плавный переход для пользователей, предоставить необходимую поддержку и онбординг: понятную документацию, инструкции, обучающие вебинары.
6. Оценка и поддержка проекта. Поддержка проекта — это непрерывный процесс, поэтому после запуска решения важно собирать обратную связь от пользователей, данные об использовании и эффективности сервиса. В ходе эксплуатации, рано или поздно, будут возникать вопросы и баги. Важно решать эти проблемы, следить за работой сервиса и обновлять интерфейс в соответствии с изменяющимися потребностями пользователей и бизнеса.

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

Принципы проектирования пользовательского интерфейса для корпоративных сервисов

Простота и интуитивность

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

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

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

Согласованность и единообразие

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

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

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

Гибкость и настраиваемость

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

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

Эффективность и производительность

При создании интерфейса важно соблюдать баланс между эффективностью и производительностью. Часто в компаниях используются старые технологии, поэтому перед проектированием интерфейса необходимо оценить возможности цифровой инфраструктуры: хватит ли мощностей на реализацию всей задуманной функциональности. Иногда стоит отказаться от функций или визуальных эффектов, которые не нужны при использовании сервиса и тормозят его работу.

Более того, в крупных компаниях результаты производительности во многом связаны с требованиями безопасности. Например, необходимостью использования конкретного браузера или VPN, которые замедляют скорость обработки данных. Если долгих загрузок не избежать, то важно продумать анимацию и подсказки, которые будут сообщать пользователю, что сервис не «завис» — интерфейс должен реагировать на действия пользователя мгновенно и понятно.

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

Итоги

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

Это, безусловно, был бы совсем другой, может быть даже востребованный (хотя и немного жутковатый), опыт взаимодействия с Интернетом. И все же совсем скоро, благодаря Web 3.0 – следующей версии Веба, это может стать реальностью.

Благодаря изменениям, которые Web 3.0 привносит с собой, Интернет становится «умнее», поскольку для него характерно повсеместное применение искусственного интеллекта. Все мировые данные объединяются в так называемую семантическую сеть.

Web 3.0 – следующая ступень эволюции Всемирной паутины. За последние несколько лет термины, связанные с Web 3.0, например, блокчейн и криптовалюта, уже стали очень популярными. Как и с предыдущими версиями Интернета, важно, чтобы компании и владельцы своих бизнесов имели полное понимание, что представляет собой эта новая версия Интернета.

Итак, в этой статье мы рассмотрим, что такое Web 3.0, как он работает, каковы его плюсы и минусы, а также представим краткий обзор на некоторые построенные в Web 3.0 веб-ресурсы, которые уже существуют и полноценно работают.

Что такое Web 3.0

Концепция Web 3.0 заключается в том, что существует децентрализованная версия Интернета.

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

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

Ключевые характеристики Web 3.0

Web 3.0 открытый

Web 3.0 называется «открытым», потому что он создан разработчиками с помощью ПО с открытым исходным кодом и доступен широкой публике, что позволяет быстрее развивать существующие приложения и создавать новые.

В Web 3.0 широко применяется искусственный интеллект

Сочетание разных технологий (семантической паутины, обработки естественного языка (NLP) и машинного обучения) используется для того, чтобы помочь компьютерам лучше понимать информацию с помощью умного интеллекта и выдавать более быстрые и индивидуальные результаты.

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

Web 3.0 семантически организован

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

Web 3.0 использует 3D-графику

Трехмерный дизайн и виртуальные пространства, к примеру Метавселенная, – это ключевые элементы Web 3.0. Трехмерная графика в Web 3.0 используется для создания совершенно новых уровней погружения не только в игровую индустрию, но и в иные виды деятельности, такие как: недвижимость, электронная торговля, здравоохранение и многие другие.

У Web 3.0 есть неограниченные возможности сетевого взаимодействия

Благодаря Web 3.0 и семантическим метаданным, информация становится более взаимосвязанной. Люди могут получать доступ к Интернет-сервисам и контенту в любом месте в любое время с любого количества устройств.

Web 3.0 основан на блокчейне

В Web 3.0 технология блокчейн защищает и шифрует пользовательские данные, а также их информацию, что препятствует краже персональных данных пользователей с целью продажи различными организациями и сторонними лицами.

Web 3.0 поддерживает криптовалюту

Это также является одной из ключевых особенностей Web 3.0, которая, как ожидается, в значительной степени заменит «фиатную валюту», выпускаемую государственными центральными банками.

Минусы Web 3.0

• Уязвимость интегрированных данных и высокий риск взломов и мошенничества. При взломе учетной записи, можно контролировать все личные данные и конфиденциальную информацию человека, включая учетную запись Facebook, электронную почту, PayPal, банковский счет, технологии умного дома и многое другое.
• Сложность пользования dApps и высокая стоимость входа для пользователей. Новым пользователям будет крайне сложно понять работу многих dApps. Кроме того, порог входа в мир криптовалюты достаточно высок. Это означает, что на самом деле новые веб-ресурсы могут быть доступны только богатым людям или тем, кто готов идти на очень высокий риск.
• Web3, метавселенная и другие новейшие технологии могут иметь негативное влияние на психическое здоровье людей. Метавселенная, вместе с ее расширенной версией реальности, может вызвать зависимость, превосходящую ту, что возникает от использования социальных сетей. В результате люди могут иметь несбалансированные и нереалистичные ожидания от своей жизни, а также, нездоровым образом, сравнивать себя с другими пользователями. Некоторые пользователи метавселенной могут даже предпочитать проводить больше времени в виртуальном мире, чем в реальном, что может привести к социальной изоляции, финансовым трудностям и даже возникновению параноидальных идей.

Какие веб-ресурсы, построенные в Web 3.0, уже существуют, и как они работают

Audius – стриминговая платформа следующего поколения

Audius – это потоковая платформа на основе блокчейна, созданная специально для эры Web 3.0. Пользователи могут купить токены $AUDIO, чтобы получить право собственности и управления в компании, то есть авторы получают единоличное право собственности на свои произведения, распоряжаясь своими авторскими произведениями, как посчитают нужным. При этом Audius не претендует на долю от дохода исполнителей. В Audius 90% доходов поступает непосредственно правообладателям, в то время, как 10% используются Audius для функциональных целей платформы.

Audius была запущена в 2018 году, на несколько лет опередив волну NFT. Сейчас на платформе более 100 000 артистов и 5 миллионов пользователей.

Audius не только позволяет бесплатно слушать и скачивать музыку, самостоятельно загружать свои собственные композиции на платформу, но и обладает приятным и свежим интерфейсом без рекламы.

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

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

Presearch – децентрализованная поисковая платформа с «награждениями», основанная на технологии блокчейн

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

У платформы уже более чем 3,8 миллионов пользователей. Это лишь небольшая часть от объема поисковых запросов того же Google. Тем не менее, с фокусировкой на анонимном просмотре контента и ограниченном количестве рекламы на странице, у Presearch есть потенциал для существенного роста.

Работает этот относительно новый поисковик на блокчейне Ethereum, который предлагает пользователям контроль над своими данными и конфиденциальностью.

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

MetaMask – криптовалютный кошелек и интернет-шлюз для блокчейн-приложений

С помощью MetaMask, можно взаимодействовать с различными децентрализованными приложениями (или как их еще называют – DApps), построенными на второй по капитализации криптовалюте – Ethereum (ETH).

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

Для пользователей, криптокошелек MetaMask предоставляет безопасный способ, с помощью которого можно подключаться к блокчейн-приложениям и взаимодействовать с ними через свои кошельки.

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

Livepeer – децентрализованная платформа к онлайн-трансляциям

[Livepeer] cоздана для того, чтобы предоставить разработчикам свободу инноваций, авторам – независимость от платформ, а зрителям – выбор в том, что смотреть.

Фактически, 80% всей пропускной способности Интернета по всему миру уходит на потоковые видео. Одной из платформ, которая надеется изменить такое положение, является Livepeer, предоставляющая разработчикам и вещательным компаниям децентрализованные услуги по перекодированию и распространению видео, что позволяет снижать затраты.

Архитектура Livepeer разработана с учетом возможности масштабирования и обслуживания большого числа пользователей.

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

Hivemapper – фундаментальный сдвиг в создании и обладании географическими картами

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

Однако сегодня стоимость картографических сервисов чрезвычайно высока, что естественно становится препятствием для многих компаний.

Компания, основанная в Сан-Франциско, создала веб-сервис Hivemapper и стремится децентрализовать производство карт, чтобы решить эту проблему и сделать сервис более доступным.

Цель сервиса такова:

Создать глобальную карту, которая будет доступна и построена всеми нами.

Такая открытая картографическая сеть позволит в режиме реального времени отслеживать и отображать изменения на улицах по всему миру. В отличие от ресурсозатратных Google Maps, платформа сети Hivemapper использует другой подход. Она привлекает людей по всему миру, поощряя своих участников своеобразными «вознаграждениями». Каким образом? В виде токенов HONEY.

Такой «бонус» можно получить за сбор некоторого количества изображений улиц в высоком разрешении формата 4K с помощью видеорегистраторов.

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

Brave – браузер нового поколения, повышающий уровень приватности в Интернете

Веб-браузер Brave насчитывает более 25 миллионов активных пользователей, он известен своей высокой скоростью работы, блокировкой рекламы и трекеров по умолчанию.

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

В отличие от Chrome, Brave по умолчанию блокирует наблюдение со стороны посторонних лиц, включая мегарекламодателей. Веб-браузер Brave ограничивает объем данных, который различные рекламные сети могут собирать о привычках людей в браузере, и блокирует сторонние файлы cookie.

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

Еще одной особенностью веб-браузера Brave является поддержка работы с Tor, что делает его первым универсальным браузером, обладающим подобной функциональностью, а также Brave поддерживает все популярные расширения Chrome, включая такие утилиты для управления паролями, как LastPass и 1Password.

Braintrust – первая децентрализованная сеть кадров, поддерживаемая блокчейн-токеном

Сервис Braintrust предлагает лучшие условия для крупных компаний-работодателей, находящихся в поисках высококвалифицированных специалистов.

Сервис Braintrust предлагает новую бизнес-модель, которая позволяет экономить до 70% на гонорарах, по сравнению с традиционными рынками кадров Web 2.0, что привлекает крупные компании, такие как Nestle, Porsche, NASA, Nike, Allstate и Goldman Sachs, для использования сети. Braintrust взимает 0% комиссии со специалистов и 10% с компаний, позволяя обеим сторонам сэкономить.

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

Исполнителям на Braintrust не приходится платить никаких комиссий при поиске работы и получении заказов. Расходы перекладываются на заказчиков в виде дополнительного счета в 10% от стоимости работы.

Web 3.0 – хорошо или плохо

У новых, перечисленных выше, веб-сервисов есть как преимущества, так и недостатки по сравнению с сервисами Web 2.0. Нам остается только наблюдать за развитием искусственного интеллекта и думать, каким образом использовать все плюсы по максимуму и минимизировать все деструктивные аспекты, которые Web 3.0 привносит с собой.

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

Какому из веб-ресурсов вы отдадите свое предпочтение и будете ли в принципе пользоваться сервисами Web 3.0, решать только вам. Право выбора остается всегда за вами!

В этой статье мы рассказали лишь о части новейших веб-ресурсов, чтобы приоткрыть для вас мир Web 3.0. Можно не быть от него в восторге, но знать о существовании и активном развитии нового поколения Интернета просто необходимо. Надеемся, вы почерпнули для себя любопытные факты и сделали определенные выводы.

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

Чтобы заполнить эти пробелы, в Chrome 116 и 117 включены четыре новые функции веб-платформы, которые обеспечивают плавную анимацию и переходы для отдельных свойств:

• Возможность анимировать display и content-visibility на временной шкале ключевых кадров (начиная с Chrome 116).
• Свойство transition-behavior с ключевым словом allow-discrete для включения переходов дискретных свойств, таких как display (начиная с Chrome 117).
• Правило @starting-style для анимации эффектов входа из display: none и в верхний уровень (из Chrome 117).
• Свойство overlay для управления поведением верхнего слоя при анимации (из Chrome 117).

Отображение анимации в ключевых кадрах

Начиная с версии Chrome 116, вы можете использовать свойства display и content-visibility в правилах ключевых кадров. Они будут автоматически меняться в момент наступления ключевого кадра. Для поддержки этой функции не требуется использовать дополнительные новые значения:

Другиедискретные свойства меняют состояния, когда функция плавности перехода достигает отметки 50% времени работы. Однако свойства display и content-visibility переключаются в начале перехода (если вы анимируете вход) или в конце его (если вы анимируете выход).

В приведенном примере анимация плавно уменьшает непрозрачность до 0 за 0.5 секунды, после чего устанавливает свойство display в none. Кроме того, ключевое слово “forwards” гарантирует, что анимация сохраняет свое конечное состояние. Таким образом, элемент, к которому она применена, остается с display: none и opacity: 0.

Это простой пример, который имитирует то, что можно сделать с помощью перехода (см. демонстрацию в разделе о переходах). Тем не менее, переходы не способны создавать более сложные анимации, как показано в следующем примере:

Анимация “spin-and-delete” представляет собой анимацию выхода. Сначала карта будет вращаться вокруг оси Y, затем будет осуществляться изменение оттенка цвета и при достижении 80% времени анимации непрозрачность карты будет изменяться с 1 на 0. Наконец, карта переходит из состояния display: block в состояние display: none.

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

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

Переход дискретной анимации

В отличие от анимации дискретных свойств с помощью ключевых кадров, для перехода между дискретными свойствами вам потребуется использовать режим поведения allow-discrete.

Свойство transition-behavior

Режим «allow-discrete» делает возможными дискретные переходы и является значением свойства «transition-behavior». transition-behavior принимает два значения: нормальное и разрешающе-дискретное.

Есливы используете сокращение transition, обязательно используйте transition-behavior после сокращения, чтобы оно применялось в зависимости от специфики.

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

Сокращенная запись transition также устанавливает это значение, поэтому вы можете опустить свойство и использовать ключевое слово “allow-discrete” в конце сокращенной записи для каждого transition вместо этого.

Если вы анимируете несколько дискретных свойств, вам нужно будет включить параметр allow-discrete после каждого свойства, которое вы хотите анимировать. Например:

Совет: вы всегда можете включить дискретную анимацию с помощью * {transition-behavior: allow-discrete}, но убедитесь, что это находится в конце вашего CSS, чтобы предотвратить конфликты специфичности с сокращением transition.

Правило для анимации входа @starting-style

До сих пор в этой статье рассматривались анимации выхода. Для создания анимации входа вам необходимо использовать правило @starting-style.

Используйте @starting-style, чтобы применить стиль, который браузер сможет найти до того, как элемент будет открыт на странице. Это состояние «до открытия» (из которого вы выполняете анимацию).

Теперь у вас есть состояние входа и выхода для этих элементов списка TODO:

Анимация элементов в верхнем слое и обратно

Чтобы анимировать элементы верхнего слоя в режиме “открыто” и “закрыто”, укажите @starting-style в состоянии “open”, чтобы сообщить браузеру, откуда выполнять анимацию. Для диалогового окна состояние “открыто” определяется атрибутом [open]. Для всплывающих окон используйте псевдокласс :popover-open.

Простой пример диалога может выглядеть так:

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

При анимации всплывающего окна используйте псевдокласс :popover-open вместо ранее использованного атрибута open.

Свойство overlay

И наконец, чтобы плавно скрыть popover или dialog из верхнего слоя, добавьте свойство overlay в список ваших переходов. Popover или dialog обходят родительские клипы и трансформации, а также помещают контент в верхний слой. Если вы не анимируете свойство overlay, ваш элемент сразу же вернется к обрезанию и трансформации и будет закрыт, так что вы не увидите анимации его скрытия.

Вместо этого включите overlay в переход или анимацию, чтобы анимировать overlay вместе с остальными функциями и убедиться, что оно остается в верхнем слое при анимации. Это будет выглядеть намного более гладко.

Кроме того, когда у вас открыто несколько элементов в верхнем слое, использование свойства overlay помогает контролировать плавные переходы в верхний слой и из него. Вы можете увидеть разницу в этом простом примере. Если вы не применяете свойство overlay ко второму всплывающему окну при его скрытии, оно сначала переместится из верхнего слоя, скрывшись за другим всплывающим окном, прежде чем начнется анимация. Этот эффект не выглядит очень плавным.

Примечание о переходах между видами

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

В этой первой демонстрации вместо настройки @starting-style и других преобразований CSS переходы будут обрабатываться переходами представлений. Переход вида настраивается следующим образом:

Во-первых, в CSS присвойте каждой карточке индивидуальный view-transition-name:

Затем в JavaScript оберните мутацию DOM (в данном случае удаление карты) в переход представления.

Теперь браузер может обрабатывать затухание и преобразование каждой карты в новое положение.

Еще одним примером, где это может быть полезно, является демонстрация добавления и удаления элементов из списка. В этом случае вам нужно будет помнить о добавлении уникального имени перехода между видами (view-transition-name) для каждой создаваемой карточки.

Заключение

Эти новые функции платформы приближают нас к созданию плавных анимаций при входе и выходе на веб-платформе. Чтобы узнать больше, ознакомьтесь с этими ссылками:

1. Introducing the popover API
2. css-transitions-2 spec
3. css-position-4 spec
4. Оригинал статьи

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

О трендах в диджитал дизайне на 2024 год рассказываю я, Вика Бреусова — Senior Product Designer Яндекс, судья Awwwards, ментор Bang Bang Education (BBE), обладатель более 20 международных и российских наград (Awwwards SOTD, CSSDA WOTD и другие).

AI и дизайн: новая эра совместного творчества

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

Сейчас на рынке доступно большое количество нейронных сетей, которые может использовать дизайнер в своей работе и их количество только растёт. Также отличной и эффективной практикой является использование связок нескольких нейронок, классический пример — Midjourney+ChatGPT.

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

В следующем году нейросети дадут еще множество возможностей для цифровых дизайнеров. На мой взгляд, в 2024 году мы можем ожидать рост использования комплексных нейронок для генерации видео (таких как Runway) и кратное улучшение качества самих видео, а также развитие таких технологий, как Green Screen, Inpainting и Motion Tracking.

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

Web3 Футуризм и Ностальгия эпохи примитивного интернета

За последний год появилось множество Web3 и NFT проектов, которые постепенно сформировали отдельное уникальное направление в дизайне, которое сейчас активно используется и в различных высокотехнологичных проектах.

В поисках собственного стиля дизайнеры обратились к классическим атрибутам «‎технологичности»‎ из прошлого — пиксельным шрифтам, прямоугольным формам со скошенными углами и эстетике гейм-культуры. Плюс в этом направлении можно отметить общую мировую тенденцию на стиль 90-х и ностальгию по атрибутам того времени.

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

Непохожая типографика

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

За последние несколько лет мы видели много проектов с использованием сочетания Антиквы и Гротеска в одном параграфе, что тоже успело стать своеобразной классикой, немного надоесть и стать массовым явлением.

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

No-code инструменты для дизайнеров

На рынке появляется все больше проектов, созданных дизайнерами на Webflow — продвинутой визуальной платформе для создания сайтов, которая переводит дизайн-решения в готовый к использованию код.

На самом деле, no-code инструментов сильно больше (Squarespace, Rive, Thirdweb и другие), но хочется сделать акцент именно на Webflow, потому что за последнее время работа с ним стала неким феноменом.

Благодаря данной платформе и аналогичным решениям дизайнеры могут самостоятельно создавать масштабируемые сайты в короткие сроки, причем научиться работать с no-code инструментами можно интуитивно.

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

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

Sustainable Design

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

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

Такие решения в области микропроектирования могут работать для создания более устойчивого дизайна без ущерба для пользовательского интерфейса или взаимодействий. Опция ‎«темный режим» позволяет экономить до 30% заряда батареи устройства и снижать воздействие на окружающую среду.

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

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

Рассказывает Александр Тармолов, руководитель отдела разработки веб-приложений Яндекс Карт.

Скорость — превыше всего

По данным глобального исследования Global Digital 2023, около 30% бодрствующего времени современный человек проводит в телефоне, и этот показатель только растёт. Однако специалисты предсказывают, что скоро всё чаще в основе онлайн-поведения будет обдуманное использование интернета и желание избежать пустой траты времени.

Пользователи вынуждены ежедневно фокусироваться на множестве ресурсов, поэтому критичным становится скорость загрузки всех элементов сайта или приложения, ясность и понятность интерфейса. При этом в таких сферах как e-commerce скорость напрямую влияет на продажи.

По данным исследования агентства цифрового маркетинга Portent, коэффициент конверсии для сайтов, которые загружаются за 1 секунду, в 3 раза выше, чем у ресурсов с более долгой загрузкой. Пользователи сегодня могут легко покинуть страницу даже из-за малейших задержек или ошибок, и если всё возможное для быстрой загрузки своего сайта вы уже сделали, советуем проверить скорость загрузки элементов API.

Многие владельцы сайтов забывают о важности быстрой загрузки встроенных элементов — например, API, которые позволяют интегрировать геосервисы. ИТ-компании, предлагающие программные интерфейсы приложений, следят за скоростью загрузки собственных продуктов. Например, мы в конце 2022 года запустили обновленный JS API 3.0 — эта версия в первую очередь отличается от предшественников высокой скоростью.

Минута в минуту

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

С помощью API маршрутизации можно построить путь для курьера, для улучшения UX отобразить его на карте сайта через JS API или приложения через MapKit SDK, а также видеть, где находится курьер в моменте, благодаря поддержке GPS. А если нет сигнала GPS, то можно интегрировать к себе на сайт или в приложение Локатор, который определяет местонахождение по Wi-Fi, IP и вышкам сотовой связи.

Тем не менее более половины сайтов до сих пор перенаправляют пользователей на сторонние ресурсы для отслеживания заказов, что усложняет путь пользователя и негативно влияет на покупательский опыт. Исследование аналитической компании Data Insight показало, что 42% покупателей вовсе отказываются от заказа, если неизвестно точное время доставки. Особенно важными это оказалось для сервисов доставки еды: более 15% пользователей откажутся от заказа, если он будет доставлен позднее, чем через 2 часа. При этом технологии JS API и Mapkit SDK позволяют эффективно рассчитывать время доставки сразу в несколько точек, учитывая текущие и прогнозируемые пробки, а также, например, предоставляют возможность выбора самого короткого маршрута по времени или расстоянию.

Проще и понятнее

В целях экономии времени пользователи стали более требовательными и к дизайну. Они не хотят взаимодействовать со сложными интерфейсами и долго искать решение для своей задачи. Так, согласно исследованию GroupM и Kantar, 66% покупателей выбирают магазин для совершения заказа, исходя из удобства сайта или приложения. Чтобы не перегружать пользователя ненужной информацией и деталями, в последней версии JavaScript API — JS API 3.0 — можно легко скрыть лишние объекты. Кроме того, возможно изменить цвет и размеры зданий, сохраняя единый стиль сайта и айдентику.

Удобство на любом устройстве

Не секрет, что пользователи работают на разных устройствах, и на каждом из них сайт должен отображаться корректно. Девайс-инерция — один из самых распространённых UX-паттернов, когда пользователь имеет доступ сразу ко многим устройствам, но продолжает работать на самом привычном. Чтобы соответствовать пользовательским привычкам, важно иметь возможность встроить популярные, привычные многим сервисы на сайт и в приложения и адаптировать их под размеры разных устройств. В случае с картами это позволяют сделать те же JS API и MapKit SDK.

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

ADI является относительно новым развитием в технологическом мире, и его функциональные возможности продолжают расти. Эта технология использует алгоритмы искусственного интеллекта для оптимизации и инноваций в дизайне, включая дизайн пользовательских интерфейсов (UI).

На рынке доступно множество инструментов, работающих на базе искусственного интеллекта, которые способствуют созданию высококачественных UI. Вот некоторые особенности ADI в этом контексте:

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

Инструменты на базе ADI — искусственной дизайнерской интеллектуальной системы

Некоторые программные решения, например, uSketch, предлагают генерацию компонентов для пользовательского интерфейса (UI) с помощью ИИ, исходя из параметров, заданных дизайнером. В свою очередь, такие инструменты как Uizard, используют более автономный подход, автоматически создавая дизайн UI на основе предварительно определенных пользовательских требований.

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

В дополнение к UI-дизайну, существуют и другие инструменты на базе искусственного интеллекта для веб-дизайна. Например, DeepCoder применяет ИИ для автоматического генерирования кода веб-сайтов на основе введенных и выходных данных. Этот инструмент может быть применен как для создания внешнего, так и внутреннего интерфейса сайта, а также для оптимизации кода с целью увеличения производительности.

Преимущества использования ADI

1. Автоматизация рутинных задач: ИИ облегчает автоматизацию повторяющихся элементов процесса дизайна, таких как создание макетов, выбор цветовой палитры и типографики. Это освобождает время дизайнеров для более творческой работы. Примером служит Adobe XD, который использует ИИ для быстрого создания макетов.
2. Персонализация дизайна: Инструменты на базе ИИ, такие как ADI Wix, предоставляют возможности для создания индивидуализированных дизайн-решений, адаптированных под нужды конкретных клиентов или отраслей.
3. Оптимизация производительности сайта: ИИ может анализировать параметры производительности и предлагать способы их оптимизации, начиная от времени загрузки страниц до улучшения пользовательского опыта. Примером может служить Google Cloud AutoML.
4. Повышение доступности: Инструменты на базе ИИ могут анализировать веб-страницы с точки зрения их доступности для пользователей с ограниченными возможностями и предлагать рекомендации по улучшению.
5. Усовершенствование визуальных компонентов: ИИ способен анализировать и оптимизировать визуальные элементы, такие как изображения и видео, добавляя к ним подписи или альтернативные тексты для улучшения доступности.

ADI в Применении. Бренды и Продукты

Инструменты на базе ADI уже активно используются в различных отраслях и компаниях:

• Wix — использует ADI для создания персонализированных дизайнов сайтов, что позволяет быстро и эффективно отвечать на потребности конкретных клиентов.
• Adobe — с его помощью Adobe XD предлагает дизайнерам интуитивные и быстрые решения для создания макетов.
• Google Cloud — сервисы на базе AutoML предлагают рекомендации по оптимизации производительности сайтов, базируясь на анализе данных.
• Zoho — использует ИИ для создания интуитивных и адаптивных интерфейсов, которые автоматически адаптируются под потребности пользователей.

Этот список далеко не исчерпывающий, но он подчеркивает растущее значение ADI в современной индустрии дизайна и разработки.

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

Как это может повлиять на роль дизайнеров

1. Переход на более высокий уровень задач: Если рутинные задачи будут автоматизированы, дизайнеры смогут сконцентрироваться на более сложных и творческих аспектах дизайна.
2. Участие в междисциплинарных командах: Когда базовые элементы дизайна автоматизированы, дизайнеры могут активнее участвовать в командах с разработчиками, маркетологами и другими специалистами.
3. Более быстрое прототипирование и итерация: ИИ может ускорить процесс создания прототипов и тестирования различных вариантов дизайна, что дает дизайнерам больше времени для экспериментов.
4. Этические и социальные аспекты: Введение ИИ также требует более глубокого понимания этических и социальных последствий, таких как вопросы конфиденциальности и доступности, что добавляет дизайнерам новые обязанности.
5. Развитие новых навыков: Для эффективного использования ИИ требуется понимание его ограничений и возможностей, что может потребовать от дизайнеров изучения новых навыков и знаний.

Некоторые опасения

1. Качество работы: Автоматические инструменты могут не всегда точно понимать человеческие нюансы и контекст, что может снизить качество конечного продукта.
2. Снижение ценности ручного труда: Опасения по поводу «замены человека машиной» продолжают существовать. Дизайн — это не только процесс, но и искусство, и многие опасаются, что автоматизация может уничтожить ремесленный аспект профессии.
3. Этические вопросы: Вопросы вроде «Кто владеет дизайном, созданным ИИ?» также являются актуальными и требуют обсуждения.

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

Заключение

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

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

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

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

С помощью Dev Mode мы видим огромную возможность быстро и эффективно удовлетворить потребности разработчиков – так же, как мы сделали с дизайнерами, когда мы начали разрабатывать Figma. Чем проще командам проектировать, документировать, находить и реализовывать высококачественные дизайны без потери работы и контакта друг с другом, тем более успешные будут результаты.

Режим разработчика (Dev Mode) похож на инструмент просмотра кода в браузере, только работает с файлами дизайна в Figma.

Наведя и щелкнув по элементу дизайна в Figma, можно получить и экспортировать всю необходимую информацию для веб-разработки — размеры, спецификации и ресурсы —, а также получить дополнительный контекст из вашей дизайн-системы. Также в Dev Mode можно переключаться между единицами измерения в соответствии с кодовой базой.

Во многом Figma Dev Mode был вдохновлён инструментом разработки Chrome Dev Tools.

Код в Dev Mode настраивается под выбранный язык программирования. При этом Figma учитывает, что код не является готовым к использованию. Поэтому Figma показывает модель блочной CSS с древовидной структурой.

Улучшить вывод кода можно при помощи плагинов. Вы можете управлять проектами с помощью Jira, Linear и GitHub. Storybook поможет ссылаться на кодовую базу, в контексте самого дизайна.

Также плагины для генерации кода от AWS Amplify Studio, Google Relay и Anima помогут вам настраивать вывод кода – вы даже можете создать свой собственный плагин, основанный на вашем уникальном рабочем процессе.

С помощью расширения для Visual Studio Code вы можете использовать все возможности Dev Mode прямо в редакторе кода, чтобы просматривать дизайны, видеть уведомления и комментарии.

Расширение для Visual Studio Code также автоматически заполняет код на основе дизайна, который вы проверяете, что помогает вам работать гораздо быстрее.

Dev Mode и Figma для Visual Studio Code находятся в бета-версии и доступны бесплатно всем пользователям до конца 2023 года. Начиная с 2024 года, потребуется платный план. Цена Dev Mode составит $25 в месяц за аккаунт в рамках Организации и $35 в месяц в рамках предприятия.

Итак, что же делать, чтобы проектировать интерфейс качественней и отлавливать все возможные ошибки при проектировании?

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

У нас есть отдельный проект в Figma, где мы готовим и демонстрируем макеты при защите дизайн-решения перед руководителем.

Приведу пример, как выглядит userstory.

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

При подготовке макетов к защите у нас есть определенные правила — расскажу о них подробнее.

Правило №1

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

Правило №2

От роли отводится стрелка на стартовую страницу процесса. Не рекомендуется всегда начинать userstory с самой страницы авторизации из-за большого количества макетов: этот процесс мы выносим за скобки. Для примера я покажу процесс регистрации и авторизации.

Правило №3

Между экранами всегда пишется информация о том, что пользователь с соответствующей ролью делает на предыдущем экране. В описании с иконкой ”i” мы пишет подробности, что должно произойти на следующем экране, и любую другую полезную информацию, чтобы при проказе все дополнительные вопросы касательно реализации закрывались сами собой. Важная информация помечена красным цветом и иконкой “!”.

Правило №4

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

Правило №5

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

Правило №6

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

Остальные цвета задаются на усмотрение дизайнера. Также при множестве вариантов дизайнер добавляет метку с названием сценария. Различные цвета помогают сконцентрировать внимание зрителя при демонстрации сценария.

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

Правило №7

Расстояние между макетами мы делаем 2000px. Мы придерживаемся сеточного позиционирования макетов.

Какие инструменты мы используем

Я использую плагин для Figma — Autoflow. Дизайнеры в моей команде используют стрелочки из FigmaJam. Мы никак не регламентируем, что использовать: главное чтобы было комфортно и макеты готовились быстро.

Какие плюсы такого подхода?

1. Быстро находятся проблемы и недочеты, которые были упущены во время проведения анализа и проектирования интерфейса;
2. Удобно демонстрировать дизайн-решение руководству или коллегам из смежных команд;
3. Удобно демонстрировать дизайн-решение команде;
4. Такая карта помогает разработчикам проследить весь путь пользователя и понять его особенности, также разработчики лучше понимают детали фичи;
5. В любой момент можно вернуться к старым макетам и освежить память о разработанном функционале;
6. Все необходимые состояния интерфейса находятся близко к связанному с ним экрану.

Какие минусы такого подхода?

1. Нужно закладывать время на подготовку макетов для презентации;
2. Нужно отвлекать сотрудников для помощи в подготовке;
3. Переделки в ходе получения комментариев во время презентации;
4. Требуется определенный уровень, чтобы собирать макеты быстро и писать описание.

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

Полезная ссылка

Подготовил маленькую библиотеку для оптимизации времени при построении userstory. Она доступна по ссылке:

Поэтому давайте обо всём по порядку.

Что такое селекторы CSS

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

Например, такое правило CSS будет применяться ко всем элементам с классом «example» и устанавливать им красный цвет текста:

Почему селекторы важны для создания красивых интерфейсов

✔ С их помощью можно задавать стили для всех элементов на странице, включая текст, изображения, кнопки, ссылки, таблицы, формы и т. д. Без селекторов CSS веб-страница будет выглядеть просто и невзрачно.

✔ Селекторы позволяют задавать стили для разных состояний элементов, таких как «активное», «наведение», «фокус», «выделение» и т. д. Это даёт возможность создавать интерактивные и привлекательные для пользователя элементы и делать интерфейс интуитивно понятным.

✔ Благодаря селекторам CSS можно создавать каскадные стили, наследовать свойства от родительских элементов и применять их к дочерним. Это упрощает процесс стилизации и уменьшает объём кода.

Базовые селекторы CSS

Это основные селекторы, которые используют для выбора элементов на веб-странице. Они определяют, какой элемент будет стилизоваться на странице и какой стиль будет применён к этому элементу.

Вспомним про базовые селекторы, чтобы потом перейти к продвинутым вариантам.

Селекторы по тегу

Это самый простой способ выбрать все элементы на странице с определённым тегом.

Этот код устанавливает красный цвет для всех элементов h1 на странице.

Селекторы по классу

Классовый селектор позволяет выбрать все элементы, у которых есть определённый класс. Классы можно использовать для группировки элементов схожих типов.

Этот код устанавливает размер шрифта 24 пикселя и жирное начертание для всех элементов на странице с классом «header».

Селекторы по ID

Такой селектор позволяет выбрать элемент с определённым ID. Важно: идентификаторы должны быть уникальными на странице.

Этот код устанавливает ширину 800 пикселей и центрирует элемент с ID «main» на странице.

Селекторы атрибутов

Такие селекторы позволяют выбрать элементы на основе значения атрибута.

Этот код устанавливает синий цвет для всех элементов на странице с атрибутом «data-role».

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

Базовые селекторы можно комбинировать между собой, чтобы выбрать элементы на основе нескольких условий.

Например, комбинированный селектор может выбрать все элементы с классом «header», которые находятся внутри элемента с ID «main»:

Этот код устанавливает размер шрифта 18 пикселей для всех элементов с классом «header», которые находятся внутри элемента с ID «main».

Продвинутые селекторы в CSS

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

Далее — несколько примеров продвинутых селекторов.

Псевдоклассы

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

Некоторые из наиболее часто используемых псевдоклассов:

:hover — позволяет применять стили при наведении курсора на элемент.

:active — позволяет применять стили, когда элемент находится в активном состоянии (при нажатии на кнопку или ссылку).

:focus — позволяет применять стили, когда элемент в фокусе (например, при нажатии на input).

Псевдоэлементы

Это специальные ключевые слова в CSS, которые позволяют добавлять дополнительный контент на страницу или стилизовать определённые части элементов.

Псевдоэлементы указывают с помощью двух двоеточий (::) после селектора элемента.

Вот некоторые из наиболее часто используемых псевдоэлементов:

::before — позволяет добавить контент перед содержимым элемента.

::after — позволяет добавить контент после содержимого элемента.

::first-line — позволяет стилизовать первую строку текста внутри элемента.

Селекторы потомков

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

Селекторы соседей

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

Этот код выберет все элементы, которые идут непосредственно после элементов:

Как использовать селекторы в разных контекстах

Селекторы в CSS нужны для выбора элементов, к которым должны быть применены стили. Их можно использовать в разных контекстах, таких как медиа-запросы, CSS-анимации с помощью @keyframes и препроцессоры, например Sass.

Селекторы внутри медиа-запросов

С помощью медиа-запросов создают страницы, адаптированные под разные устройства и экраны. Селекторы, используемые внутри медиа-запросов, позволяют задавать стили для элементов страницы в зависимости от размеров экрана, ориентации, разрешения и других параметров устройства.

Для использования селекторов внутри медиа-запросов в CSS нужно определить медиа-запрос с помощью ключевого слова @media и задать условия, при которых будет применяться данный медиа-запрос. Затем внутри блока медиа-запроса можно использовать селекторы и задавать стили для соответствующих элементов страницы.

Вот несколько примеров кода:

В этом примере мы определили два медиа-запроса, которые будут применяться к элементам на экранах разных размеров. В каждом медиа-запросе мы использовали различные селекторы CSS для определения стилей, которые будут применяться к элементам на каждом экране.

Селекторы c @keyframes

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

Для использования селекторов CSS с @keyframes нужно сначала определить ключевые кадры (keyframes) анимации с помощью правила @keyframes. Это правило определяет набор стилей для каждого момента времени в анимации.

Вот пример:

Здесь мы определили анимацию «rotate», которая использует селекторы 0% и 100% для определения начального и конечного состояний элемента в процессе анимации. Затем применили эту анимацию к элементу «div», используя свойства «animation-name», «animation-duration», «animation-timing-function» и «animation-iteration-count».

Таким образом, использование селекторов CSS с @keyframes позволяет создавать красивые и динамичные анимации на странице.

Селекторы в Sass

Sass (Syntactically Awesome Style Sheets) — язык препроцессора CSS, который предоставляет мощные инструменты для создания более гибких и удобных стилей. Одна из таких возможностей — использование селекторов в Sass.

Селекторы в Sass позволяют обращаться к элементам и группам элементов на странице и изменять их стили. Пример шаблонного селектора %flex-element-center для центрирования элементов по вертикали и горизонтали с использованием свойств flexbox:

В Sass можно использовать различные типы селекторов, такие как классы, идентификаторы, псевдоклассы, псевдоэлементы и другие. Также можно использовать операторы комбинирования селекторов, такие как «потомок», «родитель», «брат» и т. д.

Шаблонные селекторы в Sass уменьшают количество повторяющегося кода и позволяют сделать CSS более модульным и поддерживаемым.

Селекторы и производительность

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

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

Как использовать селекторы в больших проектах

На крупных проектах использование селекторов может стать проблемой для производительности и обслуживаемости кода.

Хорошей идеей будет использовать:

• простые селекторы, когда это возможно
• классы для стилизации элементов — стили для группы элементов сделают код более читаемым
• псевдоэлементы для создания эффектов, таких как добавление стрелок, рамок и т. д.

Что нужно избегать (по возможности):

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

Ещё немного про именование классов и идентификаторов

Именование классов и идентификаторов для селекторов CSS может оказать значительное влияние на удобство работы с кодом, его читаемость и поддержку в будущем.

Вот несколько полезных советов:

1. Используйте описательные имена. Имена классов и идентификаторов должны быть понятными, им необходимо описывать функциональность элемента или его содержимое. Например, вместо «box» лучше использовать «content-box» или «sidebar» вместо «div1».
2. Используйте нижний_регистр_и_подчёркивания. Имя класса или идентификатора не должно содержать пробелов или знаков пунктуации.
3. Избегайте слишком общих имён. Имена, такие как «header», «content» или «footer», могут быть переиспользованы в разных частях страницы. Используйте более конкретные имена, чтобы избежать конфликтов.
4. Применяйте аббревиатуры с умом — там, где это действительно имеет смысл и они широко известны.
5. Имена классов и идентификаторов не могут начинаться с чисел или знака подчёркивания.
6. Старайтесь быть последовательными. При выборе имён для классов и идентификаторов лучше придерживаться одной системы именования. Если вы используете подчёркивание для разделения слов в одном месте, используйте его и в других местах.

Заключение

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

Однако, поскольку CSS является фундаментальной частью интерфейсной веб-разработки, доступ к нужным инструментам CSS может существенно повлиять на производительность и креативность разработчика.

В этой статье мы рассмотрим некоторые из самых популярных инструментов CSS, которые помогут вам идти в ногу со временем и вывести свои навыки CSS на новый уровень.

Неоморфизм

Neumorphism.io — это веб-сайт, на котором можно сгенерировать блоки в стиле неоморфизма. Это мягкий пользовательский интерфейс, который также называют неоскевоморфизмом.

Сайт генерирует стили CSS с программным интерфейсом, используя тени.

Animista

Animista — это коллекция анимаций CSS и пресетов, которые можно легко настроить и применить к веб-элементам.

Анимированный фон

Wweb.dev — генератор анимированных фонов CSS. Он позволяет создавать и настраивать анимированные фоны для своих веб-проектов.

Spin Kit

Spin Kit — это коллекция анимаций загрузки на CSS, созданная Тобиасом Ахлином.

На сайте есть простые и настраиваемые анимации, которые можно легко интегрировать в веб-проекты.

Flexplorer

Flexplorer — это онлайн-инструмент веб-разработчика Беннета Фили, который помогает разработчикам изучать и экспериментировать с макетами CSS flexbox. Flexbox позволяет быстро создавать гибкие и адаптивные макеты.

Генератор сетки

CSS Grid Generator — это веб-инструмент, который помогает разработчикам создавать сложные макеты сетки с помощью CSS Grid. Это мощный способ создания гибких и адаптивных дизайнов веб-страниц.

Генератор макетов

CSS Layout Generator — это веб-инструмент, который позволяет разработчикам создавать стили макетов CSS и экспериментировать с ними. Он предоставляет визуальный интерфейс для разработки и настройки компонентов макета.

Shadows Brumm

Shadows Brumm — это веб-инструмент для создания CSS-эффектов теней. У сайта простой интерфейс, который позволяет создавать сложные и красивые тени, используя множество параметров и опций.

Глассморфизм

Glassmorphism — это направление в дизайне, в котором используются прозрачные и размытые «стеклянные» фоны.

Cubic-Bezier

Cubic-Bezier — это веб-инструмент, который позволяет пользователям создавать собственные кривые для плавных анимаций и переходов.

Заключение

Инструменты CSS нужны разработчикам, которые хотят создавать визуально привлекательные и отзывчивые веб-сайты. Правильный набор инструментов сильно повышает производительность разработчиков и экономит время.

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

«Не заставляйте меня думать» – Стив Круг

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

«HTML и CSS. Разработка и дизайн веб-сайтов» – Джон Дакетт

Эта книга будет полезна как начинающим, так и опытным веб-дизайнерам. Она поможет вам освоить основы языков HTML, CSS, JavaScript и jQuery, которые необходимы для создания красивых и отзывчивых веб-страниц.

«Думай типографикой» – Эллен Лаптон и Джейсон Санип

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

«Отзывчивый веб-дизайнер» – Итан Маркотт

Это обязательная книга для всех, кто работает со сверстанными страницами на HTML и CSS. В книге вы узнаете принципы создания адаптивных веб-сайтов и научитесь создавать стройные и гармоничные интерфейсы.

«Решение для веб-стандартов» – Дэн Сидерхолм

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

«Принципы красивого веб-дизайна» – Джеймс Байрд

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

«Web-дизайн по стандартам» – Джеффри Зельдман

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

Что такое интерфейс

«Интерфейс» в переводе с английского состоит из слов interaction ― взаимодействие ― и face ― лицо.

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

Почему интерфейс важен в любом бизнес-процессе

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

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

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

Основные виды интерфейсов для бизнес-приложений

Чаще всего выделяют два базовых вида интерфейса для бизнес-приложений, каждый из которых имеет свои особенности и применение:

Мобильные интерфейсы

Это интерфейсы мобильных приложений, с которыми пользователи взаимодействуют с экрана смартфона или планшета. Отсюда и особенности:

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

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

Веб-интерфейсы

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

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

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

• Sketch: это инструмент для дизайна интерфейсов, который используется для создания векторных иллюстраций и элементов интерфейса. Sketch позволяет создавать макеты и дизайны, а также работать с готовыми библиотеками символов и плагинами.

• Figma: это веб-приложение для дизайна интерфейсов, которое позволяет создавать прототипы и работать с другими участниками команды в режиме реального времени. Figma также позволяет работать с библиотеками символов и плагинами, что делает процесс дизайна более эффективным.

• Adobe XD: это инструмент для создания интерфейсов, который позволяет создавать прототипы, анимации и элементы интерфейса. Adobe XD также позволяет работать с другими продуктами Adobe, такими как Photoshop и Illustrator, что делает процесс дизайна более удобным.

• InVision: это платформа для создания интерактивных прототипов и дизайна интерфейсов. InVision позволяет создавать анимации и переходы между страницами, а также работать с другими участниками команды.

• HTML, CSS и JavaScript: это языки программирования, которые используются для создания веб-интерфейсов. Они позволяют создавать интерактивные элементы, анимации и прототипы, а также работать с различными библиотеками и фреймворками.

Конечный выбор инструментов и технологий для создания интерфейса зависит от потребностей и возможностей команды и проекта.

Этапы создания интерфейса

Создание интерфейса для бизнес-приложения — это процесс, состоящий из нескольких этапов. Рассмотрим каждый:

1. Исследование пользователей и целей приложения. На этом этапе необходимо изучить потребности и цели пользователей, а также определить, каким образом интерфейс приложения может помочь им достичь этих целей.

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

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

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

5. Создание графического дизайна. На этом этапе определяется стиль и цветовая гамма приложения, а также создаются визуальные элементы интерфейса, такие как кнопки, иконки и шрифты.

6. Разработка интерфейса. На этом этапе происходит создание кода, который реализует интерфейс приложения. В этом процессе используются языки программирования, такие как HTML, CSS и JavaScript.

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

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

Рекомендации для создания привлекательного интерфейса бизнес-приложения

• Сделайте интерфейс интуитивно понятным. Люди должны легко понимать, как использовать приложение и какие функции оно предоставляет.

• Держите дизайн чистым и простым.

• Используйте привлекательные и нейтральные цвета и шрифты.

• Создавайте качественные изображения и иконки.

• Размещайте элементы так, чтобы пользователи могли легко находить нужные функции.

• Старайтесь создавать дизайн, который соответствует брендингу вашей компании.

Совет от эксперта:

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

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

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

Так может ли нейросеть полностью заменить дизайнера или это лишь очередная игрушка?

Мы спросили дизайнеров Новео, что они думают о нейросетях и не снятся ли им кошмарные сны о восстании ИИ.

Повлияют ли нейросети на рынок? Снизит ли ИИ спрос на дизайнеров?

Людмила, Senior Designer: Думаю, что нет. ИИ еще не обладает такими навыками, чтобы заменить дизайнера в компании. И даже если представить, что через пару лет он будет таким же качественным в работе, как дизайнер, то ответ все равно нет. Потому что создать свой ИИ и содержать его гораздо дороже, чем целый отдел дизайнеров в компании. Плюс нужно научиться разговаривать на языке ИИ, чтобы он мог отдавать нужный продукт. Да и создав его, все равно нужно дополнительно его обучать для работы с необходимыми форматами.

Ирина, Senior Designer: Нейросети однозначно уже влияют на рынок иллюстраций как минимум. Заметно, что иллюстраторы стали предлагать необычные решения, и мне кажется, это потому, что они вдохновляются не референсами с пинтереста, а референсами, сгенеренными нейросетями. Но пока я не вижу предпосылок для снижения спроса на дизайнеров, потому что ИИ еще работает криво. А вот совершенствование компетенций самих дизайнеров по умелому обращению с нейросетями вполне возможно (сами нейросетки без управления промптами и отсева брака годного не выдадут).

Александра, Middle Designer: Думаю, нейросети определенно влияют на рынок и создают сильный ажиотаж, многие собственники малого бизнеса тоже пробуют их применять, но скорее как игрушку, для привлечения внимания с их помощью. А так мне кажется, что спрос на дизайнеров не уменьшается, просто появился дополнительный инструмент.

Нейросеть — враг или помощник?

Л.: Скорее помощник. Врагом она стать не может из-за отсутствия навыков, зато может помочь с генерацией референсов и идей.

И.: Из вышесказанного видно, что для меня нейросеть — в первую очередь помощник.

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

Возможна ли «насмотренность» у нейросети, как у дизайнера?

Л.: Вряд ли. Сейчас ИИ работает скорее обширно, чем детально. Даже если представить, что он сгенерировал хороший вариант дизайна, то доработать мелкие правки от заказчика он не сможет. Да и в целом — он не общался с заказчиком и не может понять по общению, что именно хочет заказчик и что он точно не хочет видеть.

И.: Пока не замечала за графическими нейросетями такого. Но, может, я чего-то не знаю… Мне лично воспитать нейросети, с которыми я работаю, не удалось. Скорее наоборот ?

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

Используете ли вы ИИ для создания дизайна? Довольны результатом?

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

И.: Не использовала пока. Только для иллюстраций. Не скажу, что прям довольна, есть ряд претензий к качеству изображений (как минимум размер).

А.: Да, использовала пару раз для иллюстраций/фото, получалось забавно и местами хорошо, но это была не коммерция.

Что, по вашему мнению, ждет ИИ в будущем?

Л.: Развитие, быстрое развитие. Сейчас уже довольно тяжело отличить реальную фотографию от сгенерированного изображения.

И.: Я думаю, ИИ станет обязательной частью дизайнерского инструментария. В Фигму его уже встроили (правда, непонятно, как его запустить).

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

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

К какому будущему готовиться дизайнерам и что изучать?

Л.: Востребованными дизайнерами в будущем станут те, кто будет изучать разные направления, проще говоря, full-stack дизайнер. Полезно, и уже даже необходимо, развиваться во многих направлениях, таких как программирование, аналитика, motion-дизайн и 3D. Так ты сможешь понимать все процессы вокруг, а значит,  создавать более подготовленный и грамотный продукт. Если выходит новая программа, не поленитесь и посмотрите, что она из себя представляет и как и где вы можете ее использовать.

И.: Изучать работу с нейросетями и гайдлайны. Терять сноровку и подсаживаться на работу через нейросети не стоит ? ИИ, конечно, интересные штуки может выдать, но это “робот”, алгоритмы, он не сможет быть настолько же гибким, насколько это может делать человек.

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

Оцениваем работу нейросетей в дизайне

Мы отправили запрос нейросети на дизайн нескольких мобильных приложений, а также попросили сгенерировать сайт компании Новео. Что вы об этом думаете? ИИ справился с задачей?

Дизайн мобильного приложения для отслеживания состояния автомобиля перед поездкой

Что думаете?

Л.: Картинка красивая, и более ничего. Отсюда можно взять скорее только идею оформления. Это в целом сложная задача; придумать, как и что будет показываться на экранах приложения с такой функциональностью, — довольно трудоемкий процесс.

И.: Считаю, что ИИ не справился. Цветовая гамма и общая идея интересные, но детализация плохая (допустим, через год ИИ сможет легко с ней справляться, но пока что это минус) и нет акцентов, что там хорошо в машине, что плохо, — всё одного цвета, непонятно, чему стоит уделить внимание, какую деталь, может, заменить, починить и т.д… Но если запустить сюда дизайнера с головой и руками, можно допилить красиво.

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

Дизайны мобильного приложения для заказа пиццы или нигири в большом городе

Что думаете?

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

И.: Интересное у ИИ понимание ТЗ. Иллюстрации нравятся, прикольное решение с картой на самой пицце! А вот UX оценить не могу совсем ?

А.: Нравится карта в пицце, на которой можно было бы отслеживать курьера. Но сам интерфейс кажется странным, с разными кнопками, и ещё хотелось бы, чтобы нейросети писали на английском.

Дизайны мобильного приложения для мониторинга расходов и доходов пользователя

Что думаете?

Л.: Здесь уже есть какие-то намеки. Можно использовать это в качестве вдохновения для выбора стилистики приложения.

И.: Вроде как красивые диаграммы, но что именно мы тут анализируем — не понятно. Без человека-аналитика, который под представленные графические идеи подведет что-то разумное, тут все-таки не обойтись. Для каких данных лучше “пирог”, а для каких график, как расставить акценты, на что обратить внимание пользователя, что важнее человеку в его бухгалтерии — с этими приоритетами ИИ пока тут не справился (возможно, в помощники надо отправлять ChatGPT).

А.: Эти интерфейсы мне кажутся наиболее удачными и понятными, плюс цвета неплохие. Более-менее логично и понятно.

Ну и финальный запрос на сайт компании Новео:

Что думаете?

Л.: Скучно и однообразно. Я бы сказала — шаблонно. Нет никакой изюминки, души. На этот референс можно натянуть любую компанию. Есть ощущение, что ИИ объединил сайт Тинькофф-банка, Альфа-банка и МТС-банка XD

И.: Тинькофф и Альфа-банк ? В первом случае (желтый сайт) вообще непонятно, какой тематики компания. Во второй что-то про бизнес-людей. Без души дизайны (наверное, все вышеприведенные тоже).

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

Бонус: нейросеть + дизайнер

Людмила и Ирина решили поиграться и попробовать доработать идею нейросети. За пример взяли попытку ИИ создать дизайн приложения для доставки пиццы.

Л., И.: Вдохновила иллюстрация пиццы на фоне домов. Сразу возникла идея маленькой итальянской пиццерии со старинными рецептами. Дедушка, который давным давно открыл свою пиццерию, и она передается из поколения в поколение. Красивая легенда, правда? XD На деле же просто небольшая сеть пиццерий.

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

Самым интересным в этом кейсе была попытка закончить иллюстрацию с помощью ИИ. Сначала мы пыталась исправить текущее изображение, обрезав лишнее. Но увы, нейросеть просто игнорировала наши запросы. Затем мы попытались сделать запрос на новую отдельную иллюстрацию без интерфейса: нам нужна была огромная пицца на фоне города в винтажном стиле. Каждая нейросеть делала по-своему. Думаем, можно вычислить 2 разные нейросети по изображениям.

В итоге полноценные сгенерированные иллюстрации нас не устроили. Затем были попытки сгенерировать именно дома. Но это тоже давало не совсем то. Забавный факт: как только ты отправляешь запрос “город в винтажном стиле”, все нейросети сразу рисуют что-то похожее на Нью-Йорк. А когда пытаешься указать Россию, то дома автоматически превращаются в соборы и церкви.

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

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

Дизайнеры Новео единодушны в своем вердикте: пока ИИ и нейросетей можно не бояться — во всяком случае, на сегодняшний день они не способны составить человеку полноценную конкуренцию. Но и отказываться от предлагаемых ими  возможностей однозначно не стоит: нейросеть — весьма годный инструмент, способный помочь с рутинными задачами, подкинуть идей или облегчить старт чего-то громоздкого. Используем искусственный интеллект во благо собственного! ?

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

Дизайн токены

Дизайн токены — это базовые единицы проектирования интерфейсов, основа UI-компонентов: цвета, стили шрифтов, стили теней, размеры отступов и т.п. Токены могут использоваться на любых платформах и в любых продуктах использующих компоненты с их поддержкой. Истоки концепции дизайн токенов лежит в 2014 году после публикации заметки в блоге Salesforce. С тех пор этот концепт был принят многими компаниями по всему миру, использующими дизайн системы или компонентные библиотеки для разработки своих цифровых продуктов.

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

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

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

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

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

• Выстраивание связей между дизайнерами и разработчиками, формирование общего языка (словаря) и способов взаимодействия;
• Простая темизация интерфейсов, экономия ресурсов на кастомизации библиотеки компонентов за счет централизованного управления;
• Улучшение пользовательского опыта в разрезе платформ, доступности интерфейсов (accessibility) и т.п.

Определение владельцев

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

• Отдельная команда из дизайнеров и разработчиков обеспечивающая поддержку библиотеки (лучший, но часто «дорогой» вариант);
• Команда дизайнеров при консультативной поддержке команды разработчиков;
• Команда разработчиков при поддержке дизайнеров.

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

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

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

Подходы к наименованию

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

В целом, наименование токенов использует подход близкий к пространству имен (namespaces). Это многоуровневая система использующая абстрактные, функциональные или семантические имена. Каждый из способов несет свои плюсы и минусы и я редко встречал их использование в чистом виде, но часто в виде комбинаций.

При абстрактном наименовании часто используются максимально общие термины. Главный плюс — это гибкость при масштабировании. Минус — это сложность выбора при применении из-за слишком общего наименования.

Функциональный подход, следуя из его названия часто отражает место или способ применения. Я бы сравнил данный подход с наименованием стилей в BEM. Часто такой подход включает сложную иерархическую структуру с наследованием — это позволяет более точно контролировать изменения, но усложняет процесс поддержки.

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

Несколько ссылок по теме, где рассмотрены подходы к наименованию с примерами:

Naming Tokens in Design Systems (eng);

Naming design tokes (eng);

Ультимативный гайд по дизайн-токенам.

Пример интеграции

Важно не только придумать систему наименования, но начать использование токенов в реальности. Использование подразумевает не только применение токенов дизайнерами в их инструментах, а разработчиками в коде, но процессы синхронизации и доставке токенов из одной среды в другую. Сейчас существует несколько инструментов позволяющих автоматизировать этот процесс, например плагин Design Tokens для Figma. В данном примере, я хотел бы рассмотреть интеграцию между Figma и сервисом Supernova обеспечивающими управление токенами и их доставку в кодовую базу.

Процесс состоит из нескольких этапов:

1. Создание и публикации библиотеки со стилями в Figma
2. Синхронизация библиотеки с Supernova
3. Настройка экспорта

1. Создание и публикации библиотеки со стилями в Figma

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

Я подготовил пример файла, где я создал токены (стили) поддерживаемые Figma. Я использовал семантический подход к наименованию по структуре: тип-роль-значение-состояние. Внутри я оставил несколько примеров имен для каждого уровня структуры.

Для использования Supernova важно соблюдать условие — файл со стилями должен являться библиотекой и быть опубликованным. Если копируете файл себе не забудьте это сделать.

2. Синхронизация библиотеки с Supernova

Следующий шаг добавление Figma-библиотеки в Supernova для синхронизации. На первом же экране после регистрации будет доступна кнопка «Add data Source», в открывшимся окне нужно добавить ссылку на Figma-файл с библиотекой, а затем выберите импорт стилей. Я не использую опцию автоматических обновлений в первую очередь из-за желания контролировать изменения вручную (помимо того, что эта платная опция).

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

Supernova позволяет не только синхронизировать стили из Figma, но и добавить недостающие токены (размер границ, скругления, отступы и т.п.). Все синхронизированные токены помечены логотипом Figma. Так же вы можете добавить недостающие токены нажав на кнопку «New Token», такие токены не будут доступны Figma, но будут добавлены в билд.

3. Настройка экспорта

Разделе «Code Integration / Store» вы можете найти уже готовые экспортеры. Для примера я взял CSS-экспортер, который выгружает токены в CSS-переменные. Вы можете посмотреть примеры экспорта перед установкой. Добавьте тот, который вам подходит. В зависимости от ваших целей и задач вы можете настроить более точную выгрузку токенов использовав ваши собственные экспортеры.

После добавление экспортера, нам нужно добавить место куда выгружать билд. Для этого идем в разделе «Code Integration / Hooks» создадим новый хук, который будет вызываться при обновлении источника. В качестве цели я указал репозиторий на GitHub. Процесс подключения стандартный: указать ссылку на репозиторий, ветку и путь, дать доступ Supernova на создание pull-request.

Теперь, после получения новых обновлений из Figma (автоматически или вручную после нажатия «Get all updates» в разделе «Content») будет вызываться хук и создавать pull-request. В платной версии вы можете настроить автоматическое получение обновлений без необходимости нажатия этой кнопки.

Интеграция настроена! Теперь дизайнеры могут доставлять изменения в токенах прямо в репозиторий. Для этого им необходимо опубликовать измененную библиотеку и нажать кнопку «Get all updates» в разделе «Content» в Supernova (или это будет сделано автоматически если используете платную версию). После получения обновлений, если все в порядке, то будет запущен хук обновления и создан pull-request.

Таким способом вы можете построить свою интеграцию между дизайн библиотекой и код-репозиторием. Все команды будут использовать единый набор токенов, иметь возможность темизации и тонкой настройки компонентов.

Полезные ссылки

Для завершения, я собрал ссылки упомянутые, которые могут быть вам полезны в исследовании этой темы:

Figma и Supernova;

Документация Supernova;

Пример библиотеки для синхронизации;

Пример экспорта в GitHub + Превью.

1. Ёлочная ветка на углу страницы
2. Метель
3. Новогодняя гирлянда
4. Гирлянда на JavaScript
5. Боковая панель с Санта-Клаусом
6. Новогодний фейерверк
7. Таймер обратного отсчёта
8. Новогодняя открытка

Ёлочная ветка на углу страницы

Достаточно простое, но вместе с тем красивое украшение сайта. Простой скрипт отображает png-изображение в углу страницы. Вот пример одного из вариантов:

Метель

JS-скрипт реализует анимацию метели на сайте. Такое незамысловатое украшение создаст новогоднее настроение посетителям. Скрипт реализован на pixi.js.

Новогодняя гирлянда

Простая гирлянда, выполненная на основе SVG-изображений и CSS. Все лампочки в гирлянде плавно мигают. Можно экспериментировать с фоном, общим стилем, цветом лампочек, скоростью воспроизведения анимации и так далее.

Гирлянда на JavaScript

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

Боковая панель с Санта-Клаусом

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

Новогодний фейерверк

Скрипт реализован на jQuery и HTML 5 Canvas. С его помощью на страницу выводится анимация фейерверка, состоящего из различных фигур: от кругов и овалов до сердечек и контуров планет. Демо можно посмотреть на сайте.

Таймер обратного отсчёта

Один из вариантов реализации таймера обратного отсчёта до Нового года. Скрипт написан полностью на JavaScript. Если захотите использовать его каждый год, то в нём не понадобится ничего менять — скрипт не завязан на конкретной дате.

Новогодняя открытка

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

Мы представили далеко не все варианты украшений сайта к Новому году. В комментариях вы можете рассказать о своём опыте украшения сайта и поделиться ссылками на другие скрипты.

Предупреждая возражения, да, он не идеален, а в реплаях даже указали короткий код со Stack Overflow.

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

Вот, что у вас получится:

Приступим. Сперва создайте обыкновенный блок div, а под ним расположите textarea.

В блок вставьте рандомный текст. Кричащий банан использовал Lorem Ipsum — классика.

Оба блока должны генерировать один и тот же текст. В местах, где строка должна переноситься на новый абзац в поле ввода, добавьте тэг br внутри блока div.

Для этой же разбивки в коде указываем text.split(/\r?\n/g). Создаём компонент для разбивки, оборачиваем строки во фрагменты и не забываем указать тэг br.

Задаём блоку div и textarea одинаковые className и описываем свойства. Все свойства должны совпадать, кроме высоты.

В div добавляем свойство break-word, а textarea перемещаем поверх блока. Добавляем к окошку текста позиционирование absolute, а высоту выстраиваем в 100%. Таким образом, высота textarea будет равна высоте div, а границы textarea будут растягиваться по высоте контента.

Вот и всё! ?

Если вы хотите узнать ещё больше про фишки на HTML + CSS, научитесь делать простейшие анимации:

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

Виды анимаций

Самые простые и распространённые виды анимаций — CSS Transition и CSS Animation.

CSS Transition

Transition — это сокращённое CSS-свойство, которое позволяет управлять плавным переходом между двумя состояниями элемента.

Свойство Transition состоит из:

• transition-property — название свойства, к которому применяется эффект перехода.
• transition-duration — длительность перехода.
• transition-timing-function — временную функцию перехода (то, как будут определены промежуточные значения для свойства, которое участвует в переходе).
• transition-delay — задержку перед началом перехода.

{"@context":"http://schema.org","@type":"VideoObject","name":"u0412u0438u0434u044b u0430u043du0438u043cu0430u0446u0438u0438 u043du0430 u0432u0435u0440u0441u0442u043au0435: u0441u0432u043eu0439u0441u0442u0432u0430, u043eu0441u043eu0431u0435u043du043du043eu0441u0442u0438, u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430","description":"u0420u0430u0441u0441u043au0430u0437u044bu0432u0430u0435u043c u043e u0441u0432u043eu0439u0441u0442u0432u0430u0445 u0438 u043eu0441u043eu0431u0435u043du043du043eu0441u0442u044fu0445 u0430u043du0438u043cu0430u0446u0438u0438 CSS, JavaScript u0438 SVG u0432 u0432u0435u0431-u0440u0430u0437u0440u0430u0431u043eu0442u043au0435, u0430 u0442u0430u043au0436u0435 u043fu0440u0438u0432u043eu0434u0438u043c u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430.","thumbnailUrl":"https://media.tproger.ru/uploads/2022/08/7363300_animation_design_graphic_movement_multimedia_icon-cover.png","uploadDate":"2022-08-26T11:03:18+03:00","embedUrl":"https://codepen.io/danilabr/pen/abYZVqv","regionsAllowed":"RU, EU"}

Плюсы: Это наилучший способ (с точки зрения простоты и быстродействия), когда есть всего два состояния элемента в зависимости от одного условия. Например, при наведении мышкой, при нажатии на элемент, и т. п.

Минусы: transition не позволяет изменять свойства элемента, если состояний больше, чем два. Также невозможно делать бесконечные анимации.

Особенности: в значении свойства transition можно указывать как отдельные CSS-свойства со своими значениями, так и использовать ключевое слово all. Оно скажет браузеру использовать переход для всех свойств, которые есть внутри CSS-правила.

CSS Animation

Animation — сокращённое CSS-свойство, включающее в себя:

• animation-name — название.
• animation-duration — длительность.
• animation-timing-function — временную функцию (по аналогии с transition-timing-function).
• animation-delay — задержку перед началом.
• animation-iteration-count — количество повторений.
• animation-direction — направление (можно запустить анимацию наоборот, начиная с конца).
• animation-fill-mode — то, как будут применяться стили ключевых кадров до и после окончания анимации.
• animation-play-state — свойство, которое позволяет поставить анимацию на паузу и продолжить с того места, на котором она остановилась.

Чтобы создать анимацию, нужно описать директиву @keyframes с названием анимации и описанием ключевых кадров:

Для того, чтобы использовать эту анимацию, достаточно добавить к элементу свойство animation с названием анимации и её опциями:

В следующем простом примере при клике на элемент в JS добавляется и удаляется класс .is-animated, что включает и выключает анимацию

{"@context":"http://schema.org","@type":"VideoObject","name":"u0412u0438u0434u044b u0430u043du0438u043cu0430u0446u0438u0438 u043du0430 u0432u0435u0440u0441u0442u043au0435: u0441u0432u043eu0439u0441u0442u0432u0430, u043eu0441u043eu0431u0435u043du043du043eu0441u0442u0438, u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430","description":"u0420u0430u0441u0441u043au0430u0437u044bu0432u0430u0435u043c u043e u0441u0432u043eu0439u0441u0442u0432u0430u0445 u0438 u043eu0441u043eu0431u0435u043du043du043eu0441u0442u044fu0445 u0430u043du0438u043cu0430u0446u0438u0438 CSS, JavaScript u0438 SVG u0432 u0432u0435u0431-u0440u0430u0437u0440u0430u0431u043eu0442u043au0435, u0430 u0442u0430u043au0436u0435 u043fu0440u0438u0432u043eu0434u0438u043c u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430.","thumbnailUrl":"https://media.tproger.ru/uploads/2022/08/7363300_animation_design_graphic_movement_multimedia_icon-cover.png","uploadDate":"2022-08-26T11:03:18+03:00","embedUrl":"https://codepen.io/danilabr/pen/xxWEVpQ","regionsAllowed":"RU, EU"}

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

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

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

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

SVG animation

SVG можно анимировать двумя способами: с помощью CSS-анимации SMIL-анимации.

Анимация SVG с помощью CSS ничем не отличается от обычной animation. Мы также с помощью @keyframes создаём анимацию, описываем в ней свойства, которые изменяем, и используем её при необходимости.

Есть три «но»:

• если в SVG что-то не получилось анимировать с помощью CSS-анимации,
• или нужно устанавливать зависимости между разными анимациями (например, запустить вторую анимацию через 3 секунды после того, как закончится первая анимация),
• либо нужно плавно превратить один вид SVG в другой, во всех этих (и некоторых других) случаях необходимо использовать SMIL-анимацию для SVG.

Так выглядит простая SMIL-анимация движения круга по клику мышки:

{"@context":"http://schema.org","@type":"VideoObject","name":"u0412u0438u0434u044b u0430u043du0438u043cu0430u0446u0438u0438 u043du0430 u0432u0435u0440u0441u0442u043au0435: u0441u0432u043eu0439u0441u0442u0432u0430, u043eu0441u043eu0431u0435u043du043du043eu0441u0442u0438, u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430","description":"u0420u0430u0441u0441u043au0430u0437u044bu0432u0430u0435u043c u043e u0441u0432u043eu0439u0441u0442u0432u0430u0445 u0438 u043eu0441u043eu0431u0435u043du043du043eu0441u0442u044fu0445 u0430u043du0438u043cu0430u0446u0438u0438 CSS, JavaScript u0438 SVG u0432 u0432u0435u0431-u0440u0430u0437u0440u0430u0431u043eu0442u043au0435, u0430 u0442u0430u043au0436u0435 u043fu0440u0438u0432u043eu0434u0438u043c u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430.","thumbnailUrl":"https://media.tproger.ru/uploads/2022/08/7363300_animation_design_graphic_movement_multimedia_icon-cover.png","uploadDate":"2022-08-26T11:03:18+03:00","embedUrl":"https://codepen.io/danilabr/pen/KKoXvYq","regionsAllowed":"RU, EU"}

Примеры:

1) Анимация SMIL + CSS. На CSS анимируется изменение цвета и перемещение фигуры, с помощью SMIL фигура изменяет свой контур.

{"@context":"http://schema.org","@type":"VideoObject","name":"u0412u0438u0434u044b u0430u043du0438u043cu0430u0446u0438u0438 u043du0430 u0432u0435u0440u0441u0442u043au0435: u0441u0432u043eu0439u0441u0442u0432u0430, u043eu0441u043eu0431u0435u043du043du043eu0441u0442u0438, u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430","description":"u0420u0430u0441u0441u043au0430u0437u044bu0432u0430u0435u043c u043e u0441u0432u043eu0439u0441u0442u0432u0430u0445 u0438 u043eu0441u043eu0431u0435u043du043du043eu0441u0442u044fu0445 u0430u043du0438u043cu0430u0446u0438u0438 CSS, JavaScript u0438 SVG u0432 u0432u0435u0431-u0440u0430u0437u0440u0430u0431u043eu0442u043au0435, u0430 u0442u0430u043au0436u0435 u043fu0440u0438u0432u043eu0434u0438u043c u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430.","thumbnailUrl":"https://media.tproger.ru/uploads/2022/08/7363300_animation_design_graphic_movement_multimedia_icon-cover.png","uploadDate":"2022-08-26T11:03:18+03:00","embedUrl":"https://codepen.io/nikkipantony/pen/rNVepmY","regionsAllowed":"RU, EU"}

2) Здесь анимация полностью сделана с помощью SMIL

{"@context":"http://schema.org","@type":"VideoObject","name":"u0412u0438u0434u044b u0430u043du0438u043cu0430u0446u0438u0438 u043du0430 u0432u0435u0440u0441u0442u043au0435: u0441u0432u043eu0439u0441u0442u0432u0430, u043eu0441u043eu0431u0435u043du043du043eu0441u0442u0438, u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430","description":"u0420u0430u0441u0441u043au0430u0437u044bu0432u0430u0435u043c u043e u0441u0432u043eu0439u0441u0442u0432u0430u0445 u0438 u043eu0441u043eu0431u0435u043du043du043eu0441u0442u044fu0445 u0430u043du0438u043cu0430u0446u0438u0438 CSS, JavaScript u0438 SVG u0432 u0432u0435u0431-u0440u0430u0437u0440u0430u0431u043eu0442u043au0435, u0430 u0442u0430u043au0436u0435 u043fu0440u0438u0432u043eu0434u0438u043c u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430.","thumbnailUrl":"https://media.tproger.ru/uploads/2022/08/7363300_animation_design_graphic_movement_multimedia_icon-cover.png","uploadDate":"2022-08-26T11:03:18+03:00","embedUrl":"https://codepen.io/neilorangepeel/pen/rOvJmz","regionsAllowed":"RU, EU"}

3) Ещё один пример морфинга (изменение контура SVG)

{"@context":"http://schema.org","@type":"VideoObject","name":"u0412u0438u0434u044b u0430u043du0438u043cu0430u0446u0438u0438 u043du0430 u0432u0435u0440u0441u0442u043au0435: u0441u0432u043eu0439u0441u0442u0432u0430, u043eu0441u043eu0431u0435u043du043du043eu0441u0442u0438, u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430","description":"u0420u0430u0441u0441u043au0430u0437u044bu0432u0430u0435u043c u043e u0441u0432u043eu0439u0441u0442u0432u0430u0445 u0438 u043eu0441u043eu0431u0435u043du043du043eu0441u0442u044fu0445 u0430u043du0438u043cu0430u0446u0438u0438 CSS, JavaScript u0438 SVG u0432 u0432u0435u0431-u0440u0430u0437u0440u0430u0431u043eu0442u043au0435, u0430 u0442u0430u043au0436u0435 u043fu0440u0438u0432u043eu0434u0438u043c u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430.","thumbnailUrl":"https://media.tproger.ru/uploads/2022/08/7363300_animation_design_graphic_movement_multimedia_icon-cover.png","uploadDate":"2022-08-26T11:03:18+03:00","embedUrl":"https://codepen.io/manabox/pen/KwVReL","regionsAllowed":"RU, EU"}

Плюсы:

• SMIL анимация будет работать даже если вам нужно вставить SVG с помощью тега img, либо через background-image в CSS.
• С помощью SMIL анимации можно анимировать те атрибуты, которые не доступны для CSS-анимации. Например, анимировать точки в теге , чтоб создать эффект плавного перехода от одной фигуры к другой.

Минусы: По сути SMIL-анимация — это отдельная спецификация со своими правилами и тонкостями, которую необходимо изучать отдельно от CSS.

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

JS-Анимация

Говоря простым языком, это плавное изменение стилей элемента через JavaScript. С помощью JS анимации можно контролировать все стили элемента на любом этапе анимации, менять их в зависимости от любых условий. С помощью чистого JS делаются анимации переключения слайдов, раскрытие-закрытие аккордеона, различные перемещения блоков по определённым условиям, и многое многое другое.

Примеры:

1) Довольно необычный слайдер

{"@context":"http://schema.org","@type":"VideoObject","name":"u0412u0438u0434u044b u0430u043du0438u043cu0430u0446u0438u0438 u043du0430 u0432u0435u0440u0441u0442u043au0435: u0441u0432u043eu0439u0441u0442u0432u0430, u043eu0441u043eu0431u0435u043du043du043eu0441u0442u0438, u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430","description":"u0420u0430u0441u0441u043au0430u0437u044bu0432u0430u0435u043c u043e u0441u0432u043eu0439u0441u0442u0432u0430u0445 u0438 u043eu0441u043eu0431u0435u043du043du043eu0441u0442u044fu0445 u0430u043du0438u043cu0430u0446u0438u0438 CSS, JavaScript u0438 SVG u0432 u0432u0435u0431-u0440u0430u0437u0440u0430u0431u043eu0442u043au0435, u0430 u0442u0430u043au0436u0435 u043fu0440u0438u0432u043eu0434u0438u043c u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430.","thumbnailUrl":"https://media.tproger.ru/uploads/2022/08/7363300_animation_design_graphic_movement_multimedia_icon-cover.png","uploadDate":"2022-08-26T11:03:18+03:00","embedUrl":"https://codepen.io/Coolok/pen/QWzKNW","regionsAllowed":"RU, EU"}

2) Анимация эффекта при движении мышкой

{"@context":"http://schema.org","@type":"VideoObject","name":"u0412u0438u0434u044b u0430u043du0438u043cu0430u0446u0438u0438 u043du0430 u0432u0435u0440u0441u0442u043au0435: u0441u0432u043eu0439u0441u0442u0432u0430, u043eu0441u043eu0431u0435u043du043du043eu0441u0442u0438, u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430","description":"u0420u0430u0441u0441u043au0430u0437u044bu0432u0430u0435u043c u043e u0441u0432u043eu0439u0441u0442u0432u0430u0445 u0438 u043eu0441u043eu0431u0435u043du043du043eu0441u0442u044fu0445 u0430u043du0438u043cu0430u0446u0438u0438 CSS, JavaScript u0438 SVG u0432 u0432u0435u0431-u0440u0430u0437u0440u0430u0431u043eu0442u043au0435, u0430 u0442u0430u043au0436u0435 u043fu0440u0438u0432u043eu0434u0438u043c u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430.","thumbnailUrl":"https://media.tproger.ru/uploads/2022/08/7363300_animation_design_graphic_movement_multimedia_icon-cover.png","uploadDate":"2022-08-26T11:03:18+03:00","embedUrl":"https://codepen.io/morphed/pen/LZWppE","regionsAllowed":"RU, EU"}

Плюсы: Анимация с помощью JavaScript позволяет сделать то, на что не способна CSS-анимация. Можно как угодно манипулировать элементами. Также в любом месте анимации её можно замедлять, приостанавливать, и т.п.

Минусы: JS-анимация часто более ресурсозатратна для браузеров.

Особенности:

• если написать JS-анимацию неправильно, то есть большой шанс, что на слабых устройствах она будет тормозить. Как этого избежать поговорим ниже.
• для JS-анимаций есть большое количество готовых библиотек (например, anime.js), которые позволяют создавать анимации быстрее и эффективнее (особенно сложные), нежели писать их руками.

JS canvas

Canvas — это холст. То есть всего лишь один тег в html-коде. При создании анимации внутри canvas все изменения происходят внутри одного тега. Всё, что находится внутри canvas, не существует в DOM-дереве. Но с помощью JS мы можем создавать, перемещать и изменять любые элементы, которые будут находиться в canvas.

Плюсы: при создании анимации внутри canvas браузеру не нужно постоянно изменять и пересчитывать всю страницу, расположение элементов относительно друг от друга, и т.п.

Минусы: как и все предыдущие виды анимаций, canvas позволяет реализовать только 2D-графику.

Примеры:

1) Анимация снегопада

{"@context":"http://schema.org","@type":"VideoObject","name":"u0412u0438u0434u044b u0430u043du0438u043cu0430u0446u0438u0438 u043du0430 u0432u0435u0440u0441u0442u043au0435: u0441u0432u043eu0439u0441u0442u0432u0430, u043eu0441u043eu0431u0435u043du043du043eu0441u0442u0438, u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430","description":"u0420u0430u0441u0441u043au0430u0437u044bu0432u0430u0435u043c u043e u0441u0432u043eu0439u0441u0442u0432u0430u0445 u0438 u043eu0441u043eu0431u0435u043du043du043eu0441u0442u044fu0445 u0430u043du0438u043cu0430u0446u0438u0438 CSS, JavaScript u0438 SVG u0432 u0432u0435u0431-u0440u0430u0437u0440u0430u0431u043eu0442u043au0435, u0430 u0442u0430u043au0436u0435 u043fu0440u0438u0432u043eu0434u0438u043c u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430.","thumbnailUrl":"https://media.tproger.ru/uploads/2022/08/7363300_animation_design_graphic_movement_multimedia_icon-cover.png","uploadDate":"2022-08-26T11:03:18+03:00","embedUrl":"https://codepen.io/barisck/pen/yLaOjOY","regionsAllowed":"RU, EU"}

2) Игра змейка на canvas

{"@context":"http://schema.org","@type":"VideoObject","name":"u0412u0438u0434u044b u0430u043du0438u043cu0430u0446u0438u0438 u043du0430 u0432u0435u0440u0441u0442u043au0435: u0441u0432u043eu0439u0441u0442u0432u0430, u043eu0441u043eu0431u0435u043du043du043eu0441u0442u0438, u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430","description":"u0420u0430u0441u0441u043au0430u0437u044bu0432u0430u0435u043c u043e u0441u0432u043eu0439u0441u0442u0432u0430u0445 u0438 u043eu0441u043eu0431u0435u043du043du043eu0441u0442u044fu0445 u0430u043du0438u043cu0430u0446u0438u0438 CSS, JavaScript u0438 SVG u0432 u0432u0435u0431-u0440u0430u0437u0440u0430u0431u043eu0442u043au0435, u0430 u0442u0430u043au0436u0435 u043fu0440u0438u0432u043eu0434u0438u043c u043fu0440u0438u043cu0435u0440u044b u043au043eu0434u0430.","thumbnailUrl":"https://media.tproger.ru/uploads/2022/08/7363300_animation_design_graphic_movement_multimedia_icon-cover.png","uploadDate":"2022-08-26T11:03:18+03:00","embedUrl":"https://codepen.io/Derek323/pen/XXzGOx","regionsAllowed":"RU, EU"}

JS. WebGL / ThreeJs

WebGL — технология, которая добавляет в браузер 3D-графику. Самая популярная библиотека для работы с WebGL (на данный момент) — three.js. Она существенно упрощает порог вхождения в технологию WebGL. Благодаря поддержке 3d, с помощью three.js часто делаются браузерные 3d игры.

Примеры:

• На этом сайте приведены примеры игр, созданных с помощью three.js
• Земля (шар), на которой есть интерактивные точки. При нажатии на точки открываются описания.

Плюсы: это единственная возможность создавать полноценную 3D-анимацию в браузере.

Минусы: даже учитывая, что three.js оптимизирует анимацию, чаще всего анимация на three.js — это огромная нагрузка на браузер, и на средних и слабых компьютерах анимация будет тормозить.

Как работают анимации в браузере

Что происходит в браузере, когда мы запускаем анимацию? Каким образом браузер перерисовывает все эти кадры? Какие процессы происходят кроме просто перерисовки стилей? Зная ответы на эти вопросы, можно грамотно оптимизировать анимацию.

Вот 5 основных этапов, которые проходит браузер во время анимации:

1) JavaScript. Браузер смотрит влияние JavaScript на стили на странице.

2) Style. Из CSS для каждого элемента рассчитываются стили, которые отвечают за внешний вид (размеры, отступы, цвета).

3) Layout. Браузер рассчитывает местоположение каждого элемента относительно друг друга. А также как они влияют друг на друга.

На всех этих этапах браузер не отрисовывает элементы. Он всего лишь считывает их характеристики.

4) Paint. На данном этапе уже прорисовываются все элементы. Каждый пиксель каждого элемента.

5) Composite. Происходит проверка, какой элемент на какой наложился сверху. Например, снизу фон, а поверх него остальные элементы.

Все 5 этапов проходят по умолчанию при загрузке страницы.

Во время анимации в браузере могут быть три варианта:

• Все эти 5 этапов проходят тогда, когда мы изменяем CSS-свойства, которые рассчитываются на процессоре (CPU) и влияют на размеры элемента, его местоположение, внешние и внутренние отступы. Это худший вариант.

• Если мы изменяем свойства, которые не влияют на расположение элемента (фон, тени, цвет, и т. п.), то браузер проходит 4 этапа — 1, 2, 4, 5 (без третьего, одного из самых затратных, — этапа Layout).
• Лучшим вариантом анимаций с точки зрения работы браузера будет вариант, когда мы проходим только 1, 2, и 5 этап. (без этапов Layout и Paint). Это возможно, если использовать свойства opacity и transform. opacity — это просто прозрачность, а transform фиксирует область за элементом, и для него перестаёт просчитываться взаимодействие с другими элементами. Это позволяет не перерисовывать всю страницу.

Основные правила для успешной работы анимаций

Самая сложная и важная часть веб-анимации — добиться её плавности. То есть сделать так, чтоб количество кадров анимации приблизилось к 60 fps. Существует множество факторов, которые влияют на плавность анимации — это и мощность устройства, и размеры экрана, и количество пикселей на экране, и многое другое.

Приведу несколько способов оптимизации анимаций.

• С transition лучше не использовать ключевое слово all, а задавать конкретные свойства, поскольку в CSS-правиле в дальнейшем могут добавиться другие свойства, переход между которыми нам не нужен. Также, когда используется ключевое all, браузер проходит по всем свойствам в CSS-правиле, определяя, какие можно анимировать, а какие нет. Это создаёт лишнюю нагрузку, что незначительно, но всё же влияет на быстродействие анимации.

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

• Выносить анимированные элементы на отдельный слой, чтобы анимация происходила за с помощью видеокарты. (transform: translateZ(0); или transform: translate3d(0, 0, 0); )

• использовать свойство will-change, которое заранее говорит браузеру о тех свойствах, которые будут анимированы. При этом браузер оптимизирует анимацию, и, если нужно, то переносит рендеринг видеокарту. (Не следует использовать для простой анимации, чтоб не путать браузер на что нужно, а на что не стоит тратить особенное внимание).

• Если элемент визуально отсутствует на странице после или до анимации, то необходимо его скрыть с помощью display: none или visibility: hidden, для того, чтоб освободить ресурсы браузера. Это полностью выключит считывание событий и считывание анимаций.

• Если анимаций много, то лучше запускать их последовательно. Лучше для этого не использовать delay, потому что это равнозначно одновременному запуску нескольких анимаций, что съедает ресурсы.

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

• Если используем JS-анимацию, то обязательно нужно использовать функцию window.requestAnimationFrame(). В коде это выглядит так:

Эта функция вызывается браузером каждый раз, когда он приступает к пересчёту местоположения всех элементов, пересмотру влияния JS, то есть когда проходит полный рендер. В идеальных условиях это 60 раз в секунду. Но интервалы между этими вызовами рассчитываются браузером, и зависят от нагрузки на устройство, от заряда батареи и т.п. Благодаря тому, что браузер сам вызывает эту функцию, когда ему нужно, оптимизируется быстродействие анимации.

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

Итог

Хочу обратить особенное внимание на то, что при создании веб-анимации важно думать о том, как с этим будет работать браузер, что именно он будет делать. Например, сколько раз и за какое время он будет вызывать события для запуска анимации. И о том, насколько анимация затрагивает перерисовку блоков или даже всей страницы. За счёт каких ресурсов компьютера будет исполняться код (CPU или GPU). По возможности не стоит переусложнять анимацию. Чем проще анимация, тем она производительнее. Анимация должна быть украшением, но никак не мешать пользователям пользоваться сайтом или приложением.

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

Дизайн влияет не только на визуальное восприятие сайта, но и на скорость его загрузки. Узнали, как найти золотую середину и не перегрузить сайты.

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

Если мы говорим об информационных порталах, нужная информация просто затеряется среди побочной.

Перегруженный дизайн интернет-магазина отвлекает от сути и “мешает” приобрести товар или услугу – это становится невозможно.

Сильно перегруженный дизайн влияет на работу сайта и скорость его загрузки.

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

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

Начните анализировать сайт с шапки. Если там указано по три телефона и e-mail разных филиалов и отделов, несколько адресов с указанием близости к станции метро и временем работы каждого, а также есть несколько меню (основное и каталог), логотип, девиз, кнопка заказать звонок – этот сайт однозначно перегружен.

Несмотря на благие намерения – указать всю важную информацию, мы невольно мешаем пользователю пользоваться сайтом. Шапка из примера займет 35% первого экрана и будет препятствовать совершению целевых действий.

Основное правило – использовать сетку. От нее зависит расположение контента, отступы. Кстати, и отступами пренебрегать не стоит: между блоками, внутри блоков, в тексте, в кнопках и элементах должен быть воздух. Это поможет сделать акцент на важном, расположить контент по приоритету.

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

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

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

Есть сервис Яндекс Взгляд –  это сервис по аналитике UX интерфейса, его УТП «Принимайте дизайн-решения, основанные на данных. Тестируйте варианты интерфейсов на этапе прототипа, чтобы выбрать самый понятный для пользователей».

Полезная литература:

1. Стив Круг. «Веб-дизайн: книга Стива Круга, или Не заставляйте меня думать!»
2. Дональд Норман. «Дизайн привычных вещей»
3. Алан Купер. «Психбольница в руках пациентов»
4. Влад Головач. «Дизайн пользовательского интерфейса 2. Искусство мыть слона»
5. Джейми Леви. «UX-стратегия. Чего хотят пользователи и как им это дать»
6. Расс Унгер и Кэролайн Чендлер. «UX-дизайн. Практическое руководство по проектированию опыта взаимодействия»

Для начала стоит сказать, дизайн делится на два направления: UI и UX. Первый – это интерфейс, второй это опыт пользователя. Мы сейчас будем говорить в общем, но акцент в каждом из ответов буду упоминать. Начнём с того, что понятие “перегруженный дизайн” довольно относительное. Ведь тут надо понимать, о чём собственно веб-страница, её цель.

Её цель может быть получить контакты лида, либо просто сделать так, чтобы пользователь засиделся на странице. В первом случае клиенту лучше увидеть проблему, её решение, цену и почему данная компания лучше клиентов, оказывающие аналогичные услуги. Это может его побудить оставить контакты.

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

По скорости загрузки, тут уже мы затронем скорее всего техническую часть. Потому что один и тот же дизайн можно сверстать так, что он будет оптимизирован буквально до 1 мегабайта и всё будет загружаться на отлично. Если сайт имеет километровую длину, то её тоже можно заставить быстро грузиться (есть такие технологии). Поэтому перегруженность дизайна скорее влияет на пользователя, на его время потраченное на сайте. Если он за 30 секунд не нашел для себя полезного, то он скорее всего выйдет из сайта.

Определить перегруженность дизайна непросто. Опять же тут уже обращаемся к UX составляющей. Может быть случай, где для 50% пользователь сайт полон изобилием информации, а для остальных он достаточно осветил их проблему и пути их решения. Тут уже следует разделять аудиторию, делать анализ и создавать AB тесты.

AB тестирование грубо говоря следующее: создаём 2 сайта заточенные под разные аудитории (например мужскую и женскую) и настраиваем рекламу или способы привлечения по полу. Оценив поведенческие факторы пользователей мы сможем подобрать для.каждой группы тот дизайн, который им больше всего подойдёт.

Можно пользоваться правилом пирамиды наоборот, т.е. создать дизайн с минимальной информацией и постепенно наращивать её и тестировать результат. Специальных автоматизированных сервисов нет, посколько дизайн никак алгоритмически. не читается. Да google pagespeed может определить насколько удобно пользоваться сайтом, но он это делает считывая машинный код.

Скорректировать дизайн могут специалисты. Литература конечно же есть, но не стоит забивать ею голову. Главное опыт, потому что каждый случай индивидуален. Можно локализовать каждый блок дизайна под уже известный проект, это сильно поможет. Про то как найти баланс я уже сказал. Надо проводить тестирование и реакцию пользователей.