20 cele mai tari tendințe care vor forma Web Design veni 2016

În timp ce incepe cu fiecare an care trece, multe tendințe noi de design se dezvoltă la orizont. Domeniul de design web se schimbă mereu cu noi instrumente, fluxuri de lucru și cele mai bune practici pentru construirea de layout-uri utile.

Este greu de anticipat care dintre tendințele exacte vor atrage cea mai mare atenție. Cu toate acestea, istoria recentă arată un model de tendințe care au fost în creștere ca wildfire. Am organizat 20 de tendințe unice care au câștigat tracțiunea în anul 2015 și probabil vor continua până în 2016.

1. Sketch App pentru design UI

Schița înlocuiește rapid Photoshop pentru toate sarcinile de proiectare UI de la telefoane mobile de înaltă fidelitate la machete de înaltă fidelitate și design de icoane.

Sketch App este o aplicație numai pentru Mac, realizată special pentru designeri web și mobili. Acesta oferă un mediu de lucru mai fin pentru a crea elemente vectoriale pentru orice interfață, dar de asemenea păstrează multe caracteristici pe care le-ați aștepta de la Photoshop precum efecte de text și stiluri de strat.

Deși nu există dovezi că Sketch va fi lansat pentru Windows, acesta a devenit încă o alegere apreciată de utilizatorii OS X. Fluxul de lucru simplificat și eticheta de preț mai ieftină dau lui Adobe o rulare pentru banii lui. Dacă Sketch continuă să furnizeze cea mai bună experiență de design UI, atunci cu siguranță va continua să crească bine până în 2016 și după aceea.

2. IDE bazate pe browser

Desktop IDE-urile au fost în jur de zeci de ani, cu opțiuni variind de la Notepad ++ la Xcode și Visual Studio. Un IDE simplifică scrierea codului cu sugestii și evidențierea sintaxei (printre alte caracteristici).

Dar IDE-urile tradiționale au fost lansate ca aplicații desktop. În ultimii ani, am înregistrat o creștere dramatică a IDE-urilor de cloud bazate pe browser. Acestea nu necesită alt software decât un browser web, ceea ce permite dezvoltatorilor să scrie coduri de la orice computer cu acces la Internet.

IDE-urile cloud funcționează mai mult ca aplicațiile web unde puteți salva fragmente de cod în cont pentru partajare sau stocare personală. CodePen este unul dintre cele mai populare IDE-uri cu suport pentru HTML / CSS / JS, împreună cu preprocesare personalizată precum Jade / Haml și LESS / SCSS.

Mozilla Thimble este un alt IDE pentru dezvoltatorii începători care vor să învețe pe măsură ce codifică. De asemenea, Codeply este excelent pentru testarea unor cadre specifice, cum ar fi Bootstrap sau Zurb's Foundation, fără a fi nevoie să descărcați fișiere.

3. Mixe Sass / SCSS gratuite

Preprocesoarele au fost moderne de ani de zile, dar recent au devenit suficient de mari pentru a se simți omniprezente în întregul domeniu de design / dezvoltare web. În zilele noastre pare ciudat să scrieți CSS vanilie când Sass / SCSS poate oferi mult mai mult.

Unul dintre avantajele ofertei este creșterea ofertei de biblioteci Sass mixin. Simple mixins sunt ca fragmente de cod sau funcții de bază pentru a genera cod repetabil în CSS. În timp ce puteți scrie întotdeauna propria dvs., mulți dezvoltatori au fost suficient de amabili pentru a elibera mixuri gratuite online.

Unele amestecuri vin în biblioteci ca Bourbon, în timp ce altele pot fi elemente independente. Incearca sa faci o cautare in GitHub pentru mixuri Sass / SCSS pentru a vedea ce poti gasi.

4. Caracteristicile cartelelor

Amplasarea cărților de pe site-ul web a fost popularizată de Pinterest cu câțiva ani în urmă și de atunci a devenit o tendință pentru paginile web cu conținut greu. Plugin-urile gratuite cum ar fi jQuery Masonry pot fi folosite pentru a imita acest stil layout cu carduri animate pentru diferite inaltimi si latimi.

Un aspect al cardului este cel mai bine folosit pe paginile cu o mulțime de date care ar trebui să poată fi scanate. Pagina de destinație pentru Google Now utilizează un aspect al cartelei pentru a face publicitate cardurilor opționale pentru aplicația Google Now.

Vă puteți gândi la aspectul cardurilor ca la rețelele dinamice mai dinamice, cu accent pe minimizarea conținutului la cele esențiale, pentru a afișa mai multe elemente împreună. Revistele online, cum ar fi UGSMAG și The Next Web, sunt amândouă exemple perfecte de machete de carduri folosite pentru a prezenta conținutul postărilor recente.

5. Videoclipuri personalizate pentru Explainer

Firmele mari și mici, deopotrivă, au ajuns la tendința videoclipurilor explicative personalizate. Acestea sunt adesea create cu animație ca exemplul Egg Crazy. Însă alte videoclipuri se bazează pe înregistrări din viața reală precum Instagram Direct.

Scopul unui videoclip explicator este de a demonstra cum funcționează un produs sau un serviciu. Vizitatorii pot schimba o listă de caracteristici și încă nu au nicio idee despre cum funcționează produsul. Videoclipurile clarifică totul vizual și acoperă lucrurile importante în doar câteva minute.

Dacă doriți să vă încercați mâna la realizarea unui videoclip personalizat explicator, verificați acest curs Udemy. Este un studiu aprofundat care se concentrează asupra videoclipurilor pentru proiectarea paginii de destinație.

6. Previzualizări de produs live

Designul paginii de destinație a înregistrat o creștere incredibilă datorată vitezei mai mari a Internetului și a capacităților browserului. O tendință majoră pe care am observat-o este adăugarea de previzualizări live ale produselor pe paginile de pornire sau pe paginile de destinație personalizate.

Luați, de exemplu, pagina produsului Slack. Dispune de un tur video și de o grafică vectorială care acoperă interfața Slack. Aceste previzualizări ale produselor sunt menite să ofere utilizatorilor potențiali o privire asupra modului în care funcționează produsul.

Webydo este un alt exemplu strălucit, cu o animație live pe pagina principală. Acest lucru permite vizitatorilor să vadă Webydo în acțiune, fără a fi nevoiți să demonstreze manual produsul. Dar nu trebuie întotdeauna să vă bazați pe animații pentru previzualizarea produselor. Iconjar folosește o captură de ecran simplă PNG pentru a arăta ce este produsul și cum funcționează.

7. alergătorii de activități automate

Lumea dezvoltării de frontend sa schimbat atât de mult cu o serie de noi bune practici pentru crearea site-urilor web. Task runners / sisteme de construcție cum ar fi Gulp și Grunt sunt folosite mult mai frecvent pentru o serie de sarcini care au necesitat eforturi manuale.

Automatizarea reprezintă sângele vieții rapide și revoluționarea codului de calitate. Mașinile nu fac greșeli, deci cu cât mai mult puteți automatiza cu încredere mai puține probleme pe care le veți avea (teoretic).

Pentru a afla mai multe, verificați această postare Reddit care explică modul în care funcționează alergătorii de activități. Aceste instrumente rulează practic JS cod care va automatiza părți din fluxul dvs. de lucru, fie JS personalizat, fie scripturi scrise de alții.

8. Aplicații mobile Java JS

Sunt un avocat mare al folosirii instrumentelor potrivite pentru această slujbă. În cazul dezvoltării aplicațiilor mobile, aceasta înseamnă Java pentru Android, Objective-C / Swift pentru iOS.

Dar nu toată lumea dorește să învețe o limbă nouă doar pentru a construi o aplicație mobilă. Din fericire, devine mai ușor ca aplicațiile native să fie create și compilate cu biblioteci alternative, cum ar fi NativeScript sau React Native.

Decalajul pentru a deveni un programator de aplicații mobile se scurtează odată cu posibilitatea de a crea aplicații mobile prin JavaScript. PhoneGap este o altă opțiune bazată pe cod HTML / CSS / JS.

În timp ce procesul de creare diferă foarte mult, JS devine rapid o soluție pentru coderi care doresc să construiască aplicații mobile fără a învăța o nouă limbă.

9. Instrumente de colaborare pentru proiectare

Mesageria instantanee și chat-ul de grup au fost în jur de peste un deceniu. Cu toate acestea, aceste resurse s-au bazat în mod tradițional pe plaintext cu o anumită capacitate de a atașa fișiere.

O nouă tendință emergentă este capacitatea de a distribui documente de design live în cadrul aplicațiilor de chat. Notabil este un exemplu în care adnotările și comentariile pot fi stratificate chiar deasupra unui document. Acest lucru oferă designerilor un mod curat de a împărtăși munca directă cu toată lumea din echipă.

Slack este cea mai populară aplicație de chat din moment, care suportă multe caracteristici similare. Slack userbase în creștere a fost de neclintit cu privire la crearea de extensii care îmbunătățesc foarte mult capabilitățile Slack și cravată în alte produse, cum ar fi Hangouts, MailChimp, și chiar WordPress.

10. Cadrele responsabile pentru Frontend

Cadrele frontale cum ar fi Bootstrap au fost în jur de ani de zile și continuă să se dovedească utile pentru proiectele atât personale, cât și profesionale. Designul receptiv a forțat drumul său în cadre și a creat o cerere de cod frontend în loc de doar backend (Django, Laravel, etc).

Mergând în 2016, cred că vom citi mai multe despre cadrele frontend receptive și valoarea lor în proiectele web. Mulți dezvoltatori așteaptă cu nerăbdare lansarea Fundației 6 și publicarea v1 a versiunii Bootstrap 4.

Alte cadre mai puțin cunoscute pe care le puteți verifica includ Gumby și CSS Pure.

11. O mai mare concentrare asupra designului UX

Domeniul de design al experienței utilizatorilor va continua să crească rapid, mai mulți designeri și dezvoltatori observând. Designul UI face parte din designul UX, dar nu este scopul final. Interfața UI este un mijloc pentru un final, sfârșitul fiind o experiență fantastică pentru utilizatori.

Doar 5 ani în urmă, abia am fost familiarizați cu UX sau cu modul în care a aplicat designul interfeței. Acum avem resurse precum Exchange UX Stack și cărți gratuite UX. Dacă nu știți prea multe despre experiența utilizatorului, acum este momentul potrivit pentru a studia și învăța cum pot fi aplicate principiile UX la toate formele de interfețe digitale.

12. Manageri de pachete

Managerii de pachete digitale au crescut atât de repede încât sunt practic o cerință pentru dezvoltarea web modernă. Soluții precum Bower și NPM pot economisi mult timp pentru a începe noi proiecte.

Mastering orice tehnologie nouă va lua timp și vine cu o curbă de învățare. Dar dacă există un lucru pe care fiecare dezvoltator de frontend (sau backend) ar trebui să știe, este un manager de pachete. Acestea necesită cunoștințe despre comenzile terminale, dar odată ce vă obișnuiți cu procesul, nu veți mai dori niciodată să vă întoarceți.

13. Animații avansate ale UI

Transitările CSS3 au fost doar începutul unei tendințe pe termen lung de animație pe web. Acum avem zeci de biblioteci CSS și JavaScript dedicate animației. Lucruri pe care nu le-am visat niciodată posibil sunt acum construite și disponibile gratuit dacă știți unde să căutați.

Animația nu este o cerință pentru un design bun. Dar poate face un design bun într-un design minunat atunci când este folosit în mod corespunzător.

Urmăriți tendințele animate pentru interfețe și vedeți ce puteți lua de pe diferite site-uri web. Amintiți-vă că animația web nu este un film Disney și ar trebui tratată cu respect. Utilizați ușor animația pentru a îmbunătăți o interfață fără a deveni un element neplăcut sau distragător al designului.

14. Designerii care învață să codifice

Un subiect cu buton fierbinte în acest an a fost cazul pentru designerii care învață să codifice. Unii designeri consideră că nu este treaba lor să scrie cod, în timp ce alții simt că devine normă și ar trebui să fie îmbrățișată.

Am citit discuții aprinse și posturi fascinante despre acest subiect, care pare să ducă doar răspunsuri emoționale. Un design bun este doar o imagine frumoasă fără cod. Cu toate acestea, pentru a vă concentra pe ambele necesită un designer să petreacă mai puțin timp practicând ambarcațiunile.

Deci există un răspuns definitiv? Unii ar argumenta că viabilitatea locurilor de muncă crește pentru designerii care cunosc codarea frontend. Totuși, dacă cineva nu dorește să scrie cod? Merită să învățați doar să concurați?

Simt că cel mai clar răspuns este să faci tot ce vrei. Dar se pare că acest subiect este încă pe masă pentru mulți designeri care probabil vor continua discuția în 2016.

15. Instrumente gratuite online & Webapps

De obicei, toate programele au fost difuzate de pe desktop indiferent de ce aveați nevoie să faceți. Dar în zilele noastre sunt în mod constant uimit cu cât de multe webapps sunt disponibile gratuit online.

Veți găsi totul, de la codarea / decodarea adreselor URL la un editor Markdown complet gratuit. Chiar și Google Drive a preluat produsele Microsoft Office în browser (din nou, complet gratuit).

Nivelul actual al puterii de calcul și standardele omogene din browserele web oferă o posibilitate aparent nelimitată. Sarcinile complexe, cum ar fi reluarea creației și compresia imaginilor, pot fi gestionate direct dintr-o fereastră de browser.

16. Creșterea componentelor web

Componentele web încearcă să rezolve problemele de complexitate pentru dezvoltatori. Site-ul WebComponents dispune de resurse și materiale excelente pentru a oferi dezvoltatorilor un salt în acest subiect.

Dacă nu sunteți sigur cum să înțelegeți componentele modulare web, verificați această postare pentru a afla mai multe.

În timp ce componentele nu au suflat în mod special la starea de masă, ele sunt discutate de către dezvoltatorii profesioniști din întreaga lume. Google a lansat Polymer, care este un cadru folosit pentru adăugarea de componente web prin JS și HTML.

Acest lucru poate să nu fie practic de utilizat în proiectele majore de clienți încă. Cu toate acestea, tehnologia este disponibilă și cu puțină practică puteți controla cu ușurință conceptele. Pentru a afla mai multe și a vedea câteva eșantioane de cod puteți citi prin această postare CSS-Tricks pe componentele web modulare.

17. Resurse Online Learning

Știm cu toții că acum este cel mai ușor timp pentru a învăța orice abilitate din confortul computerului. Se pare că piața de învățare online crește exponențial, cu noi cursuri și site-uri web care apar în fiecare an.

Mă simt mai încrezător decât oricând înainte că vom vedea o creștere a învățării online. Site-urile cunoscute precum Treehouse și CodeSchool oferă cursuri incredibile alături de site-uri mai noi precum Bitfountain și Learn-Verified.

Dacă există un subiect pe care doriți să îl învățați, probabil că există un curs online - mai ales dacă doriți să învățați tehnici digitale cum ar fi proiectarea UI sau dezvoltarea aplicațiilor.

18. Server-side JavaScript

Deși au existat opțiuni anterioare pentru server-side JS, nici unul nu a pătruns atât de repede ca Node.js. Componentele JavaScript s-au îndrăgostit de această bibliotecă și au vizionat că aceasta se află în competiție directă cu alte limbi de backend, cum ar fi Python sau PHP.

Nodul permite dezvoltatorilor să construiască site-uri utilizând o singură limbă pentru codul frontend + backend. Și resursele precum Node Package Manager dau chiar mai multă valoare Node.js.

Din ceea ce pot spune, nodul este încă în continuă creștere și continuă să obțină tracțiune de la entuziaștii din industrie. Indiferent dacă intenționați să învățați Nod sau nu, nu există nici o îndoială că va continua să crească ca o tendință majoră în 2016.

19. Caracteristici ale site-urilor cu funcții touch-supported

Browserele inteligente au sprijinit întotdeauna funcțiile touch pentru toate site-urile Web pentru a menține compatibilitatea înapoi. Cu toate acestea, recent am observat mai multe pluginuri și caracteristici personalizate atașate pe site-uri cu scopul specific de a gestiona evenimentele touch.

Plugin-urile, cum ar fi Photoswipe și Dragend.js, sunt construite pentru a gestiona raportarea și atingerea ecranelor touchscreen. Se pare că dezvoltatorii web nu numai că creează site-uri responsabile, ci și site-uri web activate.

Dacă căutați în jur, veți găsi câteva caracteristici impresionante pentru web care se bazează exclusiv pe evenimente touch.

20. Designul materialelor pe Web

Descărcarea Google de design material a fost un succes enorm pentru designerii Android. Designul de material este considerat un limbaj de proiectare menit să simplifice procesul de realizare a interfețelor utilizatorilor pentru smartphone-urile Android.

De-a lungul timpului, designerii web au luat acest lucru la inimă și au construit site-uri întregi bazate pe noul limbaj de design Google. Se pare că tendința de design material a trecut dincolo de doar aplicațiile mobile în lumea designului web.

Oamenii care doresc să construiască site-uri materiale nu trebuie nici măcar să reinventeze roata. Librăriile gratuite precum Material UI și Materialalize oferă coduri personalizate pentru structurarea unui aspect nou pe fundația de design material.

Închidere

Privind asupra acestor tendințe ar trebui să fie clar că vedem un efort real concertat din partea comunității web pentru a ușura procesul de construire a site-urilor web. Cu toții vrem să economisim timp în fluxul nostru de zi cu zi.

De la lansarea web-ului am văzut multe tehnologii în creștere, doar pentru a fi înlocuite de alternative mai bune. Aceste tendințe din 2016 promovează un set mai uniform de tehnici de proiectare, care vor ușura și mult mai puțin complexitatea construirii site-urilor web.