Wprowadzenie
Kontekst projektu
Projekt obejmuje redesign strony głównej bloga Fittrain.pl, przygotowany na potrzeby zadania rekrutacyjnego.
Celem projektu było uporządkowanie struktury strony oraz poprawa odbioru treści bez ingerencji w ich zawartość.
Projekt koncentruje się na pracy z istniejącymi materiałami, poprawie hierarchii wizualnej oraz wskazaniu kierunku zmian, które mogą wpłynąć na czytelność i nawigację. Wszystkie treści zostały zachowane w oryginalnej formie, a materiały graficzne ujednoliciłam wizualnie i dopasowałam do nowego układu, wykorzystując narzędzia AI.
Wszystkie rozwiązania zostały opracowane w ramach zadania rekrutacyjnego i pokazują kierunek zmian, a nie finalną wersję wdrożeniową.
TYP Projektu
Redesign strony głównej bloga
Strona www
www.fittrain.pl
Narzędzie
WordPress + Elementor
Motyw
Astra Free
Przed i po
Strona główna
Projekt redesignu strony głównej skupia się na uporządkowaniu struktury, poprawie czytelności oraz lepszym prowadzeniu użytkownika przez treści.
Strona główna została zaprojektowana jako uporządkowana ścieżka, która pomaga użytkownikowi szybko odnaleźć się w strukturze strony i przejść do interesujących go treści.
Układ opiera się na logicznym przejściu od ogólnego kontekstu, przez dostępne obszary tematyczne, aż po konkretne materiały.
Najważniejsze zmiany koncentrują się na trzech obszarach:.
Czytelność treści
Poprawa hierarchii wizualnej i sposobu prezentacji dłuższych treści
Struktura strony
Wyraźny podział na sekcje i uporządkowanie układu
Prowadzenie użytkownika
Uporządkowanie rozmieszczenia sekcji i elementów, które ułatwia poruszanie się po stronie.
Przed i po
Sekcja Hero
Przed zmianami
- Nieprawidłowe proporcje między kolumną tekstową a grafiką zaburzają równowagę sekcji.
- Niespójne odstępy między nagłówkiem, opisem i przyciskiem utrudniają czytelność.
- CTA ma niski kontrast i nie wyróżnia się jako element akcji.
- Zdjęcie jest nienaturalnie wycięte i nieintegruje się z tłem.
- Brak spójnej siatki i wyrównania elementów powoduje wrażenie przypadkowego układu.
Po zmianch
Przebudowa kompozycji:
Wprowadziłam nową typografię, zbalansowany układ elementów i dostosowałam proporcje między tekstem a grafiką, eliminując wizualną nierównowagę.
Wzmocnienie CTA
Zastąpiłam mało widoczny, szary przycisk wyraźnym, kontrastowym elementem. Dzięki temu ścieżka konwersji stała się intuicyjna – użytkownik od razu wie, jaki krok powinien wykonać po wejściu na stronę.
Optymalizacja odstępów
Uporządkowałam marginesy i wyrównałam elementy. Poprawiło to czytelność treści oraz wyeliminowało wrażenie przypadkowego układu elementów.
Poprawa materiałów wizualnych
Zrezygnowałam z nienaturalnie wyciętej postaci na rzecz zdjęcia osadzonego w kontekście siłowni. Buduje to autentyczność i profesjonalny charakter sekcji Hero.
Przed i po
Sekcja wprowadzajaca
Przed zmianami
- Sekcja znajduje się zbyt nisko na stronie, przez co traci swoją funkcję wprowadzenia.
- Brak wyraźnej hierarchii utrudnia szybkie zeskanowanie treści.
- Ikony sugerują interaktywność, ale nie są klikalne, co wprowadza użytkownika w błąd.
- Zdjęcie jest nienaturalnie wycięte
- Ikony są niespójne wizualnie i nieproporcjonalne względem siebie.
Po zmianch
Optymalizacja struktury
Przeniosłam sekcję wyżej, aby pełniła funkcję wprowadzenia do treści strony. Dzięki temu najważniejsze argumenty,są widoczne natychmiast, a nie dopiero po długim scrollowaniu.
Uporządkowana hierarchia treści
Treść została podzielona na krótsze bloki i wzbogacona o wyróżnienia kluczowych fragmentów, co poprawia czytelność i umożliwia szybkie skanowanie.
Optymalizacja odstępów
Uporządkowałam marginesy i wyrównałam elementy. Poprawiło to czytelność treści oraz wyeliminowało wrażenie przypadkowego układu elementów.
Poprawa materiałów wizualnych
Zrezygnowałam z nienaturalnie wyciętej postaci na rzecz zdjęcia osadzonego w kontekście siłowni. Ujednoliciłam styl ikon i dopasowałam je do proporcji layoutu.
Przed i po
Sekcja blogowa
Przed zmianami
- Przytłaczający grid zdjęć. Zbyt duża liczba małych, ciasno ułożonych kafelków sprawia, że użytkownik czuje się przytłoczony
- Okładki artykułów są estetyczne, ale nie wspierają czytelności i szybkiego skanowania treści.
- Brak filtracji i kategoryzacji. Użytkownik nie ma możliwości szybkiego przesiania treści, co zmusza go do żmudnego przeglądania wszystkiego po kolei.
- Brak wyraźnych przycisków zachęcających do kliknięcia; użytkownik musi domyślać się, że zdjęcie jest linkiem.
Po zmianch
Inteligentna ekspozycja i filtrowanie
Zastąpiłam przeładowaną listę wpisów przejrzystym gridem z funkcją filtrowania kategorii oraz przyciskiem „Załaduj więcej”. Dzięki temu użytkownik błyskawicznie dociera do interesujących go treści bez odświeżania strony, co znacząco poprawia wydajność witryny i wygodę przeglądania.
Uporządkowany wizualnie grid
Zastosowałam spójne marginesy i odstępy między kafelkami oraz sekcjami. Nowy grid sprawia, że strona wygląda nowocześnie, a czytelnik może skupić wzrok na konkretnym temacie bez wizualnego szumu.
Poprawa kontrastu i typografii
Umieściłam tytuły pod zdjęciami na czystym tle, co znacząco poprawiło czytelność.
Aktywne CTA pod wpisami
Każdy artykuł otrzymał jasną zachętę do lektury. Wprowadzenie przycisków akcji realnie skraca ścieżkę użytkownika i zwiększa szansę na przejście do pełnej treści artykułu, co wspiera główny cel bloga.
Przed i po
Sekcja CTA
Przed zmianami
- Sekcja nie wygląda jak CTA i bardziej przypomina zwykły blok tekstu niż element akcji.
- Brak przycisku CTA sprawia, że użytkownik nie otrzymuje jasnej wskazówki, co powinien zrobić dalej.
- Brak wyróżnienia wizualnego sekcji powoduje, że sekcja łatwo ginie w strukturze strony.
- Linki w sekcji „Polecamy także” są podane w chaotyczny sposób i trudne do przeskanowania.
- Brak odstępów po bokach i między elementami powoduje wizualny chaos i obniża czytelność.
Po zmianch
Jasne CTA
Przekształciłam sekcję w wyraźny blok z czytelnym komunikatem i jednoznacznym celem. Dodałam kontrastowy przycisk, który jasno wskazuje użytkownikowi kolejny krok.
Poprawiona struktura sekcji „Polecamy także"
Uporządkowałam sekcję „Polecamy także”, wprowadzając czytelny podział na kategorie i lepszą strukturę listy artykułów. Poprawiłam czytelność linków poprzez wyraźniejsze nagłówki kategorii i lepsze rozłożenie treści w kolumnach.
Optymalizacja marginesów
Wprowadziłam spójne odstępy i siatkę, co poprawiło przejrzystość i komfort przeglądania treści.
Podsumowanie
Ten projekt pokazuje moje podejście do pracy z serwisami opartymi na treściach.
W tym przypadku kluczowe było dla mnie pokazanie, że nawet bez tworzenia nowych materiałów można znacząco poprawić działanie strony – poprzez lepszą organizację, hierarchię i prowadzenie użytkownika.
To podejście pozwala projektować strony, które nie tylko dobrze wyglądają, ale przede wszystkim są skuteczne i pomagają użytkownikowi szybciej znaleźć to, czego szuka, i zwiększają szansę na wykonanie kolejnego kroku.
