214 lines
28 KiB
Markdown
214 lines
28 KiB
Markdown
# Главная страница (источник: `public/index.html`)
|
||
|
||
## Meta
|
||
|
||
- **title:** Николай Мамадаев — продуктовый дизайнер
|
||
- **description:** Продуктовый дизайнер и вайбкодер с опытом более 10 лет. Проектирую цифровые продукты, интерфейсы и дизайн‑системы, совмещая UX, no-code и код для аккуратных рабочих решений.
|
||
|
||
## Шапка: навигация
|
||
|
||
- Навыки → `#skills`
|
||
- Опыт работы → `#experience`
|
||
- Портфолио → `#projects`
|
||
- Мини-проекты → `#mini-projects`
|
||
- Контакты → `#contact`
|
||
|
||
(Подменю «Ещё разделы» и панель темы — UI, без копирования сюда.)
|
||
|
||
## Hero
|
||
|
||
- **eyebrow:** Николай Мамадаев
|
||
- **h1:** Создаю интерфейсы для продуктов
|
||
- **ротатор (подзаголовок):** web, mobile, desktop (смена слов в UI)
|
||
- **теги:** UX/UI · 10+ лет опыта · Продуктовое мышление · Дизайн‑системы · Менторство и наставничество · AI инструменты и вайбкодинг
|
||
- **кнопки:** Написать мне (`#contact`) · Смотреть портфолио (`#projects`)
|
||
|
||
(Фото: `assets/index/ava-bg-1.webp`, `assets/index/me-transparentBG-1.webp`.)
|
||
|
||
## Навыки (`#skills`)
|
||
|
||
**Заголовок секции:** Навыки
|
||
|
||
**Вступление (чат, два сообщения):**
|
||
|
||
1. В моём опыте есть и запуск первых версий продукта с нуля, и развитие уже зрелых решений, где важно не сломать привычный сценарий, а аккуратно улучшить его.
|
||
2. Ниже я собрал примеры задач от бизнеса и то, как я их решал
|
||
|
||
### Продуктовый подход и логика в интерфейсах
|
||
|
||
|
||
| Задача | Как решаю |
|
||
| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| Сделать сложный продукт понятнее, чтобы пользователи доходили до ключевых действий. | Анализирую путь пользователя и убираю шаги, которые не помогают ему продвинуться к цели. Проектирую флоу так, чтобы в каждом шаге было понятно, что происходит и что делать дальше. Делаю так, чтобы даже сложный функционал выглядел естественно, использовал знакомые паттерны и привычные элементы интерфейса. |
|
||
| Улучшить первые шаги в продукте и подвести человека к первой ценности. | Убираю всё, что отвлекает от первого результата: лишние шаги, необязательные поля, второстепенные детали. Заменяю длинные объяснения небольшими подсказками в момент, когда они действительно нужны без длинных туров и сложных инструкций. |
|
||
| Снизить нагрузку на техподдержку за счёт интерфейса. | Собираю частые обращения и на их основе упрощаю сценарий и интерфейс так, чтобы человек мог решить вопрос самостоятельно. |
|
||
| Связать интерфейс с целями продукта, а не только с набором фич. | Начинаю с того, какую задачу бизнеса и пользователя мы решаем, и уже под это собираю сценарии и интерфейс. Перевожу проблемы в сценариях в понятные гипотезы и помогаю продакту выбрать, что действительно даёт эффект. |
|
||
|
||
|
||
### Дизайн‑системы и консистентность
|
||
|
||
|
||
| Задача | Как решаю |
|
||
| ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||
| Привести несколько продуктов или модулей к единому виду и логике. | Собираю общий UI‑kit и базовые принципы, которые можно использовать во всех продуктах. Выделяю повторяющиеся паттерны и свожу их к одной системе, вместо десятка похожих решений. Перевожу разрозненные решения в общую дизайн‑систему, чтобы ей было удобно пользоваться и дизайнерам, и разработчикам. |
|
||
| Обновить внешний вид продукта, чтобы он не выглядел устаревшим на фоне конкурентов. | Начинаю с часто используемых экранов и элементов, чтобы эффект был заметен и для пользователей, и для бизнеса. Подстраиваю этапы обновления под текущую дорожную карту и работу разработки, чтобы не ломать привычные сценарии и релизы. Настраиваю базовый стиль: типографика, цвет, отступы — чтобы интерфейс выглядел аккуратно и современно. |
|
||
| Навести порядок в интерфейсах, которые долго росли кусками. | Объединяю похожие решения в общие компоненты и паттерны, убираю дубли и случайные отличия. Слежу за тем, чтобы интерфейс выглядел аккуратно и современно: читаемая типографика, иерархия, акценты без визуального шума. |
|
||
| Сделать интерфейс так, чтобы его можно было спокойно расширять и не городить костыли. | Формулирую простые дизайн‑принципы и правила использования компонентов. Настраиваю структуру дизайн‑системы так, чтобы её было реально поддерживать и дополнять новыми паттернами. |
|
||
|
||
|
||
### Исследования, метрики и аналитика
|
||
|
||
|
||
| Задача | Как решаю |
|
||
| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| Получить реальную картину поведения пользователей, а не полагаться на догадки команды. | Общаюсь с пользователями: смотрю, как они решают свои задачи в продукте и что делают на каждом шаге. Перевожу выводы из исследований в конкретные изменения в интерфейсе и сценариях. |
|
||
| Убедиться, что ключевые сценарии работают, прежде чем выкатывать их в прод. | Готовлю простые сценарии юзабилити‑тестов под реальные задачи пользователей. |
|
||
| Понимать, как изменения в интерфейсе влияют на ключевые метрики продукта. | Помогаю описать ключевые события и воронки, которые отражают реальные шаги пользователя. Смотрю на метрики вместе с реальными сценариями использования и предлагаю, что в интерфейсе поменять, чтобы людям было проще и продукт работал лучше. |
|
||
|
||
|
||
### Развитие команды дизайнеров и наставничество
|
||
|
||
|
||
| Задача | Как решаю |
|
||
| ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| Выстроить понятные процессы внутри дизайн-команды. | Ввожу регулярные дизайн‑ревью с разбором реализованных задач, где каждый может получить полезную экологичную обратную связь. Договариваюсь о шаблоне постановки задачи и прозрачных критериях приёмки, чтобы всем было ясно, когда задачу считать действительно законченой. Настраиваю порядок работ, который позволяет выполнять как плановые задачи, так и "горящие". |
|
||
| Сделать так, чтобы дизайн, продукт и разработка работали как одна команда, а не три отдельных лагеря. | Беру на себя роль связующего: обсуждаю сценарии с продактом, ограничения — с разработкой и фиксирую решения в интерфейсе. |
|
||
| Нанять и вырастить продуктовых дизайнеров для работы над сложным продуктом. | Помогаю сформировать необходимые требования к кандидату. Участвую в отборе: проверяю, как кандидат работает со сценариями, ограничениями и сложными кейсами. Выстраиваиваю интервью так, чтобы можно было оценить ход мысли и используемые инструменты. Настраиваю онбординг через реальные задачи и регулярные разборы, чтобы дизайнер быстрее разобрался в продукте и начал приносить пользу. Провожу регулярные созвоны один на один с дизайнерами: разбираем решения, точки роста и следующие шаги. |
|
||
|
||
|
||
## Опыт работы (`#experience`)
|
||
|
||
Кнопка «Показать все» раскрывает скрытые карточки (первые три видны сразу).
|
||
|
||
1. **Primo RPA** — [primo-rpa.com](https://primo-rpa.com/)
|
||
Февраль 2023 — Ноябрь 2025 · 2 года 10 месяцев
|
||
Платформа для автоматизации бизнес‑процессов с комплексом продуктов: студией для создания роботов, оркестратором для их управления, Idea Hub для отбора процессов и AI‑серверами для работы с моделями и распознаванием данных.
|
||
2. **Icons8 (Lunacy)** — [icons8.com/lunacy](https://icons8.com/lunacy)
|
||
Июль 2022 — Январь 2023 · 7 месяцев
|
||
Векторный редактор для UI/UX и веб‑дизайна с поддержкой Sketch‑файлов, встроенной библиотекой иконок/фото/иллюстраций и набором AI‑инструментов для ускорения рутинных задач.
|
||
3. **MANU Video Game Maker** — [manu.co](https://manu.co/)
|
||
Январь 2019 — Декабрь 2021 · 3 года
|
||
No-code/low-code платформа для создания 2D и 3D игр без необходимости писать код.
|
||
4. **AEGEES** — [aegees.com](https://aegees.com/)
|
||
Октябрь 2017 — Декабрь 2018 · 1 год 3 месяца
|
||
Защищённый мессенджер с end‑to‑end шифрованием и отсутствием хранения сообщений на серверах, сфокусированный на максимальной приватности пользователей.
|
||
5. **Orion Innovation (ex MERA)** — [orioninnovation.com](https://www.orioninnovation.com/)
|
||
Июль 2016 — Октябрь 2017 · 1 год 4 месяца
|
||
Международная технологическая компания, специализирующаяся на заказной разработке и инженерных решениях для крупных корпоративных клиентов.
|
||
6. **SpaceshipApps** — [spaceshipapps.ru](https://spaceshipapps.ru/)
|
||
Июнь 2015 — Июнь 2016 · 1 год 1 месяц
|
||
Студия разработки мобильных и веб‑приложений под ключ для бизнеса и предпринимателей.
|
||
|
||
## Портфолио — карточки (`#projects`)
|
||
|
||
1. **Мобильное приложение для сети клиник**
|
||
Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
|
||
**Теги:** UX/UI, Mobile App
|
||
**Ссылка:** [Подробнее (Notion)](https://mamadaevv.notion.site/7afdbacd178347229d0d73df47428f81)
|
||
2. **Игровой движок MANU**
|
||
Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.
|
||
**Теги:** Product Design, Desktop App
|
||
**Ссылка:** [Подробнее (Notion)](https://mamadaevv.notion.site/7afdbacd178347229d0d73df47428f81)
|
||
3. **Веб-панель для оркестрации автоматизаций**
|
||
Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен.
|
||
**Теги:** UX/UI, Web App
|
||
**Ссылка на сайт:** [Кейс](cases/orc-automation-panel.html) — полный текст: `texts/cases/orc-automation-panel.md`
|
||
4. **Платформа для работы с AI**
|
||
Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.
|
||
**Теги:** UX/UI, Web‑продукт, Data‑heavy интерфейсы, Figma, Research
|
||
**Ссылка на сайт:** [Кейс](cases/ai-platform-primo-rpa.html) — полный текст: `texts/cases/ai-platform-primo-rpa.md`
|
||
5. **Концепт сервиса распределения задач**
|
||
Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.
|
||
**Теги:** UX/UI, Analytics, Web App
|
||
**Ссылка:** [Подробнее (Notion)](https://mamadaevv.notion.site/7afdbacd178347229d0d73df47428f81)
|
||
6. **Графический редактор Lunacy**
|
||
Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.
|
||
**Теги:** UX/UI, Desktop App
|
||
**Ссылка на сайт:** [Кейс](cases/lunacy.html) — полный текст: `texts/cases/lunacy.md`
|
||
7. **Таск-трекер для бек-офис системы**
|
||
Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&Drop. Тестовое задание, прототипы в Figma.
|
||
**Теги:** Product Design, Web App
|
||
**Ссылка на сайт:** [Кейс](cases/task-tracker.html) — полный текст: `texts/cases/task-tracker.md`
|
||
|
||
## Мини-проекты (`#mini-projects`)
|
||
|
||
**Заголовок секции:** Мини-проекты
|
||
|
||
Сетка карточек: `public/index.html`, превью по умолчанию `assets/shared/placeholder.webp`. Максимальная ширина карточки в сетке — 3 «клетки» (`data-mp-cells`). Подробности разметки — `docs/mini-projects-cards.md`.
|
||
|
||
**Вступление (чат, два сообщения):**
|
||
|
||
1. **Николай М:** Параллельно большим кейсам из портфолио я собираю маленькие штуки для себя: утилиты, странички, эксперименты с UI и кодом. Этот блок — чтобы они не терялись в заметках и архивах.
|
||
2. Карточки можно задавать разной ширины и шаблона; сетка сама их упакует. Часть строк по умолчанию свёрнута — остальное открывается кнопкой «Показать все».
|
||
|
||
Кнопка **«Показать все»** раскрывает карточки, помеченные в разметке как дополнительные (`data-mp-extra`).
|
||
|
||
### Карточки (видимые в свёрнутом блоке)
|
||
|
||
1. **Генератор подписей к постам**
|
||
**Тип:** скрипт · **Шаблон:** stack, `data-mp-cells="3"` · **Ссылка:** [github.com](https://github.com) (заглушка)
|
||
Небольшой скрипт на Python: черновики текстов из ключевых слов и ограничений по длине, без внешних API.
|
||
|
||
2. **Лендинг для мероприятия**
|
||
**Тип:** веб-сайт · **Шаблон:** stack, `data-mp-cells="3"` · **Ссылка:** [example.com](https://example.com) (заглушка)
|
||
Статический сайт с расписанием и формой заявки на отдельном сервисе.
|
||
|
||
3. **Трекер привычек в Notion**
|
||
**Тип:** шаблон · **Шаблон:** horizontal, без внешней ссылки, `data-mp-cells="3"`
|
||
Связка баз и rollup для недельного обзора — только для личного пользования.
|
||
|
||
4. **Таймер «помидора»**
|
||
**Тип:** приложение · **Шаблон:** stack, `data-mp-cells="2"` · **Ссылка:** [example.com](https://example.com) (заглушка)
|
||
Локальный таймер с короткими звуками и блокировкой лишних вкладок в браузере.
|
||
|
||
5. **Локальный REST‑мок**
|
||
**Тип:** утилита · **Шаблон:** compact (только текст), `data-mp-cells="2"` · без ссылки
|
||
Поднимает простые эндпоинты из JSON для проверки экранов без бекенда.
|
||
|
||
6. **Декоративная ячейка**
|
||
**Шаблон:** `mp-card--decor`, `data-mp-cells="2"` — визуальная заглушка в сетке, без заголовка и описания.
|
||
|
||
### Карточки под «Показать все»
|
||
|
||
7. **Плагин подсветки синтаксиса**
|
||
**Тип:** плагин · **Шаблон:** stack, `data-mp-cells="3"` · **Ссылка:** [github.com](https://github.com) (заглушка)
|
||
Расширение редактора: подсветка собственного DSL и переход к объявлению по ⌘‑клику.
|
||
|
||
8. **Тема для редактора**
|
||
**Тип:** тема · **Шаблон:** horizontal, `data-mp-cells="3"` · **Ссылка:** [github.com](https://github.com) (заглушка)
|
||
Набор цветовых токенов под долгую работу с кодом и заметками.
|
||
|
||
9. **CLI переименования файлов**
|
||
**Тип:** cli · **Шаблон:** stack, `data-mp-cells="3"` · **Ссылка:** [github.com](https://github.com) (заглушка)
|
||
Префиксы, нумерация и безопасный dry-run перед записью на диск.
|
||
|
||
10. **Виджет погоды**
|
||
**Тип:** виджет · **Шаблон:** horizontal, `data-mp-cells="2"` · **Ссылка:** [example.com](https://example.com) (заглушка)
|
||
Мини‑окно на Electron с почасовым прогнозом и иконками состояния.
|
||
|
||
11. **Чеклист регресса UI**
|
||
**Тип:** документ · **Шаблон:** compact, `data-mp-cells="2"` · без ссылки
|
||
Markdown‑список проверок перед релизом мелких правок в интерфейсе.
|
||
|
||
12. **Сниппеты для DevTools**
|
||
**Тип:** расширение · **Шаблон:** compact + ссылка, `data-mp-cells="1"` · **Ссылка:** [github.com](https://github.com) (заглушка)
|
||
Заготовки console.log и замеров производительности одним жестом.
|
||
|
||
13. **Мини‑CRM для себя**
|
||
**Тип:** сервис · **Шаблон:** horizontal, `data-mp-cells="3"` · **Ссылка:** [example.com](https://example.com) (заглушка)
|
||
Одна таблица контактов, статусы сделок и напоминания в LocalStorage.
|
||
|
||
## Контакты (`#contact`)
|
||
|
||
- **Telegram** — [t.me/mamadaevv](https://t.me/mamadaevv) — подпись: Отвечаю быстро
|
||
- **ВКонтакте** — [vk.com/mamadaevv](https://vk.com/mamadaevv) — Удобно для России
|
||
- **Яндекс (чат)** — [приглашение](https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite) — Да, тут тоже можно
|
||
- **Почта** — копирование в буфер (адрес в JS `data-email-b64`), подпись: Скопировать адрес
|
||
|
||
## Футер
|
||
|
||
© 2026 · Дизайн и вёрстка — Николай Мамадаев
|
||
|
||
## Баннер cookie
|
||
|
||
Сайт использует cookie для комфортной работы. Подробнее — в политике cookies (ссылка пока `href="#"`). Кнопка: Принять. |