Projektowanie strony w Figma UX/UI – MAKIETA UX cz.1 #4

👉 W tym odcinku kontynuujemy projektowanie makiety UX (low-fidelity) w Figma. Na bazie wcześniej przygotowanej dokumentacji, wniosków z warsztatu UX oraz sitemapy przechodzimy do pierwszego, roboczego układu ekranów — w szarościach, bez kolorów i „upiększania”. To moment, w którym strategia i architektura informacji przekładają się na realny układ strony. Większość kursów i tutoriali uczy projektowania „ładnych makiet”, które często nie mają odzwierciedlenia w rzeczywistości. W tym filmie pokazuję zupełnie inne podejście — projektowanie oparte na realnym biznesie, konkretnych potrzebach klienta i rzeczywistych ograniczeniach technologicznych. Zobaczysz pełny proces redesignu strony firmy Soft Fusion, zajmującej się rozwiązaniami IT i body leasingiem. To nie jest „design dla designu”. Przechodzimy przez cały proces projektowy: od strategii i wniosków z warsztatu UX, przez persony, Value Proposition Canvas i architekturę informacji, aż po makietę UX, design system, interaktywny prototyp i makietę UX/UI gotową do wdrożenia. W tym odcinku skupiamy się na przełożeniu sitemapy na realną strukturę ekranów oraz na projektowaniu makiety UX w szarościach (low-fidelity). Pokazuję, jak układać sekcje i elementy w taki sposób, aby wspierały ścieżkę użytkownika i cele biznesowe już na etapie makiety. Zwracamy również uwagę na myślenie o konwersji od samego początku oraz na pracę w oparciu o komponenty, które stanowią fundament pod dalszy rozwój design systemu. Na tym etapie makieta UX nie ma być „ładna” — jej zadaniem jest być czytelna, logiczna i gotowa do testowania. Dla kogo jest ten film? ➡️ Dla przyszłych projektantów UX/UI – zobaczysz, jak wygląda prawdziwa praca z klientem i jak tworzyć projekty, które nadają się do profesjonalnego portfolio. ➡️ Dla przedsiębiorców – dowiesz się, jak procesowe podejście do UX/UI może realnie wspierać Twoje cele biznesowe, zwiększać konwersję i porządkować sprzedaż. Projekt został zrealizowany pod moim mentoringiem przez Małgorzatę Rożek w ramach mojego kursu “Junior UX/UI Designer”. Sygnatury czasowe (Timestamps): 00:00 Sekcja “Opinie” 02:40 Sekcja “Co oferujemy dodatkowo?” 05:25 Sekcja “Case studies” 08:15 Sekcja “Technologie” 09:42 Sekcja “Nasz zespół” 07:47 Sekcja Hero 10:15 Sekcja „Jak możemy Ci pomóc?” 16:10 Sekcja „Co nas wyróżnia?” 20:40 Podgląd w trybie Prototype 21:20 Separatory między sekcjami 22:05 Finalne dopracowanie odstępów i wyrównania Projektowanie makiety UX jest jak szkic architektoniczny przed budową domu. Nie wybierasz jeszcze kolorów ścian ani mebli — sprawdzasz, czy układ pomieszczeń ma sens, czy da się wygodnie poruszać i czy wszystko jest tam, gdzie powinno. Dopiero na takim fundamencie warto budować finalny interfejs. 😉 – 👉 Zasubskrybuj kanał, jeśli chcesz zobaczyć pełny proces projektowania strony — od strategii, przez sitemapę i makiety UX, aż po gotowy interfejs do wdrożenia.