Skip to main content

Smjer dizajna

Korak Smjer dizajna omogućuje vam pregled, doradu i finalizaciju vizualnog dizajna vaše teme prije nego što Theme Builder generira potpunu temu.

Pregled​

Nakon završetka Discovery Interview, Theme Builder prikazuje vaš smjer dizajna s prikazom desktop i mobilnog pregleda. To vam omogućuje da točno vidite kako će vaš dizajn izgledati na različitim uređajima prije nego što se obvežete na temu.

Komponente smjera dizajna​

1. Paleta boja​

Shema boja vaše teme, uključujući:

  • Primarna boja — glavna boja brenda koja se koristi za gumbe, poveznice i naglaske
  • Sekundarna boja — komplementarna boja za raznolikost
  • Naglasna boja — boja isticanja za važne elemente
  • Neutralne boje — sive i bijele za pozadine i tekst
  • Boja teksta — primarna boja teksta za čitljivost

2. Tipografija​

Odabiri fontova za:

  • Font naslova — koristi se za naslove stranica i zaglavlja odjeljaka
  • Font tijela — koristi se za tekst odlomaka i sadržaj
  • Veličine fonta — responzivno dimenzioniranje za različite veličine zaslona
  • Visina retka — razmak između redaka radi čitljivosti
  • Debljine fonta — podebljane, obične i lagane varijacije

3. Raspored i razmaci​

  • Širina spremnika — maksimalna širina za sadržaj
  • Unutarnji i vanjski razmaci — razmak oko elemenata
  • Sustav mreže — stupčasti raspored za responzivni dizajn
  • Razmak komponenti — udaljenost između UI elemenata

4. Vizualni elementi​

  • Stilovi gumba — dizajni primarnih, sekundarnih i tercijarnih gumba
  • Dizajni kartica — rasporedi za blokove sadržaja
  • Ikone — stil i veličina ikona
  • Obrubi i sjene — suptilna vizualna dubina
  • Efekti pri prelasku pokazivačem — stiliziranje interaktivnog stanja

Prikaz pregleda​

Desktop pregled​

Desktop pregled prikazuje vaš dizajn u punoj širini (obično 1200px ili šire):

  • Puni navigacijski izbornik
  • Potpuni raspored sa svim stupcima
  • Velika tipografija i razmaci
  • Svi vizualni elementi u punoj veličini

Mobilni pregled​

Mobilni pregled prikazuje vaš dizajn u mobilnoj širini (obično 375px):

  • Responzivna navigacija (hamburger izbornik)
  • Raspored u jednom stupcu
  • Prilagođena tipografija i razmaci
  • Veličine gumba prilagođene dodiru

Responzivne prijelomne točke​

Theme Builder renderira preglede na ovim prijelomnim točkama:

UređajŠirinaPregled
Mobilni375pxTelefon u portretnom prikazu
Tablet768pxTablet u pejzažnom prikazu
Desktop1200pxDesktop pune širine
Veliki Desktop1920pxUltraširoki zaslon

Dodatno uređivanje vašeg dizajna​

Izrada prilagodbi​

Možete doraditi svoj smjer dizajna tako da:

  1. Prilagodite boje — promijenite bilo koju boju u paleti
  2. Promijenite fontove — odaberete drugačija pisma
  3. Izmijenite razmake — prilagodite unutarnje i vanjske razmake
  4. Ažurirate raspored — promijenite širine spremnika i stupce mreže
  5. Prilagodite elemente — izmijenite stilove gumba, dizajne kartica itd.

Ažuriranja pregleda​

Promjene se odražavaju u stvarnom vremenu:

  • Desktop pregled ažurira se odmah
  • Mobilni pregled ažurira se odmah
  • Ažuriraju se sve responzivne prijelomne točke
  • Možete se prebacivati između pregleda kako biste provjerili promjene

Prikaz usporedbe​

Usporedite svoj smjer dizajna s:

  • Izvorni dizajn — pogledajte što se promijenilo
  • Dizajni konkurenata — usporedite s inspirativnim web-lokacijama
  • Prethodne verzije — vratite se na ranije smjerove dizajna

Odobrenje smjera dizajna​

Kada budete zadovoljni svojim dizajnom:

  1. Pregledajte oba pregleda — provjerite izgledaju li desktop i mobilni prikaz dobro
  2. Provjerite sve boje — osigurajte kontrast i pristupačnost
  3. Testirajte tipografiju — provjerite čitljivost u svim veličinama
  4. Potvrdite raspored — provjerite razmake i poravnanje
  5. Odobrite dizajn — nastavite na generiranje teme

Sljedeći koraci​

Nakon odobrenja smjera dizajna:

  1. Theme Builder generira vašu potpunu temu
  2. Tema se instalira na vašu WordPress web-lokaciju
  3. Možete dodatno prilagođavati koristeći WordPress customizer
  4. Nastavite na Hospitality izbornike ili druge značajke

Najbolje prakse​

  • Testirajte na stvarnim uređajima — koristite stvarne telefone i tablete ako je moguće
  • Provjerite čitljivost — osigurajte da je tekst čitljiv u svim veličinama
  • Provjerite kontrast — koristite Validate Palette Contrast za pristupačnost
  • Uzmite u obzir performanse — optimizirajte slike i fontove za brzinu
  • Planirajte sadržaj — osigurajte da raspored funkcionira s vašim stvarnim sadržajem

Rješavanje problema​

Pregled se ne ažurira​

  • Osvježite stranicu
  • Očistite predmemoriju preglednika
  • Pokušajte s drugim preglednikom
  • Provjerite internetsku vezu

Boje izgledaju drugačije​

  • Provjerite postavke boja monitora
  • Isprobajte na različitim uređajima
  • Provjerite kontrast boja alatima za pristupačnost
  • Razmotrite simulatore daltonizma

Problemi s tipografijom​

  • Provjerite učitavaju li se datoteke fontova
  • Provjerite veličinu fonta na različitim prijelomnim točkama
  • Testirajte sa stvarnim sadržajem
  • Uzmite u obzir duljinu retka radi čitljivosti