Progettare per le prestazioni

I designer hanno un enorme impatto sulle prestazioni del sito basate su Come progettano per il web, prima che venga scritta una singola riga di codice. Questo articolo illustrerà come possono essere le prestazioni progettato e cosa serve per farlo accadere.


La velocità è una parte fondamentale dell'esperienza utente sul web. È stato dimostrato che le prestazioni Web hanno un impatto diretto su come le persone utilizzano un sito e se sono disposte a usarlo di nuovo. Con l'aumento dell'utilizzo del Web mobile, è più importante che mai concentrarsi sulle prestazioni.

Tuttavia, le prestazioni sono spesso ignorate dalla maggior parte dei designer. Ciò accade per molte ragioni, ma spesso si riduce al fatto che i progettisti considerano i tempi di caricamento qualcun'altro lavoro.


Progettare le prestazioni è sulla mentalità

Ci sono molti articoli che spiegano come rendere un sito web più veloce e forniscono quasi sempre suggerimenti come la minimizzazione del CSS e l'ottimizzazione delle immagini. Questi suggerimenti sono utili e importanti, ma non risolvono il problema sottostante.

Il passo più essenziale è meno tangibile - richiede un cambiamento nel modo di pensare. La creazione di siti Web veloci richiede moderazione e attenzione. Indipendentemente dal tempo che dedichi all'ottimizzazione, un sito Web con tremila righe di CSS, dieci plug-in jQuery e cinque immagini al vivo saranno lento. Le prestazioni possono essere migliorate, ma non vedrai grandi risultati finché non diventerai un principio fondamentale del design.


Cervello umano su GraphicRiver

Progettare per le prestazioni richiede un impegno per massimizzare le necessità e eliminare i lussi superflui. È necessario un approccio più utilitaristico al design in cui ogni elemento abbia un impatto tangibile e netto-positivo sul risultato finale. Questo non nega l'importanza dell'estetica, piuttosto significa che non dovrebbe dare un assegno in bianco.


Mirando a semplice e Efficiente

Inutile dire che i progettisti conoscono l'importanza della semplicità. Tuttavia, l'efficienza è spesso trascurata nel lessico del designer. Semplice ed efficiente non sono necessariamente correlati. Molti siti "ben progettati" sono belli, chiari, intuitivi e assolutamente gonfio.

Come designer, vogliamo fare qualcosa che faccia appello ai nostri sensi visivi. Stiamo vedendo molti siti usando fotografie ad alta fedeltà, trame e dettagli rifiniti allo spiedo per raggiungere questo scopo. È spesso difficile discutere con i risultati su una base strettamente visiva. Tuttavia, dobbiamo chiederci se quegli elementi di peso pesante stanno lavorando per risolvere problemi di esperienza effettivi o semplicemente guardando bene per il gusto di apparire buoni.

Progettare in modo efficiente ti costringe a creare un'esperienza altrettanto significativa Di meno. Riuscirai a catturare l'interesse e l'immaginazione del tuo pubblico senza ricorrere a un'immagine a tutto schermo? Direi che puoi e che ne vale la pena.

Un esempio di un design semplice ma inefficiente è la home page di Karma. Il design di Karma è splendido e chiaro, ma pesa circa 1Mb su 45 richieste. Non fraintendetemi, mi piace come appare il sito Karma, fallisce il test delle prestazioni e alla fine manca come design di successo.

Un design efficiente non è per natura forte e senza personalità. Piuttosto, l'esistenza di ciascun elemento è stata verificata e giustificata. I design efficienti non mancano di stile, c'è solo un ottimo motivo perché questo stile è stato aggiunto. È facile trovare qualcosa su Dribbble e aggiungerlo ai nostri progetti perché sembra buono. Un approccio irrispettoso al design crea inefficienza.


The Flat Design Aesthetic

Si è parlato molto di design piatto. Sembra che uno stile minimalista aiuti la velocità, ma non è necessariamente così. Design piatto può rendere le impronte di pagina più piccole, ma non è garanzia. L'esempio sopra del sito web di Karma è la prova.


The Flat Design Era di LayerVault

Ci sono certamente stili visivi che sono predisposti a prestazioni migliori, ma si tratta di un'esecuzione e della manifestazione dello stile nel progetto finale. L'estetica non è un sostituto per rendere la performance un obiettivo centrale.


Esempi concreti

Ora che ho parlato in astratto, potrebbe essere il momento di entrare in alcuni esempi su come applicarlo. Di seguito sono riportati alcuni suggerimenti:

Design senza stampelle

Prova ad avviare un progetto senza affidarti a soluzioni semplici. Inizio il processo di progettazione senza utilizzare immagini, tipografia personalizzata e tre pesi di carattere (normale, grassetto, corsivo). Scopri fino a che punto puoi arrivare usando il colore, il contrasto e la forma. Puoi sempre aggiungere diversi tipi di carattere, immagini e trame in seguito.

Migliora le tue abilità di scrittura

L'obiettivo principale di un designer è comunicare. Ci sono alcuni modi migliori per comunicare un'idea rispetto alla parola scritta. Le parole possono fare molto: troppo spesso aggiungiamo elementi visivi quando sarà sufficiente una frase chiara. Prova a sostituire un'immagine visiva con un forte copywriting e una tipografia ben progettata.

Concentrarsi sulla risoluzione dei problemi

È facile essere risucchiati dalle sfumature del design. Lo faccio tutto il tempo. È importante ricordare che il ruolo del designer è risolvere i problemi, non rendere le cose belle. Sono fermamente convinto che una forte estetica costruisca la fiducia con un utente e aiuti a creare una risposta emotiva. Tuttavia, l'estetica dovrebbe sempre supportare i problemi che ci viene chiesto di risolvere (ad es. migliore usabilità, completamento di attività più elevato, ecc.). Guardare al design attraverso questa lente aiuterà a creare un approccio guidato dall'obiettivo e concentrare il nostro pensiero .

Impara a codice

Il modo migliore per comprendere l'impatto del tuo progetto sulle prestazioni è avere un'idea generale di quale tipo di codice sarà necessario per crearlo. I browser moderni hanno un sacco di trucchi nascosti che possono rendere il tuo sito più snello e rendi la vita più facile. Sapendo come costruire un sito, saprai cosa evitare.

Affina il tuo mestiere

Le immagini (sia raster che vettoriali) possono essere prodotte per essere più piccole. Dovremmo pensare di creare un'immagine come pensiamo di creare un file CSS - portare a termine il lavoro con il minimo ingombro possibile. Questo argomento potrebbe essere un articolo separato del tutto, ma il succo è quello di evitare artefatti pixel nelle immagini raster e punti vettoriali non necessari nei vostri SVG. Ciò avrà un impatto significativo sulla dimensione del file.


Conclusione

La velocità del web non rientra nella categoria di sexy. Le prestazioni non vincono i premi di design e il tuo portfolio non viene lodato dai tuoi colleghi. Ha comunque un impatto sulle persone che contano: chi usa il sito che hai creato. Se non stai progettando per le prestazioni, non stai facendo il tuo lavoro.

Infine, le prestazioni sono l'unico elemento di UX (che io conosca) che è interamente oggettivo e quantificabile. Lo trovo rinfrescante in un'azienda che può essere così amorfa e soggettiva che esiste almeno una metrica in cui, facendo abbassare il numero, posso garantire che qualcuno là fuori stia avendo un meglio giorno.