1325 lines
85 KiB
HTML
1325 lines
85 KiB
HTML
<!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="Интерфейс задач для операционного отдела: вкладки, фильтры, виды отображения, прототипы Figma и сценарии исследований."
|
||
/>
|
||
<title>Таск-трекер для бек-офис системы — кейс</title>
|
||
<script>
|
||
(function () {
|
||
var FONT_CSS = {
|
||
merriweather: "/assets/fonts/merriweather.css",
|
||
geologica: "/assets/fonts/geologica.css",
|
||
mono: "/assets/fonts/mono.css",
|
||
};
|
||
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 hVal = h !== null ? h : 210;
|
||
var sVal = s !== null ? s : 90;
|
||
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
|
||
var H = (((hVal % 360) + 360) % 360) / 360;
|
||
var S = Math.min(100, Math.max(0, sVal)) / 100;
|
||
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
|
||
var r, g, b;
|
||
if (S === 0) { r = g = b = Lv; }
|
||
else {
|
||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||
var p = 2 * Lv - q;
|
||
var hue2rgb = function(p, q, t) {
|
||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||
if (t < 1/2) return q;
|
||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||
return p;
|
||
};
|
||
r = hue2rgb(p, q, H + 1/3);
|
||
g = hue2rgb(p, q, H);
|
||
b = hue2rgb(p, q, H - 1/3);
|
||
}
|
||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||
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") f = "merriweather";
|
||
d.dataset.font = f;
|
||
var mb = t.meshBg;
|
||
if (mb === "off") {
|
||
d.dataset.meshBg = "off";
|
||
} else {
|
||
d.dataset.meshBg = "on";
|
||
}
|
||
var href = FONT_CSS[f];
|
||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||
var link = document.createElement("link");
|
||
link.rel = "stylesheet";
|
||
link.href = href;
|
||
link.setAttribute("data-theme-font", f);
|
||
document.head.appendChild(link);
|
||
}
|
||
} catch (e) {}
|
||
})();
|
||
</script>
|
||
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png" />
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png" />
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png" />
|
||
<link rel="manifest" href="/assets/favicon/site.webmanifest" />
|
||
<link rel="preload" href="/assets/fonts/merriweather.css" as="style" />
|
||
<link rel="preload" href="/css/main.css" as="style" />
|
||
<link rel="preload" href="/js/skill-connectors.js" as="script" />
|
||
<link rel="modulepreload" href="/js/main.js" />
|
||
<link rel="modulepreload" href="/js/modules/ui/page-mesh-shader.js" />
|
||
<link rel="stylesheet" href="/css/main.css" />
|
||
<link rel="canonical" href="https://mamadaevv.site/cases/task-tracker/" />
|
||
<link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/task-tracker/" />
|
||
<link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/task-tracker/" />
|
||
<link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/task-tracker/" />
|
||
<meta name="author" content="Николай Мамадаев" />
|
||
<meta name="robots" content="index, follow" />
|
||
<meta name="theme-color" content="#0f1115" />
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:type" content="article" />
|
||
<meta property="og:site_name" content="Николай Мамадаев — продуктовый дизайнер" />
|
||
<meta property="og:locale" content="ru_RU" />
|
||
<meta property="og:locale:alternate" content="en_US" />
|
||
<meta property="og:title" content="Таск-трекер для бек-офис системы — кейс" />
|
||
<meta property="og:description" content="Интерфейс задач для операционного отдела: вкладки, фильтры, виды отображения, прототипы Figma и сценарии исследований." />
|
||
<meta property="og:url" content="https://mamadaevv.site/cases/task-tracker/" />
|
||
<meta property="og:image" content="https://mamadaevv.site/assets/og/og-default.png" />
|
||
<meta property="og:image:width" content="1200" />
|
||
<meta property="og:image:height" content="630" />
|
||
<meta property="og:image:alt" content="Таск-трекер для бек-офис системы — кейс" />
|
||
|
||
<!-- Twitter / X -->
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="Таск-трекер для бек-офис системы — кейс" />
|
||
<meta name="twitter:description" content="Интерфейс задач для операционного отдела: вкладки, фильтры, виды отображения, прототипы Figma и сценарии исследований." />
|
||
<meta name="twitter:image" content="https://mamadaevv.site/assets/og/og-default.png" />
|
||
<meta name="twitter:image:alt" content="Таск-трекер для бек-офис системы — кейс" />
|
||
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@graph": [
|
||
{
|
||
"@type": "Person",
|
||
"@id": "https://mamadaevv.site/#person",
|
||
"name": "Николай Мамадаев",
|
||
"url": "https://mamadaevv.site",
|
||
"jobTitle": "Продуктовый дизайнер",
|
||
"description": "Продуктовый дизайнер с опытом более 10 лет. Проектирую цифровые продукты, интерфейсы и дизайн-системы.",
|
||
"knowsAbout": [
|
||
"UX/UI-дизайн",
|
||
"продуктовый дизайн",
|
||
"дизайн-системы",
|
||
"прототипирование",
|
||
"Figma",
|
||
"no-code"
|
||
],
|
||
"sameAs": [
|
||
"https://t.me/mamadaevv",
|
||
"https://vk.com/mamadaevv",
|
||
"https://github.com/mamadaevv"
|
||
]
|
||
},
|
||
{
|
||
"@type": "WebSite",
|
||
"@id": "https://mamadaevv.site/#website",
|
||
"url": "https://mamadaevv.site/",
|
||
"name": "Николай Мамадаев — продуктовый дизайнер",
|
||
"inLanguage": "ru",
|
||
"author": {
|
||
"@id": "https://mamadaevv.site/#person"
|
||
},
|
||
"publisher": {
|
||
"@id": "https://mamadaevv.site/#person"
|
||
}
|
||
},
|
||
{
|
||
"@type": "CreativeWork",
|
||
"@id": "https://mamadaevv.site/cases/task-tracker/#page",
|
||
"url": "https://mamadaevv.site/cases/task-tracker/",
|
||
"name": "Таск-трекер для бек-офис системы — кейс",
|
||
"description": "Интерфейс задач для операционного отдела: вкладки, фильтры, виды отображения, прототипы Figma и сценарии исследований.",
|
||
"isPartOf": {
|
||
"@id": "https://mamadaevv.site/#website"
|
||
},
|
||
"author": {
|
||
"@id": "https://mamadaevv.site/#person"
|
||
},
|
||
"inLanguage": "ru",
|
||
"creator": {
|
||
"@id": "https://mamadaevv.site/#person"
|
||
},
|
||
"datePublished": "2026-09-24",
|
||
"about": "UX/UI-дизайн и проектирование интерфейсов"
|
||
},
|
||
{
|
||
"@type": "BreadcrumbList",
|
||
"@id": "https://mamadaevv.site/cases/task-tracker/#breadcrumbs",
|
||
"itemListElement": [
|
||
{
|
||
"@type": "ListItem",
|
||
"position": 1,
|
||
"name": "Николай Мамадаев — продуктовый дизайнер",
|
||
"item": "https://mamadaevv.site/"
|
||
},
|
||
{
|
||
"@type": "ListItem",
|
||
"position": 2,
|
||
"name": "Кейсы",
|
||
"item": "https://mamadaevv.site/cases/"
|
||
},
|
||
{
|
||
"@type": "ListItem",
|
||
"position": 3,
|
||
"name": "Таск-трекер для бек-офис системы — кейс",
|
||
"item": "https://mamadaevv.site/cases/task-tracker/"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
|
||
<script src="/js/skill-connectors.js" defer></script>
|
||
<script type="module" src="/js/main.js"></script>
|
||
|
||
|
||
<link rel="stylesheet" href="/vendor/plyr/plyr.css" />
|
||
|
||
<style>
|
||
.case-article {
|
||
max-width: 48rem;
|
||
margin: 0 auto;
|
||
}
|
||
.case-article h2 {
|
||
margin: 2rem 0 0.75rem;
|
||
font-size: clamp(1.15rem, 2vw, 1.35rem);
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
}
|
||
.case-article h3 {
|
||
font-size: 1.05rem;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
}
|
||
.case-article .section__prose {
|
||
margin-bottom: 0.75rem;
|
||
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;
|
||
}
|
||
.case-article a:not(.btn) {
|
||
color: var(--accent);
|
||
}
|
||
</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 data-current-case="task-tracker">
|
||
<svg class="liquid-glass-defs" aria-hidden="true" width="0" height="0" focusable="false" style="position:absolute;width:0;height:0;overflow:hidden;pointer-events:none">
|
||
<filter id="liquid-glass-displacement" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
|
||
<feImage href="../../assets/liquid-glass/displacement.png" xlink:href="../../assets/liquid-glass/displacement.png" preserveAspectRatio="none" result="lgMap"/>
|
||
<feDisplacementMap in="SourceGraphic" in2="lgMap" scale="14" xChannelSelector="R" yChannelSelector="G"/>
|
||
</filter>
|
||
<filter id="liquid-glass-displacement-btn" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
|
||
<feImage href="../../assets/liquid-glass/displacement.png" xlink:href="../../assets/liquid-glass/displacement.png" preserveAspectRatio="none" result="lgMapBtn"/>
|
||
<feDisplacementMap in="SourceGraphic" in2="lgMapBtn" scale="6" xChannelSelector="R" yChannelSelector="G"/>
|
||
</filter>
|
||
</svg>
|
||
|
||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||
<header class="header" data-theme-picker>
|
||
<div class="header__inner">
|
||
<a class="logo" href="../../" aria-label="На главную">НМ</a>
|
||
<div class="header__cluster">
|
||
<nav class="nav" aria-label="Разделы страницы">
|
||
<a href="#contact">Контакты</a>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="fab-stack" aria-label="Быстрые действия">
|
||
<div class="theme-panel-fab-wrap">
|
||
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
|
||
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
|
||
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||
</svg>
|
||
</button>
|
||
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
|
||
<div class="theme-picker__stack">
|
||
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
|
||
<h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
|
||
<div class="colorpicker" data-colorpicker>
|
||
<div class="colorpicker__plane-box">
|
||
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
|
||
<div class="colorpicker__knob" data-sl-knob></div>
|
||
</div>
|
||
<div class="colorpicker__hue-wrap">
|
||
<label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
|
||
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
|
||
<h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
|
||
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
|
||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
|
||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
|
||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
|
||
</div>
|
||
</section>
|
||
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
|
||
<h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
|
||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
|
||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
|
||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
|
||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
|
||
</div>
|
||
</section>
|
||
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
|
||
<h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
|
||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
|
||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
|
||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
|
||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
|
||
</div>
|
||
</section>
|
||
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
|
||
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
|
||
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
|
||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
|
||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a class="fab fab--primary" href="#contact" aria-label="Связаться">
|
||
<span class="fab-primary__ico" aria-hidden="true"></span>
|
||
</a>
|
||
</div>
|
||
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
|
||
<button
|
||
type="button"
|
||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||
data-content-edit-mode-toggle
|
||
hidden
|
||
aria-pressed="false"
|
||
aria-label="Режим правок контента"
|
||
title="Режим правок"
|
||
>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||
<path
|
||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||
stroke="currentColor"
|
||
stroke-width="1.75"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||
</button>
|
||
</div>
|
||
|
||
|
||
<main id="case-main" class="section section--tight">
|
||
<div class="section__inner case-article">
|
||
<p class="hero__eyebrow">Тестовое задание · back-office</p>
|
||
<h1 class="case-page__h1">Таск-трекер для внутренней бек-офис системы</h1>
|
||
<h2 id="zadanie">Задание</h2>
|
||
<p class="section__prose">
|
||
Реализовать интерфейс для планирования и распределения задач между сотрудниками операционного отдела, работающими в некой бек-офис системе. Существует большое количество разноплановых задач, которые можно сгруппировать: Тип-1, Тип-2, Тип-3, Тип-4, Тип-5, Тип-6, Тип-7. У каждой задачи есть свой, выставляемый автоматически, приоритет. Пользователю доступны только задачи из определенных категорий.
|
||
</p>
|
||
<p class="section__prose">Нужно реализовать:</p>
|
||
<ul>
|
||
<li>
|
||
Общий экран:
|
||
<ul>
|
||
<li>где пользователь может посмотреть все открытые общие задачи и взять какие-то себе.</li>
|
||
<li>персональный ToDo лист, где отображаются как взятые вручную задачи, так и автоматически назначенные.</li>
|
||
<li>у взятой задачи есть возможность передать ее другому сотруднику или вернуть в общий список.</li>
|
||
</ul>
|
||
</li>
|
||
<li>Экран, где можно посмотреть, что у кого в работе.</li>
|
||
</ul>
|
||
|
||
<h2 id="vvedenie">Введение</h2>
|
||
<p class="section__prose">
|
||
Так как у меня лично есть обширный опыт работы с таск-трекерами, то я опираюсь на свой опыт и опыт моих коллег с учётом требований задания.
|
||
</p>
|
||
|
||
<h2 id="referensy">Референсы</h2>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../assets/task-tracker/refs.webp" alt="Референсы" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<ul>
|
||
<li>Таск-трекеры (Trello, Monday, YouTrack и др.)</li>
|
||
<li>Сервисы для визуальной работы с базами данных (Notion, Airtable и др.)</li>
|
||
</ul>
|
||
|
||
<h2 id="reshenie">Решение</h2>
|
||
|
||
<h3 id="skrinkast">Скринкаст</h3>
|
||
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
|
||
<div class="case-video-shell">
|
||
<video controls preload="metadata" playsinline poster="../../assets/task-tracker/full_preview.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||
<source src="../../assets/task-tracker/full_preview.webm" type="video/webm" />
|
||
<source src="../../assets/task-tracker/full_preview.mp4" type="video/mp4" />
|
||
Ваш браузер не поддерживает видео.
|
||
</video>
|
||
</div>
|
||
</figure>
|
||
<div class="case-links-grid">
|
||
<a
|
||
class="case-link-card"
|
||
href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-(Factoring)?page-id=0%3A1&node-id=20%3A1291&viewport=-5744%2C876%2C1.35&scaling=contain&starting-point-node-id=20%3A1291"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<span class="case-link-card__media">
|
||
<img src="../../assets/task-tracker/tab_all-tasks.webp" alt="Превью прототипа Figma" width="1200" height="800" loading="lazy" decoding="async" />
|
||
</span>
|
||
<span class="case-link-card__body">
|
||
<span class="case-link-card__title">Прототип Figma</span>
|
||
<span class="case-link-card__meta">Интерактивный сценарий по задачам и представлениям</span>
|
||
<span class="case-link-card__url">figma.com/proto/.../STENN-(Factoring)</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<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>
|
||
|
||
<h3 id="tabs">Вкладки (Tabs)</h3>
|
||
<p class="section__prose">На вкладке <strong>All tasks</strong> сотрудник может ознакомиться со всеми доступными задачами.</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../assets/task-tracker/tab_all-tasks.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<p class="section__prose">
|
||
На вкладке <strong>My tasks</strong> отображаются только те задачи, что закреплены за текущим сотрудником. Группировка идёт по статусам задач (статус в карточке задачи скрыт).
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../assets/task-tracker/tab_my-tasks.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<p class="section__prose">На вкладке <strong>Task by assign</strong> отображены все задачи c разбивкой по исполнителю.</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../assets/task-tracker/tab_tasks-by-assign.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<p class="section__prose">В правой части имеются опции для текущей вкладки.</p>
|
||
<figure class="case-media case-media--natural">
|
||
<img src="../../assets/task-tracker/actions_for_page.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" />
|
||
</figure>
|
||
<p class="section__prose">
|
||
Все изменения сохраняются после ухода с вкладки и после закрытия всей страницы <strong>Tasks</strong>. Эти настройки индивидуальны и каждый сотрудник может настроить страницу как ему удобно.
|
||
</p>
|
||
<ul>
|
||
<li>Group - позволяет создать дополнительную группировку по свойству таски (категория, приоритет, исполнитель, статус, дата создания, дата изменения).</li>
|
||
<li>View - позволяет изменить отображение текущих задач на другой вид: доска, список, таблица.</li>
|
||
<li>Filter - позволяет скрывать задачи по свойствам.</li>
|
||
<li>
|
||
Sort - позволяет определять порядок отображения задач по свойствам. Если включена сортировка по статусу High, Medium, Low то можно выбрать либо по алфавиту, либо в обратном порядке, а также можно создать свой порядок. С датами и цифрами работает принцип по возрастанию/убыванию.
|
||
</li>
|
||
<li>
|
||
Search on page - позволяет отобразить только те задачи, в названии или описании которых есть поисковое слово или фраза. (Можно улучшить функционал поиска, добавив поисковые операторы, если исследования докажут эту необходимость)
|
||
</li>
|
||
</ul>
|
||
<p class="section__prose">
|
||
На странице работает постепенная подгрузка задач. По мере скрола вниз, будут подгружаться новые задачи. Кол-во задач указывается в заголовках, это может быть полезно, чтобы оценить как далеко надо скролить, чтобы все посмотреть. Задач может быть очень много и тогда возможно имеет смысл добавить ещё и переход по страницам.
|
||
</p>
|
||
|
||
<h3 id="views">Варианты отображения (Views)</h3>
|
||
<p class="section__prose">
|
||
Разные виды отображения одних и тех же задач могут быть полезны для разных контекстов использования страницы <strong>Tasks</strong> и также в угоду личным предпочтениям сотрудника, что повышает его эффективность. Сотрудник, которого не раздражает интерфейс работает продуктивнее и приносит больше пользы.
|
||
</p>
|
||
<figure class="case-media case-media--natural">
|
||
<img src="../../assets/task-tracker/dropdown_menu_for_views.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" />
|
||
</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>После смены вида также меняется иконка у опции <strong>View</strong>.</p>
|
||
</div>
|
||
</aside>
|
||
<p class="section__prose">
|
||
Вид <strong>Board</strong> позволяет удобнее работать с функцией Drag&Drop (см. ниже). Также визуально легче определить кол-во задач в категории, подразумеваю что это может быть полезно. В случае использования группировки задач по статусам выполнения, перемещение карточек слева направо создаёт естественное горизонтальное течение задач из точки А в точку Б.
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../assets/task-tracker/view_board.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<p class="section__prose">
|
||
Вид <strong>List</strong> позволяет увидеть больше информации на меньшей площади экрана. При этом этот вид визуально и функционально легче табличного вида, а значит меньше когнитивной нагрузки на пользователя. Также здесь все заголовки задач начинаются в крайнем левом положении, поэтому становится легко <em>пробежаться глазами</em> по списку.
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../assets/task-tracker/view_list.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<p class="section__prose">
|
||
Вид <strong>Table</strong> позволяет сразу же работать со всеми полями задачи, без раскрытия её в модальном окне или отдельной странице. Таблица подразумевает пользовательскую настройку ширины и порядка столбцов, что может быть удобно в некоторых кейсах использования.
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../assets/task-tracker/view_table.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</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" style="margin: 0.85rem 0 1.2rem">
|
||
<div class="case-video-shell">
|
||
<video controls preload="metadata" playsinline poster="../../assets/task-tracker/expand-collapse_group.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||
<source src="../../assets/task-tracker/expand-collapse_group.webm" type="video/webm" />
|
||
<source src="../../assets/task-tracker/expand-collapse_group.mp4" type="video/mp4" />
|
||
Ваш браузер не поддерживает видео.
|
||
</video>
|
||
</div>
|
||
</figure>
|
||
<div class="case-links-grid">
|
||
<a
|
||
class="case-link-card"
|
||
href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)?page-id=0%3A1&node-id=39%3A700&viewport=-1875%2C-125%2C0.55&scaling=min-zoom&starting-point-node-id=20%3A1291&hide-ui=1"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<span class="case-link-card__media">
|
||
<img src="../../assets/task-tracker/view_board.webp" alt="Превью прототипа вида Board" width="1200" height="800" loading="lazy" decoding="async" />
|
||
</span>
|
||
<span class="case-link-card__body">
|
||
<span class="case-link-card__title">Прототип в Figma</span>
|
||
<span class="case-link-card__meta">Варианты отображения: Board, List, Table</span>
|
||
<span class="case-link-card__url">figma.com/proto/.../STENN-(Task-Tracker)</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
|
||
<h3 id="drag">Drag&Drop</h3>
|
||
<p class="section__prose">
|
||
Во всех видах можно перетаскивать элементы (карточки/элементы списка/строки и столбцы таблицы). Это способствует более продуктивной работе и выглядит естественным для пользователя. Например, если требуется раскидать задачи между сотрудниками (для админа или менеджера), поменять статус для нескольких задач разом или в короткий отрезок времени.
|
||
</p>
|
||
<p class="section__prose"><strong>Board view</strong></p>
|
||
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
|
||
<div class="case-video-shell">
|
||
<video controls preload="metadata" playsinline poster="../../assets/task-tracker/drag-drop-item_board-view.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||
<source src="../../assets/task-tracker/drag-drop-item_board-view.webm" type="video/webm" />
|
||
<source src="../../assets/task-tracker/drag-drop-item_board-view.mp4" type="video/mp4" />
|
||
Ваш браузер не поддерживает видео.
|
||
</video>
|
||
</div>
|
||
</figure>
|
||
<div class="case-links-grid">
|
||
<a
|
||
class="case-link-card"
|
||
href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-Task-Tracker?node-id=108%3A970&viewport=2248%2C341%2C0.33&scaling=contain&starting-point-node-id=108%3A1968&show-proto-sidebar=1"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<span class="case-link-card__media" aria-hidden="true">
|
||
<img src="../../assets/task-tracker/view_board.webp" alt="" width="1200" height="800" loading="lazy" decoding="async" />
|
||
</span>
|
||
<span class="case-link-card__body">
|
||
<span class="case-link-card__title">Прототип в Figma</span>
|
||
<span class="case-link-card__meta">Drag&Drop, Board view</span>
|
||
<span class="case-link-card__url">figma.com/proto/.../STENN-Task-Tracker</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<p class="section__prose"><strong>List view</strong></p>
|
||
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
|
||
<div class="case-video-shell">
|
||
<video controls preload="metadata" playsinline poster="../../assets/task-tracker/drag-drop-item_list-view.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||
<source src="../../assets/task-tracker/drag-drop-item_list-view.webm" type="video/webm" />
|
||
<source src="../../assets/task-tracker/drag-drop-item_list-view.mp4" type="video/mp4" />
|
||
Ваш браузер не поддерживает видео.
|
||
</video>
|
||
</div>
|
||
</figure>
|
||
<div class="case-links-grid">
|
||
<a
|
||
class="case-link-card"
|
||
href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-Task-Tracker?node-id=108%3A970&viewport=2248%2C341%2C0.33&scaling=contain&starting-point-node-id=108%3A2607&show-proto-sidebar=1"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<span class="case-link-card__media" aria-hidden="true">
|
||
<img src="../../assets/task-tracker/view_list.webp" alt="" width="1200" height="800" loading="lazy" decoding="async" />
|
||
</span>
|
||
<span class="case-link-card__body">
|
||
<span class="case-link-card__title">Прототип в Figma</span>
|
||
<span class="case-link-card__meta">Drag&Drop, List view</span>
|
||
<span class="case-link-card__url">figma.com/proto/.../STENN-Task-Tracker</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<p class="section__prose"><strong>Продвинутый интерактивный прототип в ProtoPie</strong></p>
|
||
<p class="section__prose">
|
||
Схематичное представление того как работает Drag&Drop. Такой прототип помогает дизайнеру лучше понять какие нюансы нужно учесть в юзерфлоу, а также и при подготовке спецификации для разработчика. Также попробовав данный прототип можно прийти к тому, что функционал должен работать совсем иначе и переделать его сразу. Это экономит общее время разработки.
|
||
</p>
|
||
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
|
||
<div class="case-video-shell">
|
||
<video controls preload="metadata" playsinline poster="../../assets/task-tracker/drag-drop-action_example.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||
<source src="../../assets/task-tracker/drag-drop-action_example.webm" type="video/webm" />
|
||
<source src="../../assets/task-tracker/drag-drop-action_example.mp4" type="video/mp4" />
|
||
Ваш браузер не поддерживает видео.
|
||
</video>
|
||
</div>
|
||
</figure>
|
||
<div class="case-links-grid">
|
||
<a
|
||
class="case-link-card case-link-card--favicon"
|
||
href="https://cloud.protopie.io/p/e7a45bd3f2?touchHint=false&ui=false&scaleToFit=false&cursorType=arrow&mockup=false&bgColor=%23F5F5F5&playSpeed=1&playerAppPopup=true"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<span class="case-link-card__media" aria-hidden="true">
|
||
<img src="https://www.google.com/s2/favicons?domain=cloud.protopie.io&sz=128" alt="" width="24" height="24" decoding="async" />
|
||
</span>
|
||
<span class="case-link-card__body">
|
||
<span class="case-link-card__title">Прототип | drag_drop | ProtoPie Cloud</span>
|
||
<span class="case-link-card__meta">Интерактив в облаке ProtoPie</span>
|
||
<span class="case-link-card__url">cloud.protopie.io/...</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<p class="section__prose">
|
||
В прототипе можно перемещать только голубую карточку и не все положения работают корректно. Можно посмотреть запись, которая доступна на той же странице прототипа.
|
||
</p>
|
||
|
||
<h2 id="stil">Стиль</h2>
|
||
<p class="section__prose">
|
||
Визуальный стиль может быть любым, не меняя самого <em>каркаса.</em> Например, чуть более красочным и с более выразительными шрифтами.
|
||
</p>
|
||
<p class="section__prose">Светлая цветная тема</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../assets/task-tracker/light_theme_color.webp" alt="Светлая цветная тема" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<div class="case-links-grid">
|
||
<a
|
||
class="case-link-card case-link-card--favicon"
|
||
href="https://www.figma.com/file/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)?node-id=174%3A5703"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<span class="case-link-card__media" aria-hidden="true">
|
||
<img src="https://www.google.com/s2/favicons?domain=www.figma.com&sz=128" alt="" width="24" height="24" decoding="async" />
|
||
</span>
|
||
<span class="case-link-card__body">
|
||
<span class="case-link-card__title">Фрэйм в Figma</span>
|
||
<span class="case-link-card__meta">Светлая цветная тема</span>
|
||
<span class="case-link-card__url">figma.com/file/.../STENN-(Task-Tracker)</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<p class="section__prose">Нейтральная тёмная тема</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../assets/task-tracker/dark_theme.webp" alt="Нейтральная тёмная тема" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<div class="case-links-grid">
|
||
<a
|
||
class="case-link-card case-link-card--favicon"
|
||
href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN--Task-Tracker-?node-id=135-5400&t=BzGQOTE0ty7u2E50-1"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<span class="case-link-card__media" aria-hidden="true">
|
||
<img src="https://www.google.com/s2/favicons?domain=www.figma.com&sz=128" alt="" width="24" height="24" decoding="async" />
|
||
</span>
|
||
<span class="case-link-card__body">
|
||
<span class="case-link-card__title">Фрэйм в Figma</span>
|
||
<span class="case-link-card__meta">Нейтральная тёмная тема</span>
|
||
<span class="case-link-card__url">figma.com/proto/.../STENN--Task-Tracker-</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
|
||
<h2 id="issledovaniya">Исследования</h2>
|
||
<p class="section__prose">
|
||
На этапе прототипов Figma можно провести интервью с несколькими сотрудниками, например 5 человек. Предварительно в прототип нужно добавить реальные задачи из текущей системы, порядка 20 должно хватить. Далее можно созвониться по видеосвязи с шэрингом экрана респондента или встретиться лично и задать несколько заданий и вопросов. Во время сессии респондент может тыкать в прототип, но если что-то не сработает интервьюер может зафиксировать попытку и объяснить, что этот функционал пока не работает, а также поинтересоваться что респондент ожидает увидеть дальше.
|
||
</p>
|
||
<h3 id="zadania">Задания</h3>
|
||
<ol>
|
||
<li>Найти свои актуальные задачи со страницы <strong>Tasks</strong> вкладки <strong>All tasks</strong></li>
|
||
<li>Назначить себе задачи, чтобы взять в работу</li>
|
||
<li>Найти задачу про что-то конкретное (интервьюер приводит пример), которую он уже выполнил ранее</li>
|
||
<li>Показать задачи, которые относятся только к определённой категории и должны быть сделаны до конца недели</li>
|
||
<li>Попросить поменять приоритет у нескольких задач одновременно</li>
|
||
<li>Оценить визуальную привлекательность интерфейса по шкале от 1 до 10</li>
|
||
<li>Оценить общее впечатление от предложенного концепта по шкале от 1 до 10</li>
|
||
<li>Предложить ещё функции, которые были бы полезны</li>
|
||
</ol>
|
||
<h3 id="analitika">Аналитика</h3>
|
||
<p class="section__prose">Для оценки актуальности реализованного функционала необходимо собирать следующие показатели.</p>
|
||
<ul>
|
||
<li>
|
||
Кол-во просмотров страницы <strong>Tasks</strong> <code>page_views_tasks</code> с возможностью разбиения
|
||
<ul>
|
||
<li>
|
||
по вкладкам
|
||
<ul>
|
||
<li>All tasks <code>all_tasks_tab</code></li>
|
||
<li>My tasks <code>my_tasks_tab</code></li>
|
||
<li>Tasks by assign <code>tasks_by_assign</code></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
по ролям
|
||
<ul>
|
||
<li>Admin <code>admin</code></li>
|
||
<li>Manager <code>manager</code></li>
|
||
<li>User <code>user</code></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
по попыткам поиска
|
||
<ul>
|
||
<li>Search Used <code>search used</code></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
Кол-во включённых пользовательских настроек <strong>Custom Settings</strong> <code>custom_settings</code> с возможностью разбиения
|
||
<ul>
|
||
<li>
|
||
по вкладкам
|
||
<ul>
|
||
<li>All tasks <code>all_tasks_tab</code></li>
|
||
<li>My tasks <code>my_tasks_tab</code></li>
|
||
<li>Tasks by assign <code>tasks_by_assign</code></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
по ролям
|
||
<ul>
|
||
<li>Admin <code>admin</code></li>
|
||
<li>Manager <code>manager</code></li>
|
||
<li>User <code>user</code></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
по типам
|
||
<ul>
|
||
<li>Group <code>group</code></li>
|
||
<li>Filter <code>filter</code></li>
|
||
<li>Sort <code>sort</code></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
Кол-во включенных видов <strong>View Used</strong> <code>view_used</code> с возможностью разбиения
|
||
<ul>
|
||
<li>
|
||
по вкладкам
|
||
<ul>
|
||
<li>All tasks <code>all_tasks_tab</code></li>
|
||
<li>My tasks <code>my_tasks_tab</code></li>
|
||
<li>Tasks by assign <code>tasks_by_assign</code></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
по ролям
|
||
<ul>
|
||
<li>Admin <code>admin</code></li>
|
||
<li>Manager <code>manager</code></li>
|
||
<li>User <code>user</code></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<p class="section__prose">
|
||
Далее в течение полугода (может и раньше, в зависимости от активности пользователей) можно будет увидеть результат и провести исследование (в виде интервью) по функциям, которые используются реже всего и тем на которые есть жалобы, чтобы получить качественные данные и составить полную картину происходящего.
|
||
</p>
|
||
|
||
<h2 id="dop">Дополнительные детали</h2>
|
||
<p class="section__prose">
|
||
При создании мокапов в Figma были использованы: возможности автолэаутов; интерактивные компоненты, плагины (<a href="https://www.figma.com/community/plugin/735098390272716381/Iconify">Iconify</a>, <a href="https://www.figma.com/community/plugin/917796239623005893/Fitter">Fitter</a>, <a href="https://www.figma.com/community/plugin/1021879782774011952">Protofly</a>, <a href="https://www.figma.com/community/plugin/889676455045507628/Shadow-Maker">Shadow Maker</a>, <a href="https://www.figma.com/community/plugin/986289377230504703">Dark Side</a> и др.), файл Community (<a href="https://www.figma.com/community/file/831142089959745518">+40 Types of Cursor</a>). Слои названы и организованы для более удобной работы где-то на 60%. Используется сетка 8pt + есть размеры 2pt, 4pt. Имеются цветовые стили для светлой и тёмной темы. Присутствует адаптивность под изменяющиеся размеры окна (мобильной версии нет).
|
||
</p>
|
||
<div class="case-links-grid">
|
||
<a
|
||
class="case-link-card case-link-card--favicon"
|
||
href="https://www.figma.com/file/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<span class="case-link-card__media" aria-hidden="true">
|
||
<img src="https://www.google.com/s2/favicons?domain=www.figma.com&sz=128" alt="" width="24" height="24" decoding="async" />
|
||
</span>
|
||
<span class="case-link-card__body">
|
||
<span class="case-link-card__title">Исходный файл в Figma</span>
|
||
<span class="case-link-card__meta">Проект STENN (Task-Tracker)</span>
|
||
<span class="case-link-card__url">figma.com/file/.../STENN-(Task-Tracker)</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<section class="section section--surface" data-reveal>
|
||
<div class="section__inner">
|
||
<h2 class="section__title">Смотрите также</h2>
|
||
<ol class="mini-projects-grid" data-mini-projects-list>
|
||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="ai-platform-primo-rpa">
|
||
<a class="mp-card mp-card--link mp-card--stack mp-card--glass" href="../ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
|
||
<div class="mp-card__media" aria-hidden="true">
|
||
<img
|
||
class="mp-card__image"
|
||
src="../../assets/ai-platform-primo-rpa/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div class="mp-card__body">
|
||
<h3 class="mp-card__title">Primo AI Server</h3>
|
||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||
<li class="mp-card__tag">UX/UI</li>
|
||
<li class="mp-card__tag">Web App</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="lunacy">
|
||
<a class="mp-card mp-card--link mp-card--stack mp-card--glass" href="../lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
|
||
<div class="mp-card__media" aria-hidden="true">
|
||
<img
|
||
class="mp-card__image"
|
||
src="../../assets/lunacy/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div class="mp-card__body">
|
||
<h3 class="mp-card__title">Lunacy</h3>
|
||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||
<li class="mp-card__tag">UX/UI</li>
|
||
<li class="mp-card__tag">Desktop App</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="manu-game-maker" hidden>
|
||
<a class="mp-card mp-card--link mp-card--stack mp-card--glass" href="../manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
|
||
<div class="mp-card__media" aria-hidden="true">
|
||
<img
|
||
class="mp-card__image"
|
||
src="../../assets/manu-game-maker/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div class="mp-card__body">
|
||
<h3 class="mp-card__title">Игровой движок MANU</h3>
|
||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||
<li class="mp-card__tag">Product Design</li>
|
||
<li class="mp-card__tag">Desktop App</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="mobile-clinic-app" hidden>
|
||
<a class="mp-card mp-card--link mp-card--stack mp-card--glass" href="../mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
|
||
<div class="mp-card__media" aria-hidden="true">
|
||
<img
|
||
class="mp-card__image"
|
||
src="../../assets/mobile-clinic-app/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div class="mp-card__body">
|
||
<h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
|
||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||
<li class="mp-card__tag">UX/UI</li>
|
||
<li class="mp-card__tag">Mobile App</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="orc-automation-panel">
|
||
<a class="mp-card mp-card--link mp-card--stack mp-card--glass" href="../orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
|
||
<div class="mp-card__media" aria-hidden="true">
|
||
<img
|
||
class="mp-card__image"
|
||
src="../../assets/orc-primo-rpa/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div class="mp-card__body">
|
||
<h3 class="mp-card__title">Primo Orc</h3>
|
||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||
<li class="mp-card__tag">Менторство и наставничество</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="task-distribution-concept" hidden>
|
||
<a class="mp-card mp-card--link mp-card--stack mp-card--glass" href="../task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
|
||
<div class="mp-card__media" aria-hidden="true">
|
||
<img
|
||
class="mp-card__image"
|
||
src="../../assets/task-distribution-concept/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div class="mp-card__body">
|
||
<h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
|
||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||
<li class="mp-card__tag">UX/UI</li>
|
||
<li class="mp-card__tag">Analytics</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="task-tracker" hidden>
|
||
<a class="mp-card mp-card--link mp-card--stack mp-card--glass" href="../task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
|
||
<div class="mp-card__media" aria-hidden="true">
|
||
<img
|
||
class="mp-card__image"
|
||
src="../../assets/task-tracker/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div class="mp-card__body">
|
||
<h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
|
||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||
<li class="mp-card__tag">Product Design</li>
|
||
<li class="mp-card__tag">Web App</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&Drop.</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
<section hidden class="section section--surface" aria-hidden="true">
|
||
<div class="section__inner">
|
||
<div class="projects__heading">
|
||
<h2 class="section__title projects__title">Портфолио</h2>
|
||
<div class="projects__controls" aria-label="Навигация по карточкам портфолио">
|
||
<button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
|
||
<span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
|
||
</button>
|
||
<button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
|
||
<span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="projects-carousel">
|
||
<div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
|
||
<div class="projects-carousel__track">
|
||
<div class="projects-carousel__spacer" aria-hidden="true"></div>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" href="../orc-automation-panel/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
|
||
<p class="portfolio-card__summary">
|
||
Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
|
||
продакшен без остановки релизов.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||
<li class="portfolio-card__tag">UX/UI</li>
|
||
<li class="portfolio-card__tag">Web App</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../assets/orc-primo-rpa/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" href="../ai-platform-primo-rpa/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Платформа для работы с AI</h3>
|
||
<p class="portfolio-card__summary">
|
||
Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
|
||
автоматизации и Smart OCR.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||
<li class="portfolio-card__tag">UX/UI</li>
|
||
<li class="portfolio-card__tag">Web App</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../assets/ai-platform-primo-rpa/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" href="../task-tracker/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
|
||
<p class="portfolio-card__summary">
|
||
Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
|
||
исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&Drop.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||
<li class="portfolio-card__tag">Product Design</li>
|
||
<li class="portfolio-card__tag">Web App</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../assets/task-tracker/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" href="../manu-game-maker/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Игровой движок MANU</h3>
|
||
<p class="portfolio-card__summary">
|
||
Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
|
||
проработка сотен сложных пользовательских сценариев.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||
<li class="portfolio-card__tag">Product Design</li>
|
||
<li class="portfolio-card__tag">Desktop App</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../assets/manu-game-maker/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" href="../lunacy/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
|
||
<p class="portfolio-card__summary">
|
||
Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
|
||
интерфейсной логики.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||
<li class="portfolio-card__tag">UX/UI</li>
|
||
<li class="portfolio-card__tag">Desktop App</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../assets/lunacy/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" href="../mobile-clinic-app/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
|
||
<p class="portfolio-card__summary">
|
||
Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
|
||
пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||
<li class="portfolio-card__tag">UX/UI</li>
|
||
<li class="portfolio-card__tag">Mobile App</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../assets/mobile-clinic-app/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" href="../task-distribution-concept/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
|
||
<p class="portfolio-card__summary">
|
||
Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
|
||
процессов и удобство командной работы.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||
<li class="portfolio-card__tag">UX/UI</li>
|
||
<li class="portfolio-card__tag">Analytics</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../assets/task-distribution-concept/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" href="../obsidian-plugin-columns-view/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
|
||
<p class="portfolio-card__summary">
|
||
Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
|
||
колончатого отображения прямо в редакторе Obsidian.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||
<li class="portfolio-card__tag">UX/UI</li>
|
||
<li class="portfolio-card__tag">Plugin</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../assets/obsidian-plugin-columns-view/filter use.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<div class="projects-carousel__spacer" aria-hidden="true"></div>
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
|
||
data-projects-edge-prev
|
||
aria-label="Прокрутить портфолио влево"
|
||
></button>
|
||
<button
|
||
type="button"
|
||
class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
|
||
data-projects-edge-next
|
||
aria-label="Прокрутить портфолио вправо"
|
||
></button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<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="../../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="../../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><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>
|
||
|
||
<footer class="footer">
|
||
<div class="footer__inner">
|
||
<span class="footer__chunk footer__chunk--date">© 2015–2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
|
||
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cookie-policy/">Политика cookie</a></span>
|
||
<span class="footer__chunk footer__chunk--lang"><span class="footer__sep" aria-hidden="true"> · </span><nav class="lang-switch" aria-label="Выбор языка" data-lang-switch>
|
||
<a class="lang-switch__btn" data-lang="en" href="/en/">English</a>
|
||
</nav>
|
||
<script>
|
||
(function () {
|
||
var p = location.pathname.replace(/^\/+/, "");
|
||
var isEn = p.indexOf("en/") === 0;
|
||
var base = isEn ? p.slice(3) : p;
|
||
var links = document.querySelectorAll("[data-lang-switch] [data-lang]");
|
||
for (var i = 0; i < links.length; i++) {
|
||
var l = links[i].getAttribute("data-lang");
|
||
links[i].setAttribute("href", (l === "en" ? "/en/" : "/") + base);
|
||
}
|
||
})();
|
||
</script>
|
||
</span>
|
||
</div>
|
||
</footer>
|
||
|
||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||
<p class="cookie-notice__text">
|
||
Сайт использует cookie для комфортной работы. Подробнее — в
|
||
<a href="../../cookie-policy/" data-cookie-policy-link>cookie policy</a>.
|
||
</p>
|
||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||
<span>Принять</span>
|
||
<span class="cookie-notice__accept-icon" aria-hidden="true">
|
||
<img src="../../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
|
||
</span>
|
||
</button>
|
||
</aside>
|
||
|
||
<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded',function(){
|
||
var s=document.body.dataset.currentCase;
|
||
if(!s)return;
|
||
document.querySelectorAll('[data-related-slug="'+s+'"]').forEach(function(el){el.hidden=true;});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
|
||
|