PDF резюме: Puppeteer-скрипт, кнопка скачивания, имя файла Mamadaev_Nik__CV__Product_Designer_UX-UI

This commit is contained in:
Local Build committed 2026-08-14 10:05:17 +02:00
1 parent 322938b5ec
commit 97e56b48bf
45 files changed
+5132 -4197

No files matched your search

+1 -1
View File
@@ -377,7 +377,7 @@
<h3>Дальнейшее развитие</h3>
<p class="section__prose">
В дорожной карте оставались отдельные крупные куски: сценарии вокруг LLM (списки, статусы, действия), пошаговый мастер обучения с прогрессом и отменой, а также полноценный контур OCR с разметкой регионов и превью качества на странице. Они не входили в минимальный набор для первого промышленного релиза интерфейса, но заложенные паттерны должны их принять без ломки навигации.
В дорожной карте оставались отдельные крупные куски: сценарии вокруг LLM (списки, статусы, действия), пошаговый мастер обучения с прогрессом и отменой, а также полноценный контур OCR с разметкой регионов и превью качества на странице. Они не входили в минимальный набор для первого промышленного релиза интерфейса, но заложенные паттерны должны их принять без больших переделок.
</p>
</div>
@@ -0,0 +1,552 @@
<!DOCTYPE html>
<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta
name="description"
content="Кейс: редизайн Primo RPA AI Server — снижение порога входа для клиентов без команды внедрения."
/>
<title>AI Server в Primo RPA — кейс</title>
{{> head-links}}
{{> head-plyr}}
<style>
.case-article {
max-width: 48rem;
margin: 0 auto;
}
.case-article h2 {
margin: 2rem 0 0.75rem;
font-size: clamp(1.7rem, 3vw, 2rem);
font-weight: 700;
color: var(--text);
}
.case-article h3 {
font-size: 1.55rem;
font-weight: 600;
color: var(--text);
}
.case-article .section__prose {
margin-bottom: 0.75rem;
font-size: 1.1rem;
line-height: 1.7;
color: var(--text);
}
.case-article img,
.case-article video {
display: block;
max-width: 100%;
height: auto;
margin: 0.75rem 0 1rem;
}
.case-article ul,
.case-article ol {
margin: 0.5rem 0 1rem 1.25rem;
padding: 0;
}
.case-article li {
margin-bottom: 0.35rem;
font-size: 1.1rem;
line-height: 1.7;
}
.case-article a:not(.btn) {
color: var(--accent);
}
.case-meta {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.25rem 0.75rem;
margin: 1.25rem 0 1.5rem;
font-size: 1.05rem;
line-height: 1.6;
color: var(--text-muted);
}
.case-meta dt {
font-weight: 600;
color: var(--text);
}
.case-meta dd {
margin: 0;
}
</style>
<script>
(function () {
try {
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
var d = document.documentElement;
var m = t.mode;
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
var eff =
m === "system"
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light"
: m;
d.dataset.theme = eff;
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
if (h !== null) d.style.setProperty("--theme-h", String(h));
if (s !== null) d.style.setProperty("--theme-s", String(s));
if (l !== null) {
var L = Number(l);
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
}
var rad = t.radius;
if (rad === "soft" || rad === "medium" || rad === "strong") {
d.dataset.radius = rad;
} else {
d.dataset.radius = "medium";
}
var f = t.font;
if (f === "onest") f = "geologica";
if (f === "anonymous") f = "mono";
if (f === "merriweather" || f === "mono" || f === "geologica") {
d.dataset.font = f;
} else {
d.dataset.font = "merriweather";
}
var mb = t.meshBg;
if (mb === "off") {
d.dataset.meshBg = "off";
} else {
d.dataset.meshBg = "on";
}
} catch (e) {}
})();
</script>
</head>
<body>
{{> header-case}}
{{> fab-stack}}
<main id="case-main" class="section section--tight">
<div class="section__inner case-article">
<p class="hero__eyebrow">Product Design · AI</p>
<h1 class="case-page__h1">Упростил настройку Primo RPA AI Server: клиенты настраивают ИИ-сервис без команды внедрения</h1>
<p class="case-page__sub">
Платформа интеллектуальной обработки документов<br />
и оркестрации ИИ-агентов. Обращения к команде внедрения упали на 40%, настройка первого проекта ужалась с ~3 дней до ~4 часов.
</p>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/main-new.webp"
alt="Обновлённый редактор разметки датасета — главный экран сервиса после редизайна"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
</figure>
<dl class="case-meta">
<dt>Продукт</dt>
<dd>AI Server. Нейросети во внутреннем контуре компании, настраивается через веб-интерфейс</dd>
<dt>Роль</dt>
<dd>UX/UI-дизайнер (единственный на проекте)</dd>
<dt>Задача</dt>
<dd>Снизить порог входа, чтобы клиент настраивал сервис сам</dd>
<dt>Стек</dt>
<dd>Ant Design + React, стилизация Hope UI</dd>
<dt>Формат</dt>
<dd>Редизайн живого продукта, релизы не останавливались</dd>
</dl>
<div class="case-block" id="problem">
<h2>С настройкой справлялись только эксперты. Это тормозило продажи</h2>
<p class="section__prose">
AI Server разворачивается на внутренних серверах клиентов. Продукт активно тестировали, и обратная связь показала неприятное: настроить его могли только эксперты и команда внедрения Primo RPA. Каждый новый клиент съедал часы техподдержки. Продукт терял привлекательность и плохо масштабировался.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✅</span>
<div class="case-callout__content">
<p>
Бизнес-цель: клиент проходит настройку AI Server сам, без техподдержки и команды внедрения. По этому критерию мы и мерили успех редизайна.
</p>
</div>
</aside>
<p class="section__prose">
Начал со знакомства с командой и экспертами по настройке. Разделил сценарии на главные и вспомогательные, собрал визуализацию того, как ведёт себя пользователь, и вместе с разработкой искал, где интерфейс можно упростить. Я уже работал с ИИ и похожими веб-платформами, поэтому быстро разобрался в домене и говорил с разработкой на одном языке.
</p>
</div>
<div class="case-block" id="constraints">
<h2>Ограничения</h2>
<ul>
<li>Продуктом уже пользовались клиенты. Остановить разработку и пересобрать интерфейс целиком было нельзя.</li>
<li>Изменения приходилось вписывать в план релизов, отдельного «редизайн-спринта» никто не выделял.</li>
<li>Жёсткий стек: Ant Design под React со стилизацией под Hope UI. Новые компоненты рисовать только в крайнем случае, сначала выжимаем всё из готовой библиотеки.</li>
</ul>
</div>
<div class="case-block" id="navigation">
<h2>Навигация путала: разделы проекта смешивались с главным меню</h2>
<p class="section__prose">
В сервисе стояла привычная для админок схема: слева боковое меню, справа контент. Пространство расходовалось расточительно, а при открытии проекта навигация по его разделам оказывалась вперемешку с главной. Пользователь терялся.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji" aria-hidden="true">💡</span>
<div class="case-callout__content">
<p>
Две навигации в одном боковом меню заставляли каждый раз разбираться, «где я». Развёл их по уровням: главная сверху, проектная внутри проекта.
</p>
</div>
</aside>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/main-new.webp"
alt="Главный экран AI Server с компактной верхней навигацией"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Главный экран AI Server с компактной верхней навигацией — список проектов занимает почти всю ширину экрана</figcaption>
</figure>
<p class="section__prose">
Перенёс главную навигацию наверх и ужал её. Контенту стало заметно просторнее, а схема осталась привычной. У проектов появилась собственная навигация, которая с главной не пересекается.
</p>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/nav-project-nlp.webp"
alt="Внутренняя навигация NLP-проекта"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Внутренняя навигация NLP-проекта — горизонтальные пункты-шаги под главным меню</figcaption>
</figure>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/nav-project-ocr.webp"
alt="Внутренняя навигация OCR-проекта"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Внутренняя навигация OCR-проекта — тот же паттерн со своим набором разделов</figcaption>
</figure>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✨</span>
<div class="case-callout__content">
<p>
Стрелочная форма пунктов подсказывает порядок настройки, но не навязывает его: разделы остаются обычными табами. Подсказка без принуждения.
</p>
</div>
</aside>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/nav-secondary-detail_view.webp"
alt="Крупный план вторичной навигации — пункты в форме стрелок"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Крупный план вторичной навигации — пункты в форме стрелок, ведущих слева направо</figcaption>
</figure>
</div>
<div class="case-block" id="editor">
<h2>Редактор датасета: экран, где пользователи живут</h2>
<p class="section__prose">
Здесь проводят больше всего времени. Разметка полей на сотнях изображений — работа монотонная, но именно от неё зависит качество данных для обучения модели. Прежний редактор выбивался из общего стиля, выглядел перегруженно и путал в работе с полями.
</p>
<p class="section__prose">
Разобрал редактор на микросценарии, выстроил их по приоритету и связкам. Вместе с командой спроектировали поведение плавнее и понятнее, заложили место под будущий функционал, дизайн привели к общей стилистике сервиса.
</p>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/dataset-editor.webp"
alt="Редактор разметки датасета — размечаемый документ в центре, панели полей и инструментов по бокам"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Редактор разметки датасета — размечаемый документ в центре, панели полей и инструментов по бокам</figcaption>
</figure>
<p class="section__prose">
Страница стала симметричной. Почти всё пространство уходит на размечаемое изображение, действия сгруппированы по панелям: нужная функция ищется быстро.
</p>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/dataset_editor-wireframe-default_mode.webp"
alt="Схематичный каркас редактора — центральная рабочая область и боковые панели"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Схематичный каркас редактора — центральная рабочая область и боковые панели, режим по умолчанию</figcaption>
</figure>
<p class="section__prose">
Для продвинутых пользователей добавил режим «Во весь экран». Боковые панели сворачиваются, работа идёт через горячие клавиши и нижнюю панель. На небольших мониторах это спасает.
</p>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/full-screen-mode-with-panels.webp"
alt="Полноэкранный режим редактора с раскрытыми боковыми панелями"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Полноэкранный режим редактора с раскрытыми боковыми панелями</figcaption>
</figure>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/full-screen-mode-zen.webp"
alt="Полноэкранный режим без панелей — только размечаемый документ и нижняя панель"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Полноэкранный режим без панелей — на экране только размечаемый документ и нижняя панель инструментов</figcaption>
</figure>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-both_panels.webp"
alt="Четыре варианта каркаса полноэкранного режима"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Четыре варианта каркаса полноэкранного режима — обе панели, без панелей, только левая, только правая</figcaption>
</figure>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/dataset_editor-main_toolbar.webp"
alt="Нижняя панель инструментов — переключение между изображениями и быстрые действия разметки"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Нижняя панель инструментов — переключение между изображениями и быстрые действия разметки</figcaption>
</figure>
</div>
<div class="case-block" id="mapping">
<h2>Десятки полей на одном скане, и место под документ не страдает</h2>
<p class="section__prose">
Смежная задача: настроить уникальные параметры полей датасета. Большая область нужна под скан документа, полей десятки, у каждого свои типы и зависимые параметры.
</p>
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
<div class="case-video-shell">
<video
controls
preload="metadata"
playsinline
poster="../assets/ai-platform-primo-rpa/fields-maping.webp"
data-case-video-player
style="display: block; width: 100%; height: auto; margin: 0"
>
<source src="../assets/ai-platform-primo-rpa/fields-maping.webm" type="video/webm" />
<source src="../assets/ai-platform-primo-rpa/fields-maping.mp4" type="video/mp4" />
Ваш браузер не поддерживает видео.
</video>
</div>
<figcaption>Прототип сопоставления полей — пользователь выбирает поле на скане документа и настраивает его параметры в компактной панели</figcaption>
</figure>
<p class="section__prose">
Интерфейс вышел компактным. Механика не считывается с первого взгляда, зато после короткого обучения работать в нём быстро и комфортно.
</p>
</div>
<div class="case-block" id="learning">
<h2>Карточки обучения: паттерн, который разошёлся по всему продукту</h2>
<p class="section__prose">
После разметки датасета модель дообучают (fine-tuning). Разобрали все действия пользователя, перебрали несколько компоновок страницы. Остановились на ленте из карточек.
</p>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/in_project-learn-overview.webp"
alt="Раздел обучения моделей — вертикальная лента карточек"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Раздел обучения моделей — вертикальная лента карточек, сверху карточка настройки нового обучения</figcaption>
</figure>
<p class="section__prose">
В начале ленты карточка настройки: результат разметки активного датасета, параметры, запуск fine-tuning.
</p>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/in_project-learn-card-new.webp"
alt="Карточка настройки обучения — матрица качества датасета и блок параметров запуска"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Карточка настройки обучения — матрица качества датасета и блок параметров запуска</figcaption>
</figure>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">⭐</span>
<div class="case-callout__content">
<p>
Матрица оценки качества разметки показывает готовность датасета к обучению на одном экране. Раньше приходилось вручную просматривать поля по всем документам.
</p>
</div>
</aside>
<p class="section__prose">
Под каждый запущенный процесс появляется своя карточка. Можно завести несколько процессов с разными параметрами и сравнить, какая конфигурация отработала лучше.
</p>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/in_project-learn-card-learning_process.webp"
alt="Карточка запущенного процесса обучения — статус, прогресс и метрики"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Карточка запущенного процесса обучения — статус, прогресс и метрики, разнесённые по логическим блокам</figcaption>
</figure>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/in_project-learn-card-learning_process_wireframe.webp"
alt="Каркас карточки процесса обучения"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Каркас карточки процесса обучения — схема расположения информационных блоков и действий</figcaption>
</figure>
<p class="section__prose">
Карточки сворачиваются, в шапке остаются название и статус.
</p>
<figure class="case-media case-media--natural">
<img
src="../assets/ai-platform-primo-rpa/in_project-learn-card-сollapsed.webp"
alt="Свёрнутая карточка обучения — одна строка с названием и статусом процесса"
width="1200"
height="675"
loading="lazy"
decoding="async"
/>
<figcaption>Свёрнутая карточка обучения — одна строка с названием и статусом процесса</figcaption>
</figure>
<p class="section__prose">
Паттерны из этих карточек потом разошлись по другим разделам продукта. Единый стиль стало проще держать.
</p>
</div>
<div class="case-block" id="processes">
<h2>Долгие процессы — в соседнюю вкладку</h2>
<p class="section__prose">
Часть задач идёт параллельно с остальной работой. Для таких сценариев модальное окно открывается на отдельной странице.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji" aria-hidden="true">💡</span>
<div class="case-callout__content">
<p>
Пользователь держит окно процесса в соседней вкладке и следит за прогрессом, а с проектом продолжает работать в доступных разделах.
</p>
</div>
</aside>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/fullscreen_modal-import_dataset.webp"
alt="Импорт датасета в модальном окне на отдельной странице"
width="1440"
height="1024"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Импорт датасета в модальном окне на отдельной странице — форма загрузки на весь экран</figcaption>
</figure>
<p class="section__prose">
На странице проекта в это время висит заглушка с кнопкой перехода к процессу.
</p>
<figure class="case-media case-media--wide">
<img
src="../assets/ai-platform-primo-rpa/fullscreen_modal-in_project-import_dataset.webp"
alt="Заглушка активного импорта внутри проекта"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Заглушка активного импорта внутри проекта — индикатор процесса и кнопка перехода</figcaption>
</figure>
</div>
<div class="case-block" id="decisions">
<h2>Что я решил не делать, и почему</h2>
<ul>
<li><strong>Не стал блокировать кнопки на отдельных страницах</strong> во время активных процессов. Модалка на отдельной странице технически проще, а прогресс виден в соседней вкладке.</li>
<li><strong>Не рисовал новые компоненты</strong>, кроме крайних случаев. Готовая библиотека Ant Design ускоряла разработку и держала интерфейс консистентным.</li>
<li><strong>Не убрал боковые панели редактора совсем</strong>, а сделал сворачиваемыми. Новичкам нужны подсказки на экране, продвинутым — максимум места под документ.</li>
<li><strong>Не заводил отдельную дизайн-систему.</strong> В продукте уже был фреймворк, в разработку передавал ссылки на готовые юзерфлоу в Figma.</li>
</ul>
<h3>Передача в разработку</h3>
<p class="section__prose">
Раз в неделю обсуждали дизайн с командой: список задач, приоритеты, сроки под планы релизов. С верстальщиком уточнял детали макетов тет-а-тет и давал фидбэк после вёрстки, чтобы результат не разошёлся с задуманным поведением.
</p>
</div>
<div class="case-block" id="results">
<h2>Результат</h2>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📈</span>
<div class="case-callout__content">
<p>
Настройка первого проекта: было ~3 дня, стало ~4 часа. 7 из 10 клиентов проходят её без техподдержки.
</p>
</div>
</aside>
<ul>
<li>Обращения к команде внедрения на этапе настройки сократились на <strong>40%</strong>. Базовую настройку клиенты проходят сами.</li>
<li><strong>7 из 10</strong> новых клиентов настроили первый проект без техподдержки. До редизайна — 1 из 10.</li>
<li>Настройка первого проекта: с <strong>~3 дней до ~4 часов</strong>.</li>
<li>Переработано <strong>30+ экранов</strong>: навигация, редактор датасета, обучение моделей, импорт данных.</li>
<li>Заложены паттерны, на которых функционал наращивается без больших переделок.</li>
<li>В компанию наняли второго дизайнера. Я ввёл её в курс дела и курировал результат, после адаптации проект целиком перешёл под её ответственность.</li>
</ul>
</div>
<div class="case-block" id="conclusions">
<h2>Выводы</h2>
<ul>
<li>Жёсткий фреймворк оказался не ограничением, а ускорителем: готовая библиотека компонентов позволила думать о сценариях, а не о пикселях.</li>
<li>Самые ценные инсайты дали эксперты по настройке. В следующий раз вовлёк бы команду внедрения ещё раньше.</li>
<li>Передача проекта новому дизайнеру подтвердила: заложенные паттерны работают, их можно объяснить и поддерживать без автора.</li>
</ul>
</div>
</div>
</main>
{{> projects-section-mp}}{{> projects-section}}
{{> contact-section}}
{{> footer-spacer}}
{{> footer}}
{{> cookie-notice}}
{{> nav-more-floating}}
</body>
</html>
+1 -1
View File
@@ -114,7 +114,7 @@
</p>
<h2 id="obzor">Обзор</h2>
<p class="section__prose">Общий вид приложения — отправная точка для остальных материалов на странице.</p>
<p class="section__prose">Общий вид приложения — рабочий процесс с открытым документом, панелями инструментов и canvas. Экран демонстрирует базовую компоновку Lunacy: левая панель слоёв, правая — свойства объекта, верхняя — контекстная строка с текущим инструментом. Отправная точка для остальных материалов на странице.</p>
<figure class="case-media case-media--wide">
<img
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+295 -30
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
<head>
<meta charset="utf-8" />
@@ -166,9 +166,16 @@
background: color-mix(in srgb, var(--surface) 90%, var(--accent));
}
.mp-showcase-cells-demo__variant {
margin-bottom: 1.2rem;
}
.mp-showcase-cells-demo__variant:last-of-type {
margin-bottom: 0;
}
.mp-showcase-cells-demo__legend {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.5rem;
margin-bottom: 0.85rem;
font-size: 0.72rem;
@@ -176,25 +183,50 @@
text-align: center;
}
.mp-showcase-cells-demo__legend--6 {
grid-template-columns: repeat(6, 1fr);
}
.mp-showcase-cells-demo__legend--4 {
grid-template-columns: repeat(4, 1fr);
}
.mp-showcase-cells-demo__legend--2 {
grid-template-columns: repeat(2, 1fr);
}
.mp-showcase-cells-demo__legend span {
padding: 0.2rem 0;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--line) 35%, transparent);
}
.mp-showcase-cells-demo__row {
.mp-showcase-cells-demo__row-label {
font-size: 0.82rem;
font-weight: 600;
color: var(--text);
margin: 0 0 0.55rem;
}
.mp-showcase-cells-demo__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.5rem;
margin-bottom: 0.55rem;
}
.mp-showcase-cells-demo__row:last-of-type {
margin-bottom: 0;
.mp-showcase-cells-demo__grid--6 {
grid-template-columns: repeat(6, 1fr);
}
.mp-showcase-cells-demo__grid--4 {
grid-template-columns: repeat(4, 1fr);
}
.mp-showcase-cells-demo__grid--2 {
grid-template-columns: repeat(2, 1fr);
}
.mp-showcase-cells-demo__block {
grid-row: 1;
min-height: 2.35rem;
display: flex;
align-items: center;
@@ -219,6 +251,10 @@
grid-column: span 3;
}
.mp-showcase-cells-demo__block--4 {
grid-column: span 4;
}
.mp-showcase-cells-demo__caption {
margin: 0.85rem 0 0;
font-size: 0.82rem;
@@ -275,12 +311,13 @@
<li><a href="#types">Типы карточек</a></li>
<li><a href="#cells">Ширина в клетках</a></li>
<li><a href="#grid">Живая сетка masonry</a></li>
<li><a href="#fixed-height">Фиксированная высота</a></li>
</ol>
</nav>
<h2 id="intro">Как пользоваться</h2>
<p class="section__prose">
Сначала выберите <strong>тип</strong> (stack, horizontal, compact, decor), затем <strong>data-mp-cells</strong> (1–3) и
Сначала выберите <strong>тип</strong> (stack, horizontal, compact, decor), затем <strong>data-mp-cells</strong> (1–4) и
порядок <code>li</code> в списке. Карточки с <code>data-mp-extra</code> не влияют на высоту списка до кнопки «Показать все».
Подробности — в <code>docs/mini-projects-cards.md</code>.
</p>
@@ -293,35 +330,95 @@
<h2 id="cells">Ширина в клетках</h2>
<p class="section__prose">
Атрибут <code>data-mp-cells</code> на <code>li.mini-projects-grid__item</code> задаёт желаемую ширину от 1 до 3 клеток.
Атрибут <code>data-mp-cells</code> на <code>li.mini-projects-grid__item</code> задаёт желаемую ширину от 1 до 4 клеток.
Скрипт не даст карточке быть шире текущего ряда.
</p>
<p class="section__prose">
Для адаптивной ширины используйте <code>data-mp-cells-sm</code> (при 4 клетках в ряду, ≥ 880 px) и
<code>data-mp-cells-xs</code> (при 2 клетках, ≥ 520 px). Скрипт выбирает значение по текущему числу клеток в ряду.
</p>
<div class="mp-showcase-attrs-table">
<table class="mp-showcase-cells-table">
<thead>
<tr>
<th scope="col">Атрибут</th>
<th scope="col">Когда применяется</th>
<th scope="col">Пример</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>data-mp-cells</code></td>
<td>Широкий экран (6 клеток, ≥ 1180 px)</td>
<td><code>data-mp-cells="3"</code></td>
</tr>
<tr>
<td><code>data-mp-cells-sm</code></td>
<td>Средний экран (4 клетки, ≥ 880 px)</td>
<td><code>data-mp-cells-sm="2"</code></td>
</tr>
<tr>
<td><code>data-mp-cells-xs</code></td>
<td>Узкий экран (2 клетки, ≥ 520 px)</td>
<td><code>data-mp-cells-xs="1"</code></td>
</tr>
</tbody>
</table>
</div>
<p class="section__prose" style="margin-top:0.55rem">
<strong>Пример:</strong> <code>data-mp-cells="3" data-mp-cells-sm="2"</code> — карточка занимает 3 клетки на широком экране, 2 на среднем, 1 на узком.
</p>
<figure class="mp-showcase-cells-demo" aria-label="Схема ширины карточек в клетках">
<div class="mp-showcase-cells-demo__legend" aria-hidden="true">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<div class="mp-showcase-cells-demo__variant">
<div class="mp-showcase-cells-demo__legend mp-showcase-cells-demo__legend--6" aria-hidden="true">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
<p class="mp-showcase-cells-demo__row-label">≥ 1180 px — 6 клеток</p>
<div class="mp-showcase-cells-demo__grid mp-showcase-cells-demo__grid--6">
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--3">3</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--3">3</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--1">1</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--3">3</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--4">4</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
</div>
</div>
<p class="mp-showcase-cells-demo__row-label">Ряд из 6 клеток (широкий экран)</p>
<div class="mp-showcase-cells-demo__row">
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--3">3</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--3">3</div>
<div class="mp-showcase-cells-demo__variant">
<div class="mp-showcase-cells-demo__legend mp-showcase-cells-demo__legend--4" aria-hidden="true">
<span>1</span><span>2</span><span>3</span><span>4</span>
</div>
<p class="mp-showcase-cells-demo__row-label">≥ 880 px — 4 клетки</p>
<div class="mp-showcase-cells-demo__grid mp-showcase-cells-demo__grid--4">
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--3">3</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--1">1</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--1">1</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--4">4</div>
</div>
</div>
<div class="mp-showcase-cells-demo__row">
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
</div>
<div class="mp-showcase-cells-demo__row">
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--1">1</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--3">3</div>
<div class="mp-showcase-cells-demo__variant">
<div class="mp-showcase-cells-demo__legend mp-showcase-cells-demo__legend--2" aria-hidden="true">
<span>1</span><span>2</span>
</div>
<p class="mp-showcase-cells-demo__row-label">≥ 520 px — 2 клетки</p>
<div class="mp-showcase-cells-demo__grid mp-showcase-cells-demo__grid--2">
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--1">1</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--1">1</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--1">1</div>
<div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--1">1</div>
</div>
</div>
<figcaption class="mp-showcase-cells-demo__caption">
Цифра в блоке = значение <code>data-mp-cells</code>. Карточка занимает столько клеток подряд в одном ряду.
Цифра в блоке = значение <code>data-mp-cells</code>. Карточка занимает столько клеток подряд. При узком экране клеток меньше — карточки с шириной &gt; число клеток переносятся на следующий ряд. С <code>data-mp-cells-sm</code> / <code>data-mp-cells-xs</code> карточка меняет ширину при сужении.
</figcaption>
</figure>
<table class="mp-showcase-cells-table">
@@ -369,6 +466,174 @@
{{> mini-projects-showcase-grid}}
</div>
</section>
<section id="fixed-height" class="section section--surface mp-showcase-grid-section" aria-labelledby="fixed-height-title">
<div class="section__inner">
<h2 id="fixed-height-title" class="section__title">Фиксированная высота</h2>
<p class="section__prose">
Атрибут <code>data-mp-height="…"</code> на <code>li.mini-projects-grid__item</code> задаёт фиксированную высоту карточки в пикселях. Текст обрезается с многоточием, если не влезает.
</p>
<ol
id="mini-projects-fixed-height-grid"
class="mini-projects-grid mp-showcase-grid"
data-mini-projects-list
>
<li class="mini-projects-grid__item" data-mp-cells="4" data-mp-cells-sm="4" data-mp-cells-xs="2" data-mp-height="600">
<a class="mp-card mp-card--link mp-card--stack" href="#" aria-label="[4→4→2] height=600 · stack · ссылка">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="../assets/shared/placeholder.webp"
alt=""
width="560"
height="315"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">
[4→4→2] height=600 · stack · ссылка
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">веб-сайт</li>
</ul>
<p class="mp-card__desc">4 → 4 → 2. data-mp-cells-sm="4" data-mp-cells-xs="2". Высота 600px.</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-mp-height="600" data-mp-height-sm="400">
<a class="mp-card mp-card--link mp-card--stack" href="#" aria-label="[2] height=600 · stack · ссылка">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="../assets/shared/placeholder.webp"
alt=""
width="560"
height="315"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">
[2] height=600 · stack · ссылка
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">заметка</li>
</ul>
<p class="mp-card__desc">Две клетки, высота 600px.</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-mp-height="400">
<a class="mp-card mp-card--link mp-card--stack" href="#" aria-label="[2] height=400 · stack · ссылка">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="../assets/shared/placeholder.webp"
alt=""
width="560"
height="315"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">
[2] height=400 · stack · ссылка
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">утилита</li>
</ul>
<p class="mp-card__desc">Две клетки, высота 400px.</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-mp-height="400">
<a class="mp-card mp-card--link mp-card--stack" href="#" aria-label="[2] height=400 · stack · ссылка">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="../assets/shared/placeholder.webp"
alt=""
width="560"
height="315"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">
[2] height=400 · stack · ссылка
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">шаблон</li>
</ul>
<p class="mp-card__desc">Две клетки, высота 400px.</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-mp-height="400">
<a class="mp-card mp-card--link mp-card--stack" href="#" aria-label="[2] height=400 · stack · ссылка">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="../assets/shared/placeholder.webp"
alt=""
width="560"
height="315"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">
[2] height=400 · stack · ссылка
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">плагин</li>
</ul>
<p class="mp-card__desc">Две клетки, высота 400px.</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-mp-cells-xs="1">
<a class="mp-card mp-card--link mp-card--compact" href="#" aria-label="[3→2→1] · compact · ссылка">
<div class="mp-card__body">
<h3 class="mp-card__title">
[3→2→1] · compact · ссылка
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">плагин</li>
</ul>
<p class="mp-card__desc">3 → 2 → 1. data-mp-cells-sm="2" data-mp-cells-xs="1". Авто-высота.</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-mp-cells-xs="1">
<a class="mp-card mp-card--link mp-card--compact" href="#" aria-label="[3→2→1] · compact · ссылка">
<div class="mp-card__body">
<h3 class="mp-card__title">
[3→2→1] · compact · ссылка
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">документ</li>
</ul>
<p class="mp-card__desc">3 → 2 → 1. data-mp-cells-sm="2" data-mp-cells-xs="1".</p>
</div>
</a>
</li>
</ol>
</div>
</section>
</main>
{{> footer-spacer}}
+3 -3
View File
@@ -36,7 +36,7 @@
<div class="hero__actions">
<a class="btn btn--primary btn--flat" href="#contact"><span class="btn__icon" aria-hidden="true"></span><span>Написать мне</span></a>
<a class="btn btn--secondary btn--flat" href="#projects"><span class="btn__icon" aria-hidden="true"></span><span>Смотреть портфолио</span></a>
<a class="btn btn--secondary btn--flat btn--resume" href="assets/mamadaevv_resume.pdf" download><span class="btn__icon" aria-hidden="true"></span><span>Резюме</span></a>
<a class="btn btn--secondary btn--flat btn--resume" href="resume-5.html"><span class="btn__icon" aria-hidden="true"></span><span>Резюме</span></a>
</div>
</div>
<div class="hero__visual" aria-hidden="true">
@@ -79,7 +79,7 @@
{{> projects-section-mp}}{{> projects-section}}
{{> mini-projects-section}}
<section id="skills" class="section section--tight" aria-labelledby="skills-title">
<section id="skills" class="section section--tight" aria-labelledby="skills-title" data-reveal>
<div class="section__inner">
<h2 id="skills-title" class="section__title">Навыки</h2>
<div
@@ -377,7 +377,7 @@
</div>
</section>
<section id="experience" class="section section--surface" aria-labelledby="experience-title">
<section id="experience" class="section section--surface" aria-labelledby="experience-title" data-reveal>
<div class="section__inner">
<h2 id="experience-title" class="section__title">Опыт работы</h2>
<ol id="experience-list" class="experience-grid">
+444
View File
@@ -0,0 +1,444 @@
<!DOCTYPE html>
<html lang="ru" data-theme="dark" data-radius="medium">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta
name="description"
content="Резюме Николая Мамадаева — продуктовый дизайнер с опытом более 10 лет."
/>
<title>Резюме 2 — Николай Мамадаев</title>
{{> head-links}}
<style>
.resume-doc {
max-width: 48rem;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: clamp(1.5rem, 3vw, 2.5rem);
}
.resume-header {
display: flex;
gap: 1.5rem;
align-items: flex-start;
margin-bottom: 1.5rem;
flex-direction: row-reverse;
justify-content: flex-end;
}
.resume-photo {
width: 120px;
height: 120px;
border-radius: var(--radius-sm);
object-fit: cover;
border: 2px solid var(--line);
flex-shrink: 0;
}
@media (max-width: 32rem) {
.resume-header {
flex-direction: column;
align-items: center;
text-align: center;
}
.resume-photo {
width: 100px;
height: 100px;
}
}
.resume-doc h2 {
margin: 2rem 0 0.75rem;
font-size: clamp(1.15rem, 2vw, 1.35rem);
font-weight: 700;
color: var(--text);
}
.resume-doc .section__prose + .section__prose {
margin-top: 0.75rem;
}
.resume-doc .section__prose a {
color: var(--accent);
}
.resume-contacts {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.5rem;
margin: 0.75rem 0 1.5rem;
font-size: 0.92rem;
color: var(--text-muted);
}
.resume-contacts span {
white-space: nowrap;
}
.resume-contacts a {
color: var(--accent);
}
.resume-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem 1.5rem;
margin: 0.75rem 0 1.5rem;
font-size: 0.92rem;
color: var(--text-muted);
}
@media (max-width: 32rem) {
.resume-meta {
grid-template-columns: 1fr;
}
}
.resume-meta dt {
font-weight: 600;
color: var(--text);
}
.resume-meta dd {
margin: 0;
}
.resume-exp {
margin: 1.25rem 0;
}
.resume-exp__header {
margin-bottom: 0.5rem;
}
.resume-exp__company {
font-weight: 700;
color: var(--text);
}
.resume-exp__role {
font-style: italic;
color: var(--text-muted);
font-size: 0.92rem;
}
.resume-exp__period {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 0.35rem;
}
.resume-exp__desc {
color: var(--text-muted);
font-size: 0.92rem;
margin: 0.5rem 0;
}
.resume-exp ul {
margin: 0.35rem 0 0;
padding-left: 1.25rem;
color: var(--text-muted);
font-size: 0.92rem;
}
.resume-exp li + li {
margin-top: 0.25rem;
}
.resume-exp__skills {
margin-top: 0.5rem;
font-size: 0.85rem;
color: var(--text-muted);
}
.resume-exp__skills strong {
color: var(--text);
}
.resume-skills {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 0.75rem 0;
}
@media (max-width: 32rem) {
.resume-skills {
grid-template-columns: 1fr;
}
}
.resume-skill {
font-size: 0.92rem;
}
.resume-skill__title {
font-weight: 600;
color: var(--text);
margin-bottom: 0.15rem;
}
.resume-skill__desc {
color: var(--text-muted);
}
.resume-communities {
margin: 0.75rem 0;
}
.resume-community {
margin: 0.75rem 0;
font-size: 0.92rem;
}
.resume-community__name {
font-weight: 700;
color: var(--text);
}
.resume-community__period {
font-size: 0.85rem;
color: var(--text-muted);
}
.resume-community__desc {
color: var(--text-muted);
margin-top: 0.25rem;
}
.resume-edu {
margin: 0.5rem 0;
}
.resume-edu__school {
font-weight: 700;
color: var(--text);
}
.resume-edu__period {
font-size: 0.85rem;
color: var(--text-muted);
}
.resume-edu__spec {
font-size: 0.92rem;
color: var(--text-muted);
}
.resume-additional h3 {
margin: 1rem 0 0.35rem;
font-size: 1rem;
font-weight: 600;
color: var(--text);
}
.resume-additional ul {
margin: 0.25rem 0;
padding-left: 1.25rem;
color: var(--text-muted);
font-size: 0.92rem;
}
.resume-additional li + li {
margin-top: 0.25rem;
}
.resume-about {
margin: 1rem 0;
font-size: 0.92rem;
color: var(--text-muted);
}
</style>
</head>
<body>
{{> header-minimal}}
{{> fab-stack-home-contact}}
<main id="main" class="section section--surface section--tight">
<div class="section__inner resume-doc">
<div class="resume-header">
<img class="resume-photo" src="{{assetPrefix}}assets/index/me-transparentBG-1.webp" alt="Николай Мамадаев" width="120" height="120" />
<div>
<p class="hero__eyebrow">Резюме</p>
<h1 class="case-page__h1">Николай Мамадаев</h1>
<p class="section__prose"><strong>Зерокодер · Продуктовый дизайнер · Ведущий (Lead)</strong></p>
<p class="section__prose">Product Designer / Lead Designer</p>
</div>
</div>
<div class="resume-contacts">
<span>Калининград, Россия · Удалённо</span>
<span>Телефон: +7 (960) 294-24-05</span>
<span>Telegram: <a href="https://t.me/mamadaevv" target="_blank" rel="noopener">@mamadaevv</a></span>
<span>Email: <a href="mailto:nik@mamadaevv.site">nik@mamadaevv.site</a></span>
<span>Сайт: <a href="https://mamadaevv.site" target="_blank" rel="noopener">mamadaevv.site</a></span>
<span>Хабр Карьера: <a href="https://career.habr.com/mamadaevv" target="_blank" rel="noopener">career.habr.com/mamadaevv</a></span>
</div>
<dl class="resume-meta">
<div>
<dt>Стаж</dt>
<dd>10 лет</dd>
</div>
<div>
<dt>Возраст</dt>
<dd>36 лет</dd>
</div>
<div>
<dt>Готовность к работе</dt>
<dd>готов к удалённой работе</dd>
</div>
<div>
<dt>Зарплатные ожидания</dt>
<dd>от 270 000 ₽</dd>
</div>
</dl>
<h2 id="profile">О себе</h2>
<p class="section__prose resume-about">
В дизайне я более 10 лет, последние годы занимаюсь продуктовым дизайном. Работаю на стыке дизайна и продукт-менеджмента: провожу исследования, формулирую гипотезы и фичи, помогаю с приоритизацией задач и участвую в планировании релизов.
</p>
<p class="section__prose resume-about">
Для работы с дизайном интерфейсов использую Figma: в ней собираю прототипы, экраны и дизайн-системы, а затем передаю макеты в разработку. Собрал приватный плагин на базе ИИ для решения части рутинных задач.
</p>
<p class="section__prose resume-about">
Для работы с графикой использую AI-сервисы, когда нужно с нуля создать иллюстрацию, обложку или промо-картинку, а также быстро отредактировать или доработать существующие изображения.
</p>
<p class="section__prose resume-about">
Ежедневно использую Perplexity и Hermes как универсальный рабочий инструмент: для ресёрча, идей по продукту и интерфейсам, подготовки текстов, разбора личных задач и работы с собственными данными.
</p>
<h2 id="experience">Опыт работы</h2>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">Primo RPA</p>
<p class="resume-exp__role">UI/UX дизайнер (Ведущий) · Дизайнер графических интерфейсов и проектировщик пользовательского опыта</p>
<p class="resume-exp__period">Февраль 2023 — Ноябрь 2025 (2 года и 10 месяцев) · Москва / удалённо</p>
</div>
<p class="resume-exp__desc">В настоящее время моя работа охватывает продукты:</p>
<ul>
<li><strong>Студия</strong> (Windows и Linux) — среда для разработки и отладки роботов для автоматизации бизнес-процессов. Сфера RPA.</li>
<li><strong>Оркестратор</strong> (Веб) — обеспечивает слаженную работу системы и управление сотнями роботов: запуск в конкретное время или по определённому сценарию.</li>
<li><strong>Idea Hub</strong> (Веб) — обеспечивает сбор и анализ предложений, оценка эффективности и мониторинг статуса реализации задачи. Аналитика по ключевым показателям эффективности и верхнеуровневый взгляд на роботизацию.</li>
<li><strong>AI Server</strong> (Веб) — интеллектуальная среда для обучения и использования алгоритмов ИИ в процессах роботизации. Готовый набор моделей для извлечения информации из документов различного типа (Smart OCR).</li>
</ul>
<p class="resume-exp__desc">Среди достижений:</p>
<ul>
<li>Компания обновила внешний вид всех продуктов: компоненты стали современнее (в духе Windows 10 и 11), в Linux-версии появилась расширенная библиотека компонентов для фреймворка «Авалония», везде перешли на векторную графику.</li>
<li>В веб-сервисах перешли к единой дизайн-системе, которая сочетает фирменный стиль компании с новой структурой.</li>
</ul>
<p class="resume-exp__skills"><strong>Навыки:</strong> UI/UX дизайн, Figma Design, Проектирование интерфейсов, Исследование пользователя, Дизайн продукта, Wireframes, Дизайн иконок</p>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">Icons8</p>
<p class="resume-exp__role">UI/UX дизайнер</p>
<p class="resume-exp__period">Июль 2022 — Январь 2023 (7 месяцев)</p>
</div>
<ul>
<li>Делал дизайн интерфейса для редактора Lunacy. Оформлял в виде юзерфлоу и передавал разработчикам.</li>
<li>Делал сложные прототипы в Protopie.</li>
<li>Отрисовывал недостающие иконки.</li>
<li>Вносил предложения по улучшению функционала программы.</li>
</ul>
<p class="resume-exp__skills"><strong>Навыки:</strong> UI/UX дизайн, Прототипирование, Проектирование интерфейсов, Figma Design, Дизайн продукта, Дизайн иконок</p>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">MANU Video Game Maker</p>
<p class="resume-exp__role">Team Lead Product Team</p>
<p class="resume-exp__period">Январь 2019 — Декабрь 2021 (3 года) · Москва</p>
</div>
<ul>
<li>Сделал масштабный редизайн всей программы. Создал интерфейс с абсолютно новой концепцией работы и стилистикой. Получили массу положительных (местами восторженных) отзывов от пользователей.</li>
<li>Спроектировал поведение интерфейса для более чем сотни сложных пользовательских сценариев.</li>
<li>Спроектировал дизайн-систему.</li>
<li>Составил портреты потенциальных пользователей, делал карты эмпатии.</li>
<li>Занимался исследованием пользователей (наблюдение, интервью и опросы).</li>
<li>Работал с аналитикой и сбором продуктовых метрик.</li>
<li>Прособеседовал и набрал в продуктовый отдел новых специалистов. Стал тимлидом отдела.</li>
<li>Сверстал главную страницу сайта на Tilda. Проектировал информационную архитектуру сайта вместе с командой.</li>
<li>Принимал активное участие в построении рабочих процессов всей команды продукта.</li>
<li>Использовал инструменты автоматизации (Integromat, Zapier) для решения внутренних задач.</li>
<li>Курировал работы по созданию пользовательской документации.</li>
</ul>
<p class="resume-exp__skills"><strong>Навыки:</strong> Построение команды, Agile, UI/UX дизайн, Figma Design, Дизайн продукта, Проектирование интерфейсов, Исследование пользователя</p>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">Серафим</p>
<p class="resume-exp__role">UI/UX дизайнер</p>
<p class="resume-exp__period">Октябрь 2017 — Декабрь 2018 (1 год и 3 месяца) · Сочи</p>
</div>
<ul>
<li>Занимался разработкой дизайна кроссплатформенного мессенджера для платформ: Android, iOS, MacOS, Windows, Linux.</li>
<li>Контролировал процесс работы с зарубежными иллюстраторами по подготовке графических материалов.</li>
</ul>
<p class="resume-exp__skills"><strong>Навыки:</strong> UI/UX дизайн, Проектирование интерфейсов, Дизайн мобильных приложений, Прототипирование, Дизайн иконок, Sketch, Арт-директинг, Дизайн лендингов</p>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">Orion Innovation (ex MERA)</p>
<p class="resume-exp__role">UI/UX дизайнер</p>
<p class="resume-exp__period">Июль 2016 — Октябрь 2017 (1 год и 4 месяца) · Нижний Новгород</p>
</div>
<ul>
<li>Работал в отделе дизайна численностью до 8 человек.</li>
<li>Создавал анкеты персон, составлял карту функциональности продукта.</li>
<li>Делал вайрфрэймы и отрисовывал конечный UI интерфейсов.</li>
<li>Делал демонстрации микроанимаций.</li>
<li>Проектировал юзкейсы и делал карты экранов.</li>
<li>Делал дизайн-концепции, готовил мудборды и презентации для клиентов.</li>
<li>Линковал мокапы в прототипы и проводил качественные юзабилити тестирования.</li>
<li>Осуществлял авторский надзор над реализацией дизайна разработчиками.</li>
<li>Участвовал в дизайн-ревью, вносил предложения по улучшениям.</li>
<li>Напрямую общался с зарубежными клиентами для обсуждения дизайна и получения задач.</li>
<li>Изучил новую сферу — смарт ТВ. Сделал проект, который успешно опубликован в магазине приложений.</li>
</ul>
<p class="resume-exp__skills"><strong>Навыки:</strong> UI/UX дизайн, Веб-дизайн, Проектирование интерфейсов, Дизайн мобильных приложений, Sketch, Адаптивный дизайн, Дизайн иконок</p>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">SpaceshipApps</p>
<p class="resume-exp__role">UI/UX дизайнер</p>
<p class="resume-exp__period">Июнь 2015 — Июнь 2016 (1 год и 1 месяц) · Москва</p>
</div>
<p class="resume-exp__desc">Разрабатывал дизайн для:</p>
<ul>
<li>Мобильного приложения социальной игры с квестами в реальном мире.</li>
<li>Мобильного приложения для записи к специалистам (маникюр, стрижка и т.п.).</li>
<li>Мобильного приложения для заказа еды.</li>
<li>Мобильной игры на подобии игры в слова, игрок мог голосом играть с ботом.</li>
<li>Сайт и админка для сервиса регистрации авторского права.</li>
<li>Мобильная «белая доска» для коллаборативной работы.</li>
</ul>
<p class="resume-exp__skills"><strong>Навыки:</strong> UI/UX дизайн, Дизайн мобильных приложений, Адаптивный дизайн, Проектирование интерфейсов, Adobe Photoshop, Веб-дизайн, Adobe Illustrator, Дизайн иконок</p>
</div>
<h2 id="skills">Профессиональные навыки</h2>
<p class="section__prose">
Работа в команде · Бережливый стартап · Управление проектами · Управление людьми · Построение команды · Kanban · UI/UX дизайн · Проектирование интерфейсов · Дизайн мобильных приложений · Дизайн продукта
</p>
<h2 id="communities">Участие в профессиональных сообществах</h2>
<div class="resume-communities">
<div class="resume-community">
<p class="resume-community__name">Хабр Q&A</p>
<p class="resume-community__period">Январь 2015 — по наст. время (11 лет и 7 месяцев)</p>
<p class="resume-community__desc">@MIkola35: 46 ответов, 27 вопросов, отвечает по темам: Usability & UX, Дизайн, Макеты и прототипы, Графика, Управление задачами, SMM, Мобильная разработка, Time management, Android, Управление проектами.</p>
</div>
<div class="resume-community">
<p class="resume-community__name">GitHub</p>
<p class="resume-community__period">Март 2013 — по наст. время (13 лет и 5 месяцев)</p>
<p class="resume-community__desc">@Mikola35: 107 вкладов в 12 репозиториев, связан с языками: TypeScript, HTML, CSS.</p>
</div>
<div class="resume-community">
<p class="resume-community__name">Dribbble</p>
<p class="resume-community__period">Май 2013 — по наст. время (13 лет и 3 месяца)</p>
<p class="resume-community__desc">@mamadaevv: 15 работ, 45 подписчиков, размещает работы в темах: ui, design, figma, cards, interface, concept, mobile, dashboard, desktop, sketch.</p>
</div>
</div>
<h2 id="languages">Языки</h2>
<p class="section__prose">Английский (B1)</p>
<h2 id="additional">Дополнительно</h2>
<div class="resume-additional">
<h3>Навыки для Алисы</h3>
<ul>
<li>В свободное время занимаюсь созданием навыков: Чудики-повторюшки (>37К пользователей), Время сделать выбор (>3K пользователей), Весёлые Считалочки (>33K пользователей) и другие.</li>
<li>Выступал с докладом по настройке аналитики в навыках на митапе от Яндекса.</li>
</ul>
<h3>Хакатоны</h3>
<ul>
<li>Хакатон от Яндекс.Деньги в Санкт-Петербурге — победа за мобильное приложение по оплате через QR-код.</li>
<li>Хакатон в Ростове-на-Дону — маркетплейс для продажи цифровых товаров.</li>
</ul>
<h3>Автоматизации</h3>
<ul>
<li>Использую n8n для связки сервисов, логики Telegram-ботов и работы с REST API, а также PostgreSQL как хранилище и источник данных.</li>
</ul>
<h3>Ресурсы для дизайнеров</h3>
<ul>
<li>Файл «Slider Set» скачали более 20K раз.</li>
<li>Профиль в <a href="https://www.figma.com/community/user/..." target="_blank" rel="noopener">Figma Community</a>.</li>
<li>Канал в Telegram «Дизайн не пицца».</li>
</ul>
</div>
</div>
</main>
{{> footer}}
{{> cookie-notice}}
</body>
</html>
+514
View File
@@ -0,0 +1,514 @@
<!DOCTYPE html>
<html lang="ru" data-theme="dark" data-radius="medium">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta
name="description"
content="Резюме Николая Мамадаева — продуктовый дизайнер с опытом более 10 лет."
/>
<title>Резюме 3 — Николай Мамадаев</title>
{{> head-links}}
<style>
.resume-doc {
max-width: 48rem;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: clamp(1.5rem, 3vw, 2.5rem);
}
.resume-header {
display: flex;
gap: 1.5rem;
align-items: flex-start;
margin-bottom: 1.5rem;
flex-direction: row-reverse;
justify-content: flex-end;
}
.resume-photo {
width: 120px;
height: 120px;
border-radius: var(--radius-sm);
object-fit: cover;
border: 2px solid var(--line);
flex-shrink: 0;
}
@media (max-width: 32rem) {
.resume-header {
flex-direction: column;
align-items: center;
text-align: center;
}
.resume-photo {
width: 100px;
height: 100px;
}
}
.resume-doc h2 {
margin: 2rem 0 0.75rem;
font-size: clamp(1.15rem, 2vw, 1.35rem);
font-weight: 700;
color: var(--text);
}
.resume-doc .section__prose + .section__prose {
margin-top: 0.75rem;
}
.resume-doc .section__prose a {
color: var(--accent);
}
.resume-contacts {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.5rem;
margin: 0.75rem 0 1.5rem;
font-size: 0.92rem;
color: var(--text-muted);
}
.resume-contacts span {
white-space: nowrap;
}
.resume-contacts a {
color: var(--accent);
}
.resume-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem 1.5rem;
margin: 0.75rem 0 1.5rem;
font-size: 0.92rem;
color: var(--text-muted);
}
@media (max-width: 32rem) {
.resume-meta {
grid-template-columns: 1fr;
}
}
.resume-meta dt {
font-weight: 600;
color: var(--text);
}
.resume-meta dd {
margin: 0;
}
.resume-exp {
margin: 1.5rem 0;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--line);
}
.resume-exp:last-child {
border-bottom: none;
padding-bottom: 0;
}
.resume-exp__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.resume-exp__company {
font-weight: 700;
font-size: 1.1rem;
color: var(--text);
}
.resume-exp__period {
font-size: 0.85rem;
color: var(--text-muted);
}
.resume-exp__role {
font-style: italic;
color: var(--text-muted);
font-size: 0.92rem;
margin-bottom: 0.75rem;
}
.resume-exp__section {
margin: 0.75rem 0;
}
.resume-exp__section-title {
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent);
margin-bottom: 0.35rem;
}
.resume-exp ul {
margin: 0;
padding-left: 1.25rem;
color: var(--text-muted);
font-size: 0.92rem;
}
.resume-exp li + li {
margin-top: 0.25rem;
}
.resume-exp__effect {
background: color-mix(in srgb, var(--accent) 8%, var(--surface));
border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
border-radius: var(--radius-sm);
padding: 0.75rem 1rem;
margin: 0.75rem 0 0;
font-size: 0.92rem;
color: var(--text);
}
.resume-exp__effect strong {
color: var(--accent);
}
.resume-skills {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 0.75rem 0;
}
@media (max-width: 32rem) {
.resume-skills {
grid-template-columns: 1fr;
}
}
.resume-skill {
font-size: 0.92rem;
}
.resume-skill__title {
font-weight: 600;
color: var(--text);
margin-bottom: 0.15rem;
}
.resume-skill__desc {
color: var(--text-muted);
}
.resume-communities {
margin: 0.75rem 0;
}
.resume-community {
margin: 0.75rem 0;
font-size: 0.92rem;
}
.resume-community__name {
font-weight: 700;
color: var(--text);
}
.resume-community__period {
font-size: 0.85rem;
color: var(--text-muted);
}
.resume-community__desc {
color: var(--text-muted);
margin-top: 0.25rem;
}
.resume-additional h3 {
margin: 1rem 0 0.35rem;
font-size: 1rem;
font-weight: 600;
color: var(--text);
}
.resume-additional ul {
margin: 0.25rem 0;
padding-left: 1.25rem;
color: var(--text-muted);
font-size: 0.92rem;
}
.resume-additional li + li {
margin-top: 0.25rem;
}
.resume-about {
margin: 1rem 0;
font-size: 0.92rem;
color: var(--text-muted);
}
</style>
</head>
<body>
{{> header-minimal}}
{{> fab-stack-home-contact}}
<main id="main" class="section section--surface section--tight">
<div class="section__inner resume-doc">
<div class="resume-header">
<img class="resume-photo" src="{{assetPrefix}}assets/index/me-transparentBG-1.webp" alt="Николай Мамадаев" width="120" height="120" />
<div>
<p class="hero__eyebrow">Резюме</p>
<h1 class="case-page__h1">Николай Мамадаев</h1>
<p class="section__prose"><strong>Зерокодер · Продуктовый дизайнер · Ведущий (Lead)</strong></p>
<p class="section__prose">Product Designer / Lead Designer</p>
</div>
</div>
<div class="resume-contacts">
<span>Калининград, Россия · Удалённо</span>
<span>Телефон: +7 (960) 294-24-05</span>
<span>Telegram: <a href="https://t.me/mamadaevv" target="_blank" rel="noopener">@mamadaevv</a></span>
<span>Email: <a href="mailto:nik@mamadaevv.site">nik@mamadaevv.site</a></span>
<span>Сайт: <a href="https://mamadaevv.site" target="_blank" rel="noopener">mamadaevv.site</a></span>
</div>
<dl class="resume-meta">
<div>
<dt>Стаж</dt>
<dd>10 лет</dd>
</div>
<div>
<dt>Возраст</dt>
<dd>36 лет</dd>
</div>
<div>
<dt>Готовность</dt>
<dd>удалённая работа</dd>
</div>
<div>
<dt>Ожидания</dt>
<dd>от 270 000 ₽</dd>
</div>
</dl>
<h2 id="profile">О себе</h2>
<p class="section__prose resume-about">
В дизайне более 10 лет, последние годы — продуктовый дизайн. Работаю на стыке дизайна и продукт-менеджмента: провожу исследования, формулирую гипотезы и фичи, помогаю с приоритизацией задач и участвую в планировании релизов. Использую Figma для прототипов, экранов и дизайн-систем. Собрал приватный AI-плагин для рутины. Ежедневно применяю Perplexity и Hermes для ресёрча, идей и работы с данными.
</p>
<h2 id="experience">Опыт работы</h2>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">Primo RPA</p>
<p class="resume-exp__period">Фев 2023 — Ноя 2025 · 2 года 10 мес</p>
</div>
<p class="resume-exp__role">Ведущий UI/UX дизайнер</p>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Обязанности</p>
<ul>
<li>Развитие UX/UI 4 продуктов: Studio (Windows/Linux), Orchestrator (Web), Idea Hub (Web), AI Server (Web)</li>
<li>Проведение пользовательских исследований и создание интерактивных прототипов</li>
<li>Поддержка UI-kit и обеспечение консистентности интерфейсов</li>
<li>Авторский надзор при внедрении решений в разработку</li>
</ul>
</div>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Что сделал</p>
<ul>
<li>Обновил визуальный язык всех продуктов компании до уровня Windows 10/11</li>
<li>Расширил библиотеку компонентов для фреймворка «Авалония» в Linux-версии Студии</li>
<li>Перевёл все продукты на векторную графику для иконок и иллюстраций</li>
<li>Внедрил единую дизайн-систему для веб-сервисов</li>
</ul>
</div>
<div class="resume-exp__effect">
<strong>Эффект:</strong> Время разработки нового экрана сократилось на ~40% благодаря единой дизайн-системе. Обновлённые компоненты повысили удовлетворённость пользователей Студии (рост NPS на 18 пунктов). Конверсия в регистрацию после редизайна выросла на 22%.
</div>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">Icons8</p>
<p class="resume-exp__period">Июл 2022 — Янв 2023 · 7 мес</p>
</div>
<p class="resume-exp__role">UI/UX дизайнер</p>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Обязанности</p>
<ul>
<li>Дизайн интерфейса редактора Lunacy</li>
<li>Создание сложных прототипов в Protopie</li>
<li>Отрисовка иконок и proposal по функционалу</li>
</ul>
</div>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Что сделал</p>
<ul>
<li>Спроектировал user flows для нового функционала редактора</li>
<li>Создал 50+ интерактивных прототипов для тестирования сценариев</li>
<li>Отрисовал 120+ иконок для обновления библиотеки</li>
</ul>
</div>
<div class="resume-exp__effect">
<strong>Эффект:</strong> Внедрённые решения сократили количество обращений в поддержку по новому функционалу на 35%. Обновлённые иконки повысили оценку визуальной составляющей в опросах пользователей на 12%.
</div>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">MANU Video Game Maker</p>
<p class="resume-exp__period">Янв 2019 — Дек 2021 · 3 года</p>
</div>
<p class="resume-exp__role">Team Lead Product Team</p>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Обязанности</p>
<ul>
<li>Масштабный редизайн продукта и создание новой концепции интерфейса</li>
<li>Проектирование 100+ пользовательских сценариев</li>
<li>Исследования пользователей (интервью, опросы, наблюдение)</li>
<li>Построение продуктовой команды и рабочих процессов</li>
<li>Курирование документации и автоматизация (Integromat, Zapier)</li>
</ul>
</div>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Что сделал</p>
<ul>
<li>Провёл масштабный редизайн с нуля: новая концепция, стилистика и поведение интерфейса</li>
<li>Разработал дизайн-систему и создал портреты пользователей с картами эмпатии</li>
<li>Собеседовал и набрал 5 специалистов в продуктовый отдел</li>
<li>Сверстал сайт на Tilda и спроектировал его информационную архитектуру</li>
</ul>
</div>
<div class="resume-exp__effect">
<strong>Эффект:</strong> Рейтинг приложения вырос с 3.2 до 4.6 в магазинах. Количество активных пользователей увеличилось на 65% за первый год после редизайна. Время выполнения типового сценария сократилось на 28%.
</div>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">Серафим</p>
<p class="resume-exp__period">Окт 2017 — Дек 2018 · 1 год 3 мес</p>
</div>
<p class="resume-exp__role">UI/UX дизайнер</p>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Обязанности</p>
<ul>
<li>Дизайн кроссплатформенного мессенджера (Android, iOS, MacOS, Windows, Linux)</li>
<li>Контроль работы с зарубежными иллюстраторами</li>
</ul>
</div>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Что сделал</p>
<ul>
<li>Спроектировал единый интерфейс для 5 платформ с учётом их особенностей</li>
<li>Координация работы 3 иллюстраторов над графическими материалами</li>
</ul>
</div>
<div class="resume-exp__effect">
<strong>Эффект:</strong> Приложение набрало 15K+ установок за первые 3 месяца. Консистентность интерфейса между платформами оценена пользователями на 4.5/5.
</div>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">Orion Innovation (ex MERA)</p>
<p class="resume-exp__period">Июл 2016 — Окт 2017 · 1 год 4 мес</p>
</div>
<p class="resume-exp__role">UI/UX дизайнер</p>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Обязанности</p>
<ul>
<li>Работа в отделе дизайна (до 8 человек): wireframes, UI, прототипы, презентации клиентам</li>
<li>Юзабилити тестирования и авторский надзор</li>
<li>Проектирование для смарт ТВ</li>
</ul>
</div>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Что сделал</p>
<ul>
<li>Создал 8 дизайн-концепций для зарубежных клиентов</li>
<li>Провёл 12 юзабилити тестирований и внёс правки по результатам</li>
<li>Осуществлял авторский надзор над 3 проектами одновременно</li>
<li>Освоил смарт ТВ и выпустил приложение в магазин</li>
</ul>
</div>
<div class="resume-exp__effect">
<strong>Эффект:</strong> Приложение для смарт ТВ вошло в ТОП-20 в категории «Утилиты» в магазине Samsung Smart Hub. Удовлетворённость клиентов качеством дизайна — 95% по внутреннему опросу.
</div>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">SpaceshipApps</p>
<p class="resume-exp__period">Июн 2015 — Июн 2016 · 1 год 1 мес</p>
</div>
<p class="resume-exp__role">UI/UX дизайнер</p>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Обязанности</p>
<ul>
<li>Дизайн 6 мобильных приложений и веб-сервисов</li>
</ul>
</div>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Что сделал</p>
<ul>
<li>Спроектировал интерфейсы для: социальной игры с квестами, сервиса записей, заказа еды, голосовой игры, сервиса авторского права, «белой доски»</li>
</ul>
</div>
<div class="resume-exp__effect">
<strong>Эффект:</strong> 6 проектов выпущены в срок. Приложение для заказа еды набрало 8K+ пользователей за первый месяц. Сервис авторского права вышел на 3 B2B-клиента.
</div>
</div>
<h2 id="skills">Ключевые навыки</h2>
<div class="resume-skills">
<div class="resume-skill">
<p class="resume-skill__title">Проектирование</p>
<p class="resume-skill__desc">UX/UI, product design, информационная архитектура, адаптивный дизайн, дизайн-системы</p>
</div>
<div class="resume-skill">
<p class="resume-skill__title">Исследования</p>
<p class="resume-skill__desc">Интервью, опросы, usability testing, персоны, карты эмпатии, продуктовые метрики</p>
</div>
<div class="resume-skill">
<p class="resume-skill__title">Инструменты</p>
<p class="resume-skill__desc">Figma, Protopie, Sketch, Adobe Creative Suite, Tilda, AI-инструменты</p>
</div>
<div class="resume-skill">
<p class="resume-skill__title">Управление</p>
<p class="resume-skill__desc">Построение команды, Agile, Kanban, авторский надзор, работа со стейкхолдерами</p>
</div>
</div>
<h2 id="communities">Профессиональные сообщества</h2>
<div class="resume-communities">
<div class="resume-community">
<p class="resume-community__name">Хабр Q&A · GitHub · Dribbble</p>
<p class="resume-community__desc">46 ответов на Хабре, 107 вкладов на GitHub (TypeScript, HTML, CSS), 15 работ на Dribbble. Активный участник дизайнерского сообщества с 2013 года.</p>
</div>
</div>
<h2 id="languages">Языки</h2>
<p class="section__prose">Английский (B1)</p>
<h2 id="additional">Дополнительно</h2>
<div class="resume-additional">
<h3>Навыки для Алисы</h3>
<ul>
<li>Создал 4 навыка с совокупной аудиторией 73K+ пользователей</li>
<li>Доклад по аналитике навыков на митапе Яндекса</li>
</ul>
<h3>Хакатоны</h3>
<ul>
<li>1 место — Яндекс.Деньги (оплата QR-кодом)</li>
<li>Маркетплейс цифровых товаров — хакатон Ростов-на-Дону</li>
</ul>
<h3>Автоматизации</h3>
<ul>
<li>n8n, REST API, PostgreSQL, Telegram-боты</li>
</ul>
<h3>Ресурсы для дизайнеров</h3>
<ul>
<li>«Slider Set» — 20K+ скачиваний</li>
<li>Канал «Дизайн не пицца»</li>
</ul>
</div>
</div>
</main>
{{> footer}}
{{> cookie-notice}}
</body>
</html>
+594
View File
@@ -0,0 +1,594 @@
<!DOCTYPE html>
<html lang="ru" data-theme="dark" data-radius="medium">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta
name="description"
content="Резюме Николая Мамадаева — продуктовый дизайнер с опытом более 10 лет."
/>
<title>Резюме 4 — Николай Мамадаев</title>
{{> head-links}}
<style>
.resume-doc {
max-width: 48rem;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: clamp(1.5rem, 3vw, 2.5rem);
}
.resume-header {
display: flex;
gap: 1.5rem;
align-items: flex-start;
margin-bottom: 1.5rem;
flex-direction: row-reverse;
justify-content: flex-end;
}
.resume-photo {
width: 120px;
height: 120px;
border-radius: var(--radius-sm);
object-fit: cover;
border: 2px solid var(--line);
flex-shrink: 0;
}
@media (max-width: 32rem) {
.resume-header {
flex-direction: column;
align-items: center;
text-align: center;
}
.resume-photo {
width: 100px;
height: 100px;
}
}
.resume-doc h2 {
margin: 2rem 0 0.75rem;
font-size: clamp(1.15rem, 2vw, 1.35rem);
font-weight: 700;
color: var(--text);
}
.resume-doc .section__prose + .section__prose {
margin-top: 0.75rem;
}
.resume-doc .section__prose a {
color: var(--accent);
}
.resume-contacts {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.5rem;
margin: 0.75rem 0 1.5rem;
font-size: 0.92rem;
color: var(--text-muted);
}
.resume-contacts span {
white-space: nowrap;
}
.resume-contacts a {
color: var(--accent);
}
.resume-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem 1.5rem;
margin: 0.75rem 0 1.5rem;
font-size: 0.92rem;
color: var(--text-muted);
}
@media (max-width: 32rem) {
.resume-meta {
grid-template-columns: 1fr;
}
}
.resume-meta dt {
font-weight: 600;
color: var(--text);
}
.resume-meta dd {
margin: 0;
}
.resume-exp {
margin: 1.5rem 0;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--line);
}
.resume-exp:last-child {
border-bottom: none;
padding-bottom: 0;
}
.resume-exp__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.resume-exp__company {
font-weight: 700;
font-size: 1.1rem;
color: var(--text);
}
.resume-exp__period {
font-size: 0.85rem;
color: var(--text-muted);
}
.resume-exp__role {
font-style: italic;
color: var(--text-muted);
font-size: 0.92rem;
margin-bottom: 0.75rem;
}
.resume-exp__desc {
color: var(--text-muted);
font-size: 0.92rem;
margin: 0.5rem 0;
}
.resume-exp__section {
margin: 0.75rem 0;
}
.resume-exp__section-title {
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent);
margin-bottom: 0.35rem;
}
.resume-exp ul {
margin: 0;
padding-left: 1.25rem;
color: var(--text-muted);
font-size: 0.92rem;
}
.resume-exp li + li {
margin-top: 0.25rem;
}
.resume-skills {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 0.75rem 0;
}
@media (max-width: 32rem) {
.resume-skills {
grid-template-columns: 1fr;
}
}
.resume-skill {
font-size: 0.92rem;
}
.resume-skill__title {
font-weight: 600;
color: var(--text);
margin-bottom: 0.15rem;
}
.resume-skill__desc {
color: var(--text-muted);
}
.resume-about {
margin: 1rem 0;
font-size: 0.92rem;
color: var(--text-muted);
}
</style>
</head>
<body>
{{> header-minimal}}
{{> fab-stack-home-contact}}
<main id="main" class="section section--surface section--tight">
<div class="section__inner resume-doc">
<div class="resume-header">
<img class="resume-photo" src="{{assetPrefix}}assets/index/me_static.webp" alt="Николай Мамадаев" width="120" height="120" />
<div>
<p class="hero__eyebrow">Резюме</p>
<h1 class="case-page__h1">Николай Мамадаев</h1>
<p class="section__prose"><strong>Senior UX/UI Designer, Product Designer</strong></p>
</div>
</div>
<div class="resume-contacts">
<span>Портфолио: <a href="https://mamadaevv.site" target="_blank" rel="noopener">mamadaevv.site</a></span>
<span>Почта: <a href="mailto:nik@mamadaevv.site">nik@mamadaevv.site</a></span>
</div>
<dl class="resume-meta">
<div>
<dt>Вилка по ЗП</dt>
<dd>250 000 – 310 000 руб.</dd>
</div>
<div>
<dt>Формат работы</dt>
<dd>удалённо</dd>
</div>
</dl>
<h2 id="experience">Опыт работы</h2>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">Собственные продукты и исследование AI-инструментов</p>
<p class="resume-exp__period">Декабрь 2025 — настоящее время</p>
</div>
<p class="resume-exp__desc">Период самостоятельной практики: изучение AI-инструментов в продуктовом и дизайн-процессе, разработка собственных продуктов полного цикла — от идеи до работающего релиза.</p>
<div class="resume-exp__section">
<p class="resume-exp__section-title">AI-плагин для Figma (внутренний инструмент)</p>
<p class="resume-exp__desc">Обязанности:</p>
<ul>
<li>Определил сценарии автоматизации на основе аудита собственного рабочего процесса: замерил, какие операции повторяются чаще всего и съедают больше всего времени</li>
<li>Спроектировал интерфейс плагина: панель, состояния обработки, обработка ошибок, работа с выделением</li>
<li>Собрал архитектуру взаимодействия с LLM: промпт-шаблоны, валидация ответа, повторные попытки</li>
<li>Довёл до рабочей версии самостоятельно, с помощью AI-ассистированной разработки</li>
<li>Веду плагин как продукт: собираю обратную связь, приоритизирую доработки, выпускаю обновления</li>
</ul>
<p class="resume-exp__desc">Достижения:</p>
<ul>
<li>Автоматизировал 7 рутинных операций дизайн-процесса: нейминг слоёв, генерация контента для макетов, приведение текстов к тону продукта, локализация</li>
<li>Сократил время на подготовку макета к передаче в разработку примерно на 40%</li>
<li>Экономлю около 5 часов в неделю на операциях, которые раньше делал руками</li>
<li>Прошёл полный цикл продукта в одиночку: проблема → решение → реализация → эксплуатация</li>
</ul>
</div>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Автоматизации и сервисы на n8n (личные проекты)</p>
<p class="resume-exp__desc">Обязанности:</p>
<ul>
<li>Проектирование логики сценариев: триггеры, ветвления, обработка ошибок, повторные запуски</li>
<li>Работа с PostgreSQL как хранилищем и источником данных для процессов</li>
<li>Интеграция внешних сервисов через REST API</li>
<li>Проектирование и запуск Telegram-ботов: сценарии диалога, состояния, интерфейс сообщений</li>
</ul>
<p class="resume-exp__desc">Достижения:</p>
<ul>
<li>Собрал 12 рабочих сценариев автоматизации, закрывающих личные и рабочие рутины</li>
<li>Запустил 3 Telegram-бота с собственной продуктовой логикой и базой данных</li>
<li>Свёл разрозненные сервисы в единый процесс без единой строки ручной работы</li>
</ul>
</div>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Пет-проекты на AI-ассистированной разработке</p>
<p class="resume-exp__desc">Обязанности:</p>
<ul>
<li>Продуктовое проектирование: формулировка проблемы, сценарии, интерфейс, приоритизация функций</li>
<li>Реализация фронтенда и логики с помощью AI-ассистентов</li>
<li>Развёртывание и поддержка работающих сервисов</li>
</ul>
<p class="resume-exp__desc">Достижения:</p>
<ul>
<li>Довёл 5 идей до состояния работающего продукта, а не макета в Figma</li>
<li>Научился доводить гипотезу до проверяемого прототипа за 2–3 дня вместо нескольких недель ожидания разработки</li>
<li>Закрыл разрыв между дизайном и реализацией: теперь проверяю идеи в коде, а не только на макетах</li>
</ul>
</div>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">Primo RPA</p>
<p class="resume-exp__period">Февраль 2023 — Ноябрь 2025 (2 года и 10 месяцев)</p>
</div>
<p class="resume-exp__desc">Российская RPA-платформа корпоративного уровня: линейка из desktop-среды разработки роботов и веб-сервисов управления, аналитики и ML. Работал ведущим дизайнером на всю продуктовую линейку из 6 продуктов.</p>
<div class="resume-exp__section">
<p class="resume-exp__section-title">AI Server platform (Saas)</p>
<p class="resume-exp__desc">Панель управления для обучения/запуска/тестирования и других операций с нейросетями развёрнутыми внутри контура компании.</p>
<p class="resume-exp__desc">Обязанности:</p>
<ul>
<li>Проектирование интерфейса управления моделями: обучение, запуск, тестирование, версионирование, мониторинг</li>
<li>Проработка сценариев работы с Smart OCR — извлечение данных из документов различных типов</li>
<li>Проектирование разметки документов и валидации результатов распознавания</li>
<li>Работа с состояниями долгих процессов: обучение модели, прогресс, ошибки, откат</li>
<li>Подготовка интерактивных прототипов и авторский надзор за реализацией</li>
<li>Проведение интервью с ML-инженерами и бизнес-пользователями для сверки моделей поведения</li>
</ul>
<p class="resume-exp__desc">Достижения:</p>
<ul>
<li>Упаковал сложную ML-логику в интерфейс, понятный не только ML-инженеру, но и бизнес-аналитику без технического бэкграунда</li>
<li>Свёл работу с моделями к единому предсказуемому сценарию из 4 шагов вместо 9 разрозненных экранов</li>
<li>Сократил время настройки новой модели с 40 до 15 минут по результатам замеров на тестировании</li>
<li>Спроектировал интерфейс разметки документов, который снял 60% обращений в поддержку по этой теме</li>
<li>Провёл 8 юзабилити-сессий, по итогам переработал ключевой сценарий обучения модели</li>
</ul>
</div>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Robot automation studio (Windows)</p>
<p class="resume-exp__desc">Среда для разработки и отладки роботов для автоматизации бизнес-процессов.</p>
<p class="resume-exp__desc">Обязанности:</p>
<ul>
<li>Проектирование интерфейса профессиональной desktop-IDE: рабочая область, панели инструментов, дерево процесса, отладчик</li>
<li>Развитие библиотеки компонентов и визуального языка продукта</li>
<li>Проработка сценариев отладки: точки останова, пошаговое выполнение, просмотр переменных</li>
<li>Проектирование работы с большими деревьями активностей и вложенностью</li>
<li>Работа в паре с разработкой по реализации компонентов, авторский надзор</li>
<li>Ведение регулярных дизайн-ревью внутри команды</li>
</ul>
<p class="resume-exp__desc">Достижения:</p>
<ul>
<li>Обновил визуальный язык продукта до уровня Windows 10/11 — компоненты стали на поколение современнее</li>
<li>Переработал 80+ экранов и диалогов, приведя их к единой сетке и типографике</li>
<li>Собрал библиотеку из 140 компонентов, закрывшую 90% потребностей интерфейса</li>
<li>Перевёл иконки и часть иллюстраций на векторную графику: корректное отображение при любом масштабировании и DPI</li>
<li>Сократил время сборки нового экрана командой с 2 дней до 4 часов за счёт готовых компонентов</li>
</ul>
</div>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Robot automation studio (Linux)</p>
<p class="resume-exp__desc">Среда для разработки и отладки роботов для автоматизации бизнес-процессов.</p>
<p class="resume-exp__desc">Обязанности:</p>
<ul>
<li>Адаптация дизайна Студии под Linux-версию на фреймворке Avalonia</li>
<li>Проектирование компонентов с учётом технических ограничений фреймворка</li>
<li>Синхронизация визуального языка между Windows- и Linux-версиями продукта</li>
<li>Совместная работа с разработкой над тем, что технически реализуемо в Avalonia, а что требует обходных решений</li>
<li>Подготовка спецификаций поведения компонентов для реализации</li>
</ul>
<p class="resume-exp__desc">Достижения:</p>
<ul>
<li>Собрал расширенную библиотеку из 95 компонентов для Avalonia, которой в проекте не существовало до меня</li>
<li>Обеспечил единообразие продукта на двух платформах при разных технологических стеках</li>
<li>Сократил количество визуальных расхождений между версиями с нескольких десятков до единичных случаев</li>
<li>Дал команде Linux-версии готовый набор решений вместо дизайна каждого экрана с нуля</li>
</ul>
</div>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Idea Hub Dashboard (Saas)</p>
<p class="resume-exp__desc">Обеспечивает сбор и анализ предложений сотрудников, оценка эффективности и мониторинг статуса реализации автоматизаций. Аналитика по ключевым показателям эффективности и верхнеуровневый взгляд на роботизацию.</p>
<p class="resume-exp__desc">Обязанности:</p>
<ul>
<li>Проектирование дашбордов и аналитических представлений по KPI роботизации</li>
<li>Проработка жизненного цикла идеи: подача → оценка → приоритизация → реализация → замер эффекта</li>
<li>Информационная архитектура раздела, работа с плотными таблицами, фильтрами и массовыми операциями</li>
<li>Проектирование ролевой модели: сотрудник, аналитик, руководитель</li>
<li>Подбор типов визуализации данных под конкретные управленческие вопросы</li>
</ul>
<p class="resume-exp__desc">Достижения:</p>
<ul>
<li>Свёл верхнеуровневую аналитику и работу с конкретной идеей в один непрерывный сценарий без переключения между разделами</li>
<li>Спроектировал представление данных так, что руководитель видит эффект от роботизации без ручных выгрузок в Excel</li>
<li>Сократил путь от подачи идеи до её оценки с 6 шагов до 3</li>
<li>Спроектировал 12 виджетов аналитики, покрывающих основные вопросы заказчиков о ROI роботизации</li>
</ul>
</div>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Orchestrator Automation Management Tool (Saas)</p>
<p class="resume-exp__desc">Обеспечивает слаженную работу системы и управление сотнями роботов: запуски, мониторинг и менеджмент.</p>
<p class="resume-exp__desc">Обязанности:</p>
<ul>
<li>Проектирование интерфейса управления парком из сотен роботов: расписания, очереди, приоритеты, мониторинг</li>
<li>Проработка состояний и обработки ошибок при массовых запусках</li>
<li>Проектирование системы уведомлений и алертов о сбоях</li>
<li>Работа со сложными таблицами: сортировка, фильтрация, массовые действия, сохранённые представления</li>
<li>Прототипирование сложных сценариев для валидации до начала разработки</li>
</ul>
<p class="resume-exp__desc">Достижения:</p>
<ul>
<li>Спроектировал управление сотнями объектов так, что оператор не теряется в масштабе: от общей картины до конкретного робота за 2 клика</li>
<li>Привёл сервис к единой дизайн-системе вместе с остальными веб-продуктами линейки</li>
<li>Сократил время реакции оператора на сбой робота с 12 до 4 минут за счёт переработанной системы алертов</li>
<li>Свёл 5 разных представлений списка роботов к одному настраиваемому</li>
</ul>
</div>
<div class="resume-exp__section">
<p class="resume-exp__section-title">QnA portal (WEB)</p>
<p class="resume-exp__desc">Площадка для постинга вопросов и получения ответов от службы поддержки</p>
<p class="resume-exp__desc">Обязанности:</p>
<ul>
<li>Проектирование сценариев публикации вопроса, ответа и поиска по накопленной базе знаний</li>
<li>Дизайн интерфейса портала на базе общей дизайн-системы компании</li>
<li>Проработка ролевой модели: пользователь, эксперт, служба поддержки, модератор</li>
<li>Проектирование механики поиска и подсказок похожих вопросов при публикации</li>
</ul>
<p class="resume-exp__desc">Достижения:</p>
<ul>
<li>Запустил портал на готовых компонентах дизайн-системы за 3 недели вместо запланированных 8</li>
<li>Снизил нагрузку на поддержку примерно на 25% за счёт переиспользования уже данных ответов</li>
<li>Механика подсказок похожих вопросов сократила количество дублей на 45%</li>
<li>Обеспечил визуальную преемственность с продуктами линейки — портал не выглядит сторонним сервисом</li>
</ul>
</div>
<div class="resume-exp__section">
<p class="resume-exp__section-title">Общее по компании</p>
<ul>
<li>Инициировал обновление внешнего вида всей продуктовой линейки — решение о редизайне компания приняла с моим приходом</li>
<li>Собрал и внедрил единую дизайн-систему для веб-сервисов, соединив фирменный стиль компании с новой структурой интерфейсов</li>
<li>Дизайн-систему приняли 4 продуктовые команды; она включает 210 компонентов и токены темизации</li>
<li>Сократил среднее время подготовки макетов по линейке на 35%</li>
<li>Создавал и поддерживал UI-kit для консистентности и ускорения разработки</li>
<li>Провёл более 20 пользовательских исследований и юзабилити-сессий за время работы</li>
<li>Вёл авторский надзор за реализацией, участвовал в дизайн-ревью, продуктовых обсуждениях и планировании релизов</li>
<li>Был единственным ведущим дизайнером на всю линейку из 6 продуктов и двух платформ</li>
</ul>
</div>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">Lunacy (Icons8)</p>
<p class="resume-exp__period">Июль 2022 — Январь 2023 (7 месяцев)</p>
</div>
<p class="resume-exp__desc">Графический редактор для работы над дизайном интерфейсов и прочих макетов. Аналог Sketch App и Figma.</p>
<div class="resume-exp__section">
<p class="resume-exp__desc">Обязанности:</p>
<ul>
<li>Проектирование интерфейса графического редактора: инструменты, панели свойств, работа с холстом и слоями</li>
<li>Оформление решений в виде юзерфлоу и передача разработчикам</li>
<li>Создание сложных интерактивных прототипов в Protopie для демонстрации поведения инструментов</li>
<li>Отрисовка недостающих иконок в стилистике продукта</li>
<li>Внесение предложений по улучшению функциональности редактора</li>
<li>Участие в обсуждениях продуктовых решений с командой</li>
</ul>
<p class="resume-exp__desc">Достижения:</p>
<ul>
<li>Спроектировал 6 функциональных блоков редактора, включая работу с компонентами и стилями</li>
<li>Собрал 15+ прототипов в Protopie, что позволило отсечь неудачные решения до разработки</li>
<li>Часть моих предложений по функциональности вошла в релизы продукта</li>
<li>Отрисовал более 60 иконок, дополнивших системный набор редактора</li>
<li>Работал над продуктом для профессиональной аудитории дизайнеров, где требования к деталям интерфейса выше обычных</li>
</ul>
</div>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">MANU Video Game Maker</p>
<p class="resume-exp__period">Январь 2019 — Декабрь 2021 (3 года)</p>
</div>
<p class="resume-exp__desc">Игровой движок для создания видеоигр без написания кода.</p>
<div class="resume-exp__section">
<p class="resume-exp__desc">Обязанности:</p>
<ul>
<li>Продуктовый дизайн движка целиком: от концепции взаимодействия до конечного UI</li>
<li>Проектирование поведения интерфейса для сложных пользовательских сценариев</li>
<li>Исследования пользователей: наблюдение, глубинные интервью, опросы</li>
<li>Составление портретов потенциальных пользователей и карт эмпатии</li>
<li>Работа с продуктовой аналитикой и метриками, завязанными на пользовательские сценарии</li>
<li>Вёрстка главной страницы сайта на Tilda, проектирование информационной архитектуры сайта вместе с командой</li>
<li>Контроль работы веб-графического дизайнера</li>
<li>Найм в продуктовый отдел: проведение собеседований и отбор специалистов</li>
<li>Руководство отделом, построение рабочих процессов всей продуктовой команды</li>
<li>Кураторство работ по созданию пользовательской документации</li>
<li>Внедрение инструментов автоматизации (Integromat, Zapier) для внутренних задач</li>
</ul>
<p class="resume-exp__desc">Достижения:</p>
<ul>
<li>Провёл масштабный редизайн всей программы: заложил принципиально новую концепцию работы и стилистику</li>
<li>Спроектировал поведение интерфейса для 100+ сложных пользовательских сценариев</li>
<li>Спроектировал дизайн-систему продукта с нуля: 120 компонентов</li>
<li>Получили массу положительных, местами восторженных отзывов пользователей — в продукте стало значительно легче ориентироваться</li>
<li>Завершаемость онбординга выросла с 34% до 58% после редизайна</li>
<li>Провёл 25 глубинных интервью и 4 волны опросов, на их основе переработал 3 ключевых сценария</li>
<li>Нанял 4 специалистов в продуктовый отдел и вырос из дизайнера в тимлида команды</li>
<li>Выстроил процессы отдела: дизайн-ревью, работа с бэклогом, передача в разработку</li>
<li>Автоматизировал внутренние рутины команды, освободив время на продуктовые задачи</li>
</ul>
</div>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">Aegees Messenger</p>
<p class="resume-exp__period">Октябрь 2017 — Декабрь 2018 (1 год и 3 месяца)</p>
</div>
<p class="resume-exp__desc">Кроссплатформенный мессенджер с защищенным хранилищем и аудиозвонками.</p>
<div class="resume-exp__section">
<p class="resume-exp__desc">Обязанности:</p>
<ul>
<li>Дизайн мессенджера сразу под пять платформ: Android, iOS, macOS, Windows, Linux</li>
<li>Проработка сценариев защищённого хранилища и аудиозвонков</li>
<li>Проектирование сценариев регистрации, шифрования и восстановления доступа</li>
<li>Адаптация единой продуктовой логики под гайдлайны каждой платформы</li>
<li>Контроль работы зарубежных иллюстраторов по подготовке графических материалов</li>
<li>Подготовка материалов для магазинов приложений</li>
</ul>
<p class="resume-exp__desc">Достижения:</p>
<ul>
<li>Выстроил единый визуальный язык продукта при соблюдении гайдлайнов пяти платформ одновременно</li>
<li>Спроектировал более 90 экранов в пяти платформенных вариантах</li>
<li>Обеспечил стабильный поток графических материалов от внешних подрядчиков без потери стилистики</li>
<li>Упростил сценарий защищённого хранилища так, чтобы им пользовались люди без технической подготовки</li>
<li>Работал в чувствительной области приватности и безопасности, где ошибка в интерфейсе стоит доверия пользователя</li>
</ul>
</div>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">Orion Innovation (ex MERA)</p>
<p class="resume-exp__period">Июль 2016 — Октябрь 2017 (1 год и 4 месяца)</p>
</div>
<p class="resume-exp__desc">Разработка ПО для внешних заказчиков.</p>
<div class="resume-exp__section">
<p class="resume-exp__desc">Обязанности:</p>
<ul>
<li>Работа в дизайн-отделе численностью до 8 человек</li>
<li>Создание анкет персон и составление карты функциональности продукта в соответствии с потребностями персон</li>
<li>Вайрфреймы и отрисовка конечного UI интерфейсов</li>
<li>Проектирование юзкейсов, карт экранов, демонстрации микроанимаций</li>
<li>Подготовка мудбордов и дизайн-концепций, обсуждение их с клиентами</li>
<li>Подготовка и проведение презентаций дизайн-концепций</li>
<li>Линковка мокапов в прототипы, написание сценариев и проведение качественных юзабилити-тестирований</li>
<li>Внесение правок по результатам тестирований</li>
<li>Авторский надзор над реализацией дизайна разработчиками</li>
<li>Участие в дизайн-ревью: разбор работ коллег и защита собственных решений</li>
<li>Прямая коммуникация с зарубежными клиентами для обсуждения дизайна и получения задач</li>
</ul>
<p class="resume-exp__desc">Достижения:</p>
<ul>
<li>Провёл 10 сессий юзабилити-тестирования от написания сценария до внесения правок</li>
<li>Освоил новую для себя платформу Smart TV и довёл проект до успешной публикации в магазине приложений</li>
<li>Вёл коммуникацию с зарубежными заказчиками напрямую, без посредников</li>
<li>Активно участвовал в улучшении рабочего процесса дизайн-отдела компании</li>
<li>Прошёл полный цикл продуктового дизайна на 5 клиентских проектах</li>
</ul>
</div>
</div>
<div class="resume-exp">
<div class="resume-exp__header">
<p class="resume-exp__company">SpaceshipApps Studio</p>
<p class="resume-exp__period">Июнь 2015 — Июнь 2016 (1 год и 1 месяц)</p>
</div>
<p class="resume-exp__desc">Студия разработки мобильных приложений и сайтов.</p>
<div class="resume-exp__section">
<p class="resume-exp__desc">Обязанности:</p>
<ul>
<li>Дизайн мобильных и веб-продуктов в потоковом режиме студии</li>
<li>Работа с разными доменами: соцгейминг, бьюти-услуги, доставка еды, голосовые интерфейсы, легал-сервисы, коллаборативные инструменты</li>
<li>Адаптивный веб-дизайн и дизайн административных панелей</li>
<li>Отрисовка иконок и подготовка графики для проектов</li>
<li>Подготовка макетов к передаче в разработку</li>
</ul>
<p class="resume-exp__desc">Достижения:</p>
<ul>
<li>Выпустил 6 продуктов за год: геолокационная социальная игра с квестами в реальном мире, приложение записи к бьюти-специалистам, сервис доставки еды, голосовая игра со словами, сайт и админка сервиса регистрации авторского права, мобильная «белая доска» для совместной работы</li>
<li>Научился быстро входить в новую предметную область и держать качество при высоком темпе студии</li>
<li>Закрыл весь спектр задач: мобайл, веб, админ-панели, графика</li>
<li>Заложил базу для перехода от исполнительского дизайна к продуктовому</li>
</ul>
</div>
</div>
<h2 id="skills">Навыки</h2>
<p class="section__prose">Figma, AI, n8n, Rest API, HTML, CSS, JS, JTBD, UJM, KISS</p>
<h2 id="about">О себе</h2>
<p class="section__prose resume-about">
В дизайне больше 10 лет, последние годы — продуктовый дизайн сложных B2B-продуктов. Работаю на стыке дизайна и продакт-менеджмента: провожу исследования, формулирую гипотезы и фичи, помогаю с приоритизацией и участвую в планировании релизов.
</p>
<p class="section__prose resume-about">
Люблю разбираться в сложном и делать его понятным — поэтому мне комфортно в продуктах вроде IDE, оркестраторов и ML-панелей, где обычному дизайнеру скучно или страшно.
</p>
<p class="section__prose resume-about">
Не жду, пока задачу сделает кто-то другой: пишу себе инструменты сам. Собрал приватный AI-плагин для Figma, автоматизирую процессы на n8n и PostgreSQL, довожу свои идеи до работающих продуктов с помощью AI-ассистированной разработки. Собственные навыки для Алисы набрали 37 000+ и 33 000+ пользователей, файл Slider Set для дизайнеров скачали больше 20 000 раз.
</p>
<p class="section__prose resume-about">
Участвую в жизни сообщества: веду Telegram-канал «Дизайн не пицца», выкладываю полезности в Figma Community, выступал на митапе Яндекса с докладом по аналитике, побеждал на хакатонах — самая приятная победа на хакатоне Яндекс.Денег в Петербурге за приложение оплаты по QR-коду.
</p>
<p class="section__prose resume-about">
Английский — B1. Работаю удалённо, спокойно веду коммуникацию с распределённой командой.
</p>
</div>
</main>
{{> footer}}
{{> cookie-notice}}
</body>
</html>
+22 -162
View File
@@ -841,174 +841,34 @@
{{> cookie-notice}}
<script>
(function () {
var pdfBtn = document.querySelector('[data-resume-pdf-btn]');
var printBtn = document.querySelector('[data-resume-print-btn]');
if (!pdfBtn && !printBtn) return;
if (!printBtn) return;
var busy = false;
var CDN = 'https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.2/html2pdf.bundle.min.js';
printBtn.addEventListener('click', function () {
var doc = document.querySelector('.resume-doc');
if (!doc) return;
function loadScript(src) {
return new Promise(function (ok, fail) {
if (window.html2pdf) { ok(); return; }
var s = document.createElement('script');
s.src = src;
s.onload = ok;
s.onerror = fail;
document.head.appendChild(s);
var styles = [];
document.querySelectorAll('link[rel="stylesheet"]').forEach(function (l) {
styles.push('<link rel="stylesheet" href="' + l.href + '">');
});
}
function toDataURL(img) {
return new Promise(function (res) {
try {
var c = document.createElement('canvas');
c.width = img.naturalWidth;
c.height = img.naturalHeight;
c.getContext('2d').drawImage(img, 0, 0);
res(c.toDataURL('image/webp'));
} catch (e) { res(null); }
document.querySelectorAll('style').forEach(function (s) {
styles.push('<style>' + s.textContent + '</style>');
});
}
function preparePhoto(doc) {
var photo = doc.querySelector('.resume-photo');
if (!photo) return Promise.resolve(null);
if (photo.complete && photo.naturalWidth > 0) return toDataURL(photo);
return new Promise(function (res) {
photo.onload = function () { toDataURL(photo).then(res); };
photo.onerror = function () { res(null); };
});
}
function buildCleanClone(original) {
var clone = original.cloneNode(true);
var props = ['color','background-color','background','border-color','border-top-color','border-bottom-color','border-left-color','border-right-color','box-shadow','opacity','font-family','font-size','font-weight','font-style','line-height','letter-spacing','text-align','text-decoration','text-transform','padding','padding-top','padding-bottom','padding-left','padding-right','margin','margin-top','margin-bottom','margin-left','margin-right','display','flex-direction','flex-wrap','align-items','align-self','justify-content','gap','grid-template-columns','grid-column','grid-row','width','height','min-width','min-height','max-width','max-height','position','top','bottom','left','right','z-index','overflow','border-radius','border-width','border-style','white-space','list-style-type','object-fit','visibility','cursor','text-indent','vertical-align','table-layout','border-collapse','border-spacing','empty-cells'];
var origEls = original.querySelectorAll('*');
var cloneEls = clone.querySelectorAll('*');
for (var i = 0; i < origEls.length && i < cloneEls.length; i++) {
try {
var cs = getComputedStyle(origEls[i]);
for (var j = 0; j < props.length; j++) {
var v = cs.getPropertyValue(props[j]);
if (v) cloneEls[i].style.setProperty(props[j], v);
}
} catch (e) {}
}
try {
var rootCs = getComputedStyle(original);
for (var j = 0; j < props.length; j++) {
var v = rootCs.getPropertyValue(props[j]);
if (v) clone.style.setProperty(props[j], v);
}
} catch (e) {}
try {
var sheets = clone.styleSheets;
for (var s = sheets.length - 1; s >= 0; s--) {
try {
var sheet = sheets[s];
while (sheet.cssRules.length > 0) sheet.deleteRule(0);
} catch (e) {}
}
} catch (e) {}
clone.querySelectorAll('style').forEach(function (el) { el.remove(); });
clone.querySelectorAll('link[rel="stylesheet"]').forEach(function (el) { el.remove(); });
var pseudoProps = ['content','color','background-color','background','border-color','border-top-color','border-bottom-color','border-left-color','border-right-color','box-shadow','opacity','font-family','font-size','font-weight','line-height','letter-spacing','text-align','text-decoration','text-transform','padding','padding-top','padding-bottom','padding-left','padding-right','margin','margin-top','margin-bottom','margin-left','margin-right','display','width','height','border-radius','border-width','border-style','white-space','position','top','bottom','left','right','z-index','overflow','list-style-type','object-fit'];
for (var i = 0; i < origEls.length && i < cloneEls.length; i++) {
['::before','::after'].forEach(function(pseudo) {
try {
var cs = getComputedStyle(origEls[i], pseudo);
var content = cs.getPropertyValue('content');
if (!content || content === 'none' || content === 'normal') return;
var el = document.createElement('span');
el.style.cssText = 'display:block;margin:0;padding:0;border:none;background:none;';
for (var j = 0; j < pseudoProps.length; j++) {
var v = cs.getPropertyValue(pseudoProps[j]);
if (v && v !== 'normal' && v !== 'auto') el.style.setProperty(pseudoProps[j], v);
}
el.textContent = content.replace(/^["']|["']$/g, '');
if (pseudo === '::before') cloneEls[i].prepend(el);
else cloneEls[i].appendChild(el);
} catch (e) {}
});
}
return clone;
}
if (pdfBtn) {
pdfBtn.addEventListener('click', function () {
if (busy) return;
busy = true;
pdfBtn.setAttribute('data-loading', 'true');
var doc = document.querySelector('.resume-doc');
if (!doc) { busy = false; pdfBtn.removeAttribute('data-loading'); return; }
var photo = doc.querySelector('.resume-photo');
var origSrc = photo ? photo.getAttribute('src') : null;
preparePhoto(doc).then(function (dataUrl) {
if (dataUrl && photo) photo.setAttribute('src', dataUrl);
return document.fonts ? document.fonts.ready : Promise.resolve();
})
.then(function () {
return loadScript(CDN);
})
.then(function () {
var clone = buildCleanClone(doc);
return html2pdf().from(clone).set({
margin: 10,
filename: 'Mamadaev_Resume.pdf',
image: { type: 'jpeg', quality: 0.95 },
html2canvas: { scale: 2, useCORS: true, backgroundColor: '#fff' },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
}).save();
})
.then(function () {
if (origSrc && photo) photo.setAttribute('src', origSrc);
busy = false;
pdfBtn.removeAttribute('data-loading');
})
.catch(function (e) {
console.error('[PDF] error:', e);
if (origSrc && photo) photo.setAttribute('src', origSrc);
busy = false;
pdfBtn.removeAttribute('data-loading');
});
});
}
if (printBtn) {
printBtn.addEventListener('click', function () {
var doc = document.querySelector('.resume-doc');
if (!doc) return;
var styles = [];
document.querySelectorAll('link[rel="stylesheet"]').forEach(function (l) {
styles.push('<link rel="stylesheet" href="' + l.href + '">');
});
document.querySelectorAll('style').forEach(function (s) {
styles.push('<style>' + s.textContent + '</style>');
});
var win = window.open('', '_blank');
if (!win) return;
win.document.write(
'<!DOCTYPE html><html><head><meta charset="utf-8">' +
styles.join('') +
'<style>@media print{body{margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;}}</style>' +
'</head><body>' + doc.outerHTML + '</body></html>'
);
win.document.close();
win.onload = function () {
setTimeout(function () { win.print(); }, 500);
};
});
}
var win = window.open('', '_blank');
if (!win) return;
win.document.write(
'<!DOCTYPE html><html><head><meta charset="utf-8">' +
styles.join('') +
'<style>@media print{body{margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;}}</style>' +
'</head><body>' + doc.outerHTML + '</body></html>'
);
win.document.close();
win.onload = function () {
setTimeout(function () { win.print(); }, 500);
};
});
})();
</script>
</body>
+2 -2
View File
@@ -1,11 +1,11 @@
<section id="contact" class="section section--surface section--footerish">
<section id="contact" class="section section--surface section--footerish" data-reveal>
<div class="section__inner">
<h2 class="section__title">Контакты</h2>
<ul class="contact-grid">
<li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="{{assetPrefix}}assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
<li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="{{assetPrefix}}assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
<li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="{{assetPrefix}}assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
<li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5ydQ==" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
<li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5zaXRl" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
</ul>
</div>
</section>
+3 -4
View File
@@ -4,9 +4,8 @@
<span class="fab-secondary__ico fab-secondary__ico--print" aria-hidden="true"></span>
</button>
</div>
<button type="button" class="fab fab--primary fab--label" data-resume-pdf-btn aria-label="Скачать резюме в PDF">
<a href="/assets/resume/Mamadaev_Nik__CV__Product_Designer_UX-UI.pdf" download="Mamadaev_Nik__CV__Product_Designer_UX-UI.pdf" class="fab fab--primary fab--label" aria-label="Скачать резюме в PDF">
<span class="fab-primary__ico fab-primary__ico--pdf" aria-hidden="true"></span>
<span class="fab__label">Скачать в PDF</span>
<span class="fab__spinner" aria-hidden="true"></span>
</button>
</div>
</a>
</div>
+1 -1
View File
@@ -1,4 +1,4 @@
<section id="mini-projects" class="section section--surface" aria-labelledby="mini-projects-title">
<section id="mini-projects" class="section section--surface" aria-labelledby="mini-projects-title" data-reveal>
<div class="section__inner">
<h2 id="mini-projects-title" class="section__title">Активность</h2>
<div
+1 -1
View File
@@ -1,4 +1,4 @@
<section id="projects" class="section section--surface">
<section id="projects" class="section section--surface" data-reveal>
<div class="section__inner">
<h2 class="section__title">Портфолио</h2>
<ol class="mini-projects-grid" data-mini-projects-list>