Facciamo delle slide migliori!(aka Slide-o-logia e tipografia per developers)

un talk di Salvatore Laisa per

Facciamo delle slide migliori!

Perché un talk su come fare le slide?Steve Jobs

Perché...

• ... sono un coder ma sono anche in parte designer

• ... dopo 4 anni che ci lavoro quotidianamente penso di averci capito qualcosina

• ... voglio imparare ancora

• ... lo spirito di Appsterdam è quello di condividere conoscenze

• ... non si usano i bullet point!

Di cosa parleremo

tipografia

colori

templates

transizioni

storytelling

codice

Le basi della “slideologia”slide:ology - Nancy Duarte

Scopo di una presentazione

Le presentazioni sono storie.

Vanno trattate come tali, con la differenza che il messaggio deve essere il

più sintetico e immediato possibile e c’è una forte componente visuale.

immagine di Sean MacEntee

Il software è importante?

Keynote, Powerpoint, Google Drive (e altri ancora) sono solo strumenti.

E’ importante il contenuto, il modo in cui viene esposto e la chiarezza delle

foto e immagini.

Poi ovviamente un software con cui si ha familiarità è ancora meglio!

Le animazioni/transizioni sono importanti?

Le animazioni di elementi o transizioni di pagina possono rendere più

accattivante la presentazione e dare una “direzione” al discorso.

Possono risultare fastidiose se sono troppe, ingiustificate e sempre

diverse. Meglio poche, al giusto momento e riutilizzandole.

Basi di tipografia (digitale e non)Willi Heidelbach CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0/)

Graziato (serif)

Bastoni (sans-serif)

T i p o g r a f i alinea di base

discendente

ascendente

maiuscolo

Duis enim placerat nunc purus rhoncus vut cras quis nascetur placerat in, urna, sed, in. Lorem? Purus pid

interlinea

4/5 pixel in più della dimensione del font

spessore

spessore

spessore

spessore

spessore

spessore

thin - 100

light/book - 200/300

regular - 400

medium - 500/600

bold - 700

black/ultra bold - 800/900

Quanto testo in una slide?

Il meno possibile.

!

Il concetto di una slide dovrebbe essere chiaro al pubblico nel giro di pochi

secondi. I testi richiedono più tempo di “elaborazione” delle immagini per il

nostro cervello.

Il codice nelle slideFoto di Marjan Krebelj

Ha senso mettere codice nelle slide?

Principalmente... NO.

CODE ON SLIDES

ANOTHER REASON TO HATE YOU

Perché no?

E’ molto difficile esprimere un concetto di programmazione in poche righe

di codice e metterne troppo porta a un tempo di lettura troppo elevato e

perdita di interesse del pubblico.

!

Se riuscite ad avere poco codice, evidenziate le parti di interesse

Le slide per i concetti

Per tutto il resto... ci sono le demo.

Fotografie, immagini e colorifoto di Bernat Casero

Qualità delle foto

VS

Dove reperire foto bbbuone

Evitate di prendere foto a caso da Google senza prima informarsi su

eventuali diritti (parziali o totatli).

Siti come iStockPhoto e PhotoDune vendono foto professionali a prezzi

accettabili, spesso il prezzo dipende dalla risoluzione della foto.

Su Flickr potete trovare molte foto con licenze Creative Commons, il più

delle volte è possibile utilizzare una foto con questa licenza citando l’autore.

In quanto tempo ne trovo una giusta?

Tanto tanto tanto tanto.

foto di ĐāżŦ {mostly absent}

Scegliere una palette di colori

Come le transizioni i colori da utilizzare nella presentazione dovrebbero

essere pochi ma buoni.

I due fattori principali da tenere in considerazione durante la scelta di una

palette di colori sono armonia (se i colori funzionano tra di loro) e contrasto

(se c’è leggibilità dei testi sugli sfondi).

Esempio

bella raga tutto rego

bella raga tutto rego

Non sono buono con i colori

Esistono Adobe Kuler e Colour Lovers.

!

Ma io non ho tempo di imparare queste cosefoto di Doug Wheller

Esistono i templates!

Ognuno deve affrontare il nemico che conosce meglio

• Template predefiniti - all’interno dei principali software

• Graphic river - template per PowerPoint e Keynote

• Flickr e iStockphoto - foto professionali per ogni tasca

• Commissionare un buon template a un designer...

fare delle slide migliori!

ora sta a voi

GRAZIE!Domande? Risposte?

font utilizzato: Roboto Sans

@moebiusmania | www.salvatorelaisa.net