Come creare una guida allo stile di schizzo, una libreria e un kit dell'interfaccia utente

Ogni progetto di design può beneficiare di una guida di stile ben congegnata. Usa questo tutorial per creare un kit dell'interfaccia utente e creare contemporaneamente una libreria personalizzata (e riutilizzabile) per la prototipazione rapida.

Che tu sia un esperto di Sketch o un principiante di Sketch, i designer scopriranno che la creazione di guide di stile in Sketch può essere una risorsa preziosa per il loro toolbox di progettazione che può far risparmiare molto tempo.

Una guida di stile non solo aiuta a mantenere le cose coerenti, ma consente anche di aggiornare elementi come colori e icone su più documenti con molto meno problemi. Questo tutorial illustra il processo passo passo di creazione di una guida di stile e di un kit dell'interfaccia utente e fornirà ai progettisti una migliore comprensione dei simboli di Sketch, facendo riferimento a una libreria di Sketch per i loro progetti e confidando nell'organizzazione delle proprie risorse di progettazione.

Creazione della guida allo stile di schizzo

"Una guida di stile è un 'documento vivente' completo che tiene traccia di tutti gli elementi ripetuti per un progetto, dalle regole di branding fino alla quantità di smussatura per i pulsanti di invito all'azione", secondo UXPin. Una guida di stile può includere qualsiasi cosa, da semplici elementi visivi a vocabolario e immagini approvate. Questo tutorial copre l'organizzazione, i colori, le icone, i caratteri, gli stili di testo e le risorse.

Fase uno: organizzazione

1. Crea una cartella principale per contenere file di schizzo, plug-in e altre risorse necessarie come caratteri e iconografia. (I plug-in verranno discussi alla fine del tutorial.)
2. Avvia un nuovo file di schizzo e chiamalo "Libreria di nomi client". Ad esempio, se il tuo cliente è Toptal, il tuo file dovrebbe essere chiamato "Libreria Toptal".

Fase due: colori

Se i colori sono già stati selezionati, il passaggio successivo consiste nel convertire i colori in simboli.

1. Per fare ciò, crea quadrati della stessa dimensione e cambia i loro colori di conseguenza. Fare clic su "Crea simbolo" e salvare questi elementi utilizzando il sistema di etichettatura color/ @colore-nome . Color/@pink , color/@background-gray o color/@FFFFF sono esempi di etichette corrette. Le convenzioni di denominazione sono importanti per mantenere organizzata una guida di stile, quindi un formato per tutto dovrebbe essere stabilito e rispettato dall'inizio.
2. Una volta completati, aggiungili alla pagina della guida di stile.
3. Salva il campione di colore nella sezione documenti della tavolozza dei colori.

Scorciatoie utili: R - strumento rettangolo, T - strumento testo, alt - misura distanza.

Fase tre: icone

Trasformare le icone in simboli dinamici consente di cambiare facilmente il loro colore in uno qualsiasi dei colori salvati nel passaggio due sopra. Ciò significa che dopo che un'icona è stata inserita in un disegno, il colore può essere modificato tramite un semplice menu a discesa, chiamato "sovrascrittura", utilizzando "Impostazioni" a destra dell'area di disegno.

1. Salva l'icona come simbolo (se possibile, attieniti a .svg per il tipo di risorsa).
2. Vai nella pagina dei simboli, trova l'icona e mascherala con un colore predefinito tra i colori precedentemente salvati. Per fare ciò, sovrapponi il simbolo del colore sopra l'icona e fai clic su "Maschera" nella barra degli strumenti (o fai clic con il pulsante destro del mouse e seleziona "Maschera" dal menu a comparsa).
3. Dopo che l'icona è stata mascherata, rimuovi il riempimento deselezionando la casella di controllo nella sezione "Riempi" nell'Inspector.
4. Organizza le icone nella pagina della guida di stile. Nella stessa sezione, è utile specificare il colore per le icone attive e inattive, oltre a qualsiasi altra specifica importante del colore.

Fase quattro: stili di testo

Una volta scelti i caratteri, è il momento di specificare gli stili di testo: H1, H2, H3, H4, H5, corpo, collegamenti, didascalie, etichette, ecc. Un buon riferimento per la tipografia web è questo post del blog di Typecast.

1. Scegli la dimensione, lo spessore, il carattere e l'interlinea per tutti gli stili necessari.
2. Scrivi una parola ("Digita qualcosa" appare automaticamente quando premi T, lo strumento testo) e formattala per riflettere i dettagli di stile scelti.
3. Fai clic su "Crea nuovo stile di testo".
4. Organizza gli stili di testo nella pagina della guida di stile.

Fase cinque: Risorse

Adesso per la parte divertente. È ora di combinare tutti i passaggi precedenti per creare alcune risorse. Se le risorse sono già state create, per coerenza, è meglio ricrearle utilizzando gli stili di testo, le icone e i colori che hai già scelto. Ad esempio, potrebbero esserci molti diversi colori di grigio all'interno del documento di progettazione funzionante di cui un progetto non ha tenuto conto, quindi ricreare la risorsa garantirà la coerenza del colore scelto. Non dimenticare di mantenere la denominazione coerente e assicurati di aggiungere risorse nella pagina della guida di stile man mano che vengono create.

Ecco alcune risorse suggerite su cui lavorare:

Bottoni

1. Crea questi simboli dinamici, proprio come le icone, mascherando il pulsante nel colore predefinito e rimuovendo il riempimento.
2. Per mantenere il testo sempre centrato, allarga la larghezza della casella di testo in modo che sia uguale al pulsante e centra il testo.
3. Per garantire la coerenza, assicurati di utilizzare gli stili di testo salvati.
4. Salva questi elementi come simboli usando il sistema di denominazione dei pulsanti/ nome dei pulsanti.
5. Utilizzare la funzione di sostituzione per modificare etichette e colori.

Barre di ricerca

1. Applica vincoli di ridimensionamento al campo di ricerca, icone e testo utilizzati all'interno del campo stesso.
2. Non dimenticare di applicare stili di testo e colori precedentemente salvati nella tavolozza dei colori del documento.
3. Salva questo elemento come simbolo usando la ricerca come titolo, oppure se hai diversi tipi di ricerca, attieniti al sistema di etichettatura come ricerca/standard e ricerca/nessuna icona .

Pulsanti di opzione e caselle di controllo

1. È possibile avere un simbolo all'interno di un simbolo e un buon modo per testarlo è creare risorse di pulsanti di opzione e caselle di controllo intelligenti.
2. Innanzitutto, crea la risorsa pulsante stessa. Salva questo elemento come simbolo utilizzando la casella di controllo/selezionato e la casella di controllo/deselezionata come esempio di etichettatura.
3. Ora crea l'input. Aggiungi del testo segnaposto accanto al simbolo della casella di controllo, quindi converti l'intera risorsa in un simbolo. Poiché questo è ora un input, si consiglia di salvare l'asset come tale, quindi una buona etichetta sarebbe input/checkbox/selected e input/checkbox/deselected .

Passaggio sei: usa la guida di stile!

Fare tutto questo lavoro per creare una guida di stile è utile solo se in realtà rende un progetto più fluido. Una volta create tutte le risorse, è il momento di applicare la libreria al documento in fase di progettazione. In Sketch, vai su "Preferenze -> Aggiungi libreria..." e aggiungi il documento della libreria.

Dopo aver aggiunto una libreria al file di progettazione del progetto, puoi accedere alla libreria e ai suoi simboli nella sezione simboli. Noterai la libreria iOS UI Design fornita con Sketch come opzione della libreria, così come la libreria che è stata importata di recente.

Se vuoi aggiornare un simbolo, fai doppio clic sul simbolo stesso e il tuo documento della biblioteca dovrebbe apparire. Dopo aver apportato le modifiche, torna al documento di progettazione e fai clic sul pulsante di aggiornamento nell'angolo in alto a destra.

Bonus: importazione/esportazione di stili di testo

Gli stili di testo non vengono salvati con una libreria, ma il plug-in Stili di testo condivisi per Sketch lo risolve. Una volta scaricato il plugin, vai al documento della libreria e poi al menu: “Plugin ‐> Stili di testo condivisi ‐> Esporta…” Salva questo file nella stessa cartella del documento della tua libreria. Quindi, nel tuo documento di progettazione vai di nuovo al menu: “Plugin ‐> Stili di testo condivisi ‐> Importa stili di testo…” e importa il file che hai appena salvato. Appariranno i tuoi stili di testo.

Bonus: importazione/esportazione delle tavolozze dei colori

Simile agli stili di testo, i colori dei documenti non vengono salvati con una libreria di schizzi, ma il plug-in Tavolozze di schizzi lo risolve. Più o meno come sopra, esporta la tavolozza usando "Plugin ‐> Tavolozza schizzo ‐> Colori documento ‐> Salva tavolozza" e importala con "Plugin ‐> Tavolozza schizzo ‐> Colori documento ‐> Carica tavolozza". Ricordati di salvarlo nella stessa cartella degli altri documenti della tua biblioteca.

Bonus: caratteri

Craft di InVision è una suite di plugin che portano il software Sketch a un livello superiore. Craft ti consente di sostituire le immagini con foto d'archivio, creare prototipi e sincronizzare con InVision, creare librerie e altro ancora. Se Craft viene scaricato, premi "cmd-shift-c" nel documento e verrà generato un foglio di stile. I caratteri verranno elencati qui.

Seguendo i sei passaggi descritti sopra, i progetti di design grandi e piccoli verranno eseguiti in modo più fluido e il risultato finale sarà più raffinato. Se sono unici o molto specifici, la guida di stile, la libreria e il kit dell'interfaccia utente possono essere utilizzati per un client o per molti progetti se vengono creati costantemente elementi dell'interfaccia utente standard, come wireframe e prototipi. Dedicare tempo, all'inizio, alla creazione corretta di questi componenti dell'interfaccia utente di Sketch farà risparmiare molto tempo su tutta la linea e potenzialmente in molti progetti.

Ulteriori letture sul blog di Toptal Design:

• Perché le startup hanno bisogno di una guida di stile
• Cose che potresti non sapere sulla tipografia in Sketch
• L'elenco definitivo dei 50 migliori plugin per schizzi
• Adobe XD vs. Sketch: quale strumento UX è giusto per te?
• Come creare un framework di progettazione efficace (include un framework per l'interfaccia utente di Sketch gratuito)