Share
Cosa starai creandoQuesto tutorial ti mostrerà come organizzare una guida di stile usando Sketch. Inoltre ti insegnerà alcune abilità fondamentali per l'utilizzo di Sketch in altre situazioni. Andremo su tutto, dall'impostazione della tipografia, utilizzando tipi di griglia assortiti, alle best practice per l'utilizzo di "simboli" e "stili condivisi".
L'impostazione di stili di tipo riutilizzabili in Sketch ti farà risparmiare un sacco di tempo. Con lo strumento di testo selezionato vedrai una piccola casella sul lato destro dell'app che ti consente di impostare tutti i tipi di stili di testo come la famiglia di caratteri, il peso del carattere e persino la spaziatura dei caratteri.
Vediamo come possiamo usarlo nel nostro documento di guida sullo stile.
Ogni volta che lavoro con la tipografia mi piace usare la copia reale (al contrario della copia generica del filler). Penso che faciliti l'esperienza di progettazione e dia al risultato finale più contesto e voce genuina.
Inizia con i diversi tipi di testo che il tuo progetto avrà. In questo file abbiamo quattro titoli, non sei, in quanto non ne abbiamo bisogno.
Nota: Ognuno di questi è un oggetto di testo separato.
È consigliabile inserire i livelli nell'ordine correttoIl primo elemento da progettare è l'intestazione secondaria, che segue l'H1, ma ne parleremo più avanti. Lo schizzo non ha un'impostazione per dettare il carattere "caso", quindi per ottenere che l'intestazione secondaria sia maiuscola, devo inserirla manualmente.
Fatelo quando pertinente per ogni elemento di testo che avete. Non preoccuparti ancora di spaziatura sulla tavola da disegno, ne parleremo più avanti.
È possibile creare stili di testo riutilizzabili in due modi. Per prima cosa, seleziona un testo con lo stile che ti piace, quindi fai clic su Nessuno stile di testo dall'alto le impostazioni del tipo sulla destra. Quindi, selezionare Crea un nuovo stile di testo dalla fermata in giù.
Nota: Per trasferire questi stili in altro i file copiano e incollano gli oggetti di testo desiderati e gli stili saranno trasferiti automaticamente.
Il secondo modo per creare uno stile di testo in Sketch è creare il nuovo stile di testo nel menu a discesa, come hai visto sopra, e quindi aggiungere lo stile per quello stile. Non importa quale viene prima. Ciò che importa è che tu capisca che qualsiasi modifica allo stile di uno stile di testo influirà su tutti gli altri elementi di testo che usano quello stile. Pertanto, se ho cambiato il colore dell'intestazione Mini, rifletterebbe questo cambiamento su ogni singolo elemento.
Non esiste un modo semplice per regolare lo stile per le diverse dimensioni dello schermo. Il mio attuale lavoro è creare stili di testo separati per gli schermi mobili oltre ai miei stili desktop.
Ci sono tre riferimenti per le misure in Sketch: griglia, layout e righello. Esaminiamo tutti e tre molto velocemente e vediamo come dovrebbero essere usati. Fatto ciò, parleremo di usarli per configurare il layout della tua pagina.
Per attivare o disattivare la visualizzazione del righello, premere ctrl + R (facile da ricordare). I righelli non dovrebbero essere usati come principale forma di griglia in Sketch, le altre due opzioni sono molto più adatte a questo. Usa il righello per allineare le cose o per ricontrollare l'allineamento come nell'immagine qui sotto.
Analogamente al righello, per attivare la visualizzazione della griglia premere ctrl + G. La griglia è un sistema di quadrati che è possibile regolare il lato di. Li uso per i layout che non si attengono necessariamente a uno stile tipico della pagina Web centrata. Il bello della griglia in Sketch è che copre l'intera tavola da disegno (se aumenti la dimensione della tavola da disegno, la griglia crescerà).
È possibile impostare la dimensione delle unità Grid come qualsiasi cosa. È inoltre possibile evidenziare un insieme di righe, il valore predefinito è ogni 10.
Per cambiare il layout premi (indovina) ctrl + L. Questo è un tocco più complicato in termini di tutti i diversi punti dati che devi fornire, ma ti dà una griglia di layout perfettamente personalizzata; perfetto per la progettazione di siti Web!
La nostra griglia si basa su unità di 30 pixel, quindi tutti i numeri che vedi nello screenshot qui sotto riflettono. Una volta che sai qual è la tua griglia, inseriscila nel Impostazioni di Layout.
Se non sai quale dovrebbe essere la tua griglia, usa il Impostazioni di Layout giocare: mantiene le proporzioni e ricalcola tutto per te. Supponiamo, ad esempio, che il mio layout utilizzi undici colonne anziché dodici, mantenendo comunque la larghezza totale. Se diminuisco il conteggio delle colonne, Sketch mi fornirà le colonne aggiornate e le larghezze di gronda. Gioca in giro a vedere cosa succede.
Il lato negativo delle griglie in Sketch è che non puoi avere una nuova griglia per le nuove tavole da disegno. Forse è una buona cosa, ma non è così che tendo a lavorare. Se ho due tavole artistiche affiancate, una delle quali è per desktop e l'altra per mobile, è impossibile lavorare su di esse allo stesso tempo. Qui è dove pagine tornare utile. Se hai Elenco dei livelli guarda aperto, puoi vedere in alto qualcosa chiamato pagine.
Le pagine sono molto utili perché consentono un ulteriore livello di progettazione all'interno di un singolo documento. Puoi cambiare Grid e Layout nelle pagine e rimarranno gli stessi solo all'interno di quella pagina.
Potresti aver notato nei miei screenshot che la mia tipografia non è allineata alle linee della griglia. Avere linee di griglia non significa che le cose che prima erano allineate magicamente. Ogni volta che cambi la posizione delle tue griglie dovrai allineare di nuovo i tuoi oggetti. La tipografia è diversa perché non inizia né termina dove si trova l'intera area dell'elemento. Puoi posizionare la linea di base della tipografia come vuoi in relazione alla griglia. Tocca a voi. L'ho messo in cima alle linee. Quindi permettimi di riallinearlo per te.
Come puoi vedere, il paragrafo mobile non si allinea; la sua altezza è di 24px. Ha quindi bisogno della sua pagina e del layout della griglia. Ma ai fini di questa soluzione, può rimanere disallineato.
Diamo un'occhiata a come salvare i colori all'interno di Sketch in modo da poterli riutilizzare.
Diciamo che vorrei aggiungere una riga di viola da utilizzare come accenti in questo design. Copia e incolla la riga verde e seleziono un viola. Per rendere le cose molto più veloci, ho deciso sulle tonalità più chiare del viola cambiando l'opacità dei colori originali rispettivamente al 70%, al 50% e al 20%.
Quello che fai dopo per ottenere il colore è usare lo strumento Color Eyedrop e selezionare la nuova tonalità. Non dimenticare di cambiare l'opacità al 100%.
Quindi, usa il piccolo + nella parte inferiore dei campioni di colore per salvare il colore nella tavolozza dello schizzo. La differenza tra Colori globali e Colori del documento è come suggeriscono i loro nomi, i colori globali verranno salvati in Sketch per riutilizzarli in tutti gli altri file di schizzo che si aprono mentre i colori del documento rimangono solo all'interno di quel documento specifico.
Ho un sacco di semplici elementi dell'interfaccia utente nel mio file di Sketch.
Li tengo qui per poter copiare rapidamente quelli che mi servono nei nuovi progetti su cui sto lavorando. Ti mostrerò come creare stili e simboli condivisi per riutilizzarli.
Stili condivisi sono gli stili che puoi riutilizzare di nuovo. Ad esempio, l'input attivo / focalizzato è costituito da tre componenti, il testo dell'etichetta, il testo di input e la casella di input.
Il rettangolo ha uno stile specifico, ha uno sfondo bianco, un bordo blu con un singolo pixel e un'ombra interna blu chiaro. È qualcosa che è riutilizzabile se stai lavorando su più input.
Sul lato destro, sopra tutto lo stile che ho appena descritto, puoi vedere il testo che dice Nessuno stile condiviso. Puoi salvare queste caratteristiche di stile nello stesso modo in cui abbiamo salvato lo stile del testo per le nostre intestazioni. Salvalo e riutilizzalo quanto vuoi. Ma ricorda che se cambi qualche aspetto dello stile salvato in futuro, questo avrà un impatto su ogni elemento che condivide quello stile.
Uso questa funzionalità per molti stili diversi, come lo stato di input degli errori e persino i miei tre pulsanti (quello blu, quello nero e quello bianco).
I simboli sono una grande caratteristica di Sketch che uso molto. I simboli sono riconoscibili dalla loro cartella viola in Elenco dei livelli che non ho aperto nei miei screenshot. Per cambiare la sua vista vai a Visualizza> Mostra elenco livelli o premere Comando + Opzione + 1.
Facciamo l'input che ho usato in Stili condivisi come esempio anche per Symbol. Per prima cosa, facciamo un gruppo. Per fare quella stampa Comando + G.
Per renderlo un simbolo, puoi utilizzare l'icona nella parte in alto a sinistra dell'app Schizzo. È inoltre possibile utilizzare la stessa area per il salvataggio di uno stile condiviso per salvare anche un gruppo come simbolo. Una volta che lo fai, chiamalo.
Un simbolo differisce dall'altro stile riutilizzabile in quanto è un gruppo di elementi che è possibile aggiornare dappertutto, invece di un singolo stile come il colore del rettangolo di input o lo stile di testo dell'etichetta. I simboli mantengono spaziatura e ridimensionamento di questi elementi mentre li riutilizzi.
Un'altra caratteristica interessante di Simboli è che puoi selezionare quale elemento di testo desideri riutilizzare letteralmente, cioè il testo attuale rimane lo stesso, oppure puoi escludere il valore del testo di un elemento di testo selezionato. Questa è una caratteristica fantastica che adoro. Sarebbe inutile riutilizzare i miei simboli di input se non potessi rinominarne uno in "Nome" e l'altro in "Cognome".
Queste funzionalità ti aiuteranno a creare le tue guide di stile all'interno di Sketch. Scarica i file sorgente e gioca con ciò che è stato creato. Non vedo l'ora di sentire i vostri suggerimenti per miglioramenti! E se sei alla ricerca di ulteriori spunti per lavorare con Sketch, dai un'occhiata alla categoria di file Sketch su Envato Market.
Accentsconagua