Tutto ciò che devi sapere sul design HD
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 schermi retina e ad alta risoluzione, ma l'accesso a connessioni più veloci ha anche sottolineato 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?
L'indicazione più comune per HD è il termine display retina. Reso popolare dai dispositivi Apple, il termine è diventato sinonimo di schermi ad alta definizione. Ciò 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 nell'intera larghezza o altezza dello spazio visualizzabile.
- I pixel per pollice, noti come ppi o dpi, si riferiscono al numero di pixel ottenuti quando si divide la larghezza fisica del display per il numero di pixel orizzontali visualizzati.
- DPI elevati hanno 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, dai laptop probabilmente ha un display ad alta definizione. (E la realtà è che anche se hai un dispositivo senza un display HD, avere un sito Web ad alta definizione non farà male.)
immagini
Il luogo in cui potresti voler prima pensare all'alta definizione è quando si tratta di immagini. I giorni in cui è stata salvata ogni immagine con una larghezza di 600 pixel a 72 ppi sono finiti. Questo non lo taglierà sugli schermi di oggi.
Lo standard di base per HD è di 200 ppi. Questo è più del doppio di quello che potresti aver salvato in precedenza. Aggiungete il fatto che gli schermi stanno diventando più grandi con 1920 per 1080 che crescono a un ritmo rapido. Secondo W3Schools.com, gli schermi più comuni sono 1024 per 768 pixel o superiore, con oltre il 30% degli utenti che lavora su uno schermo ad alta definizione.
Lo stesso vale anche per i piccoli schermi. Dispositivi popolari come iPhone 6 (401 ppi) e Samsung Galaxy S5 (577 ppi) vantano anche funzionalità HD.
Quindi, quando si tratta di immagini, devono essere nitide. Non ti libererai di immagini sfocate o pixelate. Salvare alla vecchia "risoluzione standard" lascerà il tuo design piatto, mentre le immagini ad alta risoluzione appariranno più raffinate. L'aspetto negativo dell'utilizzo di questo tipo di immagine è la velocità; una qualità superiore equivale a tempi di caricamento più lunghi. Salva il più vicino possibile alle specifiche e non sovraccaricare i file di immagine.
Trucco divertente: considera di utilizzare la tendenza dell'immagine sfocata a tuo vantaggio qui se sei preoccupato per i tempi di caricamento. Ci sono meno dati da leggere e puoi risparmiare un po 'più piccoli 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 ti giri ci sia un'azione in movimento sulle home page del sito web. Proprio come con le immagini, deve essere di alta qualità.
Per la maggior parte dei designer e dei siti Web, ciò significa attenersi a un video piuttosto corto per evitare il caricamento del singhiozzo. Altri stanno optando per video più lunghi e distraggono gli utenti dall'attesa con un'animazione di caricamento. I video di alta qualità richiedono registrazione, compressione e salvataggio di alta qualità.
Ci vuole anche molta pianificazione quando si tratta di come verrà riprodotto il video e l'aspetto nella progettazione del sito. Un video di eroi a schermo intero, ad esempio, deve essere girato in orizzontale in modo che si adatti allo schermo. Per facilità d'uso, semplici editor video ti aiuteranno a regolare i frame in base alle proporzioni; scegli 16: 9 per una sensazione di ampio schermo o 4: 3 per un aspetto più quadrato.
Trucco divertente: usa "fermo video" per un effetto drammatico elevato. Ecco l'idea: filmare qualcosa di prevalentemente statico con solo un po 'di movimento in background. Avrai un'esperienza utente interessante senza appesantire il tuo design.
Illustrazioni e sfondi
Quando si tratta di illustrazioni e sfondi, anche qui l'HD è importante. Ricorda che ogni dettaglio (o la sua mancanza) è visibile nello spazio ad alta definizione, quindi ti consigliamo di assicurarti che ogni parte del design contribuisca all'estetica generale.
Quando si tratta di illustrazioni o sfondi, i dettagli sono importanti. Concentrati sulla creazione di un design che è praticamente perfetto per i pixel, si adatta al design e non cade a pezzi quando viene ingrandito o ridotto. Il modo più semplice per farlo è concentrarsi sulla semplicità.
Mentre può essere facile essere coinvolti nella creazione di un'illustrazione complicata o di uno sfondo a trama, semplice è probabilmente un'opzione migliore. Se vuoi aggiungere più interesse, prendi in considerazione l'idea di rendere un piccolo elemento animato parte del disegno, o ravvivalo con opzioni di colore più audaci di quelle che potresti usare normalmente.
E poi c'è il componente tecnico: devi usare un formato immagine scalabile in modo che tutto si ridimensioni come previsto e al suo pieno potenziale HD.
Trucco divertente: aggiungi un pizzico di animazione allo sfondo su un lungo ciclo. I visitatori che navigano rapidamente potrebbero mancare, ma la piccola ricompensa farà sicuramente piacere agli utenti abituali e a quelli che restano in giro 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, è un vettore essenziale per il web. Puoi utilizzare SVG per salvare forme, icone e molti altri elementi dell'interfaccia utente. Le immagini vengono lette dai browser moderni - ce ne sono alcune più vecchie là fuori che non funzionano (stiamo parlando con pochi di voi che lavorano su Internet Explorer) - come testo e rendering in modo molto simile all'HTML. Scott Murray ha un ottimo primer sul suo blog se vuoi entrare nel nocciolo della SVG.
Gli elementi CSS sono codice puro e si ridimensionano e si adattano al design. (Probabilmente non hai bisogno di disegnare pulsanti in Photoshop e incollarli nel tuo sito.) W3Schools.com ha un tutorial di base su come creare e usare elementi CSS.
Ecco la cosa su SVG e CSS: gli elementi si spostano con il tuo sito. Questo è ciò di cui hai bisogno in un contesto reattivo. Nulla ucciderà il design del tuo sito Web ad alta definizione più velocemente di un mucchio di pulsanti pixelati.
Trucco divertente: non è necessario reinventare la ruota per trovare alcuni elementi SVG o CSS eleganti. Dai un'occhiata a questi pulsanti SVG da Tympanus o dal generatore di pulsanti CSS.
Conclusione
L'alta definizione distinguerà il tuo sito Web da chiunque non lo stia facendo. Gli utenti stanno iniziando ad aspettarsi un'esperienza HD su ciascuno dei loro schermi, dai televisori ai computer ai telefoni. Il tuo sito Web deve soddisfare tali aspettative.
La buona notizia è che puoi apportare piccole modifiche al percorso per arrivarci. Presta attenzione alle tue immagini, ai tuoi video e ad altri elementi dell'interfaccia utente per assicurarti di mostrare pixel e che ogni elemento visivo sia continuo e di alta qualità.
