Skip to main content

Direcția de Design

Pasul Direcția de Design vă permite să revizuiți, să rafinați și să finalizați designul vizual al temei, înainte ca Theme Builder să genereze tema completă.

Prezentare Generală​

După finalizarea Interviului de Descoperire (Discovery Interview), Theme Builder vă prezintă direcția de design cu vizualizarea pentru desktop și mobil. Acest lucru vă permite să vedeți exact cum va arăta designul pe diferite dispozitive înainte de a vă angaja pe tema respectivă.

Componentele Direcției de Design​

1. Paleta de Culori​

Schema de culori a temei dvs., incluzând:

  • Culoarea primară — culoarea principală a brandului, folosită pentru butoane, link-uri și accente
  • Culoarea secundară — o culoare complementară, pentru varietate
  • Culoarea accentului — culoarea de evidențiere pentru elemente importante
  • Culori neutre — griuri și albe, pentru fundaluri și text
  • Culoarea textului — culoarea principală a textului, pentru lizibilitate

2. Tipografie​

Selecțiile de font pentru:

  • Font pentru titluri — folosit pentru titlurile paginilor și anteturile secțiunilor
  • Font pentru corp — folosit pentru textul paragrafului și conținut
  • Mărimi de font — dimensiuni responsive pentru diferite lățimi de ecran
  • Înălțimea liniei — spațierea dintre linii, pentru lizibilitate
  • Greutățile fontului — variații bold, regular și light

3. Layout și Spațiere​

  • Lățimea containerului — lățimea maximă pentru conținut
  • Padding și marginile — spațierea în jurul elementelor
  • Sistem de grilă — layout cu coloane pentru design responsive
  • Spațierea componentelor — distanța dintre elementele UI

4. Elementele vizuale​

  • Stiluri de butoane — designuri pentru butoane primare, secundare și terțiare
  • Designuri de carduri — layout-uri pentru blocuri de conținut
  • Iconițe — stilul și dimensiunea iconițelor
  • Borduri și umbre — adâncime vizuală subtilă
  • Efecte la trecerea cursorului — stilizarea stării interactive

Vizualizarea (Preview Rendering)​

Vizualizare Desktop​

Vizualizarea desktop arată designul la lățimea completă (de obicei 1200px sau mai mult):

  • Meniul de navigare complet
  • Layout complet cu toate coloanele
  • Tipografie și spațiere mari
  • Toate elementele vizuale la dimensiunea completă

Vizualizare Mobil​

Vizualizarea mobil arată designul la lățimea mobilă (de obicei 375px):

  • Navigație responsive (meniu hamburger)
  • Layout cu o singură coloană
  • Tipografie și spațiere ajustate
  • Dimensiuni de butoane prietenoase pentru atingere

Puncte de ruptură responsive (Responsive Breakpoints)​

Theme Builder generează vizualizări la aceste puncte de ruptură:

DispozitivLățimeVizualizare
Mobil375pxTelefon în portret
Tabletă768pxTabletă pe orizontală
Desktop1200pxDesktop pe lățime completă
Desktop mare1920pxEcran ultra-wide

Rafinarea Designului​

Efectuarea Ajustărilor​

Puteți rafina direcția de design făcând următoarele:

  1. Ajustarea culorilor — schimbați orice culoare din paletă
  2. Schimbarea fonturilor — selectați tipuri diferite de fonturi
  3. Modificarea spațiului — ajustați padding-ul și marginile
  4. Actualizarea layout-ului — schimbați lățimile containerelor și coloanele grilă
  5. Personalizarea elementelor — modificați stilurile de butoane, designurile de carduri etc.

Actualizările Vizualizării​

Schimbările se reflectă în timp real:

  • Vizualizarea desktop se actualizează imediat
  • Vizualizarea mobil se actualizează imediat
  • Toate puncte de ruptură responsive se actualizează
  • Puteți comuta între vizualizări pentru a verifica schimbările

Vizualizarea Comparativă​

Comparați direcția de design cu:

  • Designul original — vedeți ce s-a schimbat
  • Designurile concurenților — comparați cu site-uri de inspirație
  • Versiunile anterioare — reveniți la direcții de design mai vechi

Aprobarea Direcției de Design​

Odată ce sunteți mulțumit de design:

  1. Revizuiți ambele vizualizări — verificați dacă aspectul pe desktop și mobil este bun
  2. Verificați toate culorile — asigurați contrastul și accesibilitatea
  3. Testați tipografia — verificați lizibilitatea la toate dimensiunile
  4. Confirmați layout-ul — verificați spațierea și alinierea
  5. Aprobați designul — continuați la generarea temei

Pași Următori​

După aprobarea direcției de design:

  1. Theme Builder generează tema completă
  2. Tema este instalată pe site-ul dvs. WordPress
  3. Puteți personaliza mai departe folosind customizer-ul WordPress
  4. Continuați la Hospitality Menus sau alte funcționalități

Cele mai bune practici​

  • Testați pe dispozitive reale — folosiți telefoane și tablete reale, dacă este posibil
  • Verificați lizibilitatea — asigurați că textul este lizibil la toate dimensiunile
  • Verificați contrastul — folosiți Validate Palette Contrast pentru accesibilitate
  • Luați în considerare performanța — optimizați imaginile și fonturile pentru viteză
  • Planificați conținutul — asigurați-vă că layout-ul funcționează cu conținutul real

Depanare (Troubleshooting)​

Vizualizarea nu se actualizează​

  • Reîmprospătați pagina
  • Ștergeți cache-ul browserului
  • Încercați un alt browser
  • Verificați conexiunea la internet

Culorile arată diferit​

  • Verificați setările de culoare ale monitorului
  • Încercați pe diferite dispozitive
  • Verificați contrastul culorilor cu instrumente de accesibilitate
  • Luați în considerare simulatoare pentru daltonism

Probleme de tipografie​

  • Verificați că fișierele fonturilor se încarcă
  • Verificați dimensiunea fontului la diferite puncte de ruptură
  • Testați cu conținut real
  • Luați în considerare lungimea liniei pentru lizibilitate

Documentație Relacionată​