ui/ux Drugi projekt UI/UX w Figmie dla aplikacji internetowej

[Akasiek]

Cześć wszystkim!

Chciałbym przedstawić mój drugi prawdziwy projekt UI/UX stworzony w Figmie. Taki background: projekt miał przedstawiać aplikację internetową, która, miej więcej, jest kompedium wiedzy o muzyce Rockowej i Metalowej. UI/UX stworzyłem w Figmie, a cała aplikacja jest oparta na framework'u PHP - Yii2.

Przy projektowaniu myślałem głównie o wersji desktopowej i tylko taką wykonałem w Figmie. Natomiast, na stronie Live Demo jest dostępna również wersja mobilna.

Projekt na Behance:

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

• Zaloguj się
• lub
• Zarejestruj się

Wersja Live Demo strony:

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

• Zaloguj się
• lub
• Zarejestruj się

Parę screenów umieszczę poniżej. Od razu mówię, że nie zawierają one sidebar'a, który zajmuje dość dużą prawą część ekranu. Polecam zobaczyć projekt na Behance

Logo i paleta:

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

• Zaloguj się
• lub
• Zarejestruj się

Strona główna:

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

• Zaloguj się
• lub
• Zarejestruj się

Strona albumu:

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

• Zaloguj się
• lub
• Zarejestruj się

Strona artysty / zespołu:

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

• Zaloguj się
• lub
• Zarejestruj się

Profil użytkownika:

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

• Zaloguj się
• lub
• Zarejestruj się

 

Pozdrawiam!

Edytowane 26 Lipca 2022 przez Akasiek
Dodałem informacje o mobilnej wersji

[Damian]

Cześć @Akasiek,

jak na drugi projekt nie jest źle. Widać, że masz poczucie estetyki, a to jest jedna z kluczowych cech dobrego projektanta. Projekt jest ubogi w UX, ale skoro to dopiero drugie podejście, to nie ma co się czepiać nawet. Dbaj też o szczegóły. Raz stosujesz border radius, raz nie. Trzeba być konsekwentnym w projektowaniu i iść według opracowanego design systemu dla danej pracy. 

Dla lepszego rezultatu, możesz sobie najpierw naszkicować wireframe na kartce. W tym temacie 

znajdziesz gotowe szablony do wydrukowania. To jest serio przydatne. Podczas takiego szkicowania bardziej się zastanowisz nad rozwiązaniami.

[Akasiek]

@Damian dzięki za odpowiedź i parę dobry rad. Tak ode mnie parę słów odnośnie border radius. Próbowałem być konsekwentny, ale przy okładkach albumów po prostu nie mogę ich zaokrąglić. Moje sumienie mi na to nie pozwala i dlatego tam jest ostro. No, ale cóż. Może trzeba było zostać wszędzie przy ostrych kątach.

Na pewno poczytam o wireframe'ach. Dzięki za podesłanie linku!