Riuscito
Impostazioni colore
Imposta colori personalizzati per testo, titoli, bordi e icone per un’area specifica del tema.
Usa queste impostazioni per assegnare a un’area specifica del tema un proprio trattamento colore del primo piano nella documentazione Shopify sull’editor del tema. Queste impostazioni sostituiscono i colori del tema più ampi, il che è utile quando un’area in evidenza, promozionale o ricca di contenuti necessita di un contrasto migliore o di un aspetto più personalizzato.
Per un riferimento generale su come funzionano queste sostituzioni, consulta Riferimento alle impostazioni colore.
Sostituzioni colore
Sezione intitolata “Sostituzioni colore”Questo gruppo controlla i colori usati per bordi, icone, titoli, sottotitoli e testo del corpo. Anziché modificare la palette dell’intero negozio, puoi perfezionare il modo in cui i contenuti vengono presentati in un’area, così da renderli più chiari, più equilibrati o più distintivi.
Usa le sostituzioni quando cambia lo sfondo circostante, quando una campagna richiede un accento del marchio oppure quando i colori predefiniti non offrono abbastanza separazione tra i livelli di contenuto. Se un’area si legge già bene con la tua palette principale, in genere è meglio lasciare queste impostazioni così come sono.
Queste impostazioni sostituiscono le scelte colore del tema più ampie per l’area in cui vengono applicate. Usale in modo intenzionale, così che le aree personalizzate risultino deliberate anziché visivamente scollegate.
Creare una gerarchia del testo chiara
Sezione intitolata “Creare una gerarchia del testo chiara”I colori di titoli, sottotitoli e testo dovrebbero lavorare insieme per guidare lo sguardo. Mantieni il contrasto più forte per il testo più importante, usa un colore affidabile per il testo del corpo e scegli un tono di supporto più morbido per i sottotitoli solo se resta facile da leggere.
Se tutti i colori del testo sono troppo simili, i contenuti possono risultare piatti. Se sono troppo diversi, il design può sembrare disordinato. Punta a una gerarchia semplice che rimanga coerente tra aree di contenuto simili.
Usare bene bordi e icone
Sezione intitolata “Usare bene bordi e icone”Bordi e icone di solito funzionano meglio come elementi di supporto. I bordi possono separare i contenuti, incorniciare le card o aggiungere struttura, mentre i colori delle icone aiutano a rafforzare piccoli segnali senza competere con il messaggio principale.
Se le icone compaiono all’interno di forme contornate, assicurati che il colore dell’icona e il colore del bordo dell’icona risultino comunque coordinati. Un bordo sottile può apparire rifinito, ma se è troppo tenue potrebbe scomparire sullo sfondo.
Scegliere combinazioni leggibili
Sezione intitolata “Scegliere combinazioni leggibili”Controlla insieme le scelte colore, non un’impostazione alla volta. Un colore del titolo che da solo sembra intenso potrebbe non combinarsi bene con un testo del sottotitolo più morbido o con linee di bordo chiare una volta che l’intera area è assemblata.
Presta particolare attenzione al contrasto nei testi più piccoli, nelle icone decorative e nei bordi sottili. Questi elementi sono spesso i primi a diventare difficili da vedere quando i colori sono troppo chiari o con contrasto troppo basso.
Note sull’uso
Sezione intitolata “Note sull’uso”- Sostituisci con uno scopo preciso. Usa colori personalizzati quando un’area ha davvero bisogno di un trattamento del primo piano diverso, non solo di maggiore variazione.
- Proteggi la leggibilità. Controlla titoli, sottotitoli, testo, icone e bordi rispetto al reale sfondo usato in quell’area.
- Rivedi entrambe le viewport. I controlli per desktop e dispositivi mobili possono comportarsi in modo diverso, quindi conferma layout, allineamento, visibilità e comportamento dei media su entrambe le dimensioni dello schermo.
- Tieni presente lo stile di fallback. Valori vuoti, trasparenti o con stile predefinito in genere mantengono l’aspetto più ampio, mentre colori espliciti, gradienti o sostituzioni dei media rendono l’area locale più indipendente.
- Considera gli accenti come secondari. Usa i colori di bordi e icone per supportare struttura ed enfasi senza distogliere l’attenzione dai contenuti.
- Controlla con attenzione le scelte media. Quando i media per desktop e mobile sono configurati separatamente, verifica ritaglio, caricamento, fallback e leggibilità in entrambe le versioni.