Как стать веб-дизайнером с нуля в 2026: Tilda, Figma, план

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

Если вас интересует второй путь, у нас есть отдельный пошаговый план входа в UX/UI-дизайн. Эта статья про первый: сайты, лендинги, Tilda, Figma и адаптив. Ниже по шагам: как стать веб-дизайнером, что учить в каком порядке, сколько стоит обучение и откуда берутся первые заказы без опыта.

Веб-дизайнер и UX/UI-дизайнер: где проходит граница

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

Если вам нравится закрывать проекты целиком и видеть запущенный сайт через 2-3 недели, веб-дизайн подходит лучше. Если тянет копаться в аналитике и спорить о том, почему пользователи бросают корзину, смотрите в сторону UX. Подробнее о соседних ролях мы писали в разборе чем UX-дизайнер отличается от графического.

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

Рабочая неделя веб-дизайнера на примере лендинга

Основная работа веб-дизайнера: превратить бриф клиента в понятную страницу, которая продаёт. Рисование «красивой картинки» занимает меньше, чем ожидают новички.

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

• Понедельник. Созвон с владелицей студии, бриф: цены, расписание, фото зала, чем отличаются от соседей. Дизайнер смотрит 5-7 сайтов конкурентов в городе.
• Вторник. Прототип: порядок блоков от первого экрана до формы записи. Здесь решается, увидит ли посетитель цену и кнопку «Записаться» без долгой прокрутки.
• Среда и четверг. Дизайн в Figma: сетка, шрифтовая пара, цвета, обработка фотографий, отдельный макет для смартфона.
• Пятница. Сборка на Tilda и проверка на телефоне.

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

Инструменты веб-дизайнера и нужен ли код

Обязательный минимум веб-дизайнера в 2026 году: Figma для макетов и Tilda для сборки сайтов без программирования. Этого хватает, чтобы закрывать большинство заказов малого бизнеса. HTML и CSS на базовом уровне полезны для разговора с разработчиками, но писать вёрстку самому новичку не обязательно.

Что освоить в Figma

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

Tilda: сайт без программиста

Tilda закрывает разрыв между макетом и опубликованным сайтом. Готовые блоки подходят для быстрых проектов, а в Zero Block дизайнер переносит собственный макет из Figma почти один в один. По официальной странице тарифов, бесплатный план даёт 1 сайт, Personal стоит 500 ₽ в месяц при оплате за год, а Business за 1000 ₽ в месяц (тоже при оплате за год) добавляет 5 сайтов и экспорт исходного кода.

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

Адаптив: почему мобильная версия важнее десктопной

Мобильная версия давно перестала быть «урезанной копией». В документации Google Search прямо сказано: для индексирования и ранжирования используется мобильная версия сайта, а рекомендуемый подход назван адаптивным дизайном. Клиенту это объясняется просто: плохо собранный мобильный экран стоит ему и заявок, и позиций в поиске.

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

Что ещё пригодится

• Photoshop для обработки фото клиента: в малом бизнесе снимки почти всегда сделаны на телефон.
• Webflow как следующий шаг после Tilda, когда нужна сложная анимация или работа с иностранными заказчиками.
• Нейросети для черновых изображений и вариантов текста. В опросе Т-Ж о зарплатах дизайнеров 74,7% респондентов сказали, что уже используют нейросети в работе.
• Основы копирайтинга. Лендинг с красивым визуалом и пустыми заголовками не продаёт, а клиенты малого бизнеса часто приходят вообще без текстов.

Диплом и художественная школа: когда они помогают

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

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

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

Чем закрыть теорию бесплатно

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

• Стив Круг, «Не заставляйте меня думать». Самая практичная из списка: короткая, с примерами реальных страниц и объяснением, почему посетитель не читает текст, а сканирует его глазами за пару секунд.
• Александра Королькова, «Живая типографика». Про шрифты и ритм.
• Джесс Джеймс Гарретт, «Веб-дизайн. Элементы опыта взаимодействия». Пять слоёв сайта, от стратегии до визуала.
• Люк Вроблевски, «Сначала мобильные». Почему проектировать стоит от экрана телефона.

План обучения веб-дизайну на 6-8 месяцев

Реалистичный срок от нуля до первых платных заказов при 10-12 часах занятий в неделю составляет 6-8 месяцев. Быстрее получается у тех, кто уже работал с графикой или маркетингом. С третьего месяца каждая тема должна закрепляться проектом, который пойдёт в портфолио.

Полные профессии «Веб-дизайнер» в каталоге SkillEdge длятся 9-12 месяцев, и это не противоречие. Брать первые небольшие заказы на Tilda реально с середины такой программы, остальное время уходит на углублённые модули, которые нужны не всем.

Месяцы 1-2: основы и Figma

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

Месяцы 3-4: первые сайты и Tilda

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

Месяцы 5-6: адаптив, многостраничный сайт, Zero Block

Сайт на 4-5 страниц с каталогом или услугами, собранный в Zero Block по своему макету. Здесь новички впервые упираются в адаптив по-настоящему: то, что красиво смотрелось на 1200 пикселях, разваливается на ширине телефона.

Месяцы 7-8: упаковка и первые заказы

Портфолио, профиль на фриланс-площадках, первые 10-20 откликов. Параллельно стоит разобрать 1-2 реальных сайта местного бизнеса и предложить владельцам редизайн. Такой холодный заход срабатывает редко, но каждый отказ прокачивает умение презентовать работу.

Портфолио веб-дизайнера: три проекта вместо десяти концептов

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

1. Лендинг услуги. Одна страница с понятным оффером, ценами и формой заявки. Показывает, что вы умеете вести посетителя к действию.
2. Многостраничный сайт. Проверяет навигацию и единый стиль.
3. Редизайн существующего сайта. Было и стало, с объяснением, что и почему изменено. Самый убедительный формат для разговора с бизнесом: владелец сразу видит, как мог бы выглядеть его собственный сайт, и понимает, за что платит.

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

Сколько зарабатывает веб-дизайнер: данные 2024-2025

За 2024 год зарплата в вакансиях веб-дизайнеров выросла на 24%, с 58 000 до 72 200 ₽, а спрос на них увеличился на 23%. Это данные исследования агентства MateCa и hh.ru, которое опубликовал Sostav. Веб-дизайнер по-прежнему зарабатывает меньше дизайнера интерфейсов, но разрыв сокращается.

Для сравнения, в том же исследовании UI/UX-дизайнеры получали 101 500 ₽ при росте всего на 2%. Опрос Т-Ж 2025 года показывает похожую картину по всем дизайнерам.

• Медианная зарплата дизайнера по найму составила 140 000 ₽, это на 17% больше, чем годом ранее.
• Джуны получают 80 000 ₽ против 55 000 ₽ годом раньше.
• Дизайнеры интерфейсов зарабатывают 180 000 ₽, графические дизайнеры 109 000 ₽. Веб-дизайнер по задачам находится между ними, и его доход сильно зависит от того, ближе он к интерфейсам или к оформлению.
• Доход фрилансеров вырос на 43%, до 100 000 ₽.
• В регионах дизайнеры получают 97 850 ₽, в Москве 160 000 ₽, в Санкт-Петербурге 122 500 ₽.

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

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

Заменят ли нейросети веб-дизайнера

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

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

• Учиться промптам для картинок и текстов стоит сразу. Это экономит часы на заглушках и вариантах первого экрана.
• Ценность смещается в бриф и структуру. Сайт «как у всех» нейросеть соберёт сама, поэтому клиенту нужен дизайнер, который разберётся в его бизнесе и предложит, что поставить на первый экран.

Школы это тоже заметили. В каталоге SkillEdge у Skillbox и Нетологии уже есть веб-дизайнерские программы с пометкой «+ ИИ» или «+ Нейросети», и они дороже базовых: 181 582 ₽ против 133 684 ₽ у Skillbox, 147 400 ₽ против 121 900 ₽–132 938 ₽ у Нетологии. Платить за эту надбавку имеет смысл, только если в программе есть отдельные практические модули по ИИ. Одной обзорной лекции для такой разницы мало.

Курсы веб-дизайна: что показывает каталог SkillEdge

В каталоге SkillEdge сейчас есть программы, построенные именно вокруг веб-дизайна: короткие курсы по Tilda и Figma стоят от 34 364 ₽ до 42 377 ₽, полные профессии «Веб-дизайнер» стоят от 121 900 ₽ до 181 582 ₽. Разница в цене между форматами больше чем пятикратная, и для новичка она оправдана не всегда.

Цифры с графика текстом: No-code сайты с Tilda AI от Skillbox стоят 34 364 ₽ за 2 месяца, «Дизайнер сайтов на Tilda» 42 377 ₽ за 4 месяца. Полные программы: «Веб-дизайнер» Нетологии 121 900 ₽ на 11 месяцев, «Веб-дизайн 3.0» Skillbox 133 684 ₽ на 9 месяцев, «Веб-дизайнер 3.0» GeekBrains 171 831 ₽, «Веб-дизайнер + ИИ» Skillbox 181 582 ₽ на 12 месяцев.

При сравнении программ видна ещё одна закономерность: почти у всех полных курсов «старая» цена в 1,8-2,4 раза выше текущей. Скидка в 45-58% у этих курсов держится в каталоге не один день, поэтому торопиться с оплатой из-за таймера на сайте школы не стоит. Действующие промокоды мы собираем на странице скидок.

Какой формат выбрать

Позиция редакции: для цели «делать лендинги на заказ» короткого курса по Tilda плюс бесплатного тарифа и самостоятельной практики в Figma достаточно. Это около 42 тыс. ₽ вместо 120-180 тыс. ₽. Полная профессия оправдана в трёх случаях.

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

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

Где искать первые заказы и работу

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

• Первый платный заказ почти всегда маленький. Перенос сайта на Tilda, правка блока, баннер. Соглашайтесь: это отзыв и строка в портфолио.
• Узкая ниша продаёт лучше. «Лендинги для фитнес-студий» звучит для клиента убедительнее, чем «дизайнер сайтов любой сложности», потому что владелец студии видит в портфолио знакомые задачи: расписание, абонементы, запись на пробное занятие.
• Студиям нужны рабочие ссылки. Ссылка весит больше сертификата.
• Договор и предоплата с первого заказа. Без них правки растягиваются на месяцы, а оплата превращается в переговоры.

Ошибки, из-за которых новички бросают веб-дизайн

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

Ещё четыре ошибки встречаются постоянно.

1. Учить всё сразу. Photoshop, Illustrator, After Effects, Blender, код. Для старта нужны Figma и Tilda, остальное подключается под задачу.
2. Игнорировать мобильную версию. Макет только под десктоп в 2026 году выглядит как половина работы.
3. Копировать Dribbble. Эффектные концепты без текста и логики малому бизнесу почти ничего не говорят.
4. Выбирать курс по рекламе. Перед оплатой сравните программу, срок и цену хотя бы с 2-3 аналогами. Среди курсов, которые мы отслеживаем, одинаковые по сути программы отличаются в цене на десятки тысяч рублей.

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