Przejdź do głównej zawartości

Kierunek projektowy

Krok Kierunek projektowy pozwala Ci przejrzeć, dopracować i sfinalizować wizualny wygląd swojego motywu, zanim Theme Builder wygeneruje gotowy motyw.

Przegląd​

Po zakończeniu wywiadu odkrywczego (Discovery Interview), Theme Builder prezentuje Twój kierunek projektowy z podglądem na urządzeniach stacjonarnych i mobilnych. Dzięki temu zobaczysz dokładnie, jak Twój projekt będzie wyglądał na różnych urządzeniach, zanim podejmiesz ostateczną decyzję.

Elementy kierunku projektowego​

1. Paleta kolorów​

Paleta kolorów Twojego motywu, obejmująca:

  • Kolor główny — podstawowy kolor marki używany do przycisków, linków i akcentów
  • Kolor dodatkowy — kolor uzupełniający, dodający różnorodności
  • Kolor akcentujący — kolor wyróżniający ważne elementy
  • Kolory neutralne — odcienie szarości i bieli do tła i tekstu
  • Kolor tekstu — podstawowy kolor tekstu, zapewniający czytelność

2. Typografia​

Wybór czcionek dla:

  • Czcionka nagłówkowa — używana do tytułów stron i nagłówków sekcji
  • Czcionka podstawowa — używana do tekstu akapitów i treści
  • Rozmiary czcionek — responsywne skalowanie dla różnych rozmiarów ekranu
  • Wysokość linii — odstęp między liniami, poprawiający czytelność
  • Grubość czcionki — warianty pogrubione, regularne i lekkie

3. Układ i odstępy​

  • Szerokość kontenera — maksymalna szerokość treści
  • Padding i marginesy — odstępy wokół elementów
  • System siatki — układ kolumn do responsywnego projektowania
  • Odstępy komponentów — odległość między elementami interfejsu użytkownika

4. Elementy wizualne​

  • Style przycisków — projekty przycisków głównych, dodatkowych i trzeciorzędnych
  • Projekty kart — układy dla bloków treści
  • Ikony — styl i rozmiar ikon
  • Obramowania i cienie — subtelna głębia wizualna
  • Efekty najazdu — stylizacja stanów interaktywnych

Podgląd renderowania​

Podgląd na komputerze stacjonarnym​

Podgląd na komputerze stacjonarnym pokazuje Twój projekt w pełnej szerokości (zazwyczaj 1200px lub więcej):

  • Pełne menu nawigacyjne
  • Kompletny układ ze wszystkimi kolumnami
  • Duża typografia i odstępy
  • Wszystkie elementy wizualne w pełnym rozmiarze

Podgląd na urządzeniu mobilnym​

Podgląd na urządzeniu mobilnym pokazuje Twój projekt w szerokości mobilnej (zazwyczaj 375px):

  • Responsywne menu nawigacyjne (menu typu hamburger)
  • Układ w jednej kolumnie
  • Dostosowana typografia i odstępy
  • Rozmiary przycisków przyjazne dla dotyku

Punkty przerwania responsywne​

Theme Builder renderuje podglądy w następujących punktach przerwania:

UrządzenieSzerokośćPodgląd
Mobilne375pxPortretowy telefon
Tablet768pxKrajobrazowy tablet
Stacjonarny1200pxPełna szerokość na komputerze
Duży stacjonarny1920pxUltra-szeroki wyświetlacz

Dopracowywanie projektu​

Wykonywanie poprawek​

Możesz dopracować kierunek projektowy, wykonując następujące kroki:

  1. Dostosowanie kolorów — zmień dowolny kolor w palecie
  2. Zmiana czcionek — wybierz inne rodzaje czcionek
  3. Modyfikacja odstępów — dostosuj padding i marginesy
  4. Aktualizacja układu — zmień szerokości kontenerów i kolumny siatki
  5. Personalizacja elementów — zmodyfikuj style przycisków, projekty kart itp.

Aktualizacje podglądu​

Zmiany są odzwierciedlane w czasie rzeczywistym:

  • Podgląd na komputerze stacjonarnym aktualizuje się natychmiast
  • Podgląd na urządzeniu mobilnym aktualizuje się natychmiast
  • Wszystkie punkty przerwania responsywne są aktualizowane
  • Możesz przełączać się między podglądami, aby zweryfikować zmiany

Widok porównawczy​

Porównaj swój kierunek projektowy z:

  • Oryginalnym projektem — zobacz, co się zmieniło
  • Projektami konkurencji — porównaj z stronami inspiracyjnymi
  • Poprzednimi wersjami — wróć do wcześniejszych kierunków projektowych

Zatwierdzenie kierunku projektowego​

Gdy będziesz zadowolony z projektu:

  1. Przejrzyj oba podglądy — upewnij się, że wygląd na komputerze i na urządzeniu mobilnym jest poprawny
  2. Sprawdź wszystkie kolory — upewnij się, że kontrast i dostępność są zachowane
  3. Testuj typografię — zweryfikuj czytelność we wszystkich rozmiarach
  4. Potwierdź układ — sprawdź odstępy i wyrównanie
  5. Zatwierdź projekt — przejdź do generowania motywu

Następne kroki​

Po zatwierdzeniu kierunku projektowego:

  1. Theme Builder wygeneruje Twój kompletny motyw
  2. Motyw zostanie zainstalowany na Twojej witrynie WordPress
  3. Możesz dalej personalizować za pomocą niestandardowego edytora WordPress
  4. Przejdź do Hospitality Menus lub innych funkcji

Najlepsze praktyki​

  • Testuj na prawdziwych urządzeniach — jeśli to możliwe, używaj faktycznych telefonów i tabletów
  • Sprawdzaj czytelność — upewnij się, że tekst jest czytelny we wszystkich rozmiarach
  • Weryfikuj kontrast — użyj Validate Palette Contrast dla dostępności
  • Pomyśl o wydajności — optymalizuj obrazy i czcionki pod kątem szybkości
  • Planuj treść — upewnij się, że układ działa z Twoją faktyczną treścią

Rozwiązywanie problemów​

Podgląd się nie aktualizuje​

  • Odśwież stronę
  • Wyczyść pamięć podręczną przeglądarki
  • Spróbuj użyć innej przeglądarki
  • Sprawdź połączenie z internetem

Kolory wyglądają inaczej​

  • Sprawdź ustawienia kolorów monitora
  • Spróbuj na różnych urządzeniach
  • Zweryfikuj kontrast kolorów za pomocą narzędzi dostępności
  • Rozważ symulatory daltonizmu

Problemy z typografią​

  • Zweryfikuj, czy pliki czcionek się ładują
  • Sprawdź rozmiar czcionki w różnych punktach przerwania
  • Testuj z faktyczną treścią
  • Rozważ długość linii dla czytelności

Powiązane dokumenty​