20 Le tendenze più importanti che modelleranno il web design arrivano nel 2016
Con il passare del tempo in avanti di ogni anno che passa, molte nuove tendenze del design si profilano all'orizzonte. Il campo del web design cambia continuamente con nuovi strumenti, flussi di lavoro e best practice per la costruzione di layout utilizzabili.
È difficile prevedere quali tendenze esatte attirino la massima attenzione. Tuttavia, la storia recente mostra un modello di tendenze che stanno crescendo a macchia d'olio. Ho organizzato 20 tendenze uniche che hanno guadagnato aderenza rispetto al 2015 e probabilmente continueranno anche nel 2016.
1. App Sketch per UI Design
Sketch sostituisce rapidamente Photoshop per tutte le attività di progettazione dell'interfaccia utente che vanno da wireframe a bassa fedeltà a modelli di alta fedeltà e design di icone.
Sketch App è un'applicazione solo per Mac realizzata appositamente per i designer di siti Web e dispositivi mobili. Offre un ambiente di lavoro più fluido per creare elementi vettoriali per qualsiasi interfaccia, ma conserva anche molte funzionalità che ti aspetti da Photoshop come gli effetti di testo e gli stili di livello.
Sebbene non ci siano prove che Sketch sarà mai rilasciato per Windows, è comunque diventato una scelta preziosa dagli utenti di OS X. Il flusso di lavoro semplificato e il prezzo più economico stanno dando ad Adobe una corsa per i suoi soldi. Se Sketch continua a fornire la migliore esperienza di progettazione dell'interfaccia utente, continuerà sicuramente a crescere bene nel 2016 e oltre.
2. IDE basati sul browser
Gli IDE desktop esistono da decenni con opzioni che vanno da Notepad ++ a Xcode e Visual Studio. Un IDE semplifica la scrittura di codice con suggerimenti e evidenziazione della sintassi (tra le altre caratteristiche).
Ma tradizionalmente gli IDE sono stati rilasciati come applicazioni desktop. Negli ultimi anni abbiamo assistito a un drammatico aumento degli IDE cloud basati su browser. Questi non richiedono alcun software diverso da un browser Web, che consente agli sviluppatori di scrivere codice da qualsiasi computer con accesso a Internet.
Gli IDE cloud funzionano più come applicazioni Web in cui è possibile salvare frammenti di codice sul proprio account per la condivisione o l'archiviazione personale. CodePen è uno degli IDE più popolari con supporto per HTML / CSS / JS con preelaborazione personalizzata come Jade / Haml e LESS / SCSS.
Mozilla Thimble è un altro IDE per gli sviluppatori principianti che desiderano apprendere mentre codificano. Codeply è anche ottimo per testare framework responsive specifici come Bootstrap o Zurb's Foundation senza dover scaricare alcun file.
3. Mixins Sass / SCSS gratuiti
I preprocessuali sono alla moda da anni ma solo di recente sono diventati abbastanza popolari da sentirsi onnipresenti in tutto il settore del web design / sviluppo. Oggigiorno sembra strano scrivere CSS vanilla quando Sass / SCSS può fornire molto di più.
Un vantaggio è una crescente offerta di librerie di mixin Sass. I semplici mix sono come frammenti di codice o funzioni di base per generare codice ripetibile nei CSS. Sebbene tu possa sempre scrivere il tuo, molti sviluppatori sono stati così gentili da rilasciare mixin online gratuiti.
Alcuni mix sono disponibili in librerie come Bourbon mentre altri possono essere articoli autonomi. Prova a fare una ricerca nei mixin di GitHub per Sass / SCSS per vedere cosa puoi trovare.
4. Layout di carte
I layout delle carte del sito web sono stati inizialmente resi popolari da Pinterest alcuni anni fa e da allora sono diventati una tendenza per le pagine Web che contengono molti contenuti. Plugin gratuiti come jQuery Masonry possono essere usati per imitare questo stile di layout con carte animate per varie altezze e larghezze.
Il layout di una carta è meglio utilizzato su pagine con molti dati che dovrebbero essere scansionabili. La pagina di destinazione per Google Now utilizza un layout di scheda per pubblicizzare le schede opzionali per l'app Google Now.
Puoi pensare ai layout delle carte come a griglie più dinamiche con l'accento sulla riduzione al minimo dei contenuti per elencare più elementi insieme. Riviste online come UGSMAG e The Next Web sono entrambi esempi perfetti di layout delle carte usati per mostrare i contenuti dei post recenti.
5. Video personalizzati Explainer
Sia le grandi che le piccole aziende hanno seguito la tendenza dei video esplicativi personalizzati. Questi sono spesso creati con animazioni come l'esempio di Crazy Egg. Ma altri video si basano su filmati reali come Instagram Direct.
Lo scopo di un video esplicativo è dimostrare come funziona un prodotto o un servizio. I visitatori possono sfogliare un elenco di funzionalità e non hanno ancora idea di come funziona il prodotto. I video chiariscono tutto visivamente e coprono le cose importanti in pochi minuti.
Se vuoi provare a fare un video esplicativo personalizzato dai un'occhiata a questo corso Udemy. È uno studio approfondito che si concentra sui video per la progettazione della pagina di destinazione.
6. Anteprime dei prodotti dal vivo
Il design delle pagine di destinazione ha visto una crescita incredibile derivante dalle maggiori velocità di Internet e dalle funzionalità del browser. Una delle principali tendenze che ho notato è l'aggiunta di anteprime di prodotti live su home page o pagine di destinazione personalizzate.
Prendi ad esempio la pagina del prodotto Slack. È dotato di un video tour e grafica vettoriale che copre l'interfaccia Slack. Queste anteprime dei prodotti hanno lo scopo di offrire ai potenziali utenti uno sguardo sul funzionamento del prodotto.
Webydo è un altro brillante esempio con un'animazione live in riproduzione sulla home page. Ciò consente ai visitatori di vedere Webydo in azione senza dover demoare manualmente il prodotto. Ma non è sempre necessario fare affidamento sulle animazioni per le anteprime dei prodotti. Iconjar utilizza un semplice screenshot PNG per mostrare che cos'è il prodotto e come funziona.
7. Runner di attività automatizzate
Il mondo dello sviluppo del frontend è cambiato così tanto con una manciata di nuove best practice per la creazione di siti web. I runner di attività / i sistemi di build come Gulp e Grunt vengono utilizzati molto più frequentemente per una serie di compiti che in precedenza richiedevano uno sforzo manuale.
L'automazione è la linfa vitale del rapido turnaround e della sfornatura del codice di qualità. Le macchine non commettono errori, quindi più puoi automatizzare con sicurezza i pochi problemi che avrai (in teoria).
Per saperne di più consulta questo post di Reddit che spiega come operano i corridori. Questi strumenti eseguono fondamentalmente il codice JS che automatizza parti del tuo flusso di lavoro, JS personalizzato o script scritti da altri.
8. App nativi di JS Mobile
Sono un grande sostenitore dell'uso degli strumenti giusti per il lavoro. Nel caso dello sviluppo di app mobili questo significa Java per Android, Objective-C / Swift per iOS.
Ma non tutti vogliono imparare una nuova lingua solo per costruire un'app mobile. Per fortuna sta diventando più facile per le app native essere create e compilate con librerie alternative come NativeScript o React Native.
Il divario per diventare un programmatore di app per dispositivi mobili si sta riducendo con la possibilità di creare app per dispositivi mobili tramite JavaScript. PhoneGap è un'altra opzione basata sul codice HTML / CSS / JS.
Mentre il processo di creazione varia notevolmente, JS sta rapidamente diventando una soluzione per i programmatori che desiderano creare app mobili senza imparare una nuova lingua.
9. Strumenti di collaborazione per la progettazione
La messaggistica istantanea e la chat di gruppo sono disponibili da oltre un decennio. Tuttavia, queste risorse si sono tradizionalmente basate su testo in chiaro con alcune capacità di allegare file.
Una nuova tendenza emergente è la possibilità di condividere i documenti di progettazione dal vivo all'interno delle applicazioni di chat. Notevole è un esempio in cui annotazioni e commenti possono essere sovrapposti direttamente sopra un documento. Ciò offre ai progettisti un modo pulito per condividere il lavoro direttamente con tutti i membri di un team.
Slack è l'applicazione di chat più popolare al momento, che supporta molte funzionalità simili. La crescente base di utenti Slack è stata irremovibile sulla creazione di estensioni che migliorano notevolmente le capacità di Slack e si legano ad altri prodotti come Hangouts, MailChimp e persino WordPress.
10. Quadri di risposta reattivi
Strutture di frontend come Bootstrap esistono da anni e continuano a dimostrarsi utili su progetti sia personali che professionali. Il design reattivo si è imposto nei framework e ha creato una richiesta di codice di frontend invece di backend (Django, Laravel, ecc.).
Passando al 2016, penso che leggeremo molto di più sui frontend framework reattivi e sul loro valore nei progetti web. Molti sviluppatori stanno aspettando con impazienza il rilascio di Foundation 6 e la versione pubblica v1 di Bootstrap 4.
Altri framework meno conosciuti che potresti controllare includono Gumby e Pure CSS.
11. Maggiore attenzione su UX Design
Il campo della progettazione dell'esperienza utente continuerà a crescere rapidamente con un numero crescente di progettisti e sviluppatori. Il design dell'interfaccia utente fa parte del design di UX, ma non è l'obiettivo finale. L'interfaccia utente è un mezzo per un fine, con la fine di essere una fantastica esperienza utente.
Solo 5 anni fa avevo a malapena familiarità con UX o come si applicava al design dell'interfaccia. Ora abbiamo risorse come UX Stack Exchange e ebook UX gratuiti. Se non sai molto sull'esperienza utente, ora è il momento migliore per studiare e imparare come i principi UX possono essere applicati a tutte le forme di interfacce digitali.
12. Gestori di pacchetti
I gestori di pacchetti digitali sono aumentati così rapidamente da essere praticamente un requisito per lo sviluppo moderno del web. Soluzioni come Bower e NPM possono far risparmiare molto tempo all'avvio di nuovi progetti.
Padroneggiare qualsiasi nuova tecnologia richiederà tempo e una curva di apprendimento. Ma se c'è una cosa che ogni sviluppatore di frontend (o back-end) dovrebbe sapere, è un gestore di pacchetti. Richiedono una certa conoscenza dei comandi del terminale ma una volta che ci si abitua al processo non vorrai più tornare indietro.
13. Animazioni UI avanzate
Le transizioni CSS3 erano solo l'inizio di una tendenza a lungo termine dell'animazione sul web. Ora abbiamo dozzine di librerie CSS e JavaScript dedicate all'animazione. Le cose che non avrei mai potuto immaginare sono ora costruite e disponibili gratuitamente se sai dove guardare.
L'animazione non è un requisito per un buon design. Ma può trasformare un buon design in un grande design se usato correttamente.
Tieni d'occhio le tendenze animate per le interfacce e guarda cosa puoi togliere da vari siti web. Ricorda che l'animazione web non è un film Disney e dovrebbe essere trattata con rispetto. Usa l'animazione delicatamente in modo da migliorare un'interfaccia senza diventare un elemento fastidioso o distratto del design.
14. Designer che imparano a codificare
Un tema caldo di quest'anno è stato il caso per i progettisti che imparano a programmare. Alcuni progettisti ritengono che non sia il loro lavoro scrivere codice, mentre altri ritengono che stia diventando la norma e dovrebbero essere accettati.
Ho letto discussioni accese e post affascinanti su questo argomento che sembra solo disegnare risposte emotive. Un buon design è solo una bella immagine senza codice. Tuttavia, concentrarsi su entrambi richiede che un progettista impieghi meno tempo a praticare l'artigianato.
Quindi c'è una risposta definitiva? Alcuni sostengono che la redditività del lavoro aumenta per i progettisti che conoscono la codifica frontend. E se qualcuno non volesse scrivere codice? Vale la pena imparare solo a gareggiare?
Sento che la risposta più chiara è fare quello che vuoi. Ma sembra che questo argomento sia ancora sul tavolo per molti designer che probabilmente continueranno la discussione nel 2016.
15. Strumenti online gratuiti e applicazioni web
In passato, tutti i programmi venivano eseguiti dal desktop, indipendentemente da ciò che dovevi fare. Ma al giorno d'oggi sono costantemente stupito di quante webapps sono disponibili gratuitamente online.
Troverai di tutto, dalla codifica / decodifica degli URL a un editor Markdown completamente gratuito. Anche Google Drive ha portato i prodotti Microsoft Office nel browser (di nuovo, completamente gratuito).
L'attuale livello di potenza di calcolo e gli standard omogenei dei browser Web offrono una quantità apparentemente illimitata di opportunità. Compiti complessi come la creazione di curriculum per la compressione delle immagini possono essere gestiti direttamente da una finestra del browser.
16. La crescita dei componenti Web
I componenti Web stanno cercando di risolvere i problemi di complessità per gli sviluppatori. Il sito Web WebComponents ha grandi risorse e materiali per dare agli sviluppatori un salto in avanti in questo argomento.
Se non sei sicuro di come capire i componenti web modulari, dai un'occhiata a questo post per saperne di più.
Mentre i componenti non si sono particolarmente diffusi nello stato tradizionale, vengono discussi da sviluppatori professionisti in tutto il mondo. Google ha rilasciato Polymer, un framework utilizzato per aggiungere componenti Web tramite JS e HTML.
Questo potrebbe non essere pratico da utilizzare nei principali progetti client ancora. Tuttavia, la tecnologia è disponibile e con un po 'di pratica puoi padroneggiare i concetti con facilità. Per saperne di più e vedere alcuni esempi di codice, puoi leggere questo post sui trucchi CSS su componenti web modulari.
17. Risorse per l'apprendimento online
Sappiamo tutti che ora è il momento più semplice per imparare qualsiasi abilità dal comfort del tuo computer. Sembra che il mercato dell'apprendimento online stia crescendo esponenzialmente con nuovi corsi e siti Web che spuntano ogni anno.
Mi sento più fiducioso che mai che vedremo un aumento dell'apprendimento online. Siti noti come Treehouse e CodeSchool offrono corsi incredibili accanto a siti più recenti come Bitfountain e Learn-Verified.
Se c'è un argomento che vuoi imparare, probabilmente c'è un corso online, specialmente se vuoi imparare tecniche digitali come la progettazione dell'interfaccia utente o lo sviluppo di app.
18. JavaScript lato server
Mentre ci sono state passate le opzioni per JS lato server, nessuno è penetrato rapidamente come Node.js. Gli sviluppatori di JavaScript si sono innamorati di questa libreria e la guardano salire in concorrenza diretta con altri linguaggi di backend come Python o PHP.
Il nodo consente agli sviluppatori di creare siti Web utilizzando un'unica lingua per entrambi i codici frontend + backend. E risorse come Node Package Manager danno ancora più valore a Node.js.
Da quello che posso dire, Node è ancora in crescita e continua a guadagnare terreno dagli appassionati del settore. Sia che tu abbia intenzione di imparare Nodo o meno, non c'è dubbio che continuerà a crescere come una tendenza importante nel 2016.
19. Funzionalità del sito Web supportate dal tocco
I browser per smartphone hanno sempre supportato le funzionalità touch di tutti i siti Web per mantenere la compatibilità con le versioni precedenti. Eppure di recente ho notato più plug-in e funzionalità personalizzate aggiunte ai siti Web con l'obiettivo specifico di gestire gli eventi touch.
Plugin come Photoswipe e Dragend.js sono progettati per gestire lo scorrimento e il tocco sui display touchscreen. Sembra che gli sviluppatori web non stiano solo costruendo siti web reattivi, ma anche siti web abilitati al tocco.
Se esegui una ricerca in giro troverai alcune funzionalità davvero straordinarie create per il Web che si basano esclusivamente sugli eventi touch.
20. Progettazione materiale sul Web
Il rilascio di Google di material design è stato un enorme successo per i designer Android. Il material design è considerato un linguaggio di progettazione pensato per semplificare il processo di creazione di interfacce utente per smartphone Android.
Nel corso del tempo i web designer hanno preso tutto questo a cuore e costruito interi siti web basati sul nuovo linguaggio di design di Google. Sembra che la tendenza del material design si sia spostata oltre le semplici app mobili nel mondo del web design.
La gente che vuole costruire siti web materiali non ha nemmeno bisogno di reinventare la ruota. Librerie gratuite come Material UI e Materialize offrono codici personalizzati per strutturare un nuovo layout in cima alle fondamenta del material design.
Chiusura
Guardando oltre queste tendenze, dovrebbe essere chiaro che stiamo assistendo a un vero sforzo concertato da parte della comunità web per rendere più semplice il processo di creazione di siti web. Vogliamo tutti risparmiare tempo nel nostro flusso di lavoro quotidiano.
Dal momento che il web ha visto nascere molte tecnologie, solo per essere sostituite da alternative migliori. Queste tendenze del 2016 stanno spingendo per un insieme più uniforme di tecniche di progettazione che renderà la costruzione di siti Web più semplice e molto meno complessa.
