Powrót do Strony internetowe

Strony internetowe

Spójna strona, gdy przybywa stron i działów: jak korzystać z komponentów wielokrotnego użytku

Zachować rozpoznawalność i łatwość aktualizacji podczas rozwoju strony.

Zespół redakcyjny SqualiOnline · 2026-09-07

Rozrastająca się strona rozpada się przez kumulację, nie przez pojedynczy błąd. Każdy dział dodaje swoją stronę, każda strona rozwiązuje te same problemy od nowa, a po dwóch latach współistnieje sześć rodzajów przycisków i cztery sposoby zatytułowania usługi. Koszt nie jest estetyczny: chodzi o to, że każda nowa strona otwiera na nowo decyzje już podjęte, a nikt już nie wie, która wersja jest właściwa.

System komponentów służy do zamknięcia tych decyzji raz na zawsze. To nie podręcznik graficzny do konsultowania: to zestaw elementów już zdecydowanych, z opisem, kiedy się ich używa, co mogą zmieniać i kto odpowiada, jeśli się zmienią.

Objawem nie jest brzydota, lecz czas

Zanim zacznie się coś budować, warto rozpoznać, czy problem naprawdę istnieje. Sygnały mają charakter operacyjny, nie wizualny.

  • Ta sama informacja pojawia się w trzech różnych formach, zależnie od tego, kto zrobił daną stronę.
  • Każda nowa strona zaczyna się od dyskusji o tym, jak ma być zrobiona, zamiast o tym, co ma mówić.
  • Nikt już nie dotyka starych stron, bo nie wiadomo, co się popsuje.
  • Banalna zmiana, jak zmiana tekstu przycisku wszędzie, wymaga otwarcia trzydziestu stron ręcznie.

Jeśli żaden z tych objawów się nie pojawia, system jeszcze nie jest potrzebny: przydaje się, gdy strona zaczyna kosztować czas przy każdym dodatku.

Cztery decyzje, które warto ustalić najpierw

Nie zaczyna się od rzadkich przypadków. Zaczyna się od tego, co pojawia się na każdej stronie, bo tam niespójność jest widoczna i kosztowna.

  • Nagłówki: ile poziomów istnieje i do czego służą. Strona ma jeden główny tytuł; podtytuły opisują treść sekcji, nie pełnią roli sloganu. To najbardziej nudna i zarazem najbardziej przydatna zasada.
  • Przyciski: ile form istnieje i co oznaczają. Zwykle wystarczą trzy, czyli główna akcja strony, alternatywa drugorzędna i odnośnik tekstowy. Jeśli na jednej stronie potrzebne są dwie główne akcje, problem nie jest graficzny: strona ma dwa cele.
  • Obrazy: dopuszczalne proporcje, co powinno pokazywać zdjęcie produktu, osoby lub realizacji, i co się robi, gdy zdjęcia brakuje. Przypadek brakującego zdjęcia trzeba ustalić raz, nie improwizować za każdym razem.
  • Formularze: wygląd pól, oznaczenie pól obowiązkowych zawsze takie samo, miejsce pojawiania się błędów, co widzi osoba, która właśnie wysłała formularz. To część, w której niespójność nie psuje wizerunku: powoduje utratę zapytań.

Wspólne, wariant, wyjątek: jak się decyduje

Powtarzające się pytanie nie brzmi, jak zbudować komponent, lecz czy dana prośba jest naprawdę szczególna. Trzy przypadki, w kolejności częstotliwości.

  1. To ten sam komponent, zmienia się tylko treść. Żadnej decyzji do podjęcia: po prostu się go używa.
  2. To przewidywalny wariant, czyli ten sam element z opcją już dopuszczoną, na przykład karta ze zdjęciem i bez zdjęcia. Wariant dodaje się do komponentu i opisuje, nie tworzy od zera.
  3. To naprawdę wyjątek: potrzebny raz, na jednej stronie, z powodu, który da się wyjaśnić. Robi się go, zaznacza, gdzie się znajduje, i przegląda po kilku miesiącach. Jeśli w międzyczasie został skopiowany dwa razy, nie był wyjątkiem i czas awansować go do wariantu.

Mały katalog, z zapisanymi obok ograniczeniami

Przydatny katalog nie wymienia komponentów: mówi, kiedy się ich używa, a kiedy nie. Przykład poglądowy dla rozwijającej się strony firmowej.

KomponentKiedy się używaZadeklarowane ograniczenie
Nagłówek stronyOtwarcie każdej strony: tytuł, jedno zdanie, maksymalnie jedna akcjaNie zawiera list ani więcej niż jednego przycisku
Karta usługiOdesłanie do strony usługi wewnątrz listyTytuł maksymalnie na dwóch liniach, bez ceny
Blok dowoduRealizacje, referencje lub opinie wraz z kontekstemNie używa się go bez wskazania, do jakiej usługi się odnosi
Panel ostrzeżeniaOgraniczenie, warunek, terminJeden na stronę: przy trzech przestają się wyróżniać
Krótki formularzKoniec strony usługowejMaksymalnie cztery pola; złożone zapytania mają dedykowany formularz
Tabela porównawczaDwie lub więcej opcji ocenianych według tych samych kryteriówNie więcej niż cztery kolumny, inaczej nie da się jej odczytać na telefonie

Kolumna z ograniczeniami to ta, która oszczędza czas: odpowiada z góry na pytanie „czy mogę użyć tego też tutaj?”, czyli pytanie, przez które systemy się rozpadają.

Kto decyduje, kto aktualizuje, kto może powiedzieć nie

System bez osób odpowiedzialnych przetrwa tylko tyle, ile pozostanie osoba, która go stworzyła.

  • Jedna osoba decyduje, czy dana prośba to wariant, czy wyjątek. Może konsultować się z kim chce, ale decyzja nie jest kolegialna: inaczej nie zapada i każdy działa na własną rękę.
  • Osoba pisząca treści wie, jakich komponentów może użyć i z jakimi tekstami, łącznie z maksymalną długością. To tam komponenty się psują: nagłówek z piętnastu słów w przestrzeni przewidzianej na sześć.
  • Każda zmiana we wspólnym komponencie jest komunikowana osobie zarządzającej stronami, bo zmienia się wszędzie, nawet tam, gdzie nikt nie patrzył.
  • Gdzie znajduje się katalog, jest zapisane w konkretnym miejscu. Jeśli istnieje tylko w głowie dostawcy, przy pierwszej zmianie zaczyna się od nowa.

Test: strona prosta i strona trudna

System ocenia się wyłącznie po zmontowaniu na nim dwóch prawdziwych stron, wybranych celowo z przeciwnych biegunów.

  1. Strona prosta, na przykład prezentacja firmy: musi powstać bez wymyślania czegokolwiek. Jeśli już tutaj potrzebny jest nowy element, brakuje fundamentów.
  2. Strona trudna: ta, z której naprawdę korzysta dział handlowy, z porównaniami, dowodami, załącznikami i wieloma możliwymi akcjami. Tu wychodzą na jaw przypadki, których nikt nie przewidział.
  3. Zapisuje się każdy przypadek, gdy trzeba było wymusić dopasowanie komponentu, żeby go wcisnąć. Ta lista to lista wariantów do dodania.
  4. Test powtarza się po poprawkach, na tych samych dwóch stronach, żeby sprawdzić, czy wymuszenia zniknęły.

Czego nie obejmuje ten przewodnik

Tu mowa o systemie wizualnym: elementach, z których zbudowane są strony, i zasadach ich używania. Sposób organizowania tematów, gdy usług jest wiele, czyli jakie strony istnieją, jak się nazywają i jak są ze sobą powiązane, to kwestia struktury strony i omawia się ją przed tym tematem. Także to, kto materialnie aktualizuje treści po odbiorze i jakimi narzędziami, jest osobnym zagadnieniem.

Najpopularniejsze pytania

Czy system komponentów jest potrzebny także dla małej strony?

Dla strony, która zmienia się rzadko i ma niewiele podstron, pełny system jest nieproporcjonalny. Przydatne pozostają trzy lub cztery spisane zasady, zwłaszcza dotyczące nagłówków i przycisków, bo to one są łamane jako pierwsze, gdy ktoś w pośpiechu dodaje stronę.

Kto powinien prowadzić katalog komponentów: my czy dostawca?

Dostawca go tworzy i utrzymuje w aktualności, ale dokument musi być Państwa i dostępny bez pytania o niego: to on pozwala zlecić pracę nad stroną komuś innemu bez odtwarzania zasad od zera. W umowie warto zapisać, że jest przekazywany i w jakiej formie.

Jeśli zmienimy identyfikację wizualną, czy system trzeba wyrzucić?

Nie, i to jego główna zaleta. Kolory, czcionki i odstępy znajdują się w jednym miejscu i tam się zmieniają; zasady dotyczące tego, kiedy używa się danego komponentu, pozostają aktualne, bo opisują zachowanie, a nie wygląd. Przebudowa staje się pracą na kilka godzin zamiast tygodni.

Zbudujmy strukturę graficzną, która będzie towarzyszyć rozwojowi.

Jeśli chcą Państwo o tym porozmawiać, zajmuje się tym usługa Strony internetowe.

Powiązane poradniki