Skip to main content

Direcció de Disseny

El pas de la Direcció de Disseny et permet revisar, refinar i finalitzar el disseny visual del teu tema abans que Theme Builder generi el tema complet.

Resum​

Després d'acabar amb l'Entrevista de Descobriment, Theme Builder t'apresenta la direcció del teu disseny amb previsualització en desktop i mòbil. Això et permet veure exactament com tindrà la teva màquina visual en diferents dispositius abans d'comprometir-te amb el tema.

Components de Direcció de Disseny​

1. Paleta de Colors​

El esquema de colors del teu tema, inclou:

  • Color primari — color principal de la marca que es utilitza per botons, enllaços i accents
  • Color secundari — color complementari per a aportar varietat
  • Color d'accent — color destacat per a elements importants
  • Colors neutrals — grises i blancs per als fons i el text
  • Color de text — color de text principal per a la legibilitat

2. Tipografia​

Seleccions de fonts per:

  • Font de títol (Heading font) — utilitzada per els títols de pàgina i les ceps de secció
  • Font del corps (Body font) — utilitzada per al text dels paragrafes i el contingut
  • Sizes de font — mida responsiva per a diferents dimensions d'écran
  • Altura de línea (Line height) — espai entre línies per a la legibilitat
  • Pes de font (Font weights) — variacions negre, regular i lleuger

3. Disposició i Espaciament​

  • Amplitud del contèiner — amplat max per al contingut
  • Padding i margins — espai al voltant dels elements
  • Sistema de grilla (Grid system) — disposició de colones per a disseny responsiv
  • Espai entre components — distància entre els elements d'interfície de l'usuari (UI)

4. Elements Visuals​

  • Estils de botons — dissenys de botons primari, secundari i terciari
  • Dissenys de cards — disposicions per a blocs de contingut
  • Il·lustracions (Icons) — estil i mida d'il·lustració
  • Bordes i ombres — profunditat visual subtil
  • Efectes al passar el mouse (Hover effects) — estilització de l'estat interactiu

Previsualització del Render​

Previsualització per a Desktop​

La previsualització per a desktop mostra el teu disseny amb màxima amplatza (normalment 1200px o més):

  • Menú de navegació complet
  • Disposició completa amb totes les col·lectives
  • Tipografia i espaciament grans
  • Tots els elements visuals en mida completa

Previsualització per a Mobile​

La previsualització per a mobile mostra el teu disseny al format mòbil (normalment 375px):

  • Navegació responsiva (menú hamburger)
  • Disposició de una sola columna
  • Tipografia i espaciament ajustats
  • Mires de botons amenedades per a toques

Punts de ruptura responsius (Responsive Breakpoints)​

El Theme Builder rendera les previsualitzacions en aquests punts de ruptura:

DispositivAmplatzaPrevisualització
Mobile375pxTelèfon vertical
Tablet768pxTablet paisatge
Desktop1200pxDesktop de màxima amplatza
Large Desktop1920pxPantalla ultra-ampla

Refinant el teu disseny​

Fes Ajustaments​

Pots refinar la direcció del teu disseny fent servir:

  1. Ajustar colors — canvia qualsevol color de la paleta
  2. Canviar fonts — selecciona tipografies diferents
  3. Modificar espaciament — ajusta el padding i els margins
  4. Actualitzar disposició — canvia amplatzes dels conteneurs i col·lectives de la grilla (grid columns)
  5. Personalitzar elements — modifica estils de botons, dissenys de cards, etc.

Actualitzacions de previsualització​

Les modificacions es reflecten en temps real:

  • La previsualització de desktop s'actualitza immediatament
  • La previsualització mòbil s'actualitza immediatament
  • S'actualitzen tots els breakpoints responsius
  • Pots passar entre les previsualitzacions per verificar els canvis

Vista de Comparació​

Compara la teva direcció de disseny amb:

  • Disseny original — ve que ho ha canviat
  • Dissenyos dels competidors — compara amb llocs d'inspiració
  • Versions anteriors — torna a direccions de disseny més antigues

Aprovació de la Direcció de Disseny​

Una vegada estiguis satisfet amb el teu disseny:

  1. Revisa les dues previsualitzacions — verifica que desktop i mòbil tenen una bona aparença
  2. Comprova tots els colors — assegura't del contrast i l'accessibilitat
  3. Prova la tipografia — verifica la legibilitat a totes les talles
  4. Confirma el pla — comprueba el espaciament i l'alineació
  5. Aprova el disseny — procedeix a la generació del tema

Pròximos Passos​

Després d'aprovar la teva direcció de disseny:

  1. El Theme Builder genera el teu tema complet
  2. El tema es instala al teu site WordPress
  3. Pots personalitzar més utilitzant el customizer de WordPress
  4. Procedeix a Hospitality Menus o altres funcions

Bones Pràctiques​

  • Prova en dispositius reals — utilitza telefons i tabletes reals si és possible
  • Comprova la legibilitat — assegura't que el text sigui llegible a totes les talles
  • Verifica el contrast — utilitza Validate Palette Contrast per l'accessibilitat
  • Considera el rendiment — optimitza les imatges i fonts per la velocitat
  • Planifica el contingut — assegura't que el pla funciona amb el teu contingut real

Solucionar Problemas​

La vista previa no se actualiza​

  • Actualitza la pàgina (Refresh the page).
  • Cleia la cache del navegador (Clear browser cache).
  • Prova amb un navegadore diferent (Try a different browser).
  • Comprova la connexió a internet (Check internet connection).

Els colors semblen diferents​

  • Comprova les configuracions de color del monitor (Check monitor color settings).
  • Prova amb dispositius diferents (Try on different devices).
  • Verifica el contrast de color amb eines d'accessibilitat (Verify color contrast with accessibility tools).
  • Considera simuladors de ceguera al color (Consider color blindness simulators).

Problemes de tipografia​

  • Comprova que els fitxers de font estan carregats (Verify font files are loading).
  • Comprova el size de la font en diferents breakpoints (Check font size at different breakpoints).
  • Testa amb contingut real (Test with actual content).
  • Considera la longitud de la línia per a la legibilitat (Consider line length for readability).

Documentació Relacionada​