Как составить резюме разработчика макетов: полное руководство на 2025 год

Разработчик макетов — профессия, где технические навыки встречаются с визуальной точностью. Ваше резюме должно показать не только знание HTML и CSS, но и способность превращать дизайн в работающий код, который быстро загружается и корректно отображается на всех устройствах. По данным исследований рынка труда, на одну вакансию верстальщика приходит в среднем 50-70 откликов. При этом рекрутер тратит 6-8 секунд на первичный просмотр резюме.

Ваша задача — за эти секунды показать, что вы не просто "верстаете страницы", а решаете бизнес-задачи: ускоряете загрузку сайта, обеспечиваете pixel-perfect точность, адаптируете интерфейсы под все экраны. Это руководство научит вас превращать технические навыки в конкурентное преимущество через конкретные формулы и примеры.

Заголовок резюме: как правильно назвать свою должность

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

Удачные варианты названия должности

Для русскоязычного рынка:

• Разработчик макетов
• Frontend-разработчик (верстальщик)
• HTML-верстальщик
• Специалист по верстке
• Web-разработчик (верстка)

Для международных компаний:

• Layout Developer
• Frontend Developer (HTML/CSS)
• UI Developer
• Markup Developer

Выбор конкретного варианта зависит от вакансии. Если в описании используется термин "Frontend-разработчик (верстальщик)" — используйте именно его. Системы ATS ищут точные совпадения ключевых слов.

Неудачные варианты и почему их избегать

Ключевые слова для прохождения ATS

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

Технологии (обязательно):

• HTML5, CSS3
• JavaScript (ES6+)
• Адаптивная верстка / Responsive Design
• Кроссбраузерность
• Git

Инструменты:

• Figma, Photoshop, Sketch
• Webpack, Gulp, npm
• Bootstrap, Tailwind CSS

Методологии и подходы:

• BEM
• SASS/SCSS
• Flexbox, CSS Grid
• Mobile-first
• Accessibility (WCAG)

Эти термины должны встречаться в разделах "Навыки" и "Опыт работы". Не просто перечисляйте их списком — встраивайте в описание проектов.

Раздел "О себе": три формулы для разных уровней

Блок "О себе" (или Summary) — это 50-70 слов, которые должны продать ваш опыт и ценность для компании. Избегайте общих фраз типа "ответственный", "коммуникабельный". Вместо этого используйте формулу: Опыт + Специализация + Ключевое достижение + Ценность для работодателя.

Формула для Junior-специалиста

Структура: Образование/курсы + технологии + количество проектов + что готовы дать компании

Пример:

"Frontend-разработчик с фокусом на адаптивной верстке. Прошел интенсив по HTML/CSS/JavaScript и создал 8 учебных проектов, включая интернет-магазин с корзиной и лендинг с анимациями. Владею Figma, Git, работаю по методологии BEM. Стремлюсь развиваться в продуктовой команде, готов быстро осваивать новые технологии и вносить вклад в качество пользовательского интерфейса."

Разбор:

• Указали конкретную специализацию (адаптивная верстка)
• Назвали количество проектов и их тип
• Перечислили актуальные инструменты
• Показали мотивацию и готовность к обучению

Формула для Middle-специалиста

Структура: Опыт в годах + масштаб проектов + ключевая метрика + технологический стек + фокус развития

Пример:

"Разработчик макетов с опытом 3+ года в e-commerce и fintech. Сверстал более 120 адаптивных страниц с поддержкой 5 браузеров, обеспечивая PageSpeed Score 90+. Специализируюсь на оптимизации производительности и accessibility. Технологии: HTML5, CSS3, SCSS, JavaScript, React (базово), Webpack, Git. Ищу позицию, где смогу влиять на архитектуру frontend-решений и делиться опытом с командой."

Разбор:

• Конкретный опыт в годах и сферах
• Измеримые результаты (120 страниц, PageSpeed 90+)
• Указана специализация (производительность, accessibility)
• Расширенный стек с упоминанием React
• Амбиция роста до более ответственной роли

Формула для Senior-специалиста

Структура: Экспертиза + масштаб влияния + бизнес-результат + менторство + системное мышление

Пример:

"Senior Frontend Developer с 6-летним опытом разработки пользовательских интерфейсов для высоконагруженных проектов (5M+ пользователей). Создал UI-kit и систему компонентов, которые ускорили разработку новых фич на 40%. Провел рефакторинг legacy-кода на 3 продуктах, улучшив метрики Core Web Vitals на 35%. Менторил 4 junior-разработчиков. Стек: HTML5, CSS3, TypeScript, React, Next.js, Webpack. Интересны роли Tech Lead или Frontend Architect в продуктовых компаниях."

Разбор:

• Указан масштаб проектов (5M+ пользователей)
• Системное влияние (UI-kit для команды)
• Бизнес-метрики (ускорение на 40%, улучшение Core Web Vitals)
• Опыт менторства
• Готовность к лидерским ролям

Технические навыки: как группировать и что указывать

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

Матрица навыков по категориям

Разделите технологии на группы. Это помогает рекрутеру быстро оценить ваш профиль и показывает системность мышления.

Базовая структура раздела "Навыки":

Языки разметки и стилей:

• HTML5 (семантическая верстка, microdata)
• CSS3 (Flexbox, Grid, animations, transitions)
• SCSS/SASS (миксины, функции, переменные)
• LESS (если актуально для вакансии)

Программирование:

• JavaScript (ES6+: async/await, деструктуризация, модули)
• TypeScript (базовый уровень для типизации компонентов)
• jQuery (для поддержки legacy-проектов)

Фреймворки и библиотеки:

• Bootstrap 5
• Tailwind CSS
• React (базовая интеграция верстки с компонентами)
• Vue.js (указывайте только если реально использовали)

Инструменты дизайна:

• Figma (экспорт ассетов, понимание Auto Layout)
• Adobe Photoshop (работа с макетами)
• Sketch, Zeplin (если есть опыт)

Сборщики и автоматизация:

• Webpack (настройка конфигурации, оптимизация бандлов)
• Gulp (автоматизация задач)
• npm/yarn (управление зависимостями)
• Vite (современная альтернатива Webpack)

Системы контроля версий:

• Git (ветвление, merge, rebase, cherry-pick)
• GitHub/GitLab (Pull Requests, code review)

Методологии и подходы:

• BEM (naming conventions)
• Адаптивная верстка (mobile-first подход)
• Кроссбраузерность (тестирование в Chrome, Firefox, Safari, Edge)
• Pixel-perfect верстка
• Accessibility (WCAG 2.1, ARIA-атрибуты)
• Progressive Web Apps (PWA) — базовые концепции

Таблица: обязательные, желательные и трендовые технологии 2025

Как указывать уровень владения

Избегайте субъективных оценок типа "продвинутый" или "средний". Используйте одну из трех моделей:

Модель 1: Годы опыта

• HTML/CSS — 4 года
• JavaScript — 3 года
• React — 1 год

Модель 2: Контекст применения

• HTML5: семантическая верстка, microdata, accessibility
• CSS3: Flexbox, Grid, animations, custom properties, препроцессоры
• JavaScript: ES6+, DOM-манипуляции, fetch API, базовая работа с React

Модель 3: Проектное подтверждение (самая сильная)

• Webpack: настроил конфигурацию для 5 проектов, оптимизировал размер бандлов на 30%
• Figma: перевел в код 50+ макетов с точностью 98% (pixel-perfect)

Актуальные технологии на 2025 год

Рынок frontend-разработки быстро меняется. Вот технологии, знание которых выделит ваше резюме:

CSS Container Queries — адаптивность на уровне компонентов, а не только viewport. Показывает, что вы следите за спецификациями.

Core Web Vitals — метрики производительности от Google (LCP, FID, CLS). Укажите, если оптимизировали проекты под эти показатели.

Accessibility (WCAG 2.1) — растет количество требований к доступности интерфейсов. Знание ARIA-атрибутов и семантической верстки становится обязательным.

TypeScript в верстке — даже базовая типизация props в React-компонентах показывает готовность к масштабируемым проектам.

Системы дизайна — опыт работы с design tokens, компонентными библиотеками (Storybook).

Опыт работы: формула описания проектов с метриками

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

Структура описания каждой позиции

Шапка позиции:

Тело описания:

1. Вводное предложение о проекте (1-2 строки)
2. Список из 4-6 достижений с метриками
3. Используемые технологии (в конце блока)

Формула "Задача → Действие → Результат"

Каждое достижение должно отвечать на три вопроса:

1. Задача: Какая проблема стояла перед бизнесом или командой?
2. Действие: Что конкретно вы сделали? Какие технологии применили?
3. Результат: К чему это привело? Как измерили успех?

Пример применения формулы:

Было (обязанность): Верстал страницы интернет-магазина

Стало (достижение):

Сверстал 45 адаптивных страниц интернет-магазина электроники (каталог, карточки товаров, корзина, чекаут) с поддержкой 5 браузеров, обеспечив PageSpeed Score 92/100 и увеличив мобильную конверсию на 18%

Разбор:

• Задача: нужен быстрый, адаптивный интернет-магазин
• Действие: сверстал 45 страниц с кроссбраузерностью
• Результат: 92 балла PageSpeed, +18% конверсии

Примеры описания опыта для разных уровней

Пример для Junior-специалиста (0-1 год опыта)

Почему этот пример работает:

• Показана динамика (12 лендингов за период)
• Есть метрики качества (95% pixel-perfect)
• Указан бизнес-результат (отзывы клиентов, -57% времени загрузки)
• Продемонстрировано умение работать с чужим кодом
• Показан прогресс в освоении Git

Пример для Middle-специалиста (2-4 года опыта)

Почему этот пример работает:

• Указан масштаб проекта (500K+ пользователей)
• Каждое достижение имеет метрику (-40%, -35%, +45%, -55%)
• Показано системное мышление (дизайн-система, рефакторинг)
• Упомянута работа в команде и документирование
• Расширенный стек с TypeScript и React

Пример для Senior-специалиста (5+ лет опыта)

Почему этот пример работает:

• Указан масштаб бизнеса ($5M выручка, 2M пользователей)
• Все достижения измеримы и привязаны к бизнес-метрикам
• Показано системное влияние (архитектура, CI/CD)
• Упомянуто лидерство и менторство
• Продвинутый стек с Next.js, TypeScript, testing

Глаголы действия для описания опыта

Используйте сильные глаголы, которые показывают вашу активную роль:

Разработка:

• Разработал / Сверстал
• Создал / Реализовал
• Спроектировал / Внедрил

Улучшение:

• Оптимизировал
• Ускорил / Улучшил
• Повысил / Увеличил

Изменения:

• Рефакторил / Переработал
• Мигрировал
• Модернизировал

Влияние:

• Автоматизировал
• Масштабировал
• Стандартизировал

Командная работа:

• Интегрировал (с командой backend)
• Координировал (с дизайнерами)
• Менторил / Обучил

Ключевые метрики для измерения успеха (KPIs)

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

Производительность:

• PageSpeed Score (до/после)
• Время загрузки страницы в секундах
• Core Web Vitals (LCP, FID, CLS)
• Размер бандлов в KB/MB
• Процент сокращения CSS/JS (-30%, -45%)

Объем работы:

• Количество сверстанных страниц/компонентов
• Количество проектов
• Количество исправленных багов

Качество:

• Процент pixel-perfect точности (95%, 98%)
• Покрытие браузеров (5 браузеров, включая IE11)
• Количество устройств/разрешений экрана
• Процент соответствия WCAG

Бизнес-результаты:

• Рост конверсии (%)
• Увеличение мобильного трафика (%)
• Снижение bounce rate (%)
• Ускорение time-to-market (%)

Командные метрики:

• Количество менторируемых разработчиков
• Процент ускорения разработки через UI-kit
• Сокращение времени code review

Трансформация "Обязанность → Достижение": еще 5 примеров

Портфолио: что включать и как презентовать

Для разработчика макетов портфолио — это не просто список ссылок, а доказательство качества кода и понимания best practices. Рекрутеры и техлиды обязательно захотят посмотреть ваш код.

Что должно быть в портфолио

GitHub-профиль (обязательно):

• 5-10 репозиториев с чистым, документированным кодом
• README с описанием проекта, стека, инструкцией по запуску
• Регулярные коммиты (показывают активность)
• Осмысленные названия коммитов (не "fix", а "fix: correct header alignment on mobile")

Живые примеры (deployed проекты):

• Верстка лендингов на GitHub Pages / Netlify / Vercel
• Интерактивные компоненты на CodePen или CodeSandbox
• Минимум 3-5 проектов разной сложности

Что показывать:

• Адаптивный лендинг с анимациями
• Интернет-магазин (хотя бы главная + каталог + карточка товара)
• Dashboard или админ-панель
• Сложный компонент (например, кастомный слайдер, фильтр, календарь)
• Пример работы с API (fetch + отображение данных)

Структура описания проекта в портфолио

Для каждого проекта в резюме или на GitHub указывайте:

Чего не должно быть в портфолио

• Учебных проектов с курсов "как есть" — рекрутеры узнают типовые задания
• Нерабочих ссылок — проверяйте перед отправкой резюме
• Кода без комментариев и README — показывает непрофессионализм
• Проектов 5-летней давности — технологии устаревают, показывайте актуальное
• Незавершенных работ — лучше 3 качественных проекта, чем 10 недоделанных

Образование и курсы: как правильно указывать

Для разработчика макетов формальное образование в IT не всегда обязательно. Многие успешные специалисты пришли в профессию через курсы и самообразование. Главное — правильно это подать.

Если у вас есть профильное образование

Если образование непрофильное

Указывайте кратко, без лишних деталей. Фокус смещайте на курсы и самообразование.

Затем сразу переходите к блоку с курсами и сертификатами.

Онлайн-курсы и буткемпы

Указывайте только релевантные курсы, которые дали практические навыки. Избегайте "сертификатов участника" — ценятся только курсы с проектами.

Хороший пример:

Плохой пример:

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

Самообразование

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

Типичные ошибки в резюме разработчика макетов

Даже опытные специалисты допускают ошибки, которые снижают шансы на приглашение. Вот топ-7 проблем с исправлениями.

Ошибка 1: Перечисление обязанностей вместо достижений

Плохо:

Хорошо:

Ошибка 2: Указание неактуальных или лишних технологий

Плохо:

Проблема: Flash мертв с 2020 года, Dreamweaver никто не использует, IE6 — это 2006 год. Перечисление всего подряд создает впечатление хаоса.

Хорошо:

Ошибка 3: Отсутствие ссылки на портфолио или GitHub

Рекрутеры хотят видеть код. Если ссылки нет — вы автоматически проигрываете конкурентам, у которых она есть.

Исправление:

В шапке резюме, рядом с контактами:

Ошибка 4: Резюме на 4+ страницы или слишком краткое (менее 1 страницы)

Оптимальный объем:

• Junior: 1-1.5 страницы A4
• Middle: 1.5-2 страницы
• Senior: 2-2.5 страницы

Если резюме разрослось до 4 страниц — удалите старые проекты (5+ лет назад), сократите описания ранних позиций до 2-3 пунктов.

Ошибка 5: Игнорирование ключевых слов из вакансии

ATS-системы ищут точные совпадения. Если в вакансии написано "адаптивная верстка", а у вас "responsive design" — система может не засчитать совпадение.

Исправление:

• Внимательно читайте вакансию
• Копируйте формулировки ключевых требований
• Встраивайте их в описание опыта естественным образом

Ошибка 6: Отсутствие метрик и измеримых результатов

"Улучшил производительность" — бесполезная фраза. Насколько улучшил? За какой период? Какой показатель измеряли?

Всегда добавляйте цифры:

• Вместо "ускорил загрузку" → "сократил время загрузки с 4.5 до 1.8 секунды"
• Вместо "много страниц" → "45 адаптивных страниц"
• Вместо "улучшил качество" → "повысил pixel-perfect точность с 85% до 98%"

Ошибка 7: Шаблонные soft skills без подтверждения

Плохо:

Это клише, которое ничего не говорит о вас.

Хорошо:

Вообще уберите отдельный раздел "Личные качества". Вместо этого подтверждайте soft skills через достижения:

• Внимание к деталям: "Выявил и устранил 25 несоответствий между макетами и версткой, повысив pixel-perfect точность до 98%"
• Коммуникабельность: "Организовал еженедельные встречи с дизайнерами и backend-разработчиками, сократив цикл согласования правок на 30%"
• Обучаемость: "Освоил TypeScript за 2 месяца, применил в 4 проектах компании"

Чек-лист: проверка резюме перед отправкой

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

Технические моменты

• Формат файла: PDF (не .doc, не .docx — они могут криво отобразиться)
• Название файла: "ПетровИванFrontend_Резюме.pdf" (не "resume.pdf" или "Моё резюме.pdf")
• Объем: 1-2.5 страницы A4 в зависимости от опыта
• Шрифт: читаемый (Arial, Calibri, Open Sans), размер 10-12pt
• Структура: четкие заголовки, списки, нет "простыней" текста

Содержание

• Заголовок: указана конкретная должность (не "резюме" или "ищу работу")
• Контакты: телефон, email, GitHub, портфолио (все ссылки кликабельны и рабочие)
• Раздел "О себе": 50-70 слов, есть опыт + технологии + ключевая метрика
• Навыки: сгруппированы по категориям, указаны актуальные технологии
• Опыт работы: каждая позиция содержит 4-6 достижений с метриками
• Глаголы действия: использованы сильные глаголы (разработал, оптимизировал, внедрил)
• Метрики: в каждом достижении есть цифра или процент
• Портфолио: указаны ссылки на GitHub и 3-5 живых проектов
• Образование: указаны релевантные курсы с проектами

Языковая проверка

• Грамматика: нет опечаток и ошибок (проверьте через сервисы типа "Орфограммка")
• Единообразие: все даты в одном формате (Июнь 2022 или 06.2022)
• Консистентность: везде одинаковые названия технологий (не "React.js" в одном месте и "React" в другом)
• Без воды: удалены фразы "ответственный", "коммуникабельный" без подтверждения

ATS-оптимизация

• Ключевые слова: включены технологии из описания вакансии
• Простая структура: без таблиц, колонок, нестандартных шрифтов (они ломают парсинг ATS)
• Названия разделов: стандартные ("Опыт работы", "Навыки", "Образование", а не "Мой путь" или "Что я умею")

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

Какой формат резюме выбрать: хронологический или функциональный?

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

• У вас большой перерыв в работе
• Вы меняете сферу деятельности
• У вас много краткосрочных проектов на фрилансе

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

Что делать, если был перерыв в работе (декрет, болезнь, поиск работы)?

Ответ: Не скрывайте перерыв — рекрутеры все равно заметят. Есть три стратегии:

1. Честно указать причину (если она уважительная):

2. Заполнить фрилансом или pet-проектами:

3. Переформатировать даты (только для коротких перерывов):

Вместо точных месяцев указывайте года:

Так перерыв в 2-3 месяца станет незаметен.

Нужно ли указывать зарплатные ожидания в резюме?

Ответ: Зависит от ситуации:

Указывайте, если:

• Это обязательное поле на платформе (hh.ru)
• Вы хотите отсечь неподходящие вакансии
• Ваша ставка нерыночная (очень высокая или очень низкая) — так вы сразу фильтруете работодателей

Не указывайте, если:

• Хотите сохранить пространство для переговоров
• Не уверены в рыночной стоимости вашей экспертизы
• Рассматриваете разные форматы (офис, удаленка, проектная работа)

Как указывать:

"Зарплатные ожидания: от 120 000 ₽ на руки" (указывайте нижнюю планку, а не диапазон)

Как описывать проекты на фрилансе, если клиенты не дали разрешения на публикацию?

Ответ: Это частая проблема. Решения:

1. Обобщенное описание без конкретики:

2. Показывайте pet-проекты как альтернативу:

Если не можете показать клиентские работы — создайте аналогичные учебные проекты и выложите на GitHub Pages.

3. Скриншоты без брендинга:

Сделайте скриншоты с замазанными логотипами и брендовыми элементами. Укажите в портфолио: "Коммерческий проект (клиент не разрешил публикацию). Показываю структуру и подход к верстке."

Стоит ли добавлять сопроводительное письмо к резюме?

Ответ: Да, если:

• Вакансия явно запрашивает cover letter
• Вы делаете карьерный переход (например, из дизайна в разработку)
• Хотите объяснить особые обстоятельства (переезд, релокация, смена сферы)
• Откликаетесь на интересный проект и хотите показать мотивацию

Структура письма (5-7 предложений):

1. Почему вас заинтересовала именно эта вакансия
2. Ваш ключевой опыт, релевантный позиции
3. Одно впечатляющее достижение с метрикой
4. Что вы можете дать компании
5. Призыв к действию (готовность к интервью)

Не пишите сопроводительное письмо, если:

• Вакансия массовая (тогда это трата времени)
• У вас идеально подходящее резюме, которое говорит само за себя
• Компания не читает письма (многие стартапы смотрят только резюме и портфолио)

Как часто нужно обновлять резюме?

Ответ: Резюме — живой документ. Обновляйте его:

Обязательно:

• При завершении значимого проекта (добавьте в "Опыт работы")
• При освоении новой технологии (дополните "Навыки")
• При смене работы или получении повышения
• Раз в 3-6 месяцев для актуализации формулировок

Рекомендуется:

• После прохождения курса или получения сертификата
• Когда изменились требования рынка (новые трендовые технологии)
• Перед активным поиском работы (освежите метрики, добавьте новые достижения)

Совет: Заведите файл "draft_resume.txt" и записывайте туда все достижения по мере их появления. Раз в квартал переносите накопленное в основное резюме.

Заключение: от резюме к оффер-письму

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

Ключевые принципы, которые вы усвоили из этого руководства:

1. Метрики решают: "Сверстал 45 страниц с PageSpeed Score 92/100" всегда лучше, чем "верстал страницы"
2. Формула достижений: Задача → Действие → Результат с цифрами
3. ATS-оптимизация: используйте ключевые слова из вакансии, избегайте сложного форматирования
4. Портфолио обязательно: GitHub + живые примеры — это ваше конкурентное преимущество
5. Адаптация под уровень: Junior показывает технологии, Middle — результаты, Senior — системное влияние

Что делать после составления резюме:

• Отправьте на проверку коллеге или ментору
• Протестируйте на ATS-системе (есть бесплатные сервисы)
• Создайте 2-3 варианта резюме под разные типы вакансий (продуктовые компании, агентства, стартапы)
• Настройте профили на LinkedIn и в профессиональных сообществах
• Подготовьте answers к типовым вопросам собеседований

Помните: идеального резюме не существует. Есть резюме, которое работает для конкретной вакансии. Адаптируйте, тестируйте, собирайте обратную связь. Каждый отклик — это шаг к оффер-письму вашей мечты. Удачи в поиске работы!