Un canale Twitch mostra il tuo marchio in più posti di quasi ogni altra piattaforma, e la maggior parte sono piccoli. Il badge live accanto ai messaggi in chat. L'avatar nella griglia della directory, in competizione con un centinaio di altre miniature. La banner offline che sta sullo schermo mentre nessuno streamma. L'angolo dell'overlay durante la trasmissione, sopra riprese di gioco che cambiano colore ogni pochi secondi. E la schermata di avvio dello stream, che è l'unica superficie con abbastanza spazio per mostrare un marchio che si muove davvero.
Questo è il vincolo che vale la pena interiorizzare presto: su Twitch, l'animazione è l'eccezione e i piccoli statici sono la regola. Il che significa che un'animazione del logo per Twitch deve essere progettata intorno a un fotogramma statico che già funziona ovunque altrove. Sistema lo statico e l'animazione diventa un extra breve e di valore. Saltala e l'animazione è decorazione sopra un marchio che nessuno riesce a leggere.
Dove appare davvero il marchio
Aiuta separare le superfici in base allo spazio che ti concedono, perché le decisioni di design seguono direttamente da questo.
Le miniature della directory e le banner offline sono le posizioni statiche più grandi, e la prima si mostra solo quando sei in live. La directory è dove avviene la scoperta, quindi il marchio compete contro ogni altro canale della categoria.
Gli avatar compaiono in chat, negli elenchi dei follower e accanto alle notifiche di raid. Piccoli, ripetuti, e spesso l'unica versione che un telespettatore abituale vede.
L'angolo dell'overlay è l'unica posizione senza dimensione fissa, perché dipende dalla tua configurazione di scena. È anche la più ostile, perché sta sopra riprese di gioco in movimento — un marchio in overlay deve reggere contro sfondi arbitrari che cambiano.
Alert, transizioni e la schermata di avvio dello stream sono dove vive il movimento. Queste sono le superfici costruite per un momento di brand anziché per un'identità persistente, ed è lì che un marchio animato si guadagna il posto.
La banner offline è la superficie più ignorata
Quando un canale non è in live, la pagina esiste ancora, e ciò che un visitatore vede è la banner offline più l'avatar più tutti i pannelli sotto. Per un canale che streamma alcune sere a settimana, quella è la maggior parte della sua vita. Una larga quota di visitatori alla prima volta, e quasi tutti quelli che arrivano da una ricerca o da un link condiviso all'ora sbagliata, incontrano prima lo stato offline.
Due regole fanno funzionare quella superficie. Prima, la composizione deve sembrare completa senza movimento, perché niente su di essa si muove. Seconda, deve funzionare alla dimensione della directory, perché lo stesso asset viene spesso riusato come la miniatura che un visitatore vede nella griglia di navigazione.
L'errore pratico qui è una banner costruita per la vista a pagina intera e riusata come miniatura. Una composizione che riempie un rettangolo largo perde i suoi elementi più distintivi quando viene stretta in una scheda piccola, e il marchio e il wordmark finiscono per competere per pochi pixel visibili. Costruisci prima la versione piccola — è lo stesso principio che vale per qualsiasi export di un <a href="/logo-animation-templates/logo-video-maker">creatore di video con logo</a>, e vale con più forza qui perché così tante posizioni Twitch sono piccole.
Creare un'animazione che sopravvive guardata muta
Le schermate di avvio dello stream e le scene di transizione vanno in autoplay con musica d'ambiente più spesso di quanto ci si aspetti, e un visitatore che atterra su una pagina canale lo fa spesso con l'audio spento. La stessa Twitch riproduce in autoplay il video live muto, e il comportamento dell'autoplay dei media nei browser è ben coperto nella documentazione sull'autoplay di MDN — in breve, la riproduzione inizia senza un gesto dell'utente, quindi l'audio non può essere dato per scontato.
Questo produce il test più utile in assoluto per un'animazione di logo da stream. Mettila in mute e guardala tutta. Se gli arrivi sembrano arbitrari senza la traccia, la tempistica è sbagliata e nessun lavoro sull'audio la riparerà. Se il marchio atterra ancora con intenzione in silenzio, l'animazione sta facendo il suo lavoro e la musica diventa un arricchimento anziché un bastone.
Il secondo test è il comportamento del loop, e Twitch lo rende insolitamente importante. Una schermata di avvio dello stream va avanti per minuti, quindi qualsiasi animazione lì fa loop dozzine di volte per un singolo spettatore. Una sequenza che si legge bene una volta può diventare irritante alla quindicesima ripetizione, e un taglio netto al punto di loop invisibile alla prima passata diventa la cosa che noti alla decima.
La soluzione è rendere il loop seamless anziché lungo. Un marchio che si assesta e poi si dissolve nella sua posizione iniziale farà loop senza una cucitura visibile, mentre una sequenza che parte dal nero e torna al nero annuncia ogni riavvio. Se controlli una sola cosa su una schermata di avvio, controlla il punto di loop.
Colore, contrasto e il problema dell'overlay
Un marchio in overlay sta sopra riprese di gioco. Questo significa che il suo sfondo è ciò che il gioco sta renderizzando, che cambia continuamente, a volte luminoso e a volte quasi nero. Un marchio che dipende dal contrasto con uno sfondo prevedibile non sopravvive.
Tre approcci funzionano.
Dai al marchio in overlay il suo sfondo contenuto — una piccola piastra solida o leggermente sagomata dietro il simbolo. Costa un po' di spazio sullo schermo e rende il marchio leggibile indipendentemente da ciò che accade sotto.
Usa un marchio con un forte contrasto interno, così almeno un elemento resta visibile contro qualsiasi sfondo. Un marchio a tono singolo scomparirà contro riprese dello stesso tono in qualche punto della sessione. Non è ipotetico; succede al primo stream.
Spostalo del tutto fuori dall'azione. La maggior parte delle interfacce di gioco tiene i propri elementi di stato in angoli prevedibili, e il marchio in overlay di solito appartiene a uno degli spazi che hanno lasciato liberi, che è la stessa logica dietro le convenzioni della safe area che la grafica televisiva usa da decenni.
C'è una disciplina documentata dietro questo. Un principio ben consolidato nell'uso del marchio è che un logo non dovrebbe essere decorato con ombre, bordi o cornici aggiunti — la guida al branding dei canali di YouTube enuncia la stessa regola per avatar e art del canale, e si generalizza: se un marchio ha bisogno di una cornice per essere visibile, il problema di contrasto sottostante non è stato risolto. È interessante notare che una piastra in overlay non è decorazione in quel senso — sta risolvendo un problema di leggibilità, ed è per questo che si legge come deliberata dove un'ombra di sfumatura si legge come un errore.
C'è anche un utile argomento di contenimento per mantenere tutto semplice. La ricerca di Nielsen Norman Group sull'animazione nelle interfacce utente separa il movimento che comunica un cambio di stato da quello che esiste per se stesso e scopre che la seconda categoria costa attenzione senza restituire nulla. Una transizione di stream comunica che il contenuto sta per iniziare, che è un vero cambio di stato. Un marchio che ruota, rimbalza, esplode e si ricompone comunica solo che qualcuno si è divertito con la timeline.
Le dimensioni che ti servono, e quante volte ti servono
Il set di lavoro per un canale è più piccolo di quanto le persone si aspettino, e la maggior parte viene da un unico disegno.
Uno statico quadrato per gli avatar, esportato alla dimensione massima che la piattaforma accetta e confermato leggibile dentro un ritaglio circolare. Uno statico largo per la banner offline e la miniatura della directory, costruito così la composizione sopravvive mostrata piccola. Un'animazione verticale per le storie, gli short e qualsiasi clip breve ricavata dagli stream. Un'animazione widescreen per la schermata di avvio dello stream, le transizioni e gli alert. E un fotogramma statico esportato dalla tenuta pulita dell'animazione, per i pannelli e qualsiasi posizione che non accetti movimento.
Per gli export di animazione, contano sia la risoluzione sia il rapporto d'aspetto. La guida di YouTube a rapporti d'aspetto e risoluzione documenta 9:16 verticale, 1:1 quadrato e 16:9 widescreen insieme a una raccomandazione di 1080 per 1920 per il video verticale, e i clip e gli short di Twitch stanno negli stessi formati. Esportare tutti e tre da una sorgente mantiene identica la tempistica d'ingresso tra loro, il che conta perché una transizione di stream e il suo clip breve abbinato vengono spesso guardati di seguito.
Un ordine di produzione che evita di rifare l'animazione
La sequenza sotto è ordinata per tenere le decisioni scomode davanti al lavoro costoso, anziché dietro.
Uno. Esporta la grafica come SVG, o come PNG trasparente alla dimensione massima disponibile, e conferma la trasparenza su uno sfondo scuro.
Due. Costruisci il ritaglio circolare dell'avatar e visualizzalo alla dimensione reale della chat. È la posizione più piccola e quella che vincola tutto il resto.
Tre. Disegna la composizione larga della banner così sopravvive mostrata come una piccola miniatura, e controllala a quella dimensione anziché a tutta larghezza.
Quattro. Decidi la posizione dell'overlay e la sua piastra prima di costruire l'animazione, perché una piastra cambia il fotogramma in cui sta il marchio.
Cinque. Costruisci la versione animata come un arrivo di un secondo con una tenuta pulita, poi aggiungi un loop seamless per la schermata di avvio.
Sei. Esporta i tre rapporti più uno statico, e testa l'animazione muta a ciascuna dimensione in cui apparirà davvero.
Se vuoi vedere la stessa sequenza applicata a un'altra piattaforma, il nostro approfondimento sui <a href="/blog/youtube-animated-logo">loghi animati per YouTube</a> copre il caso widescreen in più dettaglio, e <a href="/blog/video-logo">cosa deve fare di diverso un logo video</a> copre i cambiamenti di design di base che valgono per qualsiasi canale.
Cosa va storto più spesso
Cinque fallimenti ricorrenti, tutti evitabili.
Il marchio è illeggibile in chat. Gli avatar in chat sono piccoli e il marchio era stato progettato per la pagina del canale. Risolvilo costruendo prima il ritaglio più piccolo, come descritto sopra.
L'overlay scompare contro riprese di gioco luminose. Un marchio a tono singolo scomparirà sempre contro qualcosa. Usa una piastra o costruisci un contrasto prima di costruire l'animazione.
La schermata di avvio ha una cucitura di loop visibile. Lo spettatore ci passa attraverso quel loop dozzine di volte in una sessione. Sistema il punto di loop, non la lunghezza.
L'animazione funziona solo con l'audio. Controllala muta, perché una buona quota dei tuoi spettatori arriva così.
La banner è bellissima a tutta larghezza e illeggibile come miniatura. Costruisci prima la composizione piccola e lascia che la versione larga segua.
FAQ
Dove va il logo animato su un canale Twitch?
Nelle schermate di avvio dello stream, nelle transizioni, negli alert e nella banner offline se è capace di video. Queste sono le superfici costruite per un momento di brand. Avatar, badge in chat e l'angolo dell'overlay sono quasi sempre statici, quindi la versione animata dovrebbe essere trattata come un'aggiunta anziché una sostituzione.
Che dimensione dovrebbe avere un'animazione del logo per Twitch?
Esporta 9:16 a 1080 per 1920 per le posizioni verticali e 16:9 per le schermate di avvio e le transizioni, entrambi da una sorgente così la tempistica coincide. L'avatar statico e la banner sono export separati con requisiti propri, e entrambi dovrebbero essere controllati alla dimensione in cui si mostrano davvero anziché a tutta larghezza.
L'animazione del logo dovrebbe avere l'audio?
Progetnala così funziona senza. Un visitatore che atterra su una pagina canale ha spesso l'audio spento, quindi la sequenza visiva deve arrivare da sola. Aggiungi l'audio come arricchimento per gli spettatori che ce l'hanno, anziché far dipendere la tempistica da esso.
Come impedisco al marchio in overlay di scomparire in stream?
O dagli una piastra contenuta dietro il simbolo o costruisci abbastanza contrasto interno che un elemento resti visibile contro qualsiasi sfondo. Un marchio a tono singolo sopra riprese di gioco scomparirà in qualche punto della sessione, e un'ombra di sfumatura non lo sistemerà.
Un canale Twitch ha bisogno di un logo separato dal brand principale?
Di solito non un design separato, ma un set di export separato. Il canale ha bisogno di un marchio che sopravvive a un avatar circolare, a una piccola miniatura di directory, a un angolo di overlay e a una schermata di avvio widescreen. Un unico disegno può servire tutti e quattro se il più piccolo è progettato per primo.
In sintesi
Apri il tuo canale come farebbe uno sconosciuto — all'ora sbagliata, quando è offline, in una finestra del browser grande quanto un telefono. Ciò che vedi è ciò che vede la maggior parte delle persone. Se il marchio è leggibile lì e la banner si legge ancora quando è grande come una miniatura, hai le fondamenta, e l'animazione è un'aggiunta breve ed economica sopra di esse. Se non lo è, nessun movimento salverà un marchio che sta già perdendo alla dimensione esatta in cui viene mostrato più spesso.