Разработка онлайн-конструктора резюме и портфолио
Original size 1240x1750

Разработка онлайн-конструктора резюме и портфолио

PROTECT STATUS: not protected
This project is a student project at the School of Design or a research project at the School of Design. This project is not commercial and serves educational purposes

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

Айдентика

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

big
Original size 3111x1750

В основе айдентики — логотип Uprove. Название бренда можно прочесть как /əˈpruːv/ — approve, что означает «утвердить», «достичь соглашения». Это означает окончание процесса поиска работы — такое, в результате которого соискатель получает работу мечты. Поэтому, главный прием логотипа — галочка в чекбоксе, символизирующая одновременно прием (аппрув) сотрудника на работу и заполнение интерактивной формы (главный функционал сервиса)

big
Original size 3111x1750
Original size 3111x1750

Supportive UI

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

Original size 2090x998

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

Original size 960x547

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

Original size 960x512

Регистрация и онбординг

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

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

Original size 3082x1455

Предусмотрен также механизм входа через Passkey — еще более простой вариант, и вовсе не требующий никакого ввода текста.

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

Original size 1682x794

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

Loading...

Основные функции

После регистрации пользователю становятся доступны основные функции Uprove — настройка профиля, создание и распространение страниц.

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

Original size 1926x723

В основное меню также добавляются недавно открытые страницы в Uprove, позволяя быстро переходить к релевантным объектам.

Original size 1678x806

Использование шаблонов

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

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

Заполнение шаблона представляет собой пошаговый ввод данных в заранее подготовленные поля формы.

Original size 2524x1313

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

Original size 2524x1313

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

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

Original size 2524x1313

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

Создание с нуля

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

Original size 2454x1186
Original size 1733x902

Блок «Заголовок» позволяет добавить на страницу заголовок уровня H1

Original size 1733x902

Блок «Подзаголовок» позволяет добавить на страницу заголовок уровня H2

Original size 1733x902

Блок «Текст» позволяет добавить на страницу параграф произвольного текста. В текст можно вставлять ссылки

Original size 1733x902

Блок «Список» позволяет добавить на страницу произвольный список с заголовками и подписями: удобная опция для перечисления однородных объектов

Original size 1733x254

Блок «Разделитель» позволяет добавить на страницу горизонтальную линию или пустой объект, увеличивающий расстояние между блоками

Original size 1733x902

Блок «Изображение» позволяет добавить на страницу картинку, загруженную с устройства. Ширина картинки может быть изменена по желанию, также на изображение опционально может быть добавлена ссылка

Original size 1733x1160

Блок «Галерея» позволяет добавить на страницу коллекцию изображений. На каждую картинку можно добавить ссылку

Original size 1733x635

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

Original size 1733x986

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

Original size 1733x986

Блок «IFrame» позволяет добавить на страницу любой кастомный HTML IFrame, максимально расширяя возможности конструктора

Приемы Supportive UI проявляют себя в редактор максимально ярко — все блоки респонсивно следуют за курсором, перемещаются через Drag’n'Drop, редактируются напрямую по принципу Content Editable.

Original size 2386x1130
Loading...

По завершении редактирования страница становится готовой к публикации и распространению.

Original size 2563x2900

Распространение и настройки доступа

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

Original size 2563x1348

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

Original size 2688x1282

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

Сбор метрик

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

Original size 2676x698

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

Производные проекты

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

В Uprove реализован соответствующий функционал — пользователь может создать дочернюю страницу в настройках любого доступного проекта

Original size 2808x532

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

Original size 2524x1313

Создание шаблона

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

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

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

Original size 2682x1276

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

Original size 2940x1216

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

Профиль и организация контента

Контент каждого пользователя организован на странице профиля.

Original size 2516x1272

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

Original size 2516x1034

Мобильная версия

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

Original size 1694x792

Мобильная версия Uprove полностью упакована в PWA

Платные функции

Рынок сервисов для резюме и портфолио в России находится на стыке HR-Tech и EdTech. Прежде, чем переходить к описанию платных функций, можно оценить целесообразность введения пэйволла в сервисе с помощью анализа рынка.

  • Население России: ~146 млн
  • Экономически активное население: ~72–75 млн человек
  • Из них:
    • Наемные работники, самозанятые, ИП и т. д.: ~70 млн
    • Студенты вузов и колледжей: ~4–5 млн (часть уже работает, часть только выходит на рынок труда)
    • Фрилансеры/креаторы (дизайн, разработка, контент, фото/видео и пр.) — условно 2–3 млн, но многие пересекаются с ЕАН
  • Классический рынок резюме (работа по найму): аудитория
    • По данным рекрутинговых порталов, ежегодно активных соискателей — примерно 20–30% ЕАН.
    • Берем усредненно: 25% от 72 млн = ~18 млн человек в год
  • Портфолио/личный сайт (креативные, IT, digital, консультанты и т. д.): аудитория
    • Ядро: дизайнеры, разработчики, маркетологи, SMM, копирайтеры, фотографы, видеографы, преподаватели, консультанты, эксперты.
    • Оценочно: 3–5 млн человек, из которых реально готовы платить/пользоваться специализированными сервисами — 30–40%.
    • Консервативно: ~1,5–2 млн человек потенциальной активной аудитории портфолио‑сервисов.
  • Общий рынок резюме и портфолио: порядка 18–20 млн человек в год, из которых платёжеспособное ядро — 5–8 млн.
  • По аналогии с западным рынком (Canva, Novoresume, Enhancv, Wix/Behance/Dribbble и т. д.), а также с учетом платёжеспособности в РФ:
    • Доля тех, кто готов платить за сервисы резюме/портфолио: 10–20% активных соискателей/самозанятых.
    • Берём середину: 15%.
  • Средний чек в год на человека (B2C):
    • Подписка/разовый платёж за шаблоны и сервисы резюме: 300–1 000 ₽
    • Сервисы портфолио: 1 000–3 000 ₽ в год (если подписка).
  • Усредним все вместе: ~1 000 ₽/год на платящего пользователя
  • Оценочный ТАМ:
    • Все активные соискатели/самозанятые (~20 млн человек в год)
    • Хотя бы один раз в год платят за сервис/шаблон/портфолио
    • Со средним чеком 1 000 ₽/год
    • ≈ 20 млн × 1 000 ₽ = ~20 млрд ₽ в год: это «потолок», если бы каждый, кто ищет работу или развивает личный бренд, так или иначе платил.
  • Оценочный SAM:
    • не все готовы платить
    • часть пользуется бесплатными конструктороми (Word/Canva/Figma, GitHub Pages и т. п.)
    • низкий доход в регионах и т. д.
    • 15% платящих от 20 млн активных — 3 млн платящих B2C‑пользователей
    • средний чек — всё те же 1 000 ₽/год
    • ≈ (3 млн × 1 000 ₽) \+ 0,5 млрд ₽ ≈ 3,5 млрд ₽ в год
    • Округляя: ~3–4 млрд ₽/год — разумная оценка доступного рынка РФ по сервисам резюме/портфолио с учетом текущей платежеспособности и привычек.
  • Оценочный SOM:
    • Если ориентироваться на нишу (например: «топ‑сервис для начинающих специалистов и креаторов») и занять, скажем, 5–10% от SAM:
    • SOM (5% от 3,5 млрд ₽) ≈ 175 млн ₽/год
    • SOM (10%) ≈ 350 млн ₽/год

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

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

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

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

Функция импорта контента позволяет загрузить в Uprove уже готовые страницы с других ресурсов — Behance, DProfile, hh.ru, Хабр.Карьера, и прочих.

Original size 2556x1394

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

Original size 2636x496

Возможность скрытия логотипа позволяет убирать логотип Uprove на опубликованных страницах

Original size 2636x496

Инфраструктура и код

Uprove изначально создавался с индустриальным подходом к разработке. Сервис развернут на Kubernetes-кластере Yandex Cloud, использует выделенные кластеры Postgres и S3, выкатывается через Github CI и имеет настроенные логирование и мониторинг.

Original size 2396x1424
Original size 2268x926

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

Код проекта написан на RoR и TS — клиентская и серверная часть разделены, приложение реализовано через SPA на React, что позволило создать максимально респонсивный и динамический интерфейс

Заключение

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

Original size 963x633

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

Original size 1200x433

Пионеры вроде FL.ru и Free-lance.ru стали социальными институтами, которые создали новые стандарты взаимодействия между работодателем и потенциальным работником. Они внедрили системы рейтингов, портфолио и безопасные сделки, заменили традиционные рекомендации «от знакомых» и позволили снизить риски сотрудничества между незнакомыми людьми. Параллельно развивались классические сайты по трудоустройству. HeadHunter, например, которые перенесли в цифровую среду весь спектр вакансий — от штатных позиций в крупных компаниях до проектной работы.

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

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

Original size 1071x614

Современный этап характеризуется углубляющейся диверсификацией инструментов поиска работы. Универсальные агрегаторы вроде GdeJob.com соседствуют с нишевыми сервисами, ориентированными на конкретные сегменты рынка. Платформы постепенно трансформируются из простых досок объявлений в сложные HR-экосистемы. Предлагают карьерные консультации, тестирования и услуги по сопровождению трудоустройства. Но остаются актуальными высокая конкуренция на популярных площадках, проблемы доверия, сложности с выводом средств на международных платформах и необходимость постоянного поддержания цифровой репутации.

Original size 853x520

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

Институционализация систем поиска работы привела к росту популярности альтернативных способов размещения резюме: соискатели начали разделять платформы для создания и для продвижения профиля, используя универсальные инструменты вроде Google Docs, Notion и Tilda. Однако сервисы общего назначения не учитывают специфику работы с резюме и не закрывают все потребности пользователей, формируя заметный вакуум, опцию заполнения которого автор стремится предложить в рамках данного проекта.

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

Bibliography
Show
1.

Красильников О. Ю. Фриланс на российском рынке труда // Профессиональная ориентация, Саратов: 2018

2.

Шевчук А. В. Самозанятость в информационной экономике: основные понятия и типы // Экономическая социология, М.: Январь 2008. — Т. 9. № 1

3.

Вязникова В. В. Особенности трудовых взаимоотношений между российскими IT-фрилансерами и заказчиками их услуг // Экономическая социология, М.: Январь 2008 — Т. 9. № 1

4.

Бурлуцкая М.Г., Харченко В. С. Фрилансеры: специфика социального статуса, стратегии карьеры и профессионального развития // Журнал социологии и социальной антропологии, Екатеринбург: 2013

5.

Стребков Д. О., Шевчук А. В. Фрилансеры на российском рынке труда // Социологические исследования, М.: 2010. — № 2.

6.

Стребков Д. О., Шевчук А. В. Фрилансеры на электронных рынках: роль социальных связей // Экономическая социология, М.: Ноябрь 2009. — Т. 10. № 5.

Image sources
Show
1.2.3.4.5.6.7.8.9.10.11.12.13.14.

https://s00.yaplakal.com/pics/pics_preview/3/0/6/19863603.jpg (Дата обращения: 01.12.2025)

15.16.

https://eng.mephi.ru/content/public/images/news/220319/8-3.jpg (Дата обращения: 01.12.2025)

17.18.

https://cdn1.ozone.ru/s3/multimedia-e/c600/6364622774.jpg (Дата обращения: 01.12.2025)

19.20.

https://i.ytimg.com/vi/FUAOcNQNSBY/maxresdefault.jpg (Дата обращения: 01.12.2025)

21.

https://i.playground.ru/p/unYufWS4ccJo7uYMNufnuw.jpeg (Дата обращения: 01.12.2025)

22.23.24.25.

https://secural.ru/files/images/Logo_2023/apkit.jpg (Дата обращения: 01.12.2025)

26.27.28.29.30.31.32.

https://www.sostav.ru/images/news/2024/12/24/nu9zvod3.png (Дата обращения: 01.12.2025)

33.34.

https://i.ytimg.com/vi/l1o9tz3ZUZA/maxresdefault.jpg (Дата обращения: 01.12.2025)

35.36.37.

https://pastvu.com/_p/a/g/e/b/gebc298r6alajcb7jg.jpg (Дата обращения: 01.12.2025)

38.39.40.41.42.43.44.45.46.47.48.49.50.

https://img2.ntv.ru/home/news/20140124/durov_vs.jpg (Дата обращения: 01.12.2025)

51.52.

https://d.searchengines.guru/20/40/IT_1_hd.png (Дата обращения: 01.12.2025)

53.54.55.56.57.

https://quasa.io/storage/photos/17/HHHHHHHH%204.png (Дата обращения: 01.12.2025)

58.59.60.61.62.63.64.65.66.67.68.69.

https://static4.smi2.net/img/1200x630/7221335.jpeg (Дата обращения: 02.12.2025)

70.71.72.

https://karl-marks.ru/wp-content/uploads/2025/10/1-3.jpg (Дата обращения: 02.12.2025)

73.74.75.76.77.78.

https://s16.stc.yc.kpcdn.net/share/i/12/13858074/wr-960.webp (Дата обращения: 02.12.2025)

79.
Chapter:
1
2
3
4
5