Se non hai già preso nota, il web sta andando in alta definizione. Dalle immagini agli sfondi agli elementi dell'interfaccia utente, l'alta definizione è la nuova normalità.
È iniziato con alcuni retini e schermi ad alta risoluzione, ma l'accesso a connessioni più veloci ha anche enfatizzato questo fenomeno, fornendo un maggiore accesso ai siti Web HD da qualsiasi dispositivo. Stai pensando e progettando in alta definizione? Ecco alcune cose da considerare.
Cos'è l'HD, davvero?
Il segnale più comune per HD è il termine display retina. Reso popolare dai dispositivi Apple, il termine è diventato sinonimo di schermi ad alta definizione. Questo riguarda una tecnologia piuttosto specifica per i dispositivi.
Paula Borowska per Designmodo ha una delle descrizioni più facili da capire:
- Il pixel del dispositivo è l'unità fisica più piccola visualizzata.
- La densità dei pixel è il numero di pixel visualizzati in un determinato spazio.
- La risoluzione è il numero di pixel lungo l'intera larghezza o altezza dello spazio visibile.
- Pixel per pollice, noto come ppi o dpi, si riferisce al numero di pixel che si ottengono dividendo la larghezza fisica del display per il numero di pixel orizzontali visualizzati.
- DPI alto è una densità di visualizzazione di 200 pixel per pollice o superiore.
La maggior parte dei dispositivi che stai acquistando oggi dai telefoni cellulari ai tablet e ai laptop probabilmente hanno un display ad alta definizione. (E la realtà è che anche se si dispone di un dispositivo senza display HD, avere un sito Web ad alta definizione non farà male.)
immagini
Il luogo in cui potresti voler pensare prima dell'alta definizione è quando si tratta di immagini. I giorni di salvataggio di ogni immagine a 600 pixel di larghezza a 72 ppi sono finiti. Questo non lo farà proprio sugli schermi di oggi.
Lo standard di base per HD è di 200 ppi. Questo è più del doppio di quello che avresti potuto risparmiare in precedenza. Aggiungete il fatto che gli schermi stanno diventando più grandi con 1920 da 1080 in crescita ad un ritmo rapido. Secondo W3Schools.com, le schermate più comuni sono 1024 per 768 pixel o più, con oltre il 30% di utenti che lavorano su uno schermo ad alta definizione.
Lo stesso vale per i piccoli schermi. Dispositivi popolari come l'iPhone 6 (401 ppi) e il Samsung Galaxy S5 (577 ppi) vantano anche funzionalità HD.
Quindi quando si tratta di immagini, devono essere nitide. Non riuscirai a scappare con immagini sfocate o pixelate. Salvataggio alla vecchia? Risoluzione standard? lascerà il tuo design piatto, mentre le immagini ad alta risoluzione appariranno più nitide. Lo svantaggio di usare questo tipo di immagine è la velocità; una maggiore qualità equivale a tempi di caricamento più lunghi. Salva il più vicino possibile alle specifiche e non sovraccaricare i file di immagine.
Trucco divertente: Considerare l'utilizzo della tendenza dell'immagine sfocata a proprio vantaggio qui se si è preoccupati per i tempi di caricamento. C'è meno dati da leggere e puoi risparmiare un po 'più piccolo e ottenere comunque la nitidezza desiderata da altri elementi più piccoli ad alta risoluzione.
video
Il video è la tendenza visiva imperdibile del 2016. Sembra che ovunque tu giri ci sia un'azione in movimento sulle home page del sito. Proprio come con le immagini, deve essere di alta qualità.
Per la maggior parte dei progettisti e dei siti Web, ciò significa attenersi a un video ad anello piuttosto corto per evitare il caricamento di singhiozzo. Altri optano per video più lunghi e distraggono gli utenti dall'attesa con un'animazione di caricamento. Il video di alta qualità richiede registrazione, compressione e salvataggio di alta qualità.
Ci vuole anche un sacco di pianificazione per quanto riguarda il modo in cui il video riprodurrà e guarderà nel design del sito. Ad esempio, un video di eroe a schermo intero deve essere girato orizzontalmente in modo che si adatti allo schermo. Per facilità d'uso, semplici editor di video ti aiuteranno a regolare i fotogrammi per proporzioni; scegli 16: 9 per una sensazione wide-screen o 4: 3 per l'aspetto più quadrato.
Trucco divertente: Usa? Ancora video? per un alto effetto drammatico. Ecco l'idea: film qualcosa che è per lo più statico con solo un piccolo movimento sullo sfondo. Avrai una fantastica esperienza utente senza appesantire il tuo design.
Illustrazioni e sfondi
Quando si tratta di illustrazioni e sfondi, anche l'HD è importante. Ricorda che ogni dettaglio (o la sua mancanza) è visibile nello spazio ad alta definizione, quindi dovrai assicurarti che ogni parte del design contribuisca all'estetica generale.
Quando si tratta di illustrazioni o sfondi, i dettagli sono importanti. Concentrati sull'elaborazione di un disegno che sia praticamente perfetto per i pixel, si adatta al design e non si sfalda se ingrandito o abbassato. Il modo più semplice per farlo è concentrarsi sulla semplicità.
Mentre può essere facile farsi coinvolgere per creare un'illustrazione complicata o uno sfondo strutturato, la semplicità è probabilmente l'opzione migliore. Se vuoi aggiungere più interesse, prendi in considerazione la possibilità di rendere un piccolo elemento animato parte del design, o di arricchirlo con opzioni di colore più audaci di quelle che potresti utilizzare normalmente.
E poi c'è la componente tecnica: è necessario utilizzare un formato di immagine scalabile in modo che tutto sia effettivamente scalabile come previsto e per il suo potenziale full HD.
Trucco divertente: Aggiungi un suggerimento di animazione allo sfondo su un lungo loop. I visitatori che visitano rapidamente potrebbero non accorgersene, ma la piccola ricompensa sicuramente delizierà gli utenti abituali e coloro che resteranno in attesa per un lungo periodo di tempo.
Icone ed elementi
Quando si tratta di tutte le icone e gli elementi dell'interfaccia utente sul tuo sito web, ci sono sei lettere che devi conoscere: SVG e CSS. E tutti questi elementi saranno probabilmente classificati come uno di questi due tipi.
SVG, o grafica vettoriale scalabile, è il vettore essenziale per il web. Puoi usare SVG per salvare forme, icone e molti altri elementi dell'interfaccia utente. Le immagini vengono lette dai browser moderni - ci sono alcuni più vecchi là fuori che non funzionano (stiamo parlando con pochi di voi che stanno lavorando su Internet Explorer) - come testo e renderano più o meno allo stesso modo dell'HTML.Scott Murray ha un ottimo primer sul suo blog se vuoi entrare nel nitty grintoso di SVG.
Gli elementi CSS sono codice puro e si ridimensionano e si adattano al design. (Probabilmente non è necessario disegnare pulsanti in Photoshop e incollarli nel tuo sito.) W3Schools.com ha un'esercitazione di base su come creare e utilizzare gli elementi CSS.
Ecco la cosa su SVG e CSS: gli elementi si muovono con il tuo sito. Questo è ciò di cui hai bisogno in un quadro reattivo. Nulla ucciderà il tuo design del sito web ad alta definizione più velocemente di un mucchio di pulsanti pixelati.
Trucco divertente: Non è necessario reinventare la ruota per trovare elementi SVG o CSS eleganti. Dai un'occhiata a questi pulsanti SVG di Tympanus o del Generatore di pulsanti CSS.
Conclusione
L'alta definizione imposterà il tuo sito web a prescindere da chiunque non lo stia facendo. Gli utenti iniziano ad aspettarsi un'esperienza HD su ciascuno dei propri schermi, dai televisori ai computer ai telefoni. Il tuo sito web deve soddisfare tali aspettative.
La buona notizia è che puoi fare piccoli cambiamenti sul percorso per arrivarci. Presta attenzione alle tue immagini, ai video e ad altri elementi dell'interfaccia utente per assicurarti di mostrare i pixel e ogni immagine è perfetta e di alta qualità.