RUUA (обрано)ENSK
Написати (відкриється в новій вкладці)

Аркуш 01 Вступ

Сам малюю. Сам збираю.

Дизайн і розробка сайтів, Telegram-ботів і Mini Apps — однією людиною. Макет не йде «іншому розробнику», тому продукт виглядає саме так, як на ескізі.

Написати в Telegram (відкриється в новій вкладці) Дивитися роботи
Роблю
Сайти й лендинги
Telegram-боти
Mini Apps
Анімацію інтерфейсів
Готовий головний екран Mini App барбершопу в темній темі
360R2467
Рис. 1. Головний екран Mini App «Барбершоп на Прикладній». Ліворуч ескіз, праворуч зібраний екран — потягніть розділювач.

Аркуш 02 Роботи

Роботи

Чотири проєкти. Усі відкриваються за посиланням і працюють без Telegram і реєстрації.

Аркуш 02.1. Запис екрана

02.1 Telegram Mini App і бот

Барбершоп на Прикладній

Запис до майстра в три кроки прямо в Telegram. Міні-застосунок і бот працюють з однією базою: запис, зроблений у чаті, видно в застосунку, і навпаки.

ПлатформаTelegram Mini App і бот
Екрани8: головна, мої записи, контакти, три кроки запису, перевірка, талон
Темисвітла й темна, підлаштовуються під Telegram; 4 палітри
Склоblur 16 px лише на навігації — так не гальмує на iPhone
Переходи110–190 мс
Мовиукраїнська, англійська, словацька, російська — з валютою ₴, $, €
СтекHTML, CSS, JS · Python, aiogram 3, aiohttp · SQLite
Відкрити демо (відкриється в новій вкладці) barbershop.anorrodev.tech

Сценарій запису

5 екранів, 3 кроки

  1. 1Послуга

  2. 2Майстер

  3. 3Час

  4. 4Перевірка

  5. 5Готово

  1. Прогрес «крок 1 з 3» завжди на виду.

  2. «Будь-який майстер» — одразу всі вільні вікна.

  3. Доплату за топ-майстра видно до вибору, а не в чеку.

  4. Крапка під датою — є вікна; закреслена — усе зайнято.

  5. Час розбито на ранок, день і вечір.

  6. Після запису «друкується» талон — як чек із принтера.

02.2 Веб-концепт того самого запису

«Стовп»

Без екранів і вкладок: увесь розклад намотано на 3D-стовп барбершопу. Крутіть спіраль, ковпаками обирайте послугу й майстра, потягніть ланцюжок — і вас записано.

Платформавеб: телефон і десктоп
Малюванняcanvas 2D, інерція й доводка до вільного слота
ШрифтRoboto Flex: ширина цифр залежить від швидкості обертання
Доступністькожен жест продубльовано кнопкою й клавіатурою
СтекJavaScript, Canvas 2D, View Transitions
Відкрити демо (відкриється в новій вкладці) …/pole

  1. Верхній ковпак — вибір послуги.

  2. Лупа збільшує слот навпроти часу.

  3. Спіраль — це розклад: виток — один робочий день, сегмент — 30 хвилин. Червоне — вільно.

  4. Нижній ковпак — вибір майстра.

  5. Потягніть ланцюжок — засвітиться лампа, талон полетить у «Мої».

  6. Цифри розтягуються, поки стовп крутиться.

  7. Те саме — кнопками й з клавіатури.

Десктопна версія «Стовпа»: час 10:00 і стовп із розкладом
Аркуш 02.2. Той самий запис на телефоні: стовп крутиться пальцем.

02.3 Замовлення з собою й екран баристи

Кав’ярня «Зерно»

Дві сторони однієї системи. Гість у Telegram збирає напій — розріз стаканчика перебудовується на очах, — обирає час і платить на касі. Замовлення одразу друкується в баристи, а «готово» з планшета повертається гостеві сповіщенням.

ПлатформаTelegram Mini App гостя й веб-екран баристи для планшета
Зв’язокзамовлення одразу на планшеті, «готово» — назад гостеві; у демо без сервера
Конструкторрозріз стаканчика з рецепта: шари в мілілітрах, розмір змінює стаканчик
TelegramMainButton, BackButton, вібрація, тема й колір шапки
Мовиукраїнська, англійська, словацька, російська — з валютою ₴, $, €
СтекHTML, CSS, JS без фреймворків · SVG · Telegram Mini Apps API
Відкрити демо (відкриється в новій вкладці) coffee.anorrodev.tech

  1. Нове замовлення «друкується» на рейці, як чек на кухні.

  2. Синя смуга й мітка — замовлення прийшло з Mini App гостя.

  3. Таймер червоніє, якщо замовлення чекає довше трьох хвилин.

  4. «Готово» — і гість одразу отримує сповіщення.

  5. Зміна: пауза прийому й стоп-лист — «закінчилося» одразу зникає в гостя.

Екран баристи: талони в колонках «Нові», «Готуємо» й «Готово»
Mini App гостя: лате в розрізі — піна, вівсяне молоко, еспресо й сироп у мілілітрах
Аркуш 02.3. Mini App гостя: розмір, молоко й сироп перебудовують розріз стаканчика.
Панель власника на екрані ноутбука: Z-звіт на касовій стрічці, виторг по днях і години пік
Аркуш 02.3/2. Екран 1440 × 900, як у 14-дюймового ноутбука. На телефоні панель складається в одну колонку.

  1. Касова стрічка — Z-звіт за період; зростання й падіння позначені знаком, а не лише кольором.

  2. Пунктир — попередній період, кружечки — події на кшталт «закінчилося вівсяне» з оцінкою втрат.

  3. Точка й період зберігаються в адресі: посиланням на потрібний звіт можна поділитися.

  4. Допродажі на касі та в Mini App поруч — видно, скільки приносить конструктор напою.

02.3/2 Дод. аркуш · бік власника

Панель власника

Та сама кав’ярня очима власника: виторг трьох точок, години пік, допродажі через Mini App і швидкість бару. Дані вигадані, але живі — замовлення з демо Mini App одразу потрапляє в «Сьогодні» та в Z-звіт.

Платформавебпанель для ноутбука й телефона, відкривається і в Telegram
Графікивласні, на SVG, без бібліотек: стовпчики, теплова карта, гістограма
Даніпродажі трьох точок за два роки по годинах, експорт у CSV
Відкрити панель (відкриється в новій вкладці) coffee.anorrodev.tech/owner

02.4 Лендинг шиномонтажу · три виконання

Шиномонтаж «Dezén»

Один бриф — три різні сайти. Шиномонтажу потрібно, щоб клієнт одразу бачив ціну й записувався без дзвінка. Я зібрав це в трьох виконаннях з різним характером: замовник обирає настрій, а не колір кнопки.

Спробувати всі три dezen.anorrodev.tech
Платформасайт-лендинг: телефон і десктоп
Виконаннятри дизайни на одному контенті: «Дорога», «Преміум», «Піт-стоп»
Мовисловацька, українська, англійська, російська — у кожної своя валюта (€, ₴, $), адреса й формат номера авто
Усерединізапис на вільний час, ціна за розміром диска, відлік до сезону, шинний готель
Фотозгенеровані нейромережею під кожен дизайн, без фотостоків
СтекHTML, CSS, JS без фреймворків · SVG · збірка на Python
Аркуш 02.4. Один перший екран — три виконання. Натисніть будь-яке, щоб спробувати його наживо; на комп’ютері виконання розкривається під курсором.
  1. Телефон: код шини 205/55 R16 91V розібрано виносками на боковині

    Виконання 1

    «Дорога»

    Розмітка й протектор. Улітку світлий бетон, узимку нічний асфальт — сезон перемикає тему. Код із боковини шини розбирається просто на кресленні.

    Кольори
    #F2B705 #ECE9E2 #151515 #8FD0F7
    Шрифти
    Fira Sans Extra Condensed · Fira Mono
    Спробувати тут Відкрити сайт (відкриється в новій вкладці)
  2. Телефон: майстер запису, крок 1 — вибір послуги з ціною

    Виконання 2

    «Преміум»

    Фото, рейтинг і швидкий запис просто на першому екрані. Спокійний графіт і червона кнопка — для тих, хто обирає сервіс за довірою. Запис — майстер у три кроки.

    Кольори
    #0F172A #DC2626 #F4F5F7 #FFFFFF
    Шрифти
    Inter Tight · Inter
    Спробувати тут Відкрити сайт (відкриється в новій вкладці)
  3. Телефон: лаймовий талон запису з кодом боксу

    Виконання 3

    «Піт-стоп»

    Чорний, лайм і величезний шрифт. Секундомір на першому екрані, біжучий рядок, запис одним екраном — і лаймовий талон із кодом.

    Кольори
    #0A0A0A #CCFF00 #EDEDED #6B6B6B
    Шрифти
    Dela Gothic One · Rubik
    Спробувати тут Відкрити сайт (відкриється в новій вкладці)

02.5 Вільний аркуш

Тут буде ваш проєкт

Сайт, магазин чи запис у Telegram, бот для команди — або ідея, яка ще не має назви. Розкажіть, що задумали: намалюю, зберу й покажу за посиланням.

Обговорити проєкт (відкриється в новій вкладці)

Аркуш 03 Про мене

Про мене

Я anorroDev — дизайнер, який пише код. Веду проєкт від першого ескізу до запуску: продумую, як він виглядає й відчувається, збираю й викладаю.

Люблю Telegram Mini Apps та інтерфейси з характером: скло, світло, інерцію. І так само уважно ставлюся до невидимої частини — бота, бази даних, сервера.

Умовні позначення

  • Суцільна лінія — те, що бачать люди: інтерфейс, анімація, написи на кнопках.

  • Штрихова лінія — те, що під капотом: бот, база даних, сервер, публікація.

  • Штрихпунктирна — вісь — шлях людини від першого екрана до запису чи покупки.

  • Червона лінія — виправлення. Вношу їх сам, поки ніхто не помітив.

Специфікація

Поз.РозділСкладНавіщо
1Дизайнінтерфейси, дизайн-системи, прототипияк продукт виглядає й відчувається
2ФронтендHTML, CSS, JavaScript, TypeScriptсайти й Mini Apps
3ФреймворкиReact, Next.js, Tailwindколи проєкт росте
4АнімаціяCSS, Canvas 2D, GSAP, View Transitionsрух, який пояснює
5TelegramBot API, Mini Appsботи й міні-застосунки
6СерверPython, aiogram 3, aiohttp, SQLiteлогіка бота й дані
7ПублікаціяGit, GitHub, Cloudflare Pages, Azureзапуск і оновлення

Технічні вимоги

  1. Інтерфейс має відчуватися живим — і не гальмувати на телефоні.
  2. Анімація пояснює, що сталося. Якщо не пояснює — її немає.
  3. Демо відкривається за посиланням, без реєстрації.
  4. Що намальовано, те й зібрано. Жодних «потім поправимо».

Аркуш 04 Відгуки

Відгуки

Зауваження замовників
№ЗауваженняЗамовникДата
1Поки порожньо: портфоліо щойно відкрилося. Перший рядок може бути вашим.
2
3
Стати першим замовником (відкриється в новій вкладці)

Аркуш 05 Контакти

Поговоримо?

Напишіть пару речень про проєкт — відповім і запропоную, з чого почати.

Написати в Telegram (відкриється в новій вкладці)
РозробивanorroDev
Telegram @anorroDev (відкриється в новій вкладці)
Пошта [email protected]
GitHubgithub.com/anorroDev (відкриється в новій вкладці)
Замовникви
Аркуш05 Аркушів05
Масштаб1:1 Дата2026

Стенд Шиномонтаж «Dezén»

У новій вкладці