Język wizualny zaczyna się od palety głębokiej zieleni morskiej i ciemnej zieleni, która zapewnia stronie powściągliwą, pełną skupienia podstawę. Ciepłe złote akcenty przyciągają uwagę bez przytłaczania ciemniejszych płaszczyzn, szczególnie wokół kluczowych nagłówków, elementów sterujących i detali dekoracyjnych. Grafika półksiężyca i lampionu w sekcji hero pozwala rozpoznać tematykę, zanim użytkownicy zapoznają się z treścią, a fotografia meczetu i obrazy nawiązujące do Koranu kontynuują tę tożsamość w dalszych sekcjach.
Typografia tworzy drugą warstwę spójności. Szeryfowe nagłówki ekspozycyjne nadają głównym przekazom refleksyjny ton, w tym hasłom „Czytaj Koran online z łatwością”, „Odkrywaj sury, dżuzy i ajaty” oraz „Wypracuj nawyk regularnego czytania Koranu”. Zwięzły, bezszeryfowy tekst pomocniczy sprawia, że objaśnienia i etykiety pozostają uporządkowane, dzięki czemu strona łączy duchowy nastrój z praktyczną nawigacją. Kontrast ten powraca w sekcji recytacji, gdzie karty tekstowe i zestawienie funkcji audio współtworzą ten sam spójny kierunek wizualny.
Zaokrąglone karty treści stanowią powracający motyw dla trzech ścieżek poznawania i informacji dodatkowych. Swobodne odstępy pionowe sprawiają, że ciemna paleta i oprawa wizualna nie wydają się ciężkie, a cztery kafelki religijne wprowadzają wizualny rytm dzięki fotografii. Stopka powraca do ciemnej zieleni z sygnetem marki i blokami kontaktowymi, dbając o płynną ciągłość. Paleta, zestawienie krojów pisma, ikonografia, obrys kart, kontrast i odstępy komunikują wspólnie jednolitą tożsamość graficzną na całej stronie.
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.