Skip to main content

Smjer Dizajna

Korak Smjer dizajna omogućava da pregledate, usavršite i finalizirate vizuelni dizajn vaše teme prije nego što Theme Builder generiše kompletnu temu.

Pregled​

Nakon što završite intervju o otkrićima (Discovery Interview), Theme Builder vam prikazuje smjer dizajna sa prikazom predgleda za desktop i mobilne uređaje. To vam omogućava da vidite tačno kako će vaš dizajn izgledati na različitim uređajima prije nego što se obavezate na temu.

Komponente Smjera Dizajna​

1. Paleta boja​

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

  • Primarna boja — glavna boja brenda korištena za dugmad, linkove i akcente
  • Sekundarna boja — komplementarna boja za raznolikost
  • Akcentna boja — boja za isticanje važnih elemenata
  • Neutralne boje — sivi i bijeli za pozadine i tekst
  • Boja teksta — primarna boja teksta za čitljivost

2. Tipografija​

Izbor fontova za:

  • Naslovni font — koristi se za naslove stranica i zaglavlja sekcija
  • Tekstualni font — koristi se za paragrafski tekst i sadržaj
  • Veličina fonta — responsivno skaliranje za različite veličine ekrana
  • Visina linije — razmak između redova radi čitljivosti
  • Težina fonta — podešavanja bold, regular i light varijanti

3. Raspored i razmak​

  • Širina kontejnera — maksimalna širina sadržaja
  • Padding i margine — razmak oko elemenata
  • Grid sistem — raspored u kolone za responsivni dizajn
  • Razmak između komponenti — udaljenost između UI elemenata

4. Vizuelni elementi​

  • Stil dugmadi — dizajn primarnih, sekundarnih i tercijarnih dugmadi
  • Dizajn kartica — rasporedi za blokove sadržaja
  • Ikone — stil i veličina ikona
  • Granice i sjene — suptilna vizuelna dubina
  • Efekti prelaska mišem — stilizovanje interaktivnih stanja

Prikaz predgleda​

Desktop predgled​

Desktop predgled prikazuje vaš dizajn u punoj širini (obično 1200px ili više):

  • Puni navigacioni meni
  • Kompletan raspored sa svim kolonama
  • Velika tipografija i razmak
  • Svi vizuelni elementi u punoj veličini

Mobilni predgled​

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

  • Responsivna navigacija (hamburger meni)
  • Raspored u jednoj koloni
  • Prilagođena tipografija i razmak
  • Veličina dugmadi prilagođena za dodir

Responsivni prekidači​

Theme Builder generiše predglede na ovim prekidačima:

UređajŠirinaPredgled
Mobilni375pxPortretni telefon
Tablet768pxPejzažni tablet
Desktop1200pxDesktop u punoj širini
Veliki Desktop1920pxUltra-široki ekran

Usavršavanje Dizajna​

Napravljanje prilagođavanja​

Možete usavršiti smjer dizajna na sljedeće načine:

  1. Podešavanje boja — promijenite bilo koju boju u paleti
  2. Promjena fontova — odaberite različite tipografije
  3. Izmjena razmaka — prilagodite padding i margine
  4. Ažuriranje rasporeda — promijenite širine kontejnera i kolone grida
  5. Kustomizacija elemenata — modifikujte stil dugmadi, dizajn kartica, itd.

Ažuriranje predgleda​

Promjene se odražavaju u realnom vremenu:

  • Desktop predgled se ažurira odmah
  • Mobilni predgled se ažurira odmah
  • Svi responsivni prekidači se ažuriraju
  • Možete prebacivati između predgleda kako biste provjerili promjene

Usporedba prikaza​

Usporedite svoj smjer dizajna sa:

  • Originalnim dizajnom — vidite šta se promijenilo
  • Dizajnom konkurenata — uporedite sa inspirativnim sajtovima
  • Prethodnim verzijama — vratite se na ranije smjerove dizajna

Odobrenje Smjera Dizajna​

Kada ste zadovoljni svojim dizajnom:

  1. Pregledajte oba predgleda — provjerite da li su desktop i mobilni izgled dobri
  2. Provjerite sve boje — osigurajte kontrast i pristupačnost
  3. Testirajte tipografiju — provjerite čitljivost na svim veličinama
  4. Potvrdite raspored — provjerite razmak i poravnanje
  5. Odobrite dizajn — nastavite sa generisanjem teme

Sljedeći koraci​

Nakon što odobrite smjer dizajna:

  1. Theme Builder generiše vašu kompletnu temu
  2. Tema se instalira na vaš WordPress sajt
  3. Možete dalje kustomizovati koristeći WordPress customizer
  4. Nastavite sa Hospitality Menus ili drugim funkcijama

Najbolje prakse​

  • Testirajte na stvarnim uređajima — koristite stvarni telefoni i tablete ako je moguće
  • Provjerite čitljivost — osigurajte da je tekst čitljiv na svim veličinama
  • Provjerite kontrast — koristite Validate Palette Contrast za pristupačnost
  • Razmislite o performansama — optimizujte slike i fontove za brzinu
  • Planirajte sadržaj — osigurajte da raspored radi sa vašim stvarnim sadržajem

Rješavanje problema​

Predgled se ne ažurira​

  • Osvežite stranicu
  • Obrišite keš pregledača
  • Pokušajte sa drugim pregledačem
  • Provjerite internet konekciju

Boje izgledaju drugačije​

  • Provjerite postavke boje monitora
  • Pokušajte na različitim uređajima
  • Potvrdite kontrast boja alatima za pristupačnost
  • Razmislite o simulatorima bočne slepiloće

Problemi sa tipografijom​

  • Provjerite da li se font fajlovi učitavaju
  • Provjerite veličinu fonta na različitim prekidačima
  • Testirajte sa stvarnim sadržajem
  • Razmislite o dužini linije radi čitljivosti

Povezana dokumentacija​