SOFTUNI CREATIVE · CAPSTONE CASE STUDY

UI DESIGN IMPLEMENTATION · ЮНИ 2026 · CAPSTONE

IT·DESIGN

Най-пълният ми проект досега — мястото, в което събрах портфолио, дизайн система, реален продукт и интерактивен разказ в една последователна среда.

РОЛЯUX/UI DesignerОБХВАТPortfolio · System · PrototypeСТАТУСОценката се очаква

Отвори живия прототип ↗Figma файл ↗Виж процеса ↓

195

variables

Token architecture

component sets

Reusable logic

prototype screens

Real scenarios

starting points

Connected flows

WCAG 2.2 target

Accessible intent

01 ЛИЧНАТА ИСТОРИЯ

ТУК ВЕЧЕ НЕ
ПРАВЕХ ОЩЕ
ЕДИН ЕКРАН.

Изграждах система, която трябва да обясни коя съм, как мисля и как една идея стига до работещ интерфейс.

Това е финалният проект от обучението ми и най-добрият ми проект досега. В него не започнах от празен кадър. Започнах от всичко, което бях научила в Sleep Go, DogHubZone и Pet Hub Zone — и си поставих по-трудна задача: различните решения да звучат като една професионална история.

Исках файлът да бъде полезен не само за представяне. Затова подредих компонентите, вариантите, темите, екраните, движението и документацията така, че друг дизайнер или разработчик да може да проследи логиката им.

Най-личната част е пътят „преди · преход · обучение · сега“. Той показва не само крайния резултат, а промяната в начина, по който вземам решения — от интуитивното рисуване към осъзната продуктова система.

ЗАДАНИЕТО

Да събера цялата програма в завършено професионално портфолио.

01 Responsive web и mobile интерфейси
02 Дизайн система и прототипиране
03 Narrative и content-rich UI
04 WCAG и developer collaboration

02 СИСТЕМА, КОЯТО МОЖЕ ДА РАСТЕ

ОТ ТОКЕНА
ДО РЕАЛНИЯ
ПРОДУКТ.

Не търсех просто консистентност. Търсех ясна връзка между решение, компонент, екран и поведение.

Затова библиотеката съдържа не само готови елементи, а структура: правила, анатомия, състояния, теми и примери в контекст.

01PRIMITIVEScolor · space · radius · type

02SEMANTIC ROLESsurface · text · border · action

03COMPONENTSvariants · states · themes

04PRODUCT UIdesktop · tablet · mobile

ITDESIGN SYSTEMLIVE

BUTTONS

Пробвай hover, focus и active

Интеракцията е активна ✓

INPUT

Въведи имейл и виж валидацията

ИмейлНяма да го споделя с никого.

SELECTION

Избери активна област

IT · DESIGN · COMPONENT SYSTEM

Компоненти, които можеш да изпробваш

Това не е кадър от Pet Hub. Това е работеща мини версия на системата за IT · Design — с теми, реални състояния, валидация и избори.

LIVE CODED INTERACTION

Семантични токени

Отделих базовите стойности от ролите им в интерфейса, за да не зависи системата от случайни цветове и размери.

Light & Dark

Темите са част от архитектурата на системата. Един и същ компонент запазва логиката си, а визуалната роля се променя чрез токени.

Variant logic

Тип, размер, състояние и тема са ясно именувани, така че компонентите да бъдат предвидими и за дизайнер, и за разработчик.

Responsive поведение

Desktop, tablet и mobile не са механично свити версии. Подредбата и приоритетите се променят според реалния контекст.

Достъпност

Видим focus, достатъчен контраст, ясни labels и недвусмислени състояния са заложени още в компонентите.

Документация

Анатомията, правилата за употреба и примерите превръщат библиотеката от колекция в инструмент за работа.

03 PRODUCT PROOF

СИСТЕМАТА
РАБОТИ В
КОНТЕКСТ.

Самото IT · Design портфолио е доказателството, че системата не е само добре подредена витрина.

Превърнах основните части на портфолиото в работещ поток — от първото представяне, през уменията и проектите, до процеса и контакта. Можеш да го изпробваш директно тук.

● LIVE PORTFOLIO WALKTHROUGH

01 / 05

Пълният Figma прототип ↗

ITIT · Design

// ПЪРВО ВПЕЧАТЛЕНИЕ

Историята започва с характер.

Hero зоната представя личността ми, посоката ми и най-важното действие още в първия екран.

04 MOTION & NARRATIVE

ДВИЖЕНИЕ С ПРИЧИНА

НЕ Е ЕФЕКТ.
ТО Е ЧАСТ ОТ
РАЗКАЗА.

Използвах движение, за да водя вниманието и да показвам промяна — не за да украсявам екрана.

01 Typewriter разкрива името ми стъпка по стъпка.
02 Hero entrance подрежда йерархията при зареждане.
03 Glow маркира активната стъпка в user flow.
04 Motion вариантите са подготвени за dark/light и различни viewport-и.

Последователните кадри на typewriter анимацията на името Иглика Трифонова — TYPEWRITER STATES · DESKTOP · DARK

05 ЛИЧНА РАВНОСМЕТКА

НАЙ-ВАЖНИЯТ РЕЗУЛТАТ

ВЕЧЕ ВИЖДАМ
НЕ САМО КАК
ИЗГЛЕЖДА.

Виждам защо съществува, как се държи, как се повтаря и как ще бъде разбрано от следващия човек в процеса.

01 · КАКВО ПОКАЗВА ПРОЕКТЪТ

Системно мислене

Мога да свържа визуален език, tokens, компоненти, responsive екрани, прототип и documentation в една логика.

02 · КЪДЕ БЯХ НАЙ-СТРОГА

Именуване и състояния

Проверявах вариантите, отстоянията и поведението многократно, защото малката непоследователност бързо се умножава в голяма система.

03 · КАКВО БИХ НАДГРАДИЛА

Още реално тестване

Следващата ми стъпка е да тествам интерактивните patterns с повече хора и да превърна документацията в още по-пряк developer handoff.

04 · ЛИЧНО

„Това е проектът, в който за първи път видях целия си път като една система — не като отделни упражнения.“

06 · ОЦЕНЯВАНЕ И СЕРТИФИКАТ

LIVE STATUS

ОЧАКВА
СЕ.

Проектът е завършен и предаден. Когато получа оценката и сертификата, ще ги добавя тук, без да променям историята на case study-то.

ЗАВЪРШЕНОFigma файл и дизайн система✓

ЗАВЪРШЕНОResponsive екрани и прототип✓

ЗАВЪРШЕНОPortfolio narrative и presentation✓

ОЧАКВА СЕИзпитна оценка…

ОЧАКВА СЕСертификат…

Жив прототип ↗Figma файл ↗Виж курса ↗