Tożsamość wizualna opiera się na relacji między wielkoformatową fotografią a powściągliwą kolorystyką. Zdjęcia oceanu, wybrzeża i gór zapewniają najbogatsze detale wizualne, podczas gdy powierzchnie w jasnym akwamarynie i stonowanym błękicie tworzą spokojniejsze tło dla tekstu i interakcji. W sekcji hero wyśrodkowana biała typografia znajduje się na tle fotografii oceanu, dzięki czemu kontrast i skala obrazu definiują charakter strony, zamiast sprowadzać grafikę do roli drugorzędnej ilustracji.
Ten język projektowy przewija się przez różne typy komponentów. Sekcja biura podróży zestawia fotografię ze zwartym formularzem, tabela karnetów nakłada uporządkowaną ofertę na nadmorskie tło, a karty doświadczeń wykorzystują spójne kadrowanie dla propozycji Wyprawy w góry, Wyprawy na surfing oraz Wyprawy nad ocean. Jasnoakwamarynowe przesłanie marki i końcowa sekcja zapytań tonują intensywność wizualną pomiędzy tymi kluczowymi ujęciami fotograficznymi. Ciemna stopka stanowi z kolei wyrazisty kontrast zamykający kompozycję.
W efekcie powstała tożsamość wizualna, która daje poczucie przestrzeni i zachęca do odkrywania, nie polegając przy tym na bezpodstawnych deklaracjach o fikcyjnej marce. Wyśrodkowana typografia, otwarte tła, duża skala zdjęć i powracające akwamarynowe tony spajają zróżnicowane sekcje strony. Przyciski rezerwacji i formularze stanowią część tego samego systemu wizualnego, dzięki czemu praktyczne elementy nie odcinają się od podróżniczego nastroju. W przypadku podstron czy powiązanych widoków spójny charakter zapewni utrzymanie tych relacji pomiędzy obrazem, barwą, typografią, odstępami i powtarzalnym układem kart, a nie kopiowanie pojedynczej sekcji w oderwaniu od całoś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.