Język wizualny opiera się na kontraście. Czarne tła stanowią solidną bazę dla strony, a jasna typografia gwarantuje znakomitą czytelność kluczowych haseł na tle ciemnych kompozycji zdjęciowych. Pomarańczowe akcenty wprowadzają kontrolowane wyróżnienia, nie naruszając mrocznej tonacji całości. Tę zależność doskonale widać w sekcji hero, obramowanym kafelku „Warto wiedzieć” oraz w barwnych panelach z hasłami w module „Nowe drogi do H-D”, dzięki czemu różnorodne grupy treści tworzą spójną całość wizerunkową.
Typografia dodatkowo umacnia tę tożsamość. Ozdobne nagłówki szeryfowe nadają sekcjom poświęconym IRON 883™, kursowi dla początkujących, Fxdr 114 oraz detalom stylistycznym wyrafinowany, magazynowy charakter, podczas gdy zwięzłe opisy pomocnicze przekazują praktyczne wskazówki, nie rywalizując ze zdjęciami. Regularne stosowanie ciemnych paneli tekstowych obok fotografii motocykli sprawia, że prezentacje modeli i materiały szkoleniowe operują tym samym systemem wizualnym, mimo że różnią się tematyką.
Zdjęcia są drugim elementem definiującym ten styl. Fotografie motocykli występują jako tła na pełną szerokość, kafelki graficzne, uzupełnienie sekcji dzielonych oraz panele pomocnicze. Te powtórzenia budują rozpoznawalność w każdym miejscu strony: sekcja hero wprowadza motyw przewodni, sekcja kursów łączy go ze wskazówkami instruktorów, blok pytań i odpowiedzi wykorzystuje go jako tło, a prezentacje poszczególnych maszyn ukazują w formie bezpośredniego dowodu jakości. Pod kątem projektowania stron szablon jest czymś znacznie więcej niż tylko odosobnionym układem podstrony – stanowi spójne połączenie ciemnych powierzchni, pomarańczowych akcentów, eleganckiej typografii i filmowych ujęć motocykli, które skutecznie organizuje powiązane treści.
Korzystając z Kreator projektów stron internetowych, będziesz mógł dostosowywać kolory, czcionki, nagłówek i fooer, układ, kolumny i inne elementy projektu, a także zawartość i obrazy.
Użyj Ustawień motywu, aby określić wizualne podstawy witryny na wszystkich jej stronach i sekcjach. Ustaw globalne kolory, czcionki i typografię, aby witryna podążała za tym samym kierunkiem projektowania, zamiast stylizować każdą stronę osobno.
Wybierz schemat kolorów i kombinację czcionek, które pasują do charakteru witryny, a następnie dostosuj nagłówki H1-H6, zwykły tekst, linki, przyciski, cytaty, listy i inne style typograficzne. Spójne stosowanie tych ustawień pomaga stworzyć przejrzystą hierarchię wizualną i sprawia, że powtarzające się elementy projektu są rozpoznawalne w całej witrynie.
Użyj Efektów animacji, aby nadać witrynie bardziej dynamiczny i interaktywny wygląd. Elementy i kontenery mogą korzystać z efektów takich jak „Uruchom przy wyświetlaniu”, „Animacja po najechaniu kursorem” i „Synchronizacja animacji z przewijaniem”, aby wprowadzać treści w miarę poruszania się użytkowników po witrynie lub reagowania na interakcję użytkownika. Predefiniowane ustawienia animacji zapewniają gotowe efekty, które można dostosować do stylu wizualnego witryny.
Zastosuj ten sam kierunek projektowania do współdzielonych elementów witryny, takich jak nagłówek, menu i stopka. Panel ustawień motywu łączy w sobie wspólne elementy sterujące stylami dla całej witryny, ułatwiając zachowanie spójnego wyglądu w miarę rozszerzania witryny na wiele stron.
Dzięki takiemu obiegowi pracy szablon staje się użytecznym punktem wyjścia do tworzenia witryny internetowej o spójnej identyfikacji wizualnej, skoordynowanych kolorach i typografii, współdzielonych zasadach projektowania oraz interaktywnych efektach na wszystkich stronach.