1158 lines
64 KiB
HTML
1158 lines
64 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" 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="Case Study: Developing the Lunacy Interface in Icons8 — Scenarios, UI Iterations, and Screenshots of the Process."
|
||
/>
|
||
<title>Lunacy — Case Study</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 DEF = { h: 210, s: 90, l: 40 };
|
||
function pickAccent(o) {
|
||
if (!o) return null;
|
||
var h = typeof o.h === "number" ? o.h : typeof o.hue === "number" ? o.hue : null;
|
||
var s = typeof o.s === "number" ? o.s : typeof o.sat === "number" ? o.sat : null;
|
||
var l = typeof o.l === "number" ? o.l : typeof o.light === "number" ? o.light : null;
|
||
if (h === null && s === null && l === null) return null;
|
||
return {
|
||
h: h === null ? DEF.h : h,
|
||
s: s === null ? DEF.s : Math.min(100, Math.max(30, s)),
|
||
l: l === null ? DEF.l : Math.min(70, Math.max(20, l)),
|
||
};
|
||
}
|
||
// Текущий формат: отдельный акцент для светлой и тёмной темы ({light, dark}).
|
||
// Старый плоский формат ({h, s, l}) остаётся совместимым.
|
||
var acc =
|
||
pickAccent(eff === "dark" ? t.dark : t.light) ||
|
||
pickAccent(eff === "dark" ? t.light : t.dark) ||
|
||
pickAccent(t) ||
|
||
DEF;
|
||
d.style.setProperty("--theme-h", String(acc.h));
|
||
d.style.setProperty("--theme-s", String(acc.s));
|
||
d.style.setProperty("--theme-l", String(acc.l));
|
||
var H = (((acc.h % 360) + 360) % 360) / 360;
|
||
var S = Math.min(100, Math.max(0, acc.s)) / 100;
|
||
var Lv = Math.min(100, Math.max(0, acc.l)) / 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 = "geologica";
|
||
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>
|
||
|
||
<!-- Аналитика грузится только на прод-домене: dev/preview (localhost:4175, dev.mamadaevv.site) в статистику не попадают. -->
|
||
<script>
|
||
(function () {
|
||
var PROD_HOSTS = ["mamadaevv.site", "www.mamadaevv.site"];
|
||
if (PROD_HOSTS.indexOf(location.hostname) === -1) return;
|
||
var s = document.createElement("script");
|
||
s.defer = true;
|
||
s.src = "https://cloud.umami.is/script.js";
|
||
s.setAttribute("data-website-id", "59e8e66e-2dab-4a86-acc6-b97985ad0473");
|
||
document.head.appendChild(s);
|
||
})();
|
||
</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/en/cases/lunacy/" />
|
||
<link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/lunacy/" />
|
||
<link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/lunacy/" />
|
||
<link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/lunacy/" />
|
||
<link rel="describedby" href="https://mamadaevv.site/llms.txt" title="llms.txt" />
|
||
<meta name="author" content="Nikolai Mamadaev" />
|
||
<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="Nikolai Mamadaev — Product Designer" />
|
||
<meta property="og:locale" content="en_US" />
|
||
<meta property="og:locale:alternate" content="ru_RU" />
|
||
<meta property="og:title" content="Lunacy — Case Study" />
|
||
<meta property="og:description" content="Case Study: Developing the Lunacy Interface in Icons8 — Scenarios, UI Iterations, and Screenshots of the Process." />
|
||
<meta property="og:url" content="https://mamadaevv.site/en/cases/lunacy/" />
|
||
<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="Lunacy — Case Study" />
|
||
|
||
<!-- Twitter / X -->
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="Lunacy — Case Study" />
|
||
<meta name="twitter:description" content="Case Study: Developing the Lunacy Interface in Icons8 — Scenarios, UI Iterations, and Screenshots of the Process." />
|
||
<meta name="twitter:image" content="https://mamadaevv.site/assets/og/og-default.png" />
|
||
<meta name="twitter:image:alt" content="Lunacy — Case Study" />
|
||
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@graph": [
|
||
{
|
||
"@type": "Person",
|
||
"@id": "https://mamadaevv.site/#person",
|
||
"name": "Nikolai Mamadaev",
|
||
"url": "https://mamadaevv.site",
|
||
"jobTitle": "Product Designer",
|
||
"description": "Product designer with 10+ years of experience. Designing digital products, interfaces and design systems.",
|
||
"knowsAbout": [
|
||
"UX/UI design",
|
||
"product design",
|
||
"design systems",
|
||
"prototyping",
|
||
"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": "Nikolai Mamadaev — Product Designer",
|
||
"inLanguage": "en",
|
||
"author": {
|
||
"@id": "https://mamadaevv.site/#person"
|
||
},
|
||
"publisher": {
|
||
"@id": "https://mamadaevv.site/#person"
|
||
}
|
||
},
|
||
{
|
||
"@type": "CreativeWork",
|
||
"@id": "https://mamadaevv.site/en/cases/lunacy/#page",
|
||
"url": "https://mamadaevv.site/en/cases/lunacy/",
|
||
"name": "Lunacy — Case Study",
|
||
"description": "Case Study: Developing the Lunacy Interface in Icons8 — Scenarios, UI Iterations, and Screenshots of the Process.",
|
||
"isPartOf": {
|
||
"@id": "https://mamadaevv.site/#website"
|
||
},
|
||
"author": {
|
||
"@id": "https://mamadaevv.site/#person"
|
||
},
|
||
"inLanguage": "en",
|
||
"creator": {
|
||
"@id": "https://mamadaevv.site/#person"
|
||
},
|
||
"datePublished": "2026-09-24",
|
||
"about": "UX/UI design and interface design"
|
||
},
|
||
{
|
||
"@type": "BreadcrumbList",
|
||
"@id": "https://mamadaevv.site/en/cases/lunacy/#breadcrumbs",
|
||
"itemListElement": [
|
||
{
|
||
"@type": "ListItem",
|
||
"position": 1,
|
||
"name": "Nikolai Mamadaev — Product Designer",
|
||
"item": "https://mamadaevv.site/"
|
||
},
|
||
{
|
||
"@type": "ListItem",
|
||
"position": 2,
|
||
"name": "Cases",
|
||
"item": "https://mamadaevv.site/cases/"
|
||
},
|
||
{
|
||
"@type": "ListItem",
|
||
"position": 3,
|
||
"name": "Lunacy — Case Study",
|
||
"item": "https://mamadaevv.site/cases/lunacy/"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
|
||
<script src="/js/skill-connectors.js" defer></script>
|
||
<script type="module" src="/js/main.js"></script>
|
||
|
||
|
||
<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);
|
||
}
|
||
.case-media-gallery__item img {
|
||
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 data-current-case="lunacy">
|
||
<a class="skip-link" href="#case-main">Skip to case content</a>
|
||
<header class="header" data-theme-picker>
|
||
<div class="header__inner">
|
||
<a class="logo" href="../../" aria-label="Home">NM</a>
|
||
<div class="header__cluster">
|
||
<nav class="nav" aria-label="Page sections">
|
||
<a href="#contact">Contact</a>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="fab-stack" aria-label="Quick actions">
|
||
<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="Style settings">
|
||
<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="Theme & appearance" 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">Accent color</h3>
|
||
<div class="colorpicker" data-colorpicker>
|
||
<div class="colorpicker__plane-box">
|
||
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Accent saturation and lightness"></canvas>
|
||
<div class="colorpicker__knob" data-sl-knob></div>
|
||
</div>
|
||
<div class="colorpicker__hue-wrap">
|
||
<label class="colorpicker__hue-sr" for="theme-hue-slider">Accent hue</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">Theme</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="System"><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="Light"><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="Dark"><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">Corner radius</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="Soft radius"><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="Medium radius"><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="Strong radius"><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">Typography</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">Page background</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="Show background gradient"><span class="theme-mesh-bg-seg__label">On</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="Hide background gradient"><span class="theme-mesh-bg-seg__label">Off</span></button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a class="fab fab--primary" href="#contact" aria-label="Contact">
|
||
<span class="fab-primary__ico" aria-hidden="true"></span>
|
||
</a>
|
||
</div>
|
||
<div class="content-edit-fab-stack" aria-label="Content Edits" 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="Content Editing Mode"
|
||
title="Edit Mode"
|
||
>
|
||
<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" data-case-sequential-images>
|
||
<p class="hero__eyebrow">Icons8 · desktop</p>
|
||
<h1 class="case-page__h1">Lunacy Graphic Editor</h1>
|
||
<p class="section__prose">
|
||
Work on the Lunacy interface as part of the Icons8 team: user flow, prototypes of complex scenarios, refinement of functionality and
|
||
visual logic. Below are screenshots from the process (the order of the screenshots is based on the filenames).
|
||
</p>
|
||
<p class="section__prose">
|
||
Product: <a href="https://icons8.com/lunacy" target="_blank" rel="noopener noreferrer">icons8.com/lunacy</a>
|
||
</p>
|
||
|
||
<h2 id="obzor">Overview</h2>
|
||
<p class="section__prose">General view of the application—the workspace with an open document, toolbars, and the canvas. This screen demonstrates Lunacy’s basic layout: the left panel shows layers, the right panel shows object properties, and the top bar displays the context bar with the current tool. This serves as the starting point for the rest of the materials on the page.</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
alt="Lunacy App Review"
|
||
data-src="../../../assets/lunacy/Lunacy_app_overview.webp"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>Overview of the Lunacy window.</figcaption>
|
||
</figure>
|
||
<p class="section__prose">Next are individual scenarios and interface iterations, presented in the order that makes the most sense in terms of context and file names.</p>
|
||
|
||
<h2 id="blob-holst">Blob: Settings on the Canvas</h2>
|
||
<p class="section__prose">Working with a blob in the context of the canvas is a separate scenario, prior to the analysis of the panel across versions.</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
alt="Blob Settings on Canvas"
|
||
data-src="../../../assets/lunacy/blob_settings_on_canvas.webp"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption><code>blob_settings_on_canvas</code></figcaption>
|
||
</figure>
|
||
<p class="section__prose">The settings panel for these tasks evolved through a series of mockups from v1 to v9—they’re compiled in the grid below.</p>
|
||
|
||
<h2 id="compare">Components and Comparison</h2>
|
||
<p class="section__prose">Comparison of components and the update indicator in the panel.</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
alt="Component Comparison Dialog Box"
|
||
data-src="../../../assets/lunacy/compare_components_modal_window.webp"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption><code>compare_components_modal_window</code></figcaption>
|
||
</figure>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
alt="Component Update Indicator in the Panel"
|
||
data-src="../../../assets/lunacy/components_update_indicator_location_panel.webp"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption><code>components_update_indicator_location_panel</code></figcaption>
|
||
</figure>
|
||
<p class="section__prose">Two related screens: searching for discrepancies and displaying update status next to the panel navigation.</p>
|
||
|
||
<h2 id="prototype">Prototype in the Panel</h2>
|
||
<p class="section__prose">Creating a prototype on the canvas and panel states for prototype mode.</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
alt="Modal Window: Create a Prototype on Canvas"
|
||
data-src="../../../assets/lunacy/modal_window_for_prototype_create_on_canvas.webp"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption><code>modal_window_for_prototype_create_on_canvas</code></figcaption>
|
||
</figure>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
alt="Modal Window: Prototype Panel States"
|
||
data-src="../../../assets/lunacy/modal_window_for_prototype_panel_states.webp"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption><code>modal_window_for_prototype_panel_states</code></figcaption>
|
||
</figure>
|
||
<p class="section__prose">Both screenshots show how the prototype is linked to the canvas and to a set of dashboard states.</p>
|
||
|
||
<h2 id="shadow-pro">Shadow Pro: Settings</h2>
|
||
<p class="section__prose">Shadow Pro block: panel, ideas, modals with auto-open and auto-close.</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
alt="Shadow Pro: Settings Panel"
|
||
data-src="../../../assets/lunacy/shadow_pro_settings_panel.webp"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption><code>shadow_pro_settings_panel</code></figcaption>
|
||
</figure>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
alt="Shadow Pro: Ideas"
|
||
data-src="../../../assets/lunacy/shadow_pro_settings_ideas.webp"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption><code>shadow_pro_settings_ideas</code></figcaption>
|
||
</figure>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
alt="Shadow Pro: Mods, Auto Enabled"
|
||
data-src="../../../assets/lunacy/shadow_pro_settings_modal_auto_on.webp"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption><code>shadow_pro_settings_modal_auto_on</code></figcaption>
|
||
</figure>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
alt="Shadow Pro: Mod Mode, Auto Off"
|
||
data-src="../../../assets/lunacy/shadow_pro_settings_modal_auto-off.webp"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption><code>shadow_pro_settings_modal_auto-off</code></figcaption>
|
||
</figure>
|
||
<p class="section__prose">Four consecutive frames show the development of a single subproject: from the panel and sketches to refining the behavior in modals.</p>
|
||
|
||
<h2 id="blob-panel-versions">Blob settings panel: versions v1–v9</h2>
|
||
<p class="section__prose">
|
||
Panel iterations by filename <code>blob_settings_panel_v1</code> … <code>v9</code>. Grid based on text width, three columns on a
|
||
wide screen; as the window narrows, the number of columns decreases automatically.
|
||
</p>
|
||
<figure class="case-media case-media-gallery" style="--case-gallery-cols: 3">
|
||
<div class="case-media-gallery__grid">
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v1" data-src="../../../assets/lunacy/blob_settings_panel_v1.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v2" data-src="../../../assets/lunacy/blob_settings_panel_v2.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v3" data-src="../../../assets/lunacy/blob_settings_panel_v3.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v4" data-src="../../../assets/lunacy/blob_settings_panel_v4.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v5" data-src="../../../assets/lunacy/blob_settings_panel_v5.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v6" data-src="../../../assets/lunacy/blob_settings_panel_v6.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v7" data-src="../../../assets/lunacy/blob_settings_panel_v7.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v8" data-src="../../../assets/lunacy/blob_settings_panel_v8.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v9" data-src="../../../assets/lunacy/blob_settings_panel_v9.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
</div>
|
||
<figcaption>Nine versions in a row: read from left to right, top to bottom.</figcaption>
|
||
</figure>
|
||
<p class="section__prose">The grid is convenient for step-by-step comparisons; for details, clicking on a cell opens a full-screen view.</p>
|
||
|
||
<h2 id="slider-versions">Slider: versions v1–v18 and frame 14</h2>
|
||
<p class="section__prose">
|
||
Ordered by name: <code>slider_v1</code> … <code>slider_v13</code>, then <code>slider_14</code> (in the asset without a suffix <code>v</code>),
|
||
then <code>slider_v15</code> … <code>slider_v18</code>.
|
||
</p>
|
||
<figure class="case-media case-media-gallery" style="--case-gallery-cols: 4">
|
||
<div class="case-media-gallery__grid">
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v1" data-src="../../../assets/lunacy/slider_v1.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v2" data-src="../../../assets/lunacy/slider_v2.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v3" data-src="../../../assets/lunacy/slider_v3.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v4" data-src="../../../assets/lunacy/slider_v4.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v5" data-src="../../../assets/lunacy/slider_v5.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v6" data-src="../../../assets/lunacy/slider_v6.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v7" data-src="../../../assets/lunacy/slider_v7.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v8" data-src="../../../assets/lunacy/slider_v8.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v9" data-src="../../../assets/lunacy/slider_v9.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v10" data-src="../../../assets/lunacy/slider_v10.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v11" data-src="../../../assets/lunacy/slider_v11.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v12" data-src="../../../assets/lunacy/slider_v12.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v13" data-src="../../../assets/lunacy/slider_v13.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider 14" data-src="../../../assets/lunacy/slider_14.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v15" data-src="../../../assets/lunacy/slider_v15.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v16" data-src="../../../assets/lunacy/slider_v16.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v17" data-src="../../../assets/lunacy/slider_v17.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
<div class="case-media-gallery__item">
|
||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v18" data-src="../../../assets/lunacy/slider_v18.webp" loading="lazy" decoding="async" data-image-viewer />
|
||
</div>
|
||
</div>
|
||
<figcaption>Eighteen slider variants plus a separate frame <code>slider_14</code> between v13 and v15.</figcaption>
|
||
</figure>
|
||
<p class="section__prose">This sequence is useful for analyzing the evolution of the control: from early layouts to final states.</p>
|
||
|
||
<h2 id="sliders-all">Sliders: general frame</h2>
|
||
<p class="section__prose">A summary screen for sliders—following the version series.</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
alt="All Sliders: Overview"
|
||
data-src="../../../assets/lunacy/sliders_all_set.webp"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption><code>sliders_all_set</code></figcaption>
|
||
</figure>
|
||
<p class="section__prose">This concludes the section on sliders: context—how multiple controls coexist on a single screen.</p>
|
||
</div>
|
||
</main>
|
||
|
||
<section class="section section--surface" data-reveal>
|
||
<div class="section__inner">
|
||
<h2 class="section__title">See also</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" href="../ai-platform-primo-rpa/" aria-label="AI Platform — Open a Case">
|
||
<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="Project Type">
|
||
<li class="mp-card__tag">UX/UI</li>
|
||
<li class="mp-card__tag">Web App</li>
|
||
</ul>
|
||
<p class="mp-card__desc">An interface for training and using AI models in business processes: working with data, automation scenarios, and 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" href="../lunacy/" aria-label="Lunacy Image Editor — Open a Case">
|
||
<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="Project Type">
|
||
<li class="mp-card__tag">UX/UI</li>
|
||
<li class="mp-card__tag">Desktop App</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Worked on the Lunacy interface as part of the Icons8 team: user flow, complex prototypes, and improvements to functionality and interface logic.</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" href="../manu-game-maker/" aria-label="MANU Game Engine — Open a Case">
|
||
<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 Game Engine</h3>
|
||
<ul class="mp-card__tags" aria-label="Project Type">
|
||
<li class="mp-card__tag">Product Design</li>
|
||
<li class="mp-card__tag">Desktop App</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Redesign and development of the game engine’s user interface: a new operational concept, an updated visual system, and the development of hundreds of complex user scenarios.</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" href="../mobile-clinic-app/" aria-label="Mobile app for a network of clinics — open a case">
|
||
<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">Mobile app for a network of clinics</h3>
|
||
<ul class="mp-card__tags" aria-label="Project Type">
|
||
<li class="mp-card__tag">UX/UI</li>
|
||
<li class="mp-card__tag">Mobile App</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Design of a mobile app for scheduling doctor appointments and managing medical services. Focus on a simple user journey, intuitive navigation, and quick access to necessary actions.</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" href="../orc-automation-panel/" aria-label="Web Panel for Automation Orchestration — Open a Case">
|
||
<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="Project Type">
|
||
<li class="mp-card__tag">Mentoring and Coaching</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Primo RPA orchestrator’s web dashboard: projects, deployment, and monitoring of RPA robots. Redesign of key screens for production without interrupting releases.</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" href="../task-distribution-concept/" aria-label="The concept of a task-assignment service—open a case">
|
||
<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">Task Distribution Service Concept</h3>
|
||
<ul class="mp-card__tags" aria-label="Project Type">
|
||
<li class="mp-card__tag">UX/UI</li>
|
||
<li class="mp-card__tag">Analytics</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Product concept for a service to create, assign, and track tasks, with an emphasis on process transparency and seamless teamwork.</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" href="../task-tracker/" aria-label="Task Tracker for the Back-Office System — Open a Case">
|
||
<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">Task tracker for a back-office system</h3>
|
||
<ul class="mp-card__tags" aria-label="Project Type">
|
||
<li class="mp-card__tag">Product Design</li>
|
||
<li class="mp-card__tag">Web App</li>
|
||
</ul>
|
||
<p class="mp-card__desc">An interface for planning and assigning tasks in the operations department: shared pool, personal to-do list, overview by assignee; tabs, filters, board/list/table views, and drag-and-drop functionality.</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">Portfolio</h2>
|
||
<div class="projects__controls" aria-label="Portfolio card navigation">
|
||
<button type="button" class="projects__nav-btn" data-projects-prev aria-label="Scroll left" 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="Scroll right" 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" data-glass="false" href="../orc-automation-panel/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Web panel for automation orchestration</h3>
|
||
<p class="portfolio-card__summary">
|
||
Primo RPA orchestrator web console: projects, launch and control of RPA bots. Redesign of key screens for production without halting releases.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<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" data-glass="false" href="../ai-platform-primo-rpa/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Platform for working with AI</h3>
|
||
<p class="portfolio-card__summary">
|
||
Interface for training and using AI models in business processes: data work, automation scenarios, and Smart OCR.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<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" data-glass="false" href="../task-tracker/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Task tracker for a back-office system</h3>
|
||
<p class="portfolio-card__summary">
|
||
Interface for planning and distributing tasks in the operations department: shared pool, personal ToDo, per-assignee overview; tabs, filters, board / list / table views, drag & drop.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<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" data-glass="false" href="../manu-game-maker/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">MANU game engine</h3>
|
||
<p class="portfolio-card__summary">
|
||
Redesign and evolution of the game engine interface: a new working concept, refreshed visual system, and hundreds of complex user scenarios worked through.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<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" data-glass="false" href="../lunacy/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Graphics editor Lunacy</h3>
|
||
<p class="portfolio-card__summary">
|
||
Work on the Lunacy interface at Icons8: user flows, complex prototypes, improved functionality and interface logic.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<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" data-glass="false" href="../mobile-clinic-app/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Mobile app for a clinic network</h3>
|
||
<p class="portfolio-card__summary">
|
||
Design of a mobile app for booking doctors and managing medical services. Focus on a simple user path, clear navigation, and quick access to the right actions.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<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" data-glass="false" href="../task-distribution-concept/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Task distribution service concept</h3>
|
||
<p class="portfolio-card__summary">
|
||
A product concept for a service to set, distribute and track tasks, with emphasis on process transparency and comfortable teamwork.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<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" data-glass="false" href="../obsidian-plugin-columns-view/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Columns view — plugin for Obsidian</h3>
|
||
<p class="portfolio-card__summary">
|
||
Interface for multi-column note work: convenient navigation, filtering and column-view settings right inside the Obsidian editor.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<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="Scroll portfolio left"
|
||
></button>
|
||
<button
|
||
type="button"
|
||
class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
|
||
data-projects-edge-next
|
||
aria-label="Scroll portfolio right"
|
||
></button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact" class="section section--surface section--footerish" data-reveal>
|
||
<div class="section__inner">
|
||
<h2 class="section__title">Contact</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">I'll reply today</span></span></a></li>
|
||
<li><a class="contact-card contact-card--link contact-card--brand-whatsapp" href="https://wa.me/qr/E2AWW5ZHE3ANJ1" 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/whatsapp.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">WhatsApp</span><span class="contact-card__hint">Stable connection</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="Copy address" aria-label="Copy email address to clipboard"><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">Email</span><span class="contact-card__hint" data-contact-copy-hint>Copy address</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">Website design and development — Nikolay Mamadaev</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 policy</a></span> ·<span class="footer__chunk footer__chunk--lang"><span class="footer__sep" aria-hidden="true">
|
||
</span><nav class="lang-switch" aria-label="Choose language" data-lang-switch>
|
||
<a class="lang-switch__btn" data-lang="ru" href="/">Русский</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">
|
||
This site uses cookies to ensure a smooth user experience. For more information, see the
|
||
<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>Accept</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>
|