20 najbolj vročih trendov, ki bodo oblikovali spletno oblikovanje prihajajo 2016

Sčasoma z vsakim letom se na obzorju pojavljajo številni novi trendi oblikovanja. Področje spletnega oblikovanja se vedno spreminja z novimi orodji, delovnimi tokovi in ​​najboljšimi praksami za gradnjo uporabnih postavitev.

Težko je napovedati, kateri natančni trendi bodo pritegnili največjo pozornost. Toda nedavna zgodovina kaže vzorec trendov, ki rastejo kot požar. Organiziral sem 20 edinstvenih trendov, ki so se pridobili v letu 2015 in se bodo verjetno nadaljevali tudi v letu 2016.

1. Skica App za UI Design

Skica hitro zamenja Photoshop za vse naloge oblikovanja uporabniškega vmesnika, ki segajo od nizke zvestobe do modeli z visoko natančnostjo in oblikovanjem ikon.

Skica App je aplikacija za Mac, izdelana posebej za spletne in mobilne oblikovalce. Ponuja bolj gladko delovno okolje za izdelavo vektorskih elementov za vsak vmesnik, hkrati pa ohranja številne funkcije, ki jih pričakujete od Photoshopovih besedilnih učinkov in slogovnih slojev..

Čeprav ni nobenih dokazov, da bo program Sketch kdaj izdan za Windows, so uporabniki OS X še vedno postali cenjena izbira. Poenostavljeni delovni tok in cenejša cena daje Adobeju zagon za svoj denar. Če bo Sketch še naprej zagotavljala najboljše izkušnje pri oblikovanju uporabniškega vmesnika, bo zagotovo še naprej rasla tudi v letu 2016 in kasneje.

2. IDE-ji na osnovi brskalnika

Namizni IDE-ji so na voljo že desetletja z možnostmi od Notepad ++ do Xcode in Visual Studio. IDE omogoča lažje pisanje kode s predlogi in poudarjanjem skladenj (med drugimi funkcijami).

Tradicionalno IDE-ji so bili izdani kot namizne aplikacije. V zadnjih nekaj letih smo opazili dramatično povečanje brskalnikov v oblaku IDE. Ti ne zahtevajo nobene programske opreme, razen spletnega brskalnika, ki omogoča izdelovalcem pisanje kode iz katerega koli računalnika z dostopom do interneta.

IDE-ji v oblaku delujejo bolj kot spletne aplikacije, kjer lahko shranite odrezke kode v račun za skupno rabo ali osebno shranjevanje. CodePen je eden izmed najbolj priljubljenih IDE-jev s podporo za HTML / CSS / JS skupaj s predobdelavo po meri, kot je Jade / Haml in LESS / SCSS..

Mozilla Thimble je še en IDE za začetnike, ki se želijo učiti, ko kodirajo. Tudi Codeply je super za testiranje posebnih odzivnih okvirov, kot so Bootstrap ali Zurbova fundacija, ne da bi bilo treba prenesti datoteke.

3. Free Sass / SCSS Mixins

Preprocesorji so že vrsto let trendovski, vendar so šele pred kratkim postali dovolj široki, da se lahko počutijo povsod po vsem področju spletnega oblikovanja / razvoja. Danes se zdi čudno pisati vanilin CSS, ko lahko Sass / SCSS zagotovi veliko več.

Ena od koristi je vse večja ponudba knjižnic Sass mixin. Enostavne mešanice so kot odlomki kode ali osnovne funkcije za ustvarjanje ponovljive kode v CSS-ju. Medtem ko lahko vedno napišete svoje, mnogi razvijalci so bili dovolj prijazni, da sprostijo brezplačne spletne vsebine.

Nekatere mešanice so v knjižnicah, kot je Bourbon, druge pa so samostojne. Poskusite iskati v GitHubu za mešanice Sass / SCSS in si oglejte, kaj lahko najdete.

4. Postavitve kartic

Postavitve kartic za spletna mesta so prvič popularizirale Pinterest nekaj let nazaj in so od takrat postale trend za vsebinsko težke spletne strani. Brezplačne vtičnike, kot je jQuery Masonry, lahko uporabite za posnemanje tega sloga postavitve z animiranimi karticami za različne višine in širine.

Postavitev kartice je najbolje uporabiti na straneh z veliko podatkov, ki jih je treba pregledati. Ciljna stran za Google Now uporablja postavitev kartice za oglaševanje neobveznih kartic za aplikacijo Google Now.

Postavitve kartic si lahko zamislite kot bolj dinamične mreže, s poudarkom na zmanjšanju vsebine na najnujnejše elemente, da bi skupaj našteli več elementov. Spletne revije, kot sta UGSMAG in The Next Web, sta odlična primera postavitev kartic, ki se uporabljajo za predstavitev nedavne vsebine objav.

5. Videoposnetki po meri

Velika in majhna podjetja so se tako lotila trenda videa po meri. Ti so pogosto ustvarjeni z animacijo, kot je primer Crazy Egg. Drugi videoposnetki pa se zanašajo na resnične posnetke, kot je Instagram Direct.

Namen razlagalnega videa je prikazati, kako deluje izdelek ali storitev. Obiskovalci si lahko ogledajo seznam funkcij in še vedno ne vedo, kako izdelek deluje. Videoposnetki vse vizualno pojasnijo in pokrijejo pomembne stvari v samo nekaj minutah.

Če se želite preizkusiti v izdelavi videa po meri, si oglejte tečaj Udemy. Gre za poglobljeno študijo, ki se osredotoča na videoposnetke za oblikovanje ciljne strani.

6. Live Product Previews

Oblikovanje ciljne strani je doživelo neverjetno rast zaradi večjih hitrosti interneta in zmogljivosti brskalnika. Eden glavnih trendov, ki sem jih opazil, je dodajanje predogledov v živo na domačih straneh ali ciljnih ciljnih straneh po meri.

Vzemite na primer stran izdelka Slack. Ima video ogled in vektorsko grafiko, ki pokriva vmesnik Slack. Ti predogledi izdelkov omogočajo potencialnim uporabnikom vpogled v delovanje izdelka.

Webydo je še en sijajen primer z živo animacijo, ki se igra na domači strani. To omogoča obiskovalcem, da vidijo Webydo v akciji, ne da bi morali ročno prikazati izdelek. Za predogled izdelka pa se ne zanašate vedno na animacije. Iconjar uporablja preprost posnetek PNG, da prikaže, kaj je izdelek in kako deluje.

7. Avtomatizirani tekači opravil

Svet razvoja frontendov se je zelo spremenil z nekaj novimi najboljšimi praksami za ustvarjanje spletnih mest. Tekače / gradbene sisteme, kot so Gulp in Grunt, se pogosteje uporabljajo za množico nalog, ki so prej zahtevale ročni napor.

Avtomatizacija je življenjska sila hitrega preobrata in ustvarjanja kode kakovosti. Stroji ne delajo napak, zato lahko bolj avtomatizirate z zaupanjem, manj vprašanj boste imeli (v teoriji).

Če želite izvedeti več, si oglejte Reddit post, ki pojasnjuje, kako delujejo tekači. Ta orodja v osnovi izvajajo kodo JS, ki bo avtomatizirala dele vašega delovnega toka, bodisi po meri JS ali skripte, ki so jih napisali drugi.

8. Native Mobile Apps za JS

Jaz sem velik zagovornik uporabe pravih orodij za delo. V primeru razvoja mobilnih aplikacij to pomeni Java za Android, Objective-C / Swift za iOS.

Vendar se vsi ne želijo naučiti novega jezika samo za izgradnjo mobilne aplikacije. Na srečo je lažje ustvariti domače aplikacije in jih zbrati z drugimi knjižnicami, kot sta NativeScript ali React Native.

Vrzel, da postane programer za mobilne aplikacije, se skrajša z možnostjo ustvarjanja mobilnih aplikacij prek JavaScripta. PhoneGap je še ena možnost, ki temelji na kodi HTML / CSS / JS.

Čeprav se proces ustvarjanja zelo razlikuje, JS hitro postaja rešitev za koderje, ki želijo zgraditi mobilne aplikacije, ne da bi se učili novega jezika..

9. Orodja za sodelovanje pri načrtovanju

Takojšnje sporočanje in skupinski klepet že več kot desetletje. Vendar so se ti viri tradicionalno zanašali na odprto besedilo z določenimi zmožnostmi pripenjanja datotek.

Nov pojav, ki se pojavlja, je možnost deliti žive dokumente v aplikacijah za klepet. Opazen je primer, ko lahko opombe in komentarje postavite na vrh dokumenta. To daje oblikovalcem čist način za delitev dela neposredno z vsemi v skupini.

Slack je trenutno najbolj priljubljena aplikacija za klepet, ki podpira številne podobne funkcije. Naraščajoča uporabniška baza Slack je vztrajala pri ustvarjanju razširitev, ki močno izboljšujejo zmožnosti Slack-a in so povezane z drugimi izdelki, kot so Hangouts, MailChimp in celo WordPress.

10. Odzivne okvire frontendov

Okviri frontendov, kot je Bootstrap, so prisotni že vrsto let in se še vedno izkažejo za uporabne na osebnih in profesionalnih projektih. Odzivna zasnova se je umaknila v okvire in ustvarila povpraševanje po kodi za frontende namesto samo v ozadju (Django, Laravel itd.).

Če se premaknemo v leto 2016, mislim, da bomo prebrali veliko več o odzivnih okvirih frontendov in njihovi vrednosti v spletnih projektih. Mnogi razvijalci nestrpno čakajo na izdajo Foundation 6 in javno izdajo vmesnika Bootstrap 4.

Drugi manj znani okviri, ki jih lahko preverite, vključujejo Gumby in Pure CSS.

11. Večji poudarek na dizajnu UX

Področje oblikovanja uporabniške izkušnje se bo še naprej hitro razvijalo z več oblikovalci in razvijalci. Oblikovanje uporabniškega vmesnika je del oblikovanja UX, vendar ni končni cilj. UI je sredstvo za dosego cilja, konec pa je fantastična uporabniška izkušnja.

Pred petimi leti sem bil komaj seznanjen z UX-om ali kako se je uporabljal pri oblikovanju vmesnikov. Zdaj imamo vire, kot sta UX Exchange in brezplačne e-knjige UX. Če ne veste veliko o uporabniški izkušnji, je zdaj najboljši čas za študij in spoznavanje, kako se lahko načela UX uporabljajo za vse oblike digitalnih vmesnikov.

12. Upravljavci paketov

Upravljavci digitalnih paketov so se tako hitro dvignili, da so praktično pogoj za sodoben spletni razvoj. Rešitve, kot sta Bower in NPM, lahko prihranijo veliko časa pri začetku novih projektov.

Za obvladovanje vsake nove tehnologije bo potreben čas in prihaja do krivulje učenja. Če pa obstaja ena stvar, ki bi jo morala poznati vsak frontend (ali backend) razvijalec, je to paketni upravitelj. Potrebujejo znanje o terminalnih ukazih, vendar ko se navadite na proces, se ne boste nikoli želeli vrniti.

13. Napredne animacije uporabniškega vmesnika

Prehodi CSS3 so bili le začetek dolgoročnega trenda animacije na spletu. Zdaj imamo na voljo desetine CSS in JavaScript knjižnic, namenjenih animaciji. Stvari, ki jih nisem mogel zamisliti, so zdaj zgrajene in na voljo brezplačno, če veste, kje iskati.

Animacija ni pogoj za dobro oblikovanje. Ampak to lahko dober design v veliko zasnovo, če se uporablja pravilno.

Bodite pozorni na animirane trende za vmesnike in si oglejte, kaj lahko vzamete iz različnih spletnih mest. Ne pozabite, da spletna animacija ni Disneyjev film in da jo je treba obravnavati s spoštovanjem. Animacijo uporabljajte nežno, da izboljša vmesnik, ne da bi postal neprijeten ali moteč element oblikovanja.

14. Oblikovalci se naučijo kodeksa

Vroča tema tega leta je bila pri oblikovalcih, ki so se učili kodirati. Nekateri oblikovalci menijo, da ni njihova naloga, da bi napisali kodo, medtem ko drugi menijo, da postaja norma in bi jo bilo treba sprejeti.

Prebral sem vroče razprave in zanimive objave o tej temi, ki se zdi le, da pripravljajo čustvene odzive. Dobra zasnova je le lepa slika brez kode. Vendar se je treba osredotočiti na oboje, zato mora oblikovalec porabiti manj časa za opravljanje obrti.

Torej obstaja dokončen odgovor? Nekateri bi trdili, da se sposobnost preživetja delovnih mest poveča za oblikovalce, ki poznajo kodiranje vmesnika. Kaj pa, če nekdo ne želi pisati kode? Ali je vredno, da se učimo samo tekmovati?

Počutim se, da je najjasnejši odgovor, da narediš kar hočeš. Vendar se zdi, da je ta tema še vedno na mizi za številne oblikovalce, ki bodo verjetno nadaljevali razpravo v letu 2016.

15. Brezplačna spletna orodja in spletne aplikacije

Včasih so bili vsi programi zagnani z namizja, ne glede na to, kaj morate storiti. Danes pa sem vedno zadovoljen s tem, koliko spletnih aplikacij je na voljo brezplačno.

Vse boste našli od kodiranja / dekodiranja URL-jev do popolnoma brezplačnega urejevalnika Markdown. Tudi Google Drive je v brskalnik prenesel izdelke Microsoft Office (spet popolnoma brezplačno).

Trenutna raven računalniške moči in homogenih standardov spletnih brskalnikov ponuja navidezno neomejeno število priložnosti. Kompleksne naloge, kot je nadaljevanje ustvarjanja za stiskanje slik, se lahko obravnavajo neposredno iz okna brskalnika.

16. Rast spletnih komponent

Spletne komponente poskušajo rešiti probleme kompleksnosti za razvijalce. Spletna stran WebComponents ima veliko virov in materialov, da razvijalcem omogoči začetek te teme.

Če niste prepričani, kako razumeti modularne spletne komponente, si oglejte to objavo, če želite izvedeti več.

Medtem ko komponente še niso prerasle v mainstream status, o njih razpravljajo profesionalni razvijalci po vsem svetu. Google je izdal Polymer, ki je okvir za dodajanje spletnih komponent prek JS in HTML.

To morda še ni praktično uporabiti v večjih projektih strank. Vendar pa je tehnologija na voljo in z malo prakse lahko z lahkoto obvladate koncepte. Če želite izvedeti več in si ogledati nekaj vzorcev kode, lahko preberete ta CSS-Tricks post na modularnih spletnih komponentah.

17. Viri za spletno učenje

Vsi vemo, da je zdaj najlažji čas, da se iz udobja računalnika naučite vsakega znanja. Zdi se, da spletna učna tržnica raste eksponentno z novimi tečaji in spletnimi stranmi, ki se pojavljajo vsako leto.

Počutim se bolj samozavestno kot kdajkoli prej, da bomo videli porast spletnega učenja. Znane strani, kot sta Treehouse in CodeSchool, ponujajo neverjetne tečaje poleg novejših spletnih mest, kot sta Bitfountain in Learn-Verified.

Če obstaja tema, ki jo želite izvedeti, je verjetno spletni tečaj - še posebej, če se želite naučiti digitalnih tehnik, kot je oblikovanje uporabniškega vmesnika ali razvoj aplikacije.

18. JavaScript na strani strežnika

Čeprav je bilo že na voljo možnost za JS na strani strežnika, nobeden ni prežel tako hitro kot Node.js. Razvijalci JavaScripta so se zaljubili v to knjižnico in gledali, kako se dviguje v neposredno konkurenco z drugimi jeziki v ozadju, kot sta Python ali PHP.

Vozlišče razvijalcem omogoča izdelavo spletnih strani z enim jezikom za kodo frontend + backend. In viri, kot je Node Package Manager, dajejo Node.js še večjo vrednost.

Glede na to, kar lahko rečem, je Node še vedno v vzponu in se še naprej nagiba navdušence industrije. Ne glede na to, ali se nameravate učiti Node ali ne, ni dvoma, da bomo še naprej rasli kot glavni trend v letu 2016.

19. Funkcije spletne strani s podporo na dotik

Pametni brskalniki so vedno podpirali funkcije na dotik za vse spletne strani, da bi ohranile združljivost nazaj. Še pred kratkim sem opazil več vtičnikov in prilagojenih funkcij, dodanih na spletne strani s posebnim ciljem obvladovanja dogodkov na dotik.

Vtičniki, kot je Photoswipe in Dragend.js, so zgrajeni za rokovanje in dotikanje zaslonov na dotik. Zdi se, da spletni razvijalci ne gradijo le odzivnih spletnih mest, temveč tudi spletne strani, ki omogočajo dotik.

Če iščete okoli, boste našli nekaj resnično impresivnih funkcij, izdelanih za splet, ki se zanašajo izključno na dogodke na dotik.

20. Oblikovanje materialov na spletu

Googlova izdaja materiala je bila izjemno uspešna za oblikovalce Android. Oblikovanje materiala je oblikovalski jezik, namenjen poenostavitvi procesa izdelave uporabniških vmesnikov za pametne telefone Android.

Sčasoma so spletni oblikovalci to vzeli k srcu in zgradili celotna spletna mesta, ki temeljijo na Googlovem novem oblikovalskem jeziku. Zdi se, da je trend oblikovanja materiala presegel le mobilne aplikacije v svet spletnega oblikovanja.

Ljudje, ki želijo zgraditi materialne spletne strani, sploh ne bodo morali ponovno odkrivati ​​kolesa. Proste knjižnice, kot so materialni uporabniški vmesnik in materializirani materiali, ponujajo kode po meri za strukturiranje nove postavitve na vrhu materialne zasnove.

Zapiranje

Če pogledamo čez te trende, bi moralo biti jasno, da si spletna skupnost prizadeva za resnično usklajeno prizadevanje za lažje oblikovanje spletnih strani. Vsi želimo prihraniti čas pri vsakodnevnem delovnem procesu.

Od začetka spleta smo videli, da se številne tehnologije povečujejo, da bi jih nadomestile boljše alternative. Ti trendi v letu 2016 se zavzemajo za enotnejši nabor oblikovalskih tehnik, ki bodo olajšale in manj zapletene spletne strani za gradnjo.