Tutorial di schizzo

5 modi per mantenere pulito lo schizzo della cucina

Guarda come quel pasto è raggruppato all'interno del suo riquadro di selezione! Così fresco! Così pulito!

Disclaimer: ho appena mangiato, quindi il cibo è nella mia mente. Rotola con me.

Se guardi The Travel Channel o The Food Network tanto quanto me, avrai visto un sacco di incredibili cucine dai migliori ristoranti di tutto il mondo. Qualcosa che hanno tutti in comune? Cucine perfettamente pulite.

Una cucina così pulita da far guardare agli utenti!

Ristoranti come The Alinea a Chicago prendono molto sul serio la pulizia, e la prova è nel loro budino (anche se dubito che un ristorante a 3 stelle Michelin serva budino). Ecco cosa qualcuno ha detto riguardo al rituale di pulizia della cucina di Alinea:

Abbiamo pulito almeno 4 volte durante le 9-10 ore che ero lì [visitando]. Quattro grandi pulizie totali e numerose piccole pulizie. Aggiungilo ai continui sweep di linea e aspirando ogni 20 minuti. La stazione di tutti era immacolata, e se era meno che perfetta, lo chef era sicuro di spazzare via, sgridarti e aggiustarlo. Era favorevole a lavorare in modo pulito, avendo un ambiente così pulito. Tutto era lucido, niente "sporcizia da cucina" da nessuna parte. Tutto l'equipaggiamento - i dispositivi di raffreddamento, lo scaffale inferiore sul tavolo di preparazione, il fondo delle pentole e delle padelle, il fondo delle pentole dell'hotel, il retro dell'attrezzatura, gli scaffali sotto la fila, le finestre - tutto era pulito. Questa era una cucina in cui qualsiasi superficie era abbastanza pulita da mangiare fuori. (altro qui)

Più pulita è la tua cucina, migliore sarà il tuo prodotto. Ecco alcuni consigli per evitare la "sporcizia della cucina" nei tuoi progetti Sketch in modo da rimanere efficiente e i tuoi risultati finali lucidati:

1. Attenersi a una griglia di base

Non ti dirò di usare una dimensione particolare, solo finché ti attieni. Personalmente preferisco una griglia di base 8px perché gioca bene con vari standard tipografici e ha più divisori (1, 2, 4, 8px) rispetto a (1, 5, 10px), ma so che le griglie di base 10px sono popolari poiché tutti i design le applicazioni vengono fornite con Maiusc + ← come 10px. Quindi usa qualunque cosa galleggi il tuo rimorchiatore. È possibile utilizzare Nudg.it per modificare la distanza Maiusc + ← predefinita per risparmiare tempo. Questo fa meraviglia quando stai progettando in uno stile come Google Material Design che funziona su una griglia di 8px.

Attenersi a una griglia renderà i componenti di spaziatura un gioco da ragazzi e assicurerà un ritmo visivo perfetto. Rimuove le congetture durante la spaziatura dei componenti, perché le distanze devono essere multiple del valore della griglia della linea di base. Come bonus, i tuoi sviluppatori ti adoreranno perché probabilmente lavoreranno con un framework di layout che aderisce a un sistema a griglia.

2. Utilizzare le caselle di delimitazione

Dopo aver impostato la griglia della linea di base, è incredibilmente utile utilizzare i riquadri di delimitazione per mantenere gli oggetti sulla tavola da disegno organizzati e distanziati in modo coerente. Nell'immagine seguente, utilizzo i riquadri di delimitazione per ciascun elemento della scheda e in realtà non devo inserire spazio tra i gruppi di schede. La spaziatura è incorporata nel riquadro di delimitazione, quindi ogni scheda è aderente a quella accanto. L'uso di un plug-in come il pulsante Relabel di Ken Moore ti consentirà di creare schede con spaziatura uniforme come questa in pochi secondi.

Inoltre, gli oggetti con riquadri di delimitazione hanno aree di clic più grandi e consentono di utilizzare elementi come ombre interne come divisori o evidenziatori. Il che ci porta a ...

3. Non usare mai linee per divisori

Mentre ci occupiamo delle dimensioni dell'area dei clic, possiamo parlare di quanto sia difficile afferrare un segmento di linea ?! È come se Sketch stesse dicendo "Sappiamo che ci sono 2 milioni di pixel sullo schermo, ma devi fare clic solo su questo. Non che o ... no ... il ... no ... almos ... inchiodato io ... no. "

In secondo luogo, anche se si seleziona l'opzione Adatta al pixel in Preferenze di schizzo, il ridimensionamento di una linea lo inserirà sempre nei sotto-pixel. Super aggravante, e rovinerà davvero la tua spaziatura altrove perché il righello arrotonderà i valori per qualsiasi oggetto che si trova su pixel secondari.

Quindi cosa dovresti fare invece? Consiglio di usare le ombre interne per disegnare le linee. Disegna un rettangolo e dagli un'ombra interna in questo modo:

Perché è meglio? Ora hai un'area di clic molto più ampia, sei protetto dal subpixel temuto e, soprattutto, puoi usarlo come stile. Immagina di creare un elenco di elementi e desideri una riga che separa ciascun elemento. Invece di un mucchio di testo più una linea, ora puoi impostare il rettangolo di selezione e dargli un'ombra interna. Quant'è fico?!

Nota: fino a quando Sketch non supporta i bordi con lati controllabili, ho scoperto che le ombre interne sono il metodo migliore per cose come questa.

4. Organizza i tuoi stili e simboli

Questo è facile. Sapevi che puoi creare sottomenu di stile e simboli in Sketch? Inserendo le barre nel nome dello stile e dei simboli, è possibile creare una struttura a "cartelle" organizzata per trovare le cose in un secondo momento.

Alfabetizza anche le cose nel tuo sottomenu per te! Grazie, schizzo!

5. Dai un nome ai tuoi livelli ... Tutti

Seleziona un oggetto sulla tavola da disegno e impara questa sequenza di tasti di scelta rapida:

Comando + Maiusc + J
Command + R

Fatto?! Dovrebbe selezionare il livello nell'elenco dei livelli, quindi evidenziare il nome del livello per consentire di modificarlo. Suggerimento: Usa il tasto Tab per passare al livello successivo nell'elenco dei livelli per rinominare anche quello! Consiglio questo plugin di Rodrigo Soares di rinominare più livelli contemporaneamente, trovare e sostituire e rinominare con il sequenziamento!

Nella schermata qui sopra, vedrai che ho chiamato il livello "Nome" di Jason Burke. Perché? Bene perché è quello che è. Per impostazione predefinita, Sketch assegnerà il nome al livello in base al testo all'interno, ma vedere "Jason Burke" in un elenco di potenzialmente centinaia di livelli non è particolarmente utile per me.

Quindi cosa ... non è un grosso problema? Non proprio no. Ma dove diventa eccezionalmente utile è quando puoi fare cose del genere:

Confessione: non usavo mai la funzione di ricerca per trovare i livelli, ma una volta ho iniziato a nominare i livelli semanticamente per descrivere ciò che era il contenuto e non quello che diceva il contenuto, quindi ho capito il potere di cercare i livelli.

Un'ultima cosa ... pulita mentre vai. Al termine della progettazione dell'elemento dell'elenco, rinominalo! Raggruppalo! Se ti senti selvaggio ... simboleggialo! Una piccola quantità di lavoro lungo la strada ti farà risparmiare un sacco di tempo a lungo termine.

A nessuno piace pulire una torre di piatti sporchi dopo aver trascorso un'ora a cucinare la cena, quindi fatti un favore e pulisci mentre vai! Buon disegno!

Molte delle immagini utilizzate in questo post sono state prese direttamente da UX Power Tools che abbiamo progettato meticolosamente tenendo presente queste (e altre) tecniche.

Dai un'occhiata a https://www.uxpower.tools e seguici su Twitter @uxpowertools. Seguimi anche se ti divertivi: @thejmoore.