ITИглика Трифонова

SOFTUNI CREATIVE · UI DESIGN CASE STUDY

Виж Figma ↗

UI DESIGN · АПРИЛ 2026 · ЛИЧЕН ПРОЕКТ

PET HUB
ZONE

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

РОЛЯUI DesignerФОКУСJourney · System · Responsive UIРЕЗУЛТАТ6.00 / 6.00
Курсът ↗Прочети историята ↓
Оригиналната корица на Pet Hub Zone от UI Design проекта във Figma
ORIGINAL FIGMA COVER PET HUB ZONE · UI DESIGN
01 ЛИЧНАТА ИСТОРИЯ

ОТ ГРИЖАТА
КЪМ ЯСЕН
ИНТЕРФЕЙС.

След UX проекта за DogHubZone исках да продължа темата за животните, но този път да реша по-широк визуален проблем: как много различни услуги, обяви и общност да живеят в един продукт, без той да изглежда претрупан.

Pet Hub Zone е много личен за мен, защото съчетава две мои посоки — грижата към животните и желанието ми да превръщам сложната информация в нещо човешко и разбираемо. Не исках просто „сладък“ сайт. Исках уверен продукт, в който снимките носят емоцията, а системата зад тях помага на човека да вземе решение.

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

ПРЕДИЗВИКАТЕЛСТВО

Много нужди. Един продукт.

Осиновяване, услуги, обяви, карта, блог и общност трябваше да имат общ визуален език.

ХОРА

Стопани, специалисти и семейства

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

МОЯТА ЦЕЛ

Топло, но уверено преживяване

Да създам емоционална идентичност с ясна йерархия, контраст и предвидими действия.

02 ПОТРЕБИТЕЛСКО ПЪТЕШЕСТВИЕ

ЕДНА НУЖДА.
ПЕТ ЯСНИ СТЪПКИ.

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

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

  1. 01

    Ориентиране

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

  2. 02

    Категория

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

  3. 03

    Сравнение

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

  4. 04

    Доверие

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

  5. 05

    Контакт

    Пътят завършва с конкретно действие — съобщение или обаждане — без потребителят да губи контекста си.

Реалният user flow на Pet Hub Zone
REAL PROJECT ARTIFACT · USER FLOWНачало → категории → обяви → детайл → контакт
03 MOODBOARD И ВИЗУАЛНА ПОСОКА

ТОПЛИНА.
ДОВЕРИЕ.
ЖИВА ЕНЕРГИЯ.

Moodboard-ът ми събра естествени снимки, меки кремави повърхности, енергично оранжево, закръглени форми и лапата като разпознаваем мотив.

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

Куче и логото Pet Hub Zone
Детайл от началната страница на Pet Hub Zone

01 Човешко

02 Достъпно

03 Жизнено

04 Подредено

#FF832A#FFC193#F8FDE3#272727
04 ДИЗАЙН СИСТЕМА

ЕДИН ЕЗИК.
МНОГО СЪСТОЯНИЯ.

Изградих основата с цветови теми, типографска скала, бутони, полета за търсене, category cards и listing cards.

Вариантите не са декоративни дубликати. Те показват как един компонент се държи в различен контекст — primary, secondary, hover, pressed и различно съдържание.

Оригиналната цветова система от Figma
01 · COLOR THEMESPrimary, base и semantic accents
Оригиналната типографска система от Figma
02 · TYPOGRAPHYInter за интерфейса · Poppins за характер
Оригиналните бутони, търсене и карти от Figma
03 · UI COMPONENTSButtons, search, category cards и listing cards
01

Йерархия

Всяка секция има един доминиращ въпрос и едно ясно основно действие.

02

Контраст

Тъмният текст върху кремави повърхности и наситеното оранжево пазят четимостта и фокуса.

03

Композиция

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

04

Информация

Повтарящите се card patterns правят категориите, услугите и обявите предвидими.

05

Responsive

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

06

Достъпност

Ясни CTA етикети, видими граници, големи интерактивни зони и последователна типографска скала.

05 КЛЮЧОВИ UI ЕКРАНИ

ОТ СИСТЕМАТА
КЪМ ИСТИНСКИ ПРОДУКТ.

UI екраните следват същия journey, moodboard и component language. За case study-то показвам трите екрана, които най-ясно разказват основния поток.

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

Начална страница на Pet Hub Zone
01

HOME · DISCOVERY

Начална страница

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

Обяви и категории на Pet Hub Zone
02

MARKETPLACE · FILTER

Обяви и категории

Маркетплейсът разделя откриването от прецизния избор. Категориите дават бърза посока, а филтрите, картите и пагинацията позволяват сравнение без информационен шум.

Детайл на обява на Pet Hub Zone
03

LISTING · TRUST

Детайл на обява

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

06 РЕЗУЛТАТ И ЛИЧНА РАВНОСМЕТКА

ФИНАЛНА ОЦЕНКА

6.00/ 6.00

UI Design · SoftUni Creative
април 2026

КОМЕНТАР · ИЗПИТ ПРАКТИКА

„Потребителското пътешествие е детайлно представено. Логично е и се проследява лесно. Moodboard-ът е детайлен и отговаря на темата. Дизайн системата е много добре представена и съдържа всички задължителни елементи. UI екраните отговарят на потребителското пътешествие, moodboard-a и темата. В проекта присъстват нужния брой екрани. Има яснота и интуитивност в дизайна и информационната архитектура. Постигнат е добър контраст и четимост в интерфейсите. Интерфейсите са естетически издържани.“

КАКВО НАУЧИХ

Красивото има нужда от причина.

Научих се да свързвам moodboard-а с реални правила, user journey-то с информационната архитектура, а компонентите с конкретни състояния. Това ми помогна да виждам проекта като система, а не като поредица от страници.

КАКВО БИХ ПОДОБРИЛА ДНЕС

По-малко украса. Още повече яснота.

Бих изчистила някои декоративни форми, бих уеднаквила езика и именуването на компонентите, бих превърнала responsive стойностите в tokens и бих тествала ключовия поток с повече хора.

СЛЕДВАЩАТА СТЪПКА

От UI проект към зряла дизайн система.

През май продължих да развивам Pet Hub Zone в курса UI Design Systems — с по-дълбока компонентна библиотека, документация и системна логика.

Виж следващия етап ↗
Сертификат UI Design - April 2026 с оценка 6.00 от 6.00

07 · СЕРТИФИКАТ

UI DESIGN
APRIL 2026

Сертификатът е издаден на 1 юни 2026 г. след успешно завършен курс с оценка 6.00 / 6.00. Програмата включва design research, UI йерархия и композиция, responsive и native mobile UI, design systems, accessibility testing и development handoff.

Отвори сертификата ↗Провери валидността ↗