Kiedy miałem już strategię, domenę, identyfikację wizualną i uporządkowaną ofertę, mogłem przejść do budowania samej strony. Zanim jednak zacząłem pracę w systemie zarządzania treścią, na którym zamierzałem oprzeć serwis, czyli WordPressie, rozpisałem drogę użytkownika, od pierwszego kontaktu ze stroną, przez ofertę i materiały, aż do aktualności i kontaktu.
W tym momencie zależało mi na tym, żeby nie zaczynać od wyglądu. Łatwo wejść w wybieranie kolorów, układu bloków czy efektów, zanim wiadomo, co właściwie ma się wydarzyć po wejściu na stronę. Najpierw chciałem ustalić kolejność informacji i sprawdzić, czy całość prowadzi odbiorcę w logiczny sposób.
Po pierwsze porządek, po drugie wygląd
Punktem wyjścia był prosty podział na nagłówek, treść główną i stopkę. Ten układ dawał mi ramę, w której mogłem zacząć układać kolejne elementy bez rozpraszania się detalami technicznymi.
Na komputerze sam nagłówek ma dwa poziomy. Na samej górze, po prawej stronie, umieszczam niewielki pasek z ikonami mediów społecznościowych, prowadzącymi do moich profili. Niżej znajduje się właściwy nagłówek ze znakiem Łukasz [Pająk] po lewej stronie i menu po prawej:
Strona główna | O mnie | Oferta | Materiały | Aktualności | Kontakt
Logo prowadzi do strony głównej, ale zostawiłem też osobną pozycję Strona główna w menu. Nie każdy odwiedzający musi od razu wiedzieć, że kliknięcie w znak pozwala wrócić do początku serwisu.
Na telefonie górny pasek z mediami społecznościowymi znika. Zostaje logo i menu, a odnośniki do profili przenoszę do stopki.
Pierwszy ekran
Pierwsza sekcja, czyli hero, ma szybko pokazać, gdzie użytkownik trafił i czym się zajmuję. Znajduje się tu główny komunikat, krótkie rozwinięcie, element wizualny oraz odnośnik prowadzący do strony O mnie dla osób, które chcą najpierw poznać mnie i moje doświadczenie.
Od początku myślałem też o tym, jak całość zachowa się na telefonie. Na komputerze tekst może funkcjonować obok grafiki, bo większa szerokość ekranu daje więcej swobody. Na smartfonie wszystko układa się w jednej kolumnie, dlatego kolejność jest bardziej rygorystyczna: główny komunikat, krótkie rozwinięcie, a następnie grafika.
Taki układ od razu wymusza dyscyplinę w długości tekstów i wielkości poszczególnych elementów, bo na małym ekranie widać, gdzie informacji jest za dużo.
Oferta
Kiedy wcześniej porządkowałem swoją ofertę, wyłoniły się trzy główne filary:
- Wystąpienia i edukacja
- Treści i strony internetowe
- Ekologia i komunikacja
Na stronie głównej każdy z nich dostaje krótki opis i możliwość przejścia dalej. Pełna podstrona Oferta rozwija już konkretne usługi, wystąpienia, warsztaty i sposoby współpracy.
Na komputerze trzy obszary układam obok siebie. Na telefonie przechodzą jeden pod drugim.
Materiały
Kolejnym miejscem są Materiały. Tutaj chcę zebrać rzeczy, które pokazują mój dorobek i sposób pracy: filmy, podcasty, prezentacje, nagrania z wystąpień, wybrane publikacje, materiały edukacyjne i przykłady realizacji.
Na stronie głównej zostawiam krótką zapowiedź i link do pełnej bazy. Dzięki temu strona główna zachowuje przejrzystość, a bardziej rozbudowane treści mają własne miejsce.
Aktualności
Osobnego miejsca potrzebują treści bieżące, dlatego w menu pojawiły się także Aktualności. To tam trafią nowe artykuły, informacje o konferencjach, warsztatach, wystąpieniach i kolejnych projektach. Znajdą się tam również teksty z tego cyklu, bo dokumentują rozwój marki i samej strony lukaspajak.pl.
Na stronie głównej zostawiam jedynie krótką zapowiedź tej części serwisu i odnośnik prowadzący do pełnej jej podstrony. Nie wyświetlam tam najnowszych wpisów, dzięki czemu strona główna zachowuje aktualną strukturę.
Kontakt
Kontakt umieściłem dodatkowo na końcu głównej ścieżki. Podaję tam adres e-mail, numer telefonu i informację o możliwości wysłania SMS-a.
Na komputerze sekcja może być rozłożona na dwie części krótkie zaproszenie do rozmowy oraz dane kontaktowe. Na telefonie wszystko układa się pionowo, a numer telefonu i adres e-mail działają jako aktywne linki.
Nawigacja podczas przewijania
Przy dłuższej stronie chciałem ułatwić powrót do jej początku. Dlatego w dolnej części ekranu pojawia się dyskretna strzałka, która jednym kliknięciem przenosi na górę strony.
Stopka
Stopkę rozpisałem w trzech kolumnach.
- Pierwsza zawiera najważniejsze linki nawigacyjne.
- Druga prowadzi do moich profili w mediach społecznościowych. Każdy odnośnik składa się z ikony i nazwy serwisu, na przykład LinkedIn, Facebook czy Instagram.
- Trzecia zbiera informacje formalne: politykę prywatności i cookies, informacje dotyczące newslettera oraz dostępności cyfrowej.
Na telefonie trzy kolumny układają się kolejno jedna pod drugą. To tutaj znajdują się też odnośniki do mediów społecznościowych, które w wersji mobilnej znikają z górnej części strony.
Pod nimi pozostaje prosty dolny pasek: © 2026 Łukasz Pająk | lukaspajak.pl
Strona główna jako mapa serwisu
Po rozpisaniu strony głównej powstała z niej mapa całego serwisu. Każda z głównych sekcji otwiera kolejne miejsce. O mnie powinno szerzej pokazać moją drogę, doświadczenie i kompetencje. Oferta potrzebuje rozwinięcia trzech filarów. Materiały muszą pomieścić różne formaty i typy treści. Aktualności wymagają własnego archiwum i chronologii. Kontakt powinien zachować prostotę, ale również mieć własną podstronę.
To wyznaczyło kolejność dalszej pracy. Teraz chcę rozpisać strukturę każdej z głównych podstron i sprawdzić, jakich układów, sekcji, kart czy sposobów prezentowania treści rzeczywiście będzie potrzebował cały serwis. Dopiero na tej podstawie będę mógł sensownie wybrać gotowy system odpowiadający za wygląd strony i sposób układania jej elementów, czyli motyw WordPressa. Wtedy wybór nie będzie wynikał z tego, który motyw najbardziej mi się podoba, tylko z tego, który najlepiej pasuje do wcześniej zaprojektowanej struktury.
Strona główna była pierwszym krokiem. Teraz czas rozrysować kolejne podstrony, czyli O mnie.