Michał Danieluk

Redesign nagłówka bloga - testowanie różnych opcji

• 3 min czyt.
Tags: #SvelteKit#Design#Tailwind CSS#UI/UX

Jak to się zaczęło

Podczas pracy nad blogiem dotarliśmy do momentu, gdzie header wyglądał już całkiem nieźle, ale pojawił się pomysł - a może spróbować czegoś zupełnie innego? I tak zaczęła się przygoda z testowaniem różnych designów nagłówka.

Metodologia testowania

Aby nie stracić obecnej wersji, zdecydowaliśmy się na systematyczne podejście - każda opcja została zapisana w osobnym commicie git. Dzięki temu można było łatwo przełączać się między wersjami i porównywać je bezpośrednio w przeglądarce.

Testowane opcje

Opcja 1: Minimal Floating Header ✅

Pierwsza opcja to minimalistyczny, “unoszący się” nagłówek z efektem glassmorphism:

  • Semi-przezroczyste tło z backdrop-blur
  • Subtelne cienie i obramowania
  • Animowane podkreślenia nawigacji
  • Czysta, nowoczesna estetyka

To jest opcja, która została ostatecznie wybrana - sprawdziła się najlepiej.

Opcja 2: Centered Modern Header ❌

Druga opcja stawiała na centralną pozycję i duże typografie:

  • Wszystko wycentrowane pionowo
  • Duży nacisk na typografię
  • Styl redakcyjny/magazynowy
  • Niestety okazała się “okropna” w praktyce

Opcja 3: Split Header with Avatar ✅

Trzecia opcja wprowadzała podział przestrzeni i awatar:

  • Mini awatar z inicjałami w odznace
  • Podział: awatar+nazwa po lewej, nav po środku, przełącznik po prawej
  • Osobisty branding
  • Logo z efektem świecenia
  • Wyglądała całkiem nieźle

Opcja 4: Full-Width Accent Header

Czwarta opcja wykorzystywała tę samą technikę co sekcja hero:

  • Pełna szerokość viewport z techniką “breakout”
  • Gradientowe tło pasujące do reszty strony
  • Nawigacja w stylu przycisków z hover-effects
  • Logo z odznaczką inicjałów i efektami skali
  • Spójna z designem hero sekcji

Opcja 5: Typography-First Header

Piąta opcja (nie testowana jeszcze) stawiała na typografię:

  • Duża, pogrubiona typografia jako główny punkt
  • Minimalistyczna nawigacja
  • Logo oparte na tekście
  • Czyste odstępy i hierarchia
  • Skupienie na redakcyjnym charakterze

Co z tego wynika?

Cały proces pokazał kilka ważnych rzeczy:

Git jako narzędzie designerskie

Używanie git do zapisywania różnych wersji designu okazało się genialnym pomysłem. Zamiast tworzyć kilka plików czy kopii, każda wersja żyje w swoim commit i można błyskawicznie między nimi przełączać.

Testowanie w przeglądarce

Nic nie zastąpi testowania bezpośrednio w przeglądarce. To co wygląda dobrze w kodzie, może w rzeczywistości okazać się nieczytelne lub niepraktyczne.

Tailwind CSS jako accelerator

Używanie wyłącznie klas Tailwind pozwoliło na bardzo szybkie prototypowanie. Nie trzeba było tworzyć osobnych plików CSS - wszystko działo się bezpośrednio w komponentach.

Techniczne szczegóły

Wszystkie opcje zostały zaimplementowane przy użyciu:

  • SvelteKit jako framework
  • Tailwind CSS dla stylowania
  • Technika “full-bleed” dla elementów na pełną szerokość
  • Efekty glassmorphism z backdrop-blur
  • Animacje i hover effects

Najciekawszą techniką była implementacja elementów na pełną szerokość viewport:

.full-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

Podsumowanie

Na koniec zostaliśmy przy pierwszej opcji - Minimal Floating Header. Czasami to co proste i czyste okazuje się najlepszym rozwiązaniem. Ale cała przygoda z testowaniem pokazała, jak ważne jest eksperymentowanie i nie bójmy się próbować różnych podejść.

A wszystkie opcje zostały zapisane w pliku header-design-options.md - na przyszłość, gdyby znów zaszła potrzeba zmiany.

#blog #design #sveltekit

Michał Danieluk