Come si registrano i siti per il proprio portfolio?

• Il sito online, non il file di design. Contenuti veri, immagini vere, resa vera dei caratteri. Se nel frattempo il cliente l’ha cambiato, usa ciò che c’è oppure registra la tua build archiviata.
• Prima la pagina desktop, poi quella mobile. Due video affiancati, desktop e telefono, mostrano il lavoro responsive meglio di qualsiasi didascalia. Leggi la versione per telefono in larghezza telefono, così il sito serve il suo vero layout mobile.
• Chiaro e scuro, se li hai progettati entrambi. Forza lo schema di colori invece di cambiare le impostazioni del sistema tra una ripresa e l’altra.
• Le interazioni di cui vai fiero. Porta un cursore sulle card e sui pulsanti di cui hai progettato gli stati al passaggio, e li vedrai nel video.

Chi sfoglia un portfolio concede a ogni progetto pochi secondi prima di decidere se restare. Comincia a muoverti subito, o dopo un’attesa di circa un secondo sull’hero, e tieni l’intero scorrimento tra 10 e 20 secondi.

Le pause fanno per un video da portfolio più di qualsiasi altra cosa. Fermati un secondo o due su ogni sezione che mostra una scelta: l’hero, la griglia delle funzioni, la tabella dei prezzi. In un video stanno fino a 6 pause, ciascuna tra 0,5 e 5 secondi. Se la pagina è lunga, taglia lo scorrimento perché finisca prima del footer invece di accelerare tutto.

Controlla i limiti di caricamento di ogni piattaforma prima di esportare in 4K: un file in 1080p è di solito la scelta più sicura per tutto ciò che verrà ricodificato al caricamento.

Dodici progetti catturati in dodici modi diversi sembrano il lavoro di dodici persone diverse. Decidi la presentazione una volta e ripetila.

• Una cornice. Una finestra di Safari o Chrome, chiara o scura, oppure un bordo semplice. La stessa su ogni progetto.
• Uno sfondo. Una tinta unita, una sfumatura, uno dei 36 sfondi predefiniti o una tua immagine dietro la finestra, ammorbidita con sfocatura e grana se è una foto.
• Un movimento e una velocità. La stessa accelerazione, più o meno gli stessi secondi per ogni schermata di pagina.
• Margine, angoli e ombra impostati una volta, così la finestra si posiziona allo stesso modo in ogni fotogramma.

Un video muto in loop si comporta come un’immagine animata e parte da solo in ogni browser moderno, purché sia senza audio e possa essere riprodotto in linea. Usa «Scendi e torna» come riproduzione, così l’ultimo fotogramma coincide con il primo e il loop non ha salti.

<video autoplay muted loop playsinline preload="metadata"
       poster="project-poster.jpg" width="1920" height="1080">
  <source src="project.webm" type="video/webm" />
  <source src="project.mp4" type="video/mp4" />
</video>

Larghezza e altezza evitano che il layout salti mentre il file si carica, e il poster dà allo spazio qualcosa da mostrare prima che arrivi il primo fotogramma.