Tutorial di schizzo

10 suggerimenti di schizzo per grafici belli e mantenibili (avviso GIF!)

Vedi tutti quei grafici nell'immagine sopra? Prendili qui o leggi qui:

Ho progettato molti grafici. È arrivato al punto in cui mi sento come se meritassi un dottorato onorario per la scienza dei dati, o almeno un tatuaggio sul mio braccio raffigurante un diagramma a dispersione logaritmica.

Ma sto divagando.

I grafici sono parte integrante dei prodotti di dati e rappresentano un ottimo modo per visualizzare gruppi di informazioni. Ho forti opinioni su quando e come dovrebbero essere usati, ma quello sarà un post per un altro giorno.

Oggi parliamo di progettare grafici in modo che siano entrambi piacevoli da guardare e, soprattutto, facili da mantenere. I grafici disordinati sono un pugno nell'occhio totale e nessuno vuole visualizzazioni che sembrano fatte in PowerPoint intorno al 1995 ... o come io lo chiamo, "i bei vecchi tempi".

D'ora in poi ci sono alcuni ProTips ™ che ho ideato dopo aver progettato un grafico a gazillion.

1. Utilizzare gli stili per gli assi del grafico e le linee della griglia

Se stai lavorando su un prodotto con una tonnellata di grafici, ti prenderai a calci se il cliente decide che vogliono griglie tratteggiate anziché solide. D'oh. Ora devo andare a trovare tutti quelli.

Non se sono stili! Controlla:

Questo sta solo mostrando l'asse principale. Gli stili sono ottimi anche per le linee della griglia (sono troppo sbiaditi per essere visualizzati nella GIF).

Devo dire che c'è un leggero ritardo nella GIF sopra perché sta cambiando lo stile dell'asse primario per oltre 60 grafici diversi in un colpo solo. Gli stili sono i migliori

2. Simboleggiano i punti dati

Mantenendo il nostro tema di aggiornamento di molti grafici contemporaneamente, la simbologia dei punti dati ti farà risparmiare circa diciannove anni e mezzo trascorsi ⌘ -Cliccando piccoli cerchi sulle tue tavole da disegno. Impostare un simbolo e riutilizzarlo ogni volta che è necessario un punto dati. Se decidi lungo la strada che vuoi che sia solido anziché vuoto, basta cambiare il simbolo di base. È così facile che anche la nonna potrebbe farlo!

Piccolo suggerimento: non fare i cerchi dei punti dati. Renderli quadrati con angoli arrotondati al 100% (raggio). Rende tutto molto più semplice se decidi di tornare ai quadrati!

3. Utilizzare una convenzione di denominazione comune per indirizzare facilmente i pezzi del grafico

Se hai 10 punti dati in un grafico a linee, usa un plugin come RenameIt per cambiare il nome del layer per tutti loro in "Punto dati". Non posso nemmeno iniziare a dirti quanto tempo ti farà risparmiare.

Ecco uno dei miei gruppi di livelli del grafico in modo da poter vedere i nomi dei livelli:

Se mai dovessi cambiare la lunghezza o la posizione di tutte le "Gridline orizzontali", faccio solo una ricerca di livello per ... stai catturando ... "Gridline orizzontale"! Quindi posso Maiusc + clic nella parte superiore e inferiore dell'elenco per selezionare tutte le linee della griglia attraverso le mie tavole da disegno e modificarne la lunghezza / posizione. Queste piccole cose si sommano, lo prometto.

4. Raggruppare i punti dati con le rispettive etichette degli assi

Questo può dividere i miei lettori, ma personalmente preferisco raggruppare i punti dati con le loro etichette degli assi, in particolare se sto lavorando su un grafico a barre o a colonne. Rende molto più semplice posizionare o eliminare tutto ciò che è associato a quel valore nel grafico contemporaneamente. Dai un'occhiata alla GIF qui sotto per vedere cosa intendo.

Nota: sto anche utilizzando un rettangolo di selezione attorno all'intero gruppo di dati. Dai un'occhiata al mio altro post "5 modi per mantenere pulita la tua cucina di schizzo" per vedere perché mi piace usare i riquadri.

5. Raggruppa linee e punti dati per un facile riposizionamento

Parlando di raggruppamento (no, non brancolare), se stai creando grafici a linee con punti dati, raggruppali insieme in modo da poterli spostare rapidamente e aggiornarli insieme. Sembra banale, ma ho visto decine di download gratuiti di grafici con linee e punti di dati semplicemente seduti volenti o nolenti sulla tavola da disegno come cuccioli persi nel parco senza guinzagli.

6. Utilizzare la distribuzione orizzontale / verticale per punti dati distribuiti uniformemente

Siamo reali, i grafici a linee sono così difficili da fare. Ma quando ho scoperto che è possibile utilizzare le azioni di allineamento della distribuzione sui vertici, ho pagato i miei prestiti scolastici, ho raggiunto il bullo delle superiori per il caffè e alla fine ho perso le ultime 10 sterline.

Seleziona la linea per la quale desideri spaziare uniformemente i vertici, fai clic su Modifica nella barra degli strumenti (o premi Invio sulla tastiera), seleziona tutti i punti con ⌘ + A, quindi fai clic sull'azione di distribuzione orizzontale nella parte superiore del riquadro a destra. Tada! Tutti i tuoi vertici ora sono perfettamente distanziati e allineati alle etichette dell'asse X corrispondenti (assicurati che siano distribuiti orizzontalmente con lo stesso metodo).

sopra

7. Assegna a ogni oggetto una regola di ridimensionamento

Sketch 39 è stato fornito con una funzione che tutti stavamo aspettando: ridimensionare le regole. Consulta il cheat sheet di ridimensionamento di Peter Nowell per essere sempre aggiornato.

Per impostazione predefinita, Sketch imposta ogni oggetto su Allunga, ma questo farà alcune cose brutte sul tuo grafico se provi a ridimensionare le cose direttamente dal cancello.

Ecco alcune regole di base, ma dovrai solo giocarci da solo per ottenere un grafico che si ridimensiona correttamente senza distorcere il grafico stesso:

  • Gli oggetti Edge devono essere bloccati su Edge. Ciò include l'intero asse Y, le etichette dell'asse X più a destra e a sinistra e i due punti dati più a destra e a sinistra se stai eseguendo un grafico a linee. Questo assicurerà che i bordi rimangano fissi, mentre tutto il resto all'interno si ridimensiona e galleggia.
  • Eventuali dati nell'area centrale del grafico dovranno probabilmente galleggiare in posizione. Ciò garantirà che mantenga le distanze relative ai punti dati circostanti e li protegga da stiramenti / distorsioni.
  • Le griglie dovrebbero essere impostate su Ridimensiona oggetto o Allunga. Non riesco a capire perché, ma personalmente preferisco ridimensionare l'oggetto.
Guarda, mamma! Nessuna distorsione! Vai a inserire Chart Wizard ™ nel tuo profilo Tinder.

8. Scala i grafici usando ⌘K per mantenere le proporzioni

Le regole di ridimensionamento funzionano meglio per il ridimensionamento orizzontale, ma a volte funzionano anche per il ridimensionamento verticale. Di solito è l'uno o l'altro, però.

Nel caso in cui desideri solo ridurre un grafico, è meglio usare ⌘ + K per ridimensionare il grafico, invece di selezionare il grafico e ridimensionarlo dall'angolo per trasformare le cose grabby (come si chiamano ...). Questo assicurerà che tutto sia ridimensionato, incluso il testo. Vedi sotto:

9. Impostare i punti dati su “mirror” per le curve di linea smussate

Come fanno curve così lisce e uniformi ?! - Io, tre mesi fa

Invece di lottare con lo strumento penna per disegnare una curva liscia e uniformemente distanziata, trovo che sia più facile disegnare i miei vertici con maniglie a specchio. Guarda la GIF qui sotto e nota che sto facendo clic e tenendo premuto Maiusc mentre trascino per aprire la maniglia del vertice. Mantenere la maniglia orizzontale manterrà piacevoli le transizioni tra i vertici e morbide. Dopo aver posizionato un vertice e aver aperto le maniglie, rilascia Maiusc, quindi fai clic e trascina il vertice successivo mentre tieni di nuovo premuto Maiusc.

10. Utilizzare il metodo "scarabocchio" per generare rapidamente un diagramma a dispersione

Questo è il mio preferito in assoluto, e ho appena scoperto questo metodo una settimana fa.

Nota: se stai provando a visualizzare dati reali nei tuoi modelli, questo metodo non ti aiuterà.

Stavo lavorando alla progettazione di un grafico a dispersione e mi stavo davvero stancando di duplicare i punti dati e trascinarli in giro per formare "la dispersione". Se, tuttavia, vuoi solo creare un grafico che assomigli a un diagramma a dispersione per dare agli sviluppatori qualcosa di riferimento, questo metodo è stato creato per te.

Va bene, vai a prendere lo strumento Matita in Sketch. Basta premere la lettera "P" sulla tastiera.

Che diavolo è lo strumento matita ?! Non sapevo nemmeno che esistesse. Non ho idea di quando o perché avrei mai usato qualcosa del genere. - Io, la settimana scorsa

Ora scarabocchi sulla tua tela. Sì davvero. Per dati densi, scarabocchi nella stessa area un intero gruppo. Non dimenticare di oscillare di tanto in tanto nell'area del grafico per creare alcuni valori anomali.

Ok, ecco la parte geniale: dai un bordo alla tua linea, quindi imposta un trattino super ampio nelle impostazioni del bordo. Boom. Grafico a dispersione istantaneo. Sei come i grafici di Michael Phelps se ha studiato scienza dei dati invece di nuotare. Riferimento olimpico tempestivo. Hot dog!

Esci di qui, Clippy! No, non ho bisogno del tuo aiuto per creare grafici a dispersione!

Se questo piccolo trucco di Sketch è tutto ciò che mi viene in mente quando sono polvere nel vento, morirò un uomo felice.

Ecco qua. Ora sei uno statistico certificato, un matematico, uno scienziato di dati e un grafico. Vai a chiedere un aumento. Te lo meriti.

Ti amo gente. Buon disegno!