Lawendowe akcenty, jasnoszare pasy, zaokrąglone karty i wyraziste bezszeryfowe nagłówki wyznaczają główny język wizualny całej strony. Rozwiązania te spajają sekcję strategii biznesowej ze zbiórką funduszy na cele społeczne, mimo że dotyczą odmiennych zagadnień. Jasne tła zapewniają treści niezbędną przestrzeń, a zaokrąglenia powtarzają się w kartach strategii, portretach zespołu, wyróżnionym panelu non-profit i pozostałych wyodrębnionych obszarach, tworząc czytelny zbiór form.
Fotografia odgrywa drugą, równie spójną rolę. Galeria złożona z dziesięciu zdjęć w górnej części sprawia, że oprawa wizualna buduje pierwsze wrażenie, a kolejna galeria z sześcioma zdjęciami ponawia ten akcent za sprawą nawigacji poziomej. Karty z portretami przenoszą tę samą narrację wizualną na sekcję sześcioosobowego zespołu, podczas gdy karuzela referencji dodaje pola na portrety obok wypowiedzi klientów. Razem te grupy zdjęć sprawiają, że projekt zyskuje redakcyjny, zorientowany na ludzi charakter, zamiast opierać się wyłącznie na gęstym tekście korporacyjnym.
Typografia i kontrast między sekcjami dbają o przejrzystą hierarchię w obrębie tego systemu. Sekcja hero innowacji wykorzystuje mocny nagłówek, cztery karty strategii wzrostu tworzą powtarzalny schemat prezentacji treści, a blok non-profit posługuje się zaokrąglonym panelem wyróżniającym, by wyeksponować apel o wsparcie. Kolorowy pas zamykający i ciemna stopka wprowadzają przemyślaną zmianę tonacji na końcu strony, tworząc oprawę dla formularza kontaktowego i linków do profili społecznościowych. Ostateczny projekt witryny definiuje nie tyle pojedyncza sekcja, ile powtarzające się relacje koloru, kształtu, obrazu i typografii, które mogą wyznaczać kierunek dla kolejnych podstron.
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.