UI/UX: Aplikacja Sportowa
Koncepcja nowoczesnej aplikacji fitness stworzona w ramach pracowni interfejsów na Akademii Śląskiej. Projekt obejmuje autorski Design System w estetyce dark mode, zestaw kafelków biometrycznych oraz w pełni animowany prototyp w Figmie
z płynnymi przejściami Smart Animate i ekranem podsumowania GPS.
Projekty ekranów głównych
Podgląd z widoku użytkownika
Aplikacja Sportowa
O projekcie
Projekt interfejsu użytkownika (UI) oraz doświadczenia użytkownika (UX) dla mobilnej aplikacji treningowej wspierającej monitorowanie aktywności fizycznej w czasie rzeczywistym. Celem projektu było stworzenie czytelnego, nowoczesnego systemu wizualnego zoptymalizowanego pod kątem szybkiego odczytu parametrów podczas intensywnego ruchu (bieganie, kolarstwo, sporty zimowe), połączonego z w pełni funkcjonalnym, animowanym prototypem w Figmie.
Zakres prac
Architektura informacji i User Flow, przygotowanie kompleksowego Styleguide / Design Systemu, projekt ekranów w wariancie ciemnym, interaktywne prototypowanie, Motion Design
Oprogramowanie
Figma
Kategoria
UI/UX Design, Mobile App Design, Motion Design
Przebieg pracy
Architektura informacji i ścieżka użytkownika (User Flow)
Punktem wyjścia było zaplanowanie logicznej i minimalistycznej nawigacji opartej na dolnym pasku menu (Profile, Training, Statistics). Zaprojektowano przejrzystą listę aktywności obejmującą bieganie, bieżnię, kolarstwo, rolki czy pływanie, a także moduł powiadomienia
o ostatniej zrealizowanej sesji. Ekran profilu został podzielony na modularne kafelki zbierające kluczowe metryki biometryczne (wiek, wzrost, wagę, status członkostwa oraz cel treningowy).
Styleguide i Design System
Opracowano spójny przewodnik po stylach oparty na ciemnym motywie w odcieniach głębokiego fioletu i granatu, przełamany bielą oraz koralową pomarańczą akcji. Zdefiniowano przejrzystą hierarchię typograficzną gwarantującą czytelność w ruchu oraz stworzono bibliotekę komponentów obejmującą przyciski stanów, karty parametrów i piktogramy sportowe.
Ekrany treningowe i wizualizacja danych
Zaprojektowano kompletną ścieżkę aktywności obejmującą ekran przygotowawczy
z animowanym odliczaniem, aktywny pomiar dystansu i tętna wewnątrz świetlistego wskaźnika oraz intuicyjny stan pauzy. Proces zamyka ekran podsumowania z trasą na mapie GPS, kluczowymi metrykami sesji oraz opcją natychmiastowego powtórzenia treningu.
Interaktywne prototypowanie i zaawansowane animacje
Całość została spięta w Figmie w płynny prototyp z wykorzystaniem mechanizmu Smart Animate. Zaimplementowano płynne animacje odliczania startowego, miękkie przejścia między ekranami nawigacji, stany hover/pressed na przyciskach oraz animowane skalowanie wskaźników postępu. Pozwoliło to przetestować dynamikę aplikacji w warunkach zbliżonych do gotowego produktu programistycznego.
Rezultat
Powstał dopracowany, wysoce funkcjonalny projekt aplikacji mobilnej łączący estetykę nowoczesnego designu sportowego z rygorystycznymi zasadami użyteczności. Projekt udowadnia zaawansowaną znajomość narzędzia Figma, biegłość w tworzeniu skalowalnych systemów UI oraz umiejętność operowania ruchem w celu podniesienia jakości doświadczenia użytkownika.
