03Strona klienta

Kamil Rosikiewicz

Kamil Rosikiewicz potrzebował strony, która udowadnia jakość obrazem, a mimo to otwiera się szybko także na telefonie. Zbudowaliśmy witrynę, w której portfolio ogląda się jak showreel, a każda podstrona prowadzi odwiedzającego prostą ścieżką do zapytania ofertowego albo do zapisu na szkolenie.

Klient: Kamil Rosikiewicz — twórca treści wideo
Usługi: Strony internetowe

Kontekst projektu

Twórca wideo ma ze swoją stroną jeden zasadniczy problem: musi udowodnić jakość obrazem, a jednocześnie nie może sobie pozwolić na witrynę, która ładuje się kilkanaście sekund. Zbudowaliśmy stronę godzącą oba te wymagania — portfolio ogląda się jak showreel, a strona otwiera się szybko również na telefonie i słabszym łączu.

Sama efektowność to jednak za mało. Klient sprzedaje firmom konkretną obietnicę — treści wideo, które wyróżniają je w mediach społecznościowych — a obok tego prowadzi szkolenia. Strona miała więc obsłużyć dwa cele naraz: przynosić zapytania ofertowe i zapisy na szkolenia, a nie tylko dobrze wyglądać.

Cały projekt prowadziliśmy w bezpośrednim kontakcie z klientem — od ustalenia struktury i sposobu prezentacji realizacji, przez implementację, po publikację i fundamenty SEO. Bez pośredników, więc ustalenia nie ginęły w przekazywaniu.

Wyzwanie biznesowe

Największe napięcie w tym projekcie to media kontra wydajność. Wideo i duże kadry są tu produktem, więc nie dało się ich po prostu „odchudzić” — a jednocześnie wolna strona odstrasza odwiedzających i obniża pozycję w wynikach wyszukiwania. Warstwę mediów trzeba było zaprojektować inżyniersko, a nie tylko estetycznie.

Drugim wyzwaniem była struktura. „Ładna strona” sama z siebie nie generuje zapytań: odwiedzający musi w kilka sekund zrozumieć, czym zajmuje się twórca, zobaczyć dowód jakości i wiedzieć, jaki jest następny krok. Do tego dwie różne ścieżki — zlecenie i szkolenie — musiały być obecne jednocześnie, nie konkurując o uwagę.

Zakres realizacji

Zakres objął architekturę informacji, układ i hierarchię strony ustalone wspólnie z klientem, implementację frontendu, inżynierię warstwy mediów, fundamenty SEO oraz wdrożenie produkcyjne.

Ustalenia zapadały na działających wersjach strony, które można było klikać i komentować, a nie na makietach i prezentacjach. Uwaga klienta trafiała więc wprost do strony, bez etapu tłumaczenia projektu graficznego na kod.

Rola założyciela

Projekt i wykonanie: założyciel firmy, Jakub Zając, w bezpośredniej współpracy z klientem — architektura informacji, implementacja, optymalizacja mediów, SEO i wdrożenie.

Zaangażowane kompetencje

Analiza produktowa i techniczna: Zamiana listy życzeń w zakres, który da się wycenić i zbudować.
Frontend: Aplikacje, które są szybkie i dostępne również na słabym łączu.
DevOps i chmura: Powtarzalne wdrożenia i środowiska, które da się odtworzyć.

Lista dyscyplin, których wymagała ta realizacja — nie lista stanowisk.

Rozwiązanie

Struktura nastawiona na zapytania

Zaprojektowaliśmy hierarchię strony wokół jednej ścieżki: mocne otwarcie z obietnicą złożoną wprost firmom, czytelna prezentacja usług, dowody jakości i wyraźne wezwanie do kontaktu. Każda podstrona ma zdefiniowany następny krok — odwiedzający nigdy nie trafia w ślepy zaułek.

Prezentacja realizacji wideo

Portfolio opiera się na starannie dobranych kadrach zamiast dziesiątek osadzonych odtwarzaczy. Materiały wideo ładują się dopiero na wyraźne życzenie użytkownika — dzięki temu przegląd realizacji jest płynny, a strona nie dźwiga na starcie ciężaru wszystkich playerów naraz.

Wydajność mimo ciężkich mediów

Obrazy trafiają na stronę w nowoczesnych formatach (AVIF/WebP) i w kilku rozmiarach, spośród których przeglądarka wybiera ten pasujący do ekranu. Reszta doładowuje się dopiero wtedy, gdy zbliża się do pola widzenia. Sama treść to statyczny HTML, więc pierwsze wyświetlenie nie czeka na żadne zaplecze.

Responsywność i spójność marki osobistej

Strona powstała w podejściu mobile-first, bo znaczna część odbiorców treści wideo ogląda je na telefonie. Kolory, typografię i odstępy trzymamy w zmiennych CSS używanych w całym arkuszu stylów — dzięki temu identyfikacja jest identyczna na stronie głównej, w portfolio i w stopce, a strona ma jasny i ciemny motyw.

Fundamenty SEO i przekazanie strony

Strona ma poprawną strukturę semantyczną, metadane pod wyszukiwarki i udostępnianie w mediach społecznościowych oraz mapę witryny. Nie stoi na WordPressie ani na żadnym innym CMS-ie — to ręcznie napisany HTML, CSS i JavaScript, więc zmiany w treści wprowadza się w kodzie i publikuje ponownie. Przy stronie tej wielkości taki układ się opłaca: prostszy stos, brak panelu i bazy danych, niższy koszt utrzymania, szybkie ładowanie. Jest za to koszt, o którym mówimy wprost: bez samoobsługowego edytora klient nie poprawi akapitu z przeglądarki. Po publikacji przekazaliśmy komplet dostępów — kod i konta należą do klienta.

Stos technologiczny

Frontend

HTML
CSS
JavaScript

Media i wydajność

AVIF/WebP
Responsive images
Lazy loading

SEO i udostępnianie

Semantic HTML
Open Graph
XML sitemap

Wdrożenie

Git
Static hosting

Podejście techniczne

01
Kadry zamiast osadzonych odtwarzaczy: wideo ładuje się na żądanie, a nie przy wejściu na stronę. To jedna decyzja, która przesądziła o szybkości całego portfolio.
02
Architektura statyczna: strona marketingowa tej wielkości nie potrzebuje ani serwera aplikacyjnego, ani CMS-a, więc nie ma żadnego z nich. Pisanie tego z ręki nie było oszczędnością, tylko właściwym doborem narzędzia — mniej elementów, które mogą zawieść, i mniejsza powierzchnia ataku.
03
Wyraźna hierarchia działań: w każdej sekcji jedno działanie główne i najwyżej jedno wspierające, plus stale dostępne wejście do szkoleń. Odwiedzający nie wybiera między pięcioma równorzędnymi przyciskami.
04
Media przygotowane z góry: kadry wyeksportowane i skompresowane do nowoczesnych formatów, w rozmiarach odpowiadających miejscom, w których faktycznie się pojawiają. Przeglądarka nigdy nie ściąga klatki 4K po to, żeby wypełnić miniaturę.

Jakość i niezawodność

Cały ruch odbywa się po HTTPS, a strona wysyła zestaw nagłówków bezpieczeństwa ograniczających typowe wektory ataku na witryny.
Formularz kontaktowy jest chroniony przed spamem w sposób niewidoczny dla człowieka i zbiera wyłącznie dane niezbędne do odpowiedzi na zapytanie — zgodnie z zasadą minimalizacji danych.
Nie ma tu CMS-a, panelu administracyjnego ani ekosystemu wtyczek, czyli tego, przez co najczęściej przejmuje się małe strony. Do zaatakowania zostają statyczne pliki i konfiguracja serwera.

Efekt

Klient prezentuje się w internecie na poziomie swoich realizacji — strona sama w sobie działa jak dowód jakości, zanim odwiedzający obejrzy pierwsze wideo.

Portfolio przegląda się szybko także na telefonie, więc ciężar materiałów nie kosztuje już odwiedzających, którzy trafiają na stronę z mediów społecznościowych.

Obie ścieżki są obsłużone jedną stroną: zapytanie ofertowe od firmy i zapis na szkolenie. Strona nie wymaga przy tym stałej obsługi technicznej — zmiany w treści wchodzą przez kod, a poza tym po prostu stoi i działa.

Powiązane usługi

Zakres, z którego korzystał ten projekt — opisany szerzej na stronach usług.

Strony internetowe
Strony firmowe, sklepy internetowe i landing pages — szybkie, lekkie i zbudowane tak, żeby zamieniać odwiedzających w zapytania.

Inne realizacje

Porozmawiajmy o Twoim projekcie

Chętnie opowiemy, jak podobne podejście sprawdziłoby się u Ciebie — i czego byśmy uniknęli.

Omów projekt Wróć do realizacji

E-mail: kontakt@jakubzajac.eu
Telefon: +48 573 021 012