Share
Quest'anno è stato un brillante anno nel web design. Più di ogni altro anno, forse, sono stati compiuti enormi passi avanti verso la maturazione del campo. Diamo un'occhiata ad alcune di ciò che possiamo aspettarci per il futuro del web design come settore.
Chiunque abbia fatto il web design per più di qualche anno ha senza dubbio affrontato il problema del divario tra design e sviluppo front-end. I designer vivono in strumenti simili a Photoshop o Sketch e gli sviluppatori vivono nei loro editor di testo.
Questo flusso di lavoro comune ha visto molti tentativi di soluzione, inclusi siti come SiteGrinder, Dreamweaver e, più recentemente, Adobe Muse. Tutte queste soluzioni hanno i loro problemi e non sono state ampiamente adottate. Per la maggior parte, gli sviluppatori front-end sono rimasti fedeli ai loro vecchi metodi, o i progettisti si stanno spostando di più nel browser per funzionare, colmando il divario. Tuttavia, stanno emergendo strumenti per colmare ulteriormente questa lacuna. Con strumenti come Macaw sul punto di essere rilasciati, il percorso verso la fine del laborioso gap tra design e sviluppo front-end si sta riducendo.
Questi strumenti trarranno grande vantaggio dal fatto che le tendenze del web design hanno adottato colori piatti con pochissima trama e elementi prevedibilmente ripetuti. Questi elementi sono molto meno complessi degli elementi ui fortemente dipendenti dall'immagine di alcuni anni fa, quindi è un primo passo per introdurre strumenti per generare automaticamente ben organizzato, semantico codice.
Non vedrai una buona implementazione "WYSIWYG" -ish per qualcosa che va oltre i semplici widget configurabili. La ragione principale per questo è che HTML e CSS sono entrambi dichiarativo lingue, mentre JavaScript è un linguaggio di programmazione. La "tela" per JavaScript è intrinsecamente l'editor di testo. La tela per HTML è intrinsecamente il documento.
Man mano che i browser adottano gli standard più recenti, i telefoni diventano più veloci, gli schermi diventano più imprevedibili e i disegni continuano ad appiattirsi, vedremo una significativa riduzione del numero di immagini grafiche utilizzate in un determinato sito. Gli elementi dell'interfaccia utente complessi continueranno a fare sempre più affidamento sui CSS e per le cose che non possono essere realizzate esclusivamente con i CSS, verrà adottato SVG. L'eccezione principale è la fotografia. Le foto di grandi dimensioni continueranno a rivendicare più spazio di progettazione poiché i progettisti si affidano maggiormente a immagini trasparenti orientate ai contenuti per definire l'esperienza e la narrativa.
Con bellissimi esempi che spuntano ovunque, SVG sta arrivando al successo. Possiamo aspettarci di vedere strumenti più accessibili per la creazione di infovis di base senza troppi problemi (si pensi a ChartJS), così come altri strumenti educativi che espongono il potenziale e la potenza di SVG a persone che non hanno avuto incentivi per esplorare SVG precedentemente.
Sebbene le specifiche della flexbox si trovino ancora in una terra di nessuno-non standardizzata, c'è un supporto relativamente buono tra i vari browser. Non c'è stata un'ampia adozione di flexbox (per ragioni sconosciute), ma crediamo che quest'anno ci sarà una spinta verso l'adozione.
Siamo eccitati abbastanza su Flexbox qui su Tuts + che pubblicheremo una guida che spiega come creare layout con flexbox al più presto, quindi fai attenzione!
Non vedrai ancora l'adozione completa di una soluzione di retina image. Sebbene Webkit abbia implementato srcset, gli sviluppatori stanno già risolvendo questo problema in modo leggermente meno efficiente o robusto. Mentre srcset alla fine sarà necessario, poiché molti sviluppatori continueranno a risolvere i problemi salvando immagini più grandi con qualità inferiori.
Ricordi quando la parallasse divenne la prossima cosa calda? Tutti hanno iniziato a usarlo in modi nuovi ed eccitanti (oltre che logori e spaventosi) per raccontare storie e migliorare l'esperienza dell'utente. Ci si può aspettare che le persone adottino ampiamente il video come elemento di design (ad esempio, come sfondo) piuttosto che come un'esperienza "teatrale" focale, come abbiamo visto con YouTube.
Questo è stato intorno per molto tempo (c'erano anche le incarnazioni costruite in Flash), ma non ha guadagnato popolarità con iniziative commerciali fino a poco tempo fa. Con questo arriveranno sfide interessanti, in particolare relative alla dimensione e alla compressione del video.
Mentre le animazioni non sono certo una novità, il logo animato e gli elementi dell'icona stanno aumentando di popolarità. L'animazione SVG può essere eseguita con i CSS e progetti come Iconic, che hanno generato più di 6 volte il loro obiettivo su Kickstarter, così come gli sforzi open source come Climacons, promettono una nuova tendenza nella progettazione dell'esperienza utente basata sulle animazioni dei percorsi vettoriali..
Icone SVG Animate con CSS di Noah Blon (@noahblon) su CodePen
Lo scorso anno, serie TV come Breaking Bad hanno offerto una seconda esperienza sullo schermo, offrendo agli osservatori un modo più profondo di interagire con i contenuti.
Nel 2014, mentre l'adozione del mobile continua a raggiungere i mercati di fascia più bassa e la connettività aumenta in ubiquità, l'adozione del secondo schermo si estenderà a più spettacoli e più formati. Questo potrebbe includere anche cose come la sincronizzazione del telefono con il computer mentre si guarda uno spettacolo su Hulu o il collegamento del tablet con la console di gioco per offrire informazioni secondarie su ciò che si sta vedendo o facendo sullo schermo.
Questa è un'area di design molto diversa rispetto alla progettazione di contenuti di base. I progettisti dovranno considerare ulteriormente il concetto di attenzione secondaria, svolgendo il ruolo di "accompagnamento" invece di "palcoscenico principale".
"Responsive" è chiaramente la metodologia dominante nel web design. Nonostante il modo in cui gestisci la crescente necessità di design e codice agnostici per la tecnologia, gli utenti continuano a passare a più dispositivi in più ambienti. Fino ad ora, l'ottimizzazione mobile è stata un'impresa non banale; rendere i deliverable del codice quanto più piccoli possibile, creare query sui media, ottenere framerate elevati, utilizzare il caching e molte altre considerazioni richiedono investimenti significativi.
Nel 2014, molte strutture adotteranno completamente la metodologia mobile-first e la barriera alla creazione di siti altamente performanti per qualsiasi tecnologia si ridurrà. Librerie di codici come Hammer.js, Zepto.js, Animate.css e molti altri hanno guidato la carica. Come precedentemente sperimentato con l'adozione del settore di HTML5, ci auguriamo di vedere anche un'adozione a livello di settore delle best practice per l'ottimizzazione mobile che va oltre la semplice scrittura di query CSS.
Medium, Svbtle, Editorially, exposure.so, Ghost e molti altri strumenti e piattaforme hanno inaugurato una nuova era di contenuti web incentrati esclusivamente sulla presentazione della scrittura in un formato altamente accessibile, senza stampelle di progettazione. Questo cambiamento continuerà, influenzando lo sviluppo del tema, i nuovi servizi web e l'estetica del "design collettivo".
Si potrebbe anche voler controllare le recenti riflessioni di Collis sulle tendenze del web design per il prossimo anno: 2014 Predictions for Web Design.
Pensi che il test cross-browser stia per uscire? Hai un'idea di una nuova tendenza nascente? Condividilo nei commenti!
Accentsconagua