Mapa strony głównej

Szablon mapy strony głównej

Ten szablon przedstawia nawigację najwyższego poziomu strony głównej oraz stopkę w prostym, kolorowym układzie. Jest przeznaczony dla product managerów, projektantów UX/UI, marketerów i inżynierów planujących architekturę informacji (IA) witryny i komunikujących ją interesariuszom.

Szczegóły struktury

• Produkty (koralowy/czerwony #ff6464)

  • Okrągła ikona z białą obwódką (koszyk zakupowy)

  • Nagłówek „Produkty”

  • Podtytuł „Strona główna i filtry”

  • Trzy białe pola zastępcze oznaczone „Wpisz tekst tutaj”

• Partnerzy (żółty/złoty #ffbe44)

  • Okrągła ikona z białą obwódką (uścisk dłoni)

  • Nagłówek „Partnerzy”

  • Podtytuł „Strony docelowe i filtry”

  • Trzy pola zastępcze „Wpisz tekst tutaj”

• Comapny (turkusowy #5ec8b3)

  • Okrągła ikona z białą obwódką (miasto/budynki)

  • Nagłówek „Comapny”

  • Podtytuł „Strona główna”

  • Trzy pola zastępcze „Wpisz tekst tutaj”

• Kontakt (cyjan #4fd8dd)

  • Okrągła ikona z białą obwódką (książka adresowa)

  • Nagłówek „Kontakt”

  • Brak podtytułu

  • Prostokąt z przerywaną obwódką oznaczony „TWOJE LOGO” do umieszczenia logo marki

Hierarchia treści

• Główne sekcje nawigacji znajdują się u góry z wyraźnym tytułem i krótkim podtytułem (oprócz Kontakt).

• Pod sekcjami Produkty, Partnerzy i Firma trzy prostokątne pola służą jako miejsca na podstrony, filtry lub linki bezpośrednie.

Sekcja stopki

• Obszar stopki zatytułowany „Stopka (główna + dodatkowa nawigacja)” zawiera cztery kolumny oddzielone pionowymi separatorami:

  1) Dane kontaktowe, Aktualności, Pomoc

  2) Sektory (podkreślone, pogrubione): Sektor 1, Sektor 2, Sektor 3

  3) Produkty (podkreślone, pogrubione): Wsparcie, Akcesoria, Sprzęt

  4) Newsletter, Regulamin, Media społecznościowe

Elementy wizualne

• Wyraźny purpurowy baner nagłówka (#6631d7) z napisem “Mapa strony głównej” w białej czcionce Georgia.

• Karty sekcji mają przypisane kolory podane powyżej, każda wyposażona w okrągłą ikonę.

• W kolumnie Kontakt znajduje się dedykowane miejsce na logo.

• Na dole znajduje się cienki purpurowy pasek, który spaja schemat kolorów.

Jak tego używać

1) Zastąp każde “Wpisz tekst tutaj” rzeczywistymi nazwami podstron lub linkami.

2) Zaktualizuj tytuły/podtytuły sekcji w razie potrzeby (zachowaj kodowanie kolorystyczne dla czytelności).

3) Zamień zastępcze ikony na zestaw ikon Twojej marki.

4) Umieść logo Twojej firmy w przerywanym polu “YOUR LOGO”.

5) Wypełnij kolumny stopki konkretnymi elementami nawigacji i linkami prawnymi.

Najlepsze praktyki

• Użyj podczas wczesnego planowania strony, warsztatów IA/UX, przeglądów z interesariuszami oraz przekazania do zespołu deweloperskiego.

• Utrzymuj minimalną liczbę sekcji; celuj w trzy–pięć pozycji na kolumnę.

• Zachowaj spójność kolorów, aby ułatwić szybkie skanowanie.

• Zwróć uwagę na etykietę „Comapny”, jeśli dokładnie kopiujesz szablon, albo popraw ją przed publikacją.

Pozdrawiam!

Khawaja Rizwan