Share
Questo articolo è il terzo di una serie in tre parti che mostra i nuovi approcci all'iconografia che Iconic distribuirà. Se ti piace quello che vedi in questo articolo, ti preghiamo di prendere in considerazione l'idea di sostenere Iconic su Kickstarter
Contenuto sponsorizzatoQuesto contenuto è stato commissionato da Iconic ed è stato scritto e / o modificato dal team Tuts +. Il nostro obiettivo con i contenuti sponsorizzati è quello di pubblicare tutorial pertinenti e obiettivi, case study e interviste ispiratrici che offrono un vero valore educativo ai nostri lettori e ci consentono di finanziare la creazione di contenuti più utili.
L'iconografia reattiva è l'approccio di visualizzazione di icone di fedeltà appropriata in base alle dimensioni di visualizzazione di un'icona per garantire una leggibilità ottimale.
Il contenuto che creiamo è visto in più permutazioni che mai. Dispositivo, densità dello schermo, risoluzione, piattaforma, browser. Tante variabili, tutte di impatto (a vari livelli) sulla leggibilità dei nostri contenuti. Le icone in particolare possono essere abbastanza sensibili alle dimensioni in cui vengono visualizzate.
La prima direttiva di un'icona deve essere compresa. A tal fine, deve essere garantita la leggibilità di un'icona quando viene visualizzata. Ci sono modi per progettare icone per una maggiore leggibilità, specialmente per le taglie più piccole. Progettare in questo modo può spesso andare a scapito dell'estetica, o almeno delle opzioni estetiche.
Anche l'estetica gioca un ruolo fondamentale nell'iconografia. Sfortunatamente, la leggibilità e l'estetica possono spesso essere forze opposte. Il design di un'icona di solito ha un dimensione ottimale dove la leggibilità e l'estetica sono ben bilanciate. Pochissime, se ce ne sono, le icone possono raggiungere un perfetto equilibrio di leggibilità ed estetica in ogni dimensione. Quindi se vogliamo che le nostre icone siano leggibili e attraente in un'ampia gamma di dimensioni, richiede più versioni di icone ottimizzate per intervalli di dimensioni specifiche.
Questa idea non è nuova. Questo approccio era comune per le icone raster. Con la permeazione delle immagini vettoriali sul web, noi come progettisti di icone abbiamo scambiato la scalabilità per la leggibilità. Quindi, cosa rende unico Iconic in questo vecchio approccio? Iconic è in vendita con tre dimensioni di ogni icona e viene fornito con il codice per le icone per fornire automaticamente la versione ottimamente leggibile di ogni icona.
Ci sono due modi fondamentali per regolare le icone. Uno gioca sull'assunzione, l'altro è più preciso. Uno è semplice, l'altro più complesso. L'approccio semplice utilizza le query multimediali per regolare le icone a specifiche larghezze dello schermo. Questo può funziona poiché la dimensione del contenuto spesso diminuisce in relazione alle dimensioni dello schermo, il che significa che un'icona visualizzata sullo schermo del desktop è probabile che sia impostata su una dimensione maggiore rispetto a uno schermo mobile. Può essere.
Il destra Il modo per farlo è quello di applicare la funzionalità reattiva di un'icona a livello di elemento, il che significa che l'icona a destra viene visualizzata in base alle dimensioni dell'icona, non alle dimensioni dello schermo. L'approccio migliore è che le icone siano consapevoli delle loro dimensioni e cambino semplicemente nella versione leggibile / estetica più appropriata. Questo finisce per essere un po 'più complesso ...
Quindi, come possiamo farlo?
Nota: Gli esempi seguenti sono ancora prototipi di proof-of-concept. Nessuno dei seguenti codici è definitivo, per non dire beta. Siamo ancora nella fase di ricerca e sviluppo di questo approccio e sappiamo che ci sono molti problemi che devono ancora essere affrontati. Lavoreremo su una direzione più concreta per questo metodo dopo che la campagna Kickstarter è stata completata.
Ci sono alcuni modi in cui stiamo affrontando l'iconografia reattiva a questo punto e le direzioni "finali" sono ancora nell'aria. Al momento condivideremo tre diversi modi in cui pensiamo alla tecnica.
Innanzitutto, l'approccio più semplice. SVG è sempre stato al centro di Iconic, ma è facile dimenticare che Iconic è stato uno dei primi set a essere anche un font web. A quanto pare, i caratteri web funzionano tremendamente bene per l'iconografia reattiva. Il motivo per cui i caratteri web funzionano bene per l'iconografia reattiva è che tutte le icone vengono aggiunte a un singolo font. Ciò consente di trattare un intervallo di dimensioni come un peso diverso (ad esempio Iconic-Large.otf, Iconic-Medium.otf, Iconic-Small.otf). Ogni icona sullo schermo può essere cambiata semplicemente cambiando il font-weight per il carattere web. Nella demo di seguito, le icone rispondono alla larghezza dello schermo.
Guarda la demo Come accennato in precedenza, la regolazione delle icone in base alla larghezza dello schermo non è l'approccio migliore per garantire la leggibilità. Le icone devono rispondere alle proprie dimensioni di visualizzazione. Sfortunatamente, non abbiamo ancora la possibilità di creare query di elementi all'interno dei CSS. La buona notizia è che le persone pensano a questo e creano soluzioni alternative. La demo seguente utilizza query di elementi e caratteri Web per un'icona di regolazione dinamica basata sulle sue dimensioni di visualizzazione.
C'è stato un grande pensiero in questo spazio, in particolare da Andreas Bovens, che ha parlato di breakpoint SVG da un po 'di tempo. Questo approccio si basa sul fatto che le query multimediali all'interno di un file SVG fanno riferimento come img, incorporare o oggetto utilizzare le dimensioni di visualizzazione di SVG. Significato di una query multimediale di min-width: 400px all'interno della SVG si innescherebbe se l'immagine fosse di 400 pixel o più, indipendentemente dalla larghezza dello schermo. La demo qui sotto mostra che la funzionalità è in azione.
C'è attualmente un problema con questo approccio. Questi breakpoint interni non funzionano più quando il file SVG viene iniettato in DOM. L'iniezione SVG DOM è vitale per altre funzionalità di Iconic, quindi sarà qualcosa che avremo bisogno di capire nel prossimo futuro.
Un'icona illeggibile fallisce nel suo compito più importante. Dobbiamo smettere di pensare alle immagini vettoriali come il punto di riferimento per la leggibilità delle icone. Abbiamo bisogno di progettare icone che soddisfino diverse gamme di dimensioni e abbiamo bisogno di strumenti che visualizzano icone con la fedeltà appropriata in base alle dimensioni del display. Nessuna delle attuali opinioni è perfetta. Ma sono un passo avanti nella giusta direzione.
L'obiettivo di Iconic è aiutare a fornire nuovi approcci all'iconografia.
Per favore, considera l'idea di sostenere Iconic su Kickstarter
Accentsconagua