AI
AI
Insights
Insights
Redesign bloga AI
Redesign bloga AI
Redesign bloga AI
To samo zadanie, rok temu i teraz
To samo zadanie, rok temu i teraz
To samo zadanie, rok temu i teraz
UX/UI Design
UX/UI Design
Prototypowanie interaktywne
Prototypowanie interaktywne
Responsywny design
Responsywny design
Opis projektu
Opis projektu
W 2024 i 2025 roku otrzymałem to samo zadanie rekrutacyjne: miałem zaprojektować stronę główną bloga z newsami o AI. Dało mi to unikalną okazję, by ponownie zmierzyć się z tym samym wyzwaniem po roku i zastanowić się, jak rozwinęło się moje podejście do projektowania.
W 2024 i 2025 roku otrzymałem to samo zadanie rekrutacyjne: miałem zaprojektować stronę główną bloga z newsami o AI. Dało mi to unikalną okazję, by ponownie zmierzyć się z tym samym wyzwaniem po roku i zastanowić się, jak rozwinęło się moje podejście do projektowania.
Cel
Cel
Ten redesign ma na celu rozwiązanie ograniczeń poprzedniej wersji, wykorzystując mój rozwój przez ostatni rok, aby dostarczyć silniejszą hierarchię, lepszy kontrast, dostępność, responsywność i spójny system projektowy.
Ten redesign ma na celu rozwiązanie ograniczeń poprzedniej wersji, wykorzystując mój rozwój przez ostatni rok, aby dostarczyć silniejszą hierarchię, lepszy kontrast, dostępność, responsywność i spójny system projektowy.
Mój proces
Mój proces
Badania
Badania
Poszukiwanie inspiracji i aktualnych trendów w AI i technologii.
Eksploracja
Eksploracja
Burza mózgów z Figma Make dla znalezienia najlepszego punktu do rozpoczęcia designu.
Stylizacja
Stylizacja
Tworzenie style guide'ów które będą używane w całym projekcie.
Building type guide and color guide that to be used throughout the project
Projektowanie
Projektowanie
Decyzja o końcowym wyglądzie strony i budowanie layout'ów, komponentów itd.
Prototypowanie
Prototypowanie
Tworzenie prototypu dla usprawnienia testowania projektu.
Adaptacja
Adaptacja
Zapewnienie, że projekt prawidłowo skalować się na każdym urządzeniu.
Przed i po: Kluczowe zmiany
Przed i po: Kluczowe zmiany
Przed i po: Kluczowe zmiany
Moje wnioski z poprzedniego projektu i to, jak nowa wersja rozwiązuje jego błędy.
Moje wnioski z poprzedniego projektu i to, jak nowa wersja rozwiązuje jego błędy.
Moje wnioski z poprzedniego projektu i to, jak nowa wersja rozwiązuje jego błędy.
1.
1.
Kontrast i zgodność z WCAG
Kontrast i zgodność z WCAG
W poprzedniej wersji zauważyłem, jak słaby kontrast utrudniał czytelność i dostępność. W aktualizacji z 2025 roku priorytetowo potraktowałem jasność i zgodność z WCAG.
W poprzedniej wersji zauważyłem, jak słaby kontrast utrudniał czytelność i dostępność. W aktualizacji z 2025 roku priorytetowo potraktowałem jasność i zgodność z WCAG.
2024
2024
Zbyt mały kontrast - Niski współczynnik kontrastu oraz brak wypełnienia przycisków zmniejszają czytelność i nie spełniają standardów WCAG.
Zbyt mały kontrast - Niski współczynnik kontrastu oraz brak wypełnienia przycisków zmniejszają czytelność i nie spełniają standardów WCAG.
2025
2025
Odpowiedni kontrast - Silne oddzielenie kolorów i odpowiedni kontrast sprawiają, że przyciski
i teksty są łatwe widoczne i dostępne.
Odpowiedni kontrast - Silne oddzielenie kolorów i odpowiedni kontrast sprawiają, że przyciski
i teksty są łatwe widoczne i dostępne.
2.
2.
Sekcja hero
Sekcja hero
W wersji z 2024 roku strona główna nie miała sekcji hero
i łączyła wszystkie wiadomości w jednym layout'cie, co czyniło ją mniej angażującą. W 2025 roku wprowadziłem wyróżniony news jako sekcję hero, aby przyciągnąć uwagę, a sekcja z najnowszymi wiadomościami została przeniesiona poniżej dla lepszego flow.
W wersji z 2024 roku strona główna nie miała sekcji hero
i łączyła wszystkie wiadomości w jednym layout'cie, co czyniło ją mniej angażującą. W 2025 roku wprowadziłem wyróżniony news jako sekcję hero, aby przyciągnąć uwagę, a sekcja z najnowszymi wiadomościami została przeniesiona poniżej dla lepszego flow.
2024
2024
Brak sekcji hero - Wszystkie wiadomości upchane w jednej siatce, przestrzeń zmarnowana, mniej angażująca.
Brak sekcji hero - Wszystkie wiadomości upchane w jednej siatce, przestrzeń zmarnowana, mniej angażująca.
2025
2025
Wyróżniony news jako hero - wszystkie wiadomości upchane w jednej siatce, przestrzeń zmarnowana, mniej angażująca.
Wyróżniony news jako hero - wszystkie wiadomości upchane w jednej siatce, przestrzeń zmarnowana, mniej angażująca.
3.
3.
Układ i hierarchia
Układ i hierarchia
W moim poprzednim projekcie zbyt duże miniaturki zapełniały układ, a przycisk „Czytaj więcej” w formie samej ikony ograniczał dostępność. W wersji z 2025 roku usprawniłem layout, aby tytuły były czytelne, a interakcje bardziej widoczne, poprawiając hierarchię i zaangażowanie użytkownika, jednocześnie tworząc przestrzeń na dodatkowe funkcje, takie jak zapisanie lub udostępnienie news'ów
W moim poprzednim projekcie zbyt duże miniaturki zapełniały układ, a przycisk „Czytaj więcej” w formie samej ikony ograniczał dostępność. W wersji z 2025 roku usprawniłem layout, aby tytuły były czytelne, a interakcje bardziej widoczne, poprawiając hierarchię i zaangażowanie użytkownika, jednocześnie tworząc przestrzeń na dodatkowe funkcje, takie jak zapisanie lub udostępnienie news'ów
2024
2024
Słaby układ - Zbyt duże miniaturki zostawiają mało miejsca na tytuły; przycisk „Czytaj więcej” w formie samej ikony zmniejsza dostępność.
Słaby układ - Zbyt duże miniaturki zostawiają mało miejsca na tytuły; przycisk „Czytaj więcej” w formie samej ikony zmniejsza dostępność.
2025
2025
Odpowiedni układ - Zbalansowane miniaturki pozwalają na czytelne tytuły; widoczny przycisk „Czytaj więcej” zwiększa dostępność i zaangażowanie.
Odpowiedni układ - Zbalansowane miniaturki pozwalają na czytelne tytuły; widoczny przycisk „Czytaj więcej” zwiększa dostępność i zaangażowanie.
4.
4.
Responsywność i skalowanie
Responsywność i skalowanie
Wersja z 2024 roku była dostosowana tylko do układów desktopowych, co ograniczało użyteczność na innych urządzeniach. W wersji z 2025 roku skupiłem się na projektowaniu responsywnym, zapewniając, że układy płynnie dopasowują się do ekranów mobilnych i tabletów, zachowując czytelność i hierarchię sekcji.
Wersja z 2024 roku była dostosowana tylko do układów desktopowych, co ograniczało użyteczność na innych urządzeniach. W wersji z 2025 roku skupiłem się na projektowaniu responsywnym, zapewniając, że układy płynnie dopasowują się do ekranów mobilnych i tabletów, zachowując czytelność i hierarchię sekcji.
2024
2024
Brak responsywności - Układ dopasowany tylko do desktopu, co ogranicza użyteczność na mniejszych ekranach
Brak responsywności - Układ dopasowany tylko do desktopu, co ogranicza użyteczność na mniejszych ekranach
2025
2025
Responsive design across all devices - Adapts smoothly across desktop, tablet, and mobile for consistent clarity and hierarchy.
Responsive design across all devices - Adapts smoothly across desktop, tablet, and mobile for consistent clarity and hierarchy.
Zobacz projekty w akcji
Zobacz projekty w akcji
Zobacz projekty w akcji
Wybierz projekt, który chcesz otworzyć
w trybie pełnoekranowym
Wybierz projekt, który chcesz otworzyć w trybie pełnoekranowym
Wspólnie zróbmy coś genialnego
Wspólnie zróbmy coś genialnego
Skontaktuj się ze mną przez jedną z opcji poniżej