Probabilmente ti sbagli già fatto come web designer

Tutti i web designer vogliono la perfezione. Tuttavia, sono solo esseri umani e gli errori possono sempre apparire. È così facile trascurare semplicemente alcuni dettagli. Non c'è designer al mondo che non abbia commesso errori ed evitarli è una cosa che normalmente accade dopo un po' di tempo.

Parleremo ora di alcuni degli errori più comuni che i web designer commettono costantemente, quelli che molto probabilmente hai già fatto almeno una volta. Correggi le tue cattive abitudini e supera gli ostacoli di cui sei attualmente colpevole in modo che il tuo lavoro sia migliore che mai.

L'uso di Flash

Nella progettazione di siti Web moderni vediamo raramente Flash utilizzato, anche se è piuttosto sorprendente in quello che può fare. Ci troviamo di fronte alla possibilità di regalare al visitatore un'esperienza animata che è impressionante ma a cui è associato un bagaglio.

Ci sono diversi problemi che si verificano con l'utilizzo di Flash nel web design. Hai un tempo di caricamento più lungo, problemi con gli utenti mobili a causa della mancanza di supporto e del diverso linguaggio di programmazione utilizzato. Il numero di dispositivi che attualmente supportano Flash è molto basso. Inoltre, in futuro non ci aspettiamo un maggiore supporto. Le nuove librerie appaiono più forti e popolari, specialmente quelle basate su JavaScript come AngularJS e jQuary.

Utilizzo di immagini davvero grandi

La tendenza moderna nel web design è quella di utilizzare immagini di grandi dimensioni in tutto il sito. Ciò renderà sicuramente l'esperienza più piacevole e l'utente avrà qualcosa di fantastico da guardare, ma ci sono alcune complicazioni di cui il designer e lo sviluppatore devono essere consapevoli.

Il caricamento della pagina viene aumentato automaticamente ogni volta che vengono utilizzate immagini più grandi. Questo può portare a uno scenario molto negativo per il visitatore del sito. La buona notizia è che abbiamo accesso a vari strumenti diversi che aiutano molto con l'ottimizzazione delle immagini. Quelli che potresti voler prendere in considerazione includono:

• GruntJS-ImageMin
• ImageOptim

App come PrePros possono aiutare a ottimizzare automaticamente le immagini all'interno delle applicazioni. Il problema è che gli strumenti aiuteranno i flussi di lavoro ma non risolveranno l'enorme problema associato al tempo di caricamento, almeno non completamente.

Molti designer ora usano SVG. Usano i codici per animare e disegnare grafica in un ambiente browser. Finiamo così con un caricamento della pagina accelerato e vari elementi che attirano l'attenzione.

Dovremmo anche evidenziare il fatto che le immagini più grandi complicheranno il web design a causa del fattore non reattivo. Si tratta di un elemento di design che ha impostato altezza e larghezza. I browser ridimensioneranno le immagini ma abbiamo la stessa dimensione del file.

Il W3C ora funziona utilizzando " <picture> " come elemento HTML5. Ciò consentirebbe di chiamare immagini di dimensioni diverse in base alla larghezza dello schermo di visualizzazione. Quando ciò accade, l'esperienza sarebbe molto migliore per lo spettatore, ma fino all'implementazione, dovresti evitare le immagini più grandi.

Utilizzo di larghezza e altezza fisse

L'adattamento viene automaticamente limitato per gli utenti quando vengono codificate dimensioni fisse. Abbiamo soluzioni alternative, ma dobbiamo sempre pensare alla creazione di un modello di web design che sia reattivo al 100%. L'altezza fissa impostata in CSS può limitare l'area visibile per l'utente. Superare ciò è possibile attraverso le regolazioni delle query multimediali, ma il codice aggiuntivo che viene aggiunto porterà a problemi con le prestazioni. Non ne hai davvero bisogno. Nella maggior parte dei casi non dovresti usare taglie fisse. Devono essere evitati il ​​più possibile nel moderno ambiente di web design.

Fare ipotesi sugli accoppiamenti di design

I web designer normalmente lavorano con software come Adobe Photoshop o Sketch. Al termine del lavoro, il presupposto comune è avere un punto di interruzione specifico nel flusso di lavoro reattivo. Le larghezze dello schermo considerate come standard copriranno molte dimensioni dello schermo diverse, ma non è una certezza coprirle tutte. Abbiamo migliaia di dispositivi mobili disponibili sul mercato. Creare un design che funzioni per tutto è molto difficile.

Quando lavori su larghezze specifiche, devi pianificare e pensare al futuro diventa un'abilità importante per il web designer. Devi essere sicuro che non vengano fatte ipotesi e che lavorerai effettivamente all'interno del browser dopo che il normale lavoro dell'editor grafico è terminato.

Utilizzo di troppi effetti e animazioni

Puoi vedere questo problema anche su alcuni dei siti più popolari al mondo. Così tanti siti Web offrono un'esperienza mozzafiato, molti dei quali offrono qualcosa di veramente unico e sorprendente. Tuttavia, questo non significa aggiungere tutti gli effetti e le animazioni che potresti. È molto importante coniugare i principi del web design con lo scopo di trovare il giusto mix tra funzionalità e impatto grafico.

Ci sono due grossi problemi associati all'esagerare con animazioni ed effetti:

• Il tempo di caricamento della pagina è aumentato
• Gli effetti e l'animazione saranno problematici per i computer meno recenti

Gli hack e le animazioni popolari al momento sono quelli che aggiungono elementi di dissolvenza in entrata, in alto o in basso. Possono avere un bell'aspetto e renderanno i siti fantastici, ma ciò non significa che dovresti usarli sempre. Verifica se il caricamento complessivo della pagina sarebbe eccessivo per i dispositivi utilizzati dalla maggior parte dei visitatori e non dimenticare mai la velocità di caricamento della pagina. Questi sono molto importanti e devono offrire sempre grandi esperienze ai visitatori.

Collegamenti di stile improprio

Questo è un errore molto più comune di quanto si possa pensare in questo momento. I link devono sempre fare quello che fanno. Ciò significa che quando un collegamento ha uno stile improprio, le persone non capiranno che sono collegamenti. Abbiamo bisogno di pensare sempre ai visitatori, quindi i link devono sempre apparire come link. Puoi sperimentare e non attenerti alla sottolineatura blu standard, ma non dovresti mai esagerare.

Non utilizzare DRY in CSS

Nel caso non ne fossi a conoscenza, DRY significa "Non ripetere te stesso". È un metodo nel web design e praticamente significa che il designer è aiutato a mantenere il codice conciso e clonare. Solo l'uso del codice necessario è consigliato in ogni momento per lo styling del sito web.

Quando si utilizza il CSS tradizionale, sono necessarie molte ripetizioni con elementi specifici che vengono utilizzati all'interno di altri elementi. I selettori finiscono per essere davvero grandi e impiegheranno molto tempo per scrivere effettivamente. Quando usi le classi nella progettazione invece di applicare uno stile a ogni singolo elemento nella pagina HTML, tutto diventa molto più semplice.

Un'ottima idea al momento è quella di utilizzare linguaggi di pre-elaborazione come Sass. Sono piuttosto utili in termini di tecnologia CSS necessaria. I linguaggi utilizzati accelereranno lo sviluppo e la progettazione grazie al fatto che includono funzionalità come variabili, funzioni, mixin, annidamenti e molto altro ancora. Il codice prodotto verrà quindi compilato nel codice CSS. Gli sviluppatori Web e i web designer ora possono utilizzare meno righe di codice e le ripetizioni possono essere facilmente evitate grazie ai linguaggi.

Graziosa degradazione

Possiamo definire Graceful Degradation come una pratica di creazione di funzionalità web in grado di offrire un livello di esperienza utente specifico in un browser moderno mentre si degrada a livelli di esperienza utente inferiori nei browser più vecchi. Sembra un po' complesso ma, ad esempio, possiamo discutere del supporto per Internet Explorer 8 e 7. Saresti sorpreso di apprendere che la maggior parte degli utenti semplicemente non aggiornerà i browser per lunghi periodi di tempo. Per questo motivo, è necessario aggiungere un leggero degrado in modo che sia disponibile un supporto adeguato per entrambe le versioni del browser.

I siti Web moderni sono facili da sviluppare ma in un secondo momento puoi finire per notare il fatto che in un browser più vecchio le pagine sembrano davvero pessime a causa di dipendenze specifiche.

Miglioramento progressivo

Questo è qualcosa che è simile alla degradazione aggraziata sopra menzionata. La differenza è che il processo viene gestito al contrario partendo dal livello di esperienza di base supportato in ogni singolo browser web. Quindi, il progettista/sviluppatore aggiunge una maggiore funzionalità disponibile per i browser che potrebbero utilizzarla.

Sia questa opzione che quella sopra sono complicate. Normalmente sono usati solo dai designer veramente bravi. Tuttavia, con molti browser disponibili ora, dobbiamo considerare seriamente le opzioni. I web designer normalmente faranno in modo che i clienti decidano esattamente cosa verrà supportato. Tuttavia, devi provare a utilizzare questi approcci per offrire un'esperienza davvero eccezionale per gli utenti particolarmente attivi e all'interno del pubblico di destinazione.

Problemi di navigazione – Non essere user friendly

Una delle parti più importanti di qualsiasi sito web è la navigazione. Il designer deve essere in grado di rendere naturale l'esperienza del visitatore. Lo scopo è rendere la navigazione davvero semplice ed intuitiva. Un utente capirà automaticamente che l'esperienza è corretta quando il design ha preso in considerazione questo elemento.

Ogni volta che l'esperienza utente è scarsa, vediamo i visitatori frustrati. Semplicemente non visitano più un sito specifico e cercheranno in altre pagine le soluzioni ai loro problemi. L'usabilità deve essere sempre considerata dal progettista. Il design deve avere un bell'aspetto, ma non dovresti mai dimenticare la funzionalità. È necessaria facilità d'uso e la sua mancanza renderebbe l'intero design inutile.

Una mancanza di focus sui contenuti

“La forma segue la funzione” è un principio architettonico molto diffuso, apparso nel Novecento, proprio durante la fase di progettazione industriale dell'architettura moderna. Questo è un principio che devi sempre ricordare nel web design.

Web e graphic design sono molto simili all'architettura moderna in termini di funzionalità necessarie. Il modulo dell'oggetto deve prima essere basato sullo scopo o sulla funzione previsti. In termini di siti Web, possiamo vederli come banche dati di informazioni sparse su Internet. L'utente visiterà un sito Web per ottenere dati specifici. È qui che interviene il contenuto per offrire quei dati. Poiché il visitatore finisce su un sito e non trova i dati, li cercherà da qualche altra parte, senza nemmeno guardare il design. Allo stesso tempo, nel caso in cui il design renda davvero difficile individuare o digerire i dati, si verifica lo stesso risultato.

Gli utenti di Internet ora vogliono accedere alle informazioni e vogliono che questo accesso sia veloce. La funzione Form Over finisce per essere davvero importante nel web design. Non tenere conto di questo principio significa che l'attenzione è concentrata sull'aspetto anziché sul contenuto offerto. Di conseguenza, i siti Web non saranno molto popolari. Il contenuto deve distinguersi in ogni momento.

Conclusioni

Alle loro radici, gli errori di progettazione web più comuni relativi al tentativo di inventare qualcosa di veramente bello e unico senza tener conto del motivo per cui i visitatori visitano effettivamente un sito. Per questo motivo, vuoi avere sempre la pazienza necessaria per combinare un design davvero buono con una funzionalità completa.

Crea sempre siti Web funzionali e continua ad apprendere nuove tecnologie con il passare del tempo. I migliori web designer del mondo continuano ad imparare e sono sempre aggiornati su tutto ciò che si può e non si può fare. Vuoi creare il tuo web design, parlare con il cliente e poi assicurarti che i visitatori apprezzino ciò che viene offerto. Questo è molto più facile a dirsi che a farsi, ma col tempo tutto diventa molto più semplice.

Assicurati di dedicare sempre tutto il tempo necessario per creare qualcosa di veramente eccezionale. Un altro errore non menzionato nel web design è non concedersi il tempo necessario per creare effettivamente quel perfetto design del sito web. Ciò accade normalmente poiché i clienti hanno bisogno che il lavoro venga svolto nel più breve tempo possibile. Assicurati di avere sempre abbastanza tempo per creare quel web design stellare che sai di poterlo fare.