Share
Anul acesta a fost a Sclipitor an in web design. Mai mult decât oricare alt an, probabil, au fost făcute uriașe pași spre maturarea câmpului. Să aruncăm o privire la unele dintre ceea ce ne putem aștepta pentru viitorul designului web ca o industrie.
Oricine a realizat designul web pentru mai mult de câțiva ani sa confruntat, fără îndoială, cu problema decalajului dintre design și dezvoltarea front-end. Designerii trăiesc în instrumente similare cu Photoshop sau Sketch, iar dezvoltatorii trăiesc în editorii de text.
Acest flux de lucru comun a văzut multe încercări de soluționare, inclusiv aspecte precum SiteGrinder, Dreamweaver și, mai recent, Adobe Muse. Toate aceste soluții vin cu problemele lor și nu au fost adoptate pe scară largă. În cea mai mare parte, dezvoltatorii din partea front-end-ului au rămas blocați pe vechile lor căi, sau designerii se deplasează mai mult în browser pentru a lucra, închizând decalajul. Cu toate acestea, apar instrumente pentru a elimina și mai mult acest decalaj. Cu unelte cum ar fi Macaw, pe punctul de a fi lansat, calea către un sfârșit al decalajului minuțios dintre proiectare și dezvoltarea frontului este scurtată.
Aceste instrumente vor beneficia în mare măsură de faptul că tendințele de design web au adoptat culori plate cu foarte puțină textură și elemente repetate anticipate. Aceste elemente sunt mult mai puțin complexe decât elementele ui care se bazează în mare măsură pe imagine de câțiva ani în urmă, deci este o primă etapă pentru a introduce instrumente pentru a genera automat bine organizat, semantic cod.
Nu veți vedea o bună implementare JavaScript "WYSIWYG" pentru nimic mai mult decât widget-urile configurabile de bază. Motivul principal pentru aceasta este că HTML și CSS sunt ambele declarativ limbi, în timp ce JavaScript este un limbaj de programare. "Panza" pentru JavaScript este inerent editorul de text. Panza pentru HTML este inerent documentul.
Pe măsură ce browserele adoptă cele mai noi standarde, telefoanele devin mai rapide, ecranele devin mai imprevizibile și desenele continuă să se aplatizeze, vom vedea o reducere semnificativă a numărului de imagini grafice utilizate într-un anumit site. Elementele complexe ale UI vor continua să se bazeze din ce în ce mai mult pe CSS, iar pentru lucrurile care nu pot fi realizate doar cu CSS, SVG va fi adoptat. Excepția principală este fotografia. Fotografiile mari vor continua să pretindă mai mult spațiu de design deoarece designerii se bazează mai mult pe imaginile transparente orientate spre conținut pentru a defini experiența și narațiunea.
Cu exemple frumoase care apar peste tot, SVG îi lovește prima. Ne putem aștepta să vedem instrumente mai accesibile pentru a crea infovisuri de bază fără prea multă greutate (gândiți ChartJS), precum și instrumentele educaționale mai expunând potențialul și puterea SVG pentru persoanele care nu au avut motive să exploreze anterior SVG.
Deși speculația flexbox este încă așezată pe un teren ne-standardizat, există un suport relativ bun în toate browserele. Nu a existat o largă adoptare a flexboxului (din motive necunoscute), dar credem că în acest an va exista un impuls spre adoptare.
Suntem destul de incantati de flexbox aici la Tuts + ca vom posta un ghid care explica cum sa creati machete cu flexbox in curand, asa ca ai grija de asta!
Încă nu veți vedea adoptarea completă a unei soluții pentru imaginea retinei. Deși Webkit a implementat srcset, dezvoltatorii rezolvă deja această problemă într-un mod ușor mai puțin eficient sau robust. In timp ce srcset va fi în cele din urmă necesar, pentru că majoritatea dezvoltatorilor vor continua să rezolve problemele salvând imagini mai mari la calități inferioare.
Amintiți-vă când a devenit parallax următorul lucru fierbinte? Toată lumea a început să o folosească în moduri noi și incitante (precum și uzate și înfricoșătoare) pentru a spune povesti și a spori experiența utilizatorului. Vă puteți aștepta ca oamenii să adopte pe scară largă video ca un element de design (de exemplu, ca fundal) și nu doar ca o experiență "teatrală" focală așa cum am văzut cu YouTube.
Acest lucru a fost în jur de mult timp (au existat chiar încarnări construite în Flash), dar nu a câștigat popularitate cu societăți comerciale până de curând. Cu aceasta vor veni provocări interesante, în special legate de mărimea video și de compresie.
În timp ce animațiile cu siguranță nu sunt un lucru nou, logo-ul animat și elementele icoane cresc în popularitate. Animațiile SVG pot fi realizate cu CSS, iar proiectele precum Iconic, care au ridicat peste 6 ori obiectivul lor pe Kickstarter, precum și eforturile open-source cum ar fi Climacons, arată promisiunea unei noi tendințe în designul experienței utilizatorilor bazate pe animații pe căi vectoriale.
Imagini SVG animate cu CSS de Noah Blon (@noahblon) pe CodePen
În ultimul an, emisiuni TV precum Breaking Bad au oferit oa doua experiență de ecran, oferind observatorilor un mod mai profund de a interacționa cu conținutul.
În 2014, deoarece adoptarea de dispozitive mobile continuă să atingă piețe inferioare și creșterea conectivității în ubicuitate, adoptarea celui de-al doilea ecran se va extinde la mai multe emisiuni și mai multe formate. Acest lucru ar putea include chiar și lucruri cum ar fi sincronizarea telefonului cu computerul dvs. în timp ce vizionați un spectacol pe Hulu sau conectarea tabletei la consola de jocuri pentru a oferi informații secundare despre ceea ce vedeți sau faceți pe ecran.
Aceasta este o arie de proiectare foarte diferită de designul conținutului de bază. Designerii vor trebui să ia în considerare și mai mult conceptul de atenție secundară, îndeplinind rolul de "acompaniament" în locul "scenei principale".
"Responsiv" este în mod clar metodologia dominantă în designul web. În ciuda modului în care gestionați nevoia tot mai mare de design-uri și coduri tehnologice-agnostice, utilizatorii continuă să se deplaseze la mai multe dispozitive în mai multe medii. Până în prezent, optimizarea mobilă a fost o întreprindere non-banală; ceea ce face obiectul livrărilor dvs. de cod cât mai mic posibil, construirea de interogări media, realizarea unor framerate înalte, utilizarea cache-ului și multe alte considerente necesită investiții semnificative.
În 2014, multe cadre vor adopta pe deplin metodologia mobilă în primul rând, iar bariera în crearea site-urilor performante pentru orice tehnologie va scădea. Bibliotecile de coduri precum Hammer.js, Zepto.js, Animate.css și mulți alții au condus acuzația. Așa cum am experimentat anterior cu adoptarea în industrie a HTML5, sperăm să vedem și o adoptare la nivel de industrie a celor mai bune practici pentru optimizarea mobilă care să depășească pur și simplu scrierea interogărilor CSS.
Mediu, Svbtle, Editorial, expoziție.so, Ghost și multe alte instrumente și platforme au inaugurat o nouă eră a conținutului web care se concentrează exclusiv pe prezentarea scrisului într-un format extrem de accesibil, fără cârje de design. Această schimbare va continua, influențând dezvoltarea temelor, noile servicii web și "designul colectiv estetic".
Ați putea dori, de asemenea, să verificați gândurile recente ale lui Collis cu privire la tendințele de design web pentru anul următor: Predicții 2014 pentru Web Design.
Gândiți-vă că testele cross-browser sunt pe cale de ieșire? Aveți o idee despre o nouă tendință de creștere? Împărtășește-o în comentarii!
Accentsconagua