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

Разработчик макетов — профессия, где технические навыки встречаются с визуальной точностью. Ваше резюме должно показать не только знание 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 слов, которые должны продать ваш опыт и ценность для компании. Избегайте общих фраз типа "ответственный", "коммуникабельный". Вместо этого используйте формулу: Опыт + Специализация + Ключевое достижение + Ценность для работодателя.

82% получают оффер за 3 недели

Мы берём поиск работы на себя

Подбираем лучшие вакансии и откликаемся за вас. До 100 автооткликов в день.

Запустить отклики

Формула для 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) — базовые концепции

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

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

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

Модель 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)

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

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

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

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

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

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

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

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

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

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

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

Frontend-разработчик (верстальщик)
ООО "Название компании" (сфера деятельности)
Июнь 2022 — настоящее время (1 год 7 месяцев)
Копировать

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

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

+400% приглашений от HR

Ваше резюме может быть лучше

Сравните, как ИИ-резюмейкер Quick Offer превращает резюме с hh.ru в профессиональное

Попробовать бесплатно

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

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

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

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

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

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

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

Разбор:

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

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

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

Junior Frontend Developer (верстальщик)
Веб-студия "Имя" (разработка сайтов для малого бизнеса)
Сентябрь 2023 — настоящее время (1 год 4 месяца)
Работа над корпоративными сайтами и лендингами для клиентов в сферах образования, ритейла, услуг.
- Сверстал 12 адаптивных лендингов по макетам из Figma с pixel-perfect точностью 95%, соблюдая методологию BEM и сроки в 3-5 дней на проект
- Внедрил на 8 проектах анимации и переходы на CSS3, улучшив визуальную привлекательность и получив положительные отзывы от 7 из 8 клиентов
- Оптимизировал изображения и подключил lazy loading на сайте автосалона, сократив время загрузки главной страницы с 4.2 до 1.8 секунды (-57%)
- Исправил 40+ багов верстки в legacy-проектах студии, изучив чужой код и документировав найденные проблемы
- Освоил Git и GitHub: делаю коммиты по conventional commits, работаю с ветками, прошел code review для 15 Pull Requests
Технологии: HTML5, CSS3, SCSS, JavaScript (ES6), BEM, Figma, Git, Gulp, Bootstrap 5
Копировать

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

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

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

Frontend-разработчик (верстка и интеграция)
ООО "Название" (fintech, мобильный банкинг)
Март 2021 — Февраль 2024 (3 года)
Участие в разработке веб-версии мобильного банка с аудиторией 500K+ активных пользователей.
- Сверстал и интегрировал с React 35 компонентов дизайн-системы (кнопки, формы, модальные окна, карточки), сократив время разработки новых фич на 40% для команды из 6 разработчиков
- Провел рефакторинг CSS-кода на 18 страницах личного кабинета: мигрировал с устаревших float на Flexbox/Grid, уменьшил объем стилей на 35% и улучшил читаемость кода
- Реализовал адаптивную верстку мобильного меню и дашборда с поддержкой touch-событий, повысив мобильный трафик с 28% до 45% за 6 месяцев
- Оптимизировал производительность: внедрил code splitting с Webpack, lazy loading компонентов, результат — улучшение метрики Time to Interactive с 5.1 до 2.3 секунды (-55%)
- Настроил автоматизацию сборки: написал конфигурацию Webpack с production/development режимами, подключил PostCSS с autoprefixer, что устранило 90% багов кроссбраузерности
- Участвовал в code review, описал 8 страниц документации по UI-kit для новых разработчиков
Технологии: HTML5, CSS3, SCSS, JavaScript (ES6+), TypeScript (базово), React, Webpack, Git, Figma, Jest (базовые тесты)
Копировать

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

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

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

Senior Frontend Developer / Tech Lead (верстка и архитектура)
ООО "Название" (e-commerce, маркетплейс товаров для дома)
Январь 2019 — настоящее время (6 лет)
Руководство frontend-направлением проекта с аудиторией 2M+ уникальных пользователей в месяц, выручкой $5M+ в год.
- Спроектировал и разработал модульную систему компонентов на базе React + TypeScript с использованием Storybook (120+ компонентов), которую переиспользуют 3 продуктовые команды, ускорив time-to-market новых фич на 50%
- Провел масштабный рефакторинг legacy-кода: мигрировал 200+ страниц с jQuery на React, внедрил TypeScript, улучшил Core Web Vitals (LCP с 4.2 до 1.8 сек, CLS с 0.25 до 0.05), что повысило SEO-позиции на 30% по ключевым запросам
- Оптимизировал производительность: внедрил server-side rendering с Next.js для страниц каталога, настроил CDN и кеширование, результат — рост конверсии из поиска на 22% и снижение bounce rate с 58% до 41%
- Разработал внутренний UI-kit с документацией и гайдлайнами по accessibility (WCAG 2.1 AA), провел аудит 50+ страниц, устранил 200+ проблем доступности
- Автоматизировал процессы: настроил CI/CD pipeline с автоматическим тестированием верстки (Cypress, Percy для visual regression), сократил время выката релиза с 4 часов до 30 минут
- Менторил 3 middle и 2 junior разработчиков: провожу еженедельные code review, организовал knowledge sharing сессии по архитектуре frontend
Технологии: HTML5, CSS3, SCSS, JavaScript (ES6+), TypeScript, React, Next.js, Webpack, Vite, Git, Figma, Storybook, Jest, Cypress, Docker (базово)
Копировать

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

• Указан масштаб бизнеса ($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 примеров

Отклик HR ×3

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

AI создаст 3 письма под ваше резюме и подберёт лучшее под каждую вакансию.

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

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

Для разработчика макетов портфолио — это не просто список ссылок, а доказательство качества кода и понимания 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 указывайте:

Название проекта
[Ссылка на живой сайт] | [Ссылка на GitHub]
Краткое описание: Адаптивный лендинг для фитнес-клуба с анимациями и формой записи.
Задача: Создать современный одностраничник, который одинаково хорошо смотрится на всех устройствах и быстро загружается.
Решение:
- Реализовал mobile-first подход с breakpoints для 4 типов экранов
- Использовал CSS Grid для сложной сетки галереи
- Добавил плавные анимации на Intersection Observer API
- Оптимизировал изображения (WebP + lazy loading)
Результат: PageSpeed Score 94/100, pixel-perfect соответствие макету 98%
Стек: HTML5, SCSS, JavaScript (ES6), Gulp, Figma
Копировать

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

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

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

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

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

Бакалавр, Информационные технологии
Московский государственный технический университет им. Н.Э. Баумана
2018 — 2022
Дипломная работа: "Разработка адаптивного интерфейса веб-приложения для управления проектами"
Копировать

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

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

Специалист, Экономика и управление
Финансовый университет при Правительстве РФ
2016 — 2021
Копировать

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

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

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

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

Дополнительное образование:
Frontend-разработчик, Яндекс Практикум
Сентябрь 2022 — Март 2023 (6 месяцев)
- 250 часов практики: HTML, CSS, JavaScript, React
- Защитил 12 проектов, включая адаптивный сайт-портфолио и одностраничное приложение
- Итоговый проект: интернет-магазин с корзиной и интеграцией API
Профессия "Веб-разработчик", HTML Academy
Июнь 2022 — Август 2022
- Интенсив по HTML/CSS с автоматической проверкой кода
- Прошел 140+ практических заданий
- Сверстал 3 крупных проекта с pixel-perfect точностью
Копировать

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

- Курс "Основы HTML" на Stepik (2020)
- Курс "CSS для начинающих" на Coursera (2020)
- 10 уроков по JavaScript на YouTube (2021)
Копировать

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

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

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

Самообразование:
- Изучил JavaScript по книге "Learn JavaScript" (Ilya Kantor) и документации MDN
- Прошел 200+ практических задач на Codewars (6 kyu)
- Создал 8 учебных проектов, опубликованных на GitHub (15+ stars, 3 fork)
- Регулярно читаю CSS-Tricks, Smashing Magazine, следую за обновлениями спецификаций W3C
Копировать

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

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

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

Плохо:

- Верстал страницы сайта
- Работал с макетами в Figma
- Исправлял баги
- Участвовал в митингах
Копировать

Хорошо:

- Сверстал 35 адаптивных страниц корпоративного портала с PageSpeed Score 91/100
- Перенес в код 50+ макетов из Figma с pixel-perfect точностью 97%
- Устранил 60+ критических багов верстки в legacy-коде, улучшив UX
- Координировал работу с дизайнерами: организовал еженедельные sync-встречи, сократив цикл правок на 35%
Копировать

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

Плохо:

Навыки: HTML, CSS, Flash, Dreamweaver, Photoshop CS3, Internet Explorer 6, Joomla, WordPress
Копировать

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

Хорошо:

Frontend: HTML5, CSS3, SCSS, JavaScript (ES6+), TypeScript (базово)
Инструменты: Figma, Git, Webpack, Gulp
Фреймворки: Bootstrap 5, Tailwind CSS, React (базовая интеграция)
Копировать

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

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

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

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

Иван Петров
Frontend-разработчик (верстальщик)
Email: ivan.petrov@example.com
Телефон: +7 (999) 123-45-67
GitHub: github.com/ivanpetrov
Портфолио: ivanpetrov.dev
Telegram: @ivanpetrov
Копировать

Ошибка 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. Честно указать причину (если она уважительная):

Сентябрь 2022 — Март 2023
Перерыв в карьере: уход за ребенком / решение личных обстоятельств
В это время:
- Прошел курс по React на Udemy (40 часов)
- Создал 3 учебных проекта (ссылки в портфолио)
- Освоил TypeScript, изучил документацию
Копировать

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

Сентябрь 2022 — Март 2023
Фриланс-проекты (веб-разработка)
- Сверстал 5 лендингов для малого бизнеса
- Создал 2 корпоративных сайта на заказ
Копировать

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

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

Frontend Developer, Компания А — 2021-2022
(вместо "Январь 2021 — Май 2022")
Копировать

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

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

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

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

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

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

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

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

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

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

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

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

Фриланс-проекты (веб-разработка)
Январь 2022 — настоящее время
- Сверстал 12 лендингов для клиентов в нишах: недвижимость, образование, услуги. Средний PageSpeed Score проектов — 90/100
- Разработал 3 корпоративных сайта (5-15 страниц) с адаптивной версткой и интеграцией форм обратной связи
- Создал 2 интернет-магазина на Tilda с кастомной версткой компонентов
Копировать

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 к типовым вопросам собеседований

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