Disseny: colors, tipografia, capçalera transparent, logotip i favicon

Tot l’aspecte de la web es decideix en un lloc: Ajustos del lloc, a la barra superior del dissenyador, pestanya Disseny. No hi ha fulls d’estil ni temes per instal·lar: dos colors, una tipografia, el logotip, i la web sencera s’hi adapta.

Colors

• Color principal — el dels botons, els enllaços, els fons de color i les icones. D’ell en surten sols el to fosc per als degradats, el to suau per als fons «Suau» i el color del text a sobre (blanc o negre, segons el que es llegeixi millor).
• Color d’accent — el segon color, per als segells, els destacats i el fons «Color d’accent» dels blocs.

Tria el principal del logotip o del local. Si dubtes, un sol color ben triat i l’accent semblant però més clar queda millor que dos colors que competeixen.

Fons clar o fosc

Fons: Clar (blanc, text fosc) o Fosc (text clar sobre fons fosc). El fosc funciona bé en restaurants de nit, cocteleries i estudis; el clar, en clíniques, comerços i despatxos.

Tipografia

Cinc famílies, totes del sistema (la web no descarrega fonts de tercers, així carrega ràpid i sense cookies):

Capçalera

• Sòlida — la barra del menú sempre té fons, des de dalt.
• Transparent sobre la portada — el menú es dibuixa a sobre de la foto o vídeo de portada, sense fons, i es torna sòlid en baixar. És l’efecte que es veu al restaurant d’exemple.

Perquè la transparent quedi bé necessites el logotip clar (vegeu més avall) i una portada amb Enfosquir el fons al 40-50 %, perquè el menú blanc es llegeixi sobre la foto.

Logotip, logotip clar i favicon

• Logotip — el normal, en color. Si no en puges cap, es fa servir el logotip de la fitxa de l’empresa.
• Logotip clar (per a la capçalera transparent) — la versió en blanc del logotip, que es veu sobre la portada; en baixar apareix el normal. Si no el puges, sobre la portada es veu el normal, que amb un logotip fosc sobre foto fosca no es distingeix.
• Alçada del logotip (px) — per defecte 44. Un logotip horitzontal pot anar a 36-44; un de quadrat o amb molt detall, a 56-64.
• Icona de la pestanya (favicon) — el quadradet que surt a la pestanya del navegador. Una imatge quadrada, PNG amb fons transparent, de 256 × 256 o més. Si no en poses cap, es fa servir el logotip.

Les imatges es trien de la Biblioteca de mitjans: puja-les allà primer (o prem Seleccionar i puja-les des del mateix selector).

El botó destacat del menú

• Botó destacat del menú (text) — un botó de color a la dreta del menú: «Reservar», «Demanar cita», «Truca’ns». Es tradueix per idioma.
• Enllaç del botó del menú — la pàgina o acció a la qual porta: reservas, #contacto, whatsapp, telefono… Com s’escriu un enllaç.

Botó flotant de WhatsApp

A la pestanya Avançat: Botó flotant de WhatsApp, activat per defecte. Mostra el botó verd a baix a la dreta a totes les pàgines, que obre un xat amb el número de Contacte → WhatsApp. Si el camp WhatsApp està buit, el botó no surt.

Text del peu

També a Avançat: Text del peu, una línia sota el peu de pàgina (el nom comercial, el copyright, «Dissenyat amb afecte a…»). El peu mostra a més les dades de contacte, l’horari, les xarxes i els enllaços legals.

Fons, espaiat i animació de cada bloc

El que acabem de veure és global. A més, cada bloc té a Ajustos del bloc el seu propi fons (blanc, suau, color principal, color d’accent, fosc, degradat o imatge), el seu espaiat i si s’anima en aparèixer. Alternar fons blanc i suau entre blocs dóna ritme a la pàgina sense necessitat de res més.

Veure el resultat

La vista prèvia del dissenyador s’actualitza en desar. Prova amb el selector d’idioma i estreny la finestra del navegador per veure com queda al mòbil: més de la meitat de les visites arribaran des del telèfon.

Continua per aquí

• Els blocs — la portada on llueix la capçalera transparent
• Idiomes i traduccions
• SEO, legal, cookies i publicar
• Primers passos i plantilla per sector