20 najtoplijeg trendova koji će oblikovati web dizajn dolaze 2016
Kao što je vrijeme naprijed sa svake godine, mnoge nove trendove dizajna se pojavljuju na horizontu. Područje web dizajna uvijek se mijenja s novim alatima, radnim procesima i najboljim praksama za izradu korisnih izgleda.
Teško je predvidjeti koji će točni trendovi privući najveću pozornost. Ipak, novija povijest pokazuje uzorak trendova koji rastu poput požara. Organizirao sam 20 jedinstvenih trendova koji su stečeni tijekom 2015. i vjerojatno će se nastaviti iu 2016. godini.
1. Skica App za UI dizajn
Skica brzo zamjenjuje Photoshop za sve zadatke dizajna korisničkog sučelja u rasponu od nisko vjerne žičane mreže do makete za vjernost i dizajn ikona.
Skica App je aplikacija za Mac koji je izrađen isključivo za web i mobilne dizajnere. Nudi glatko radno okruženje za izradu vektorskih elemenata za bilo koje sučelje, ali također zadržava mnoge značajke koje biste očekivali od Photoshopa poput tekstualnih efekata i stilova slojeva.
Iako nema dokaza da će Sketch ikada biti izdan za Windows, korisnici OS X-a još uvijek su postali vrijedan izbor. Pojednostavljeni radni proces i jeftinija cijena označavaju da Adobe trči za svojim novcem. Ako Sketch nastavi pružati najbolje iskustvo u dizajnu korisničkog sučelja, sigurno će nastaviti rasti iu 2016. i kasnije.
2. IDE-i bazirani na pregledniku
Desktop IDE-ovi postoje već desetljećima s mogućnostima u rasponu od Notepad ++ do Xcode i Visual Studio. IDE olakšava pisanje koda s prijedlozima i označavanjem sintakse (među ostalim značajkama).
Tradicionalno IDE-ovi su objavljeni kao desktop aplikacije. Tijekom proteklih nekoliko godina vidjeli smo dramatičan porast u oblacima IDE-a baziranih na pregledniku. Za njih nije potreban nikakav drugi softver osim web-preglednika, koji omogućuje razvojnim programerima pisanje koda s bilo kojeg računala s pristupom internetu.
Cloud IDE-ovi funkcioniraju više kao web-aplikacije gdje možete spremiti isječke koda na svoj račun za dijeljenje ili osobnu pohranu. CodePen je jedan od najpopularnijih IDE-a s podrškom za HTML / CSS / JS uz prilagođenu preradu poput Jade / Haml i LESS / SCSS.
Mozilla Thimble je još jedan IDE za početnike koji žele naučiti kako kodiraju. Također Codeply je super za testiranje specifičnih osjetljivih okvira kao što su Bootstrap ili Zurb's Foundation bez potrebe za preuzimanjem datoteka.
3. Besplatno Sass / SCSS Mixins
Preprocesori su već godinama u trendu, ali su tek nedavno postali dovoljno popularni da bi se osjećali sveprisutno u cijelom području web dizajna / razvoja. Danas se čini čudnim pisati vanilin CSS kada Sass / SCSS može pružiti mnogo više.
Jedna od prednosti je rastuća ponuda knjižnica Sass mixin. Jednostavni miksini su kao isječci koda ili osnovne funkcije za generiranje ponovljivog koda u CSS-u. Iako uvijek možete napisati svoje, mnogi programeri su bili dovoljno ljubazni da oslobode besplatne online igre.
Neki mixini dolaze u knjižnicama poput Bourbona, dok drugi mogu biti samostalni predmeti. Pokušajte pretražiti u GitHubu za Sass / SCSS mixine kako biste vidjeli što možete pronaći.
4. Rasporedi kartica
Izgled web stranica kartice je prvi put populariziran od strane Pinterest-a prije nekoliko godina i od tada je postao trend za web-stranice koje su teške za sadržaj. Besplatni dodaci poput jQuery Masonry mogu se koristiti za oponašanje ovog stila izgleda s animiranim karticama za različite visine i širine.
Izgled kartice najbolje se koristi na stranicama s mnogo podataka koji se mogu pregledavati. Odredišna stranica za Google Now koristi izgled karte za oglašavanje dodatnih kartica za aplikaciju Google Now.
Izgled karata možete zamisliti kao dinamičnije rešetke s fokusom na minimiziranje sadržaja na osnovna pitanja kako biste popisali više stavki zajedno. Online časopisi kao što su UGSMAG i The Next Web su savršeni primjeri izgleda kartica koji se koriste za prikaz nedavnog sadržaja posta.
5. Custom Explainer videozapisi
Velike i male tvrtke podjednako su preuzele trend prilagođenih videozapisa za objašnjenje. Oni se često stvaraju s animacijom kao što je primjer Crazy Egg. No drugi se videozapisi oslanjaju na snimke iz stvarnog života kao što je Instagram Direct.
Svrha videozapisa s objašnjenjima je pokazati kako neki proizvod ili usluga funkcionira. Posjetitelji mogu pregledavati popis značajki i još uvijek nemaju pojma o tome kako proizvod radi. Videozapisi razjašnjavaju sve vizualno i pokrivaju važne stvari u samo nekoliko minuta.
Ako se želite okušati u izradi prilagođenog videooglasnika, provjerite ovaj tečaj Udemyja. To je detaljna studija koja se fokusira na videozapise za dizajn odredišne stranice.
6. Pregled proizvoda uživo
Dizajn odredišne stranice doživio je nevjerojatan rast zbog većih internetskih brzina i mogućnosti preglednika. Jedan od glavnih trendova koji sam primijetio je dodavanje pregleda proizvoda uživo na početnim stranicama ili prilagođenim odredišnim stranicama.
Uzmite za primjer Slackovu stranicu proizvoda. Sadrži video obilazak i vektorsku grafiku koja pokriva Slack sučelje. Ovi pregledi proizvoda namijenjeni su potencijalnim korisnicima da vide kako funkcionira proizvod.
Webydo je još jedan sjajan primjer s živom animacijom koja se igra na početnoj stranici. To omogućuje posjetiteljima da vide Webydo u akciji bez potrebe da ručno demonstriraju proizvod. Ali ne morate uvijek računati na animacije za pregled proizvoda. Iconjar koristi jednostavan PNG screenshot kako bi pokazao što je proizvod i kako radi.
7. Automatizirani trkači zadataka
Svijet razvoja frontend-a toliko se promijenio s nekoliko novih najboljih praksi za izradu web-lokacija. Radnici / graditelji sustava kao što su Gulp i Grunt koriste se mnogo češće za niz zadataka koji su prethodno zahtijevali ručni napor.
Automatizacija je ključ brzog zaokreta i ispisivanja koda kvalitete. Strojevi ne griješe, tako da što više možete automatizirati s povjerenjem, manje ćete problema imati (u teoriji).
Da biste saznali više, pogledajte ovaj Reddit post koji objašnjava kako rade trkači zadataka. Ovi alati u osnovi pokreću JS kod koji će automatizirati dijelove vašeg tijeka rada, bilo prilagođene JS ili skripte koje su napisali drugi.
8. Izvorne JS mobilne aplikacije
Ja sam veliki zagovornik korištenja pravih alata za taj posao. U slučaju razvoja mobilnih aplikacija to znači Java za Android, Objective-C / Swift za iOS.
Ali ne žele svi naučiti novi jezik samo za izgradnju mobilne aplikacije. Srećom, izvorne aplikacije se lakše stvaraju i kompiliraju s drugim knjižnicama kao što su NativeScript ili React Native.
Jaz koji postaje programer za mobilne aplikacije skraćuje se s mogućnošću stvaranja mobilnih aplikacija putem JavaScripta. PhoneGap je još jedna mogućnost koja se temelji na HTML / CSS / JS kodu.
Iako se proces izrade uvelike razlikuje, JS brzo postaje rješenje za kodere koji žele izgraditi mobilne aplikacije bez učenja novog jezika.
9. Alati za suradnju za dizajn
Trenutačno slanje poruka i grupni razgovor traju već više od deset godina. Međutim, ti su se resursi tradicionalno oslanjali na otvoreni tekst s određenom sposobnošću dodavanja datoteka.
Novi trend u nastajanju je mogućnost dijeljenja dokumenata za dizajn uživo unutar chat aplikacija. Značajan je primjer gdje se napomene i komentari mogu postaviti na vrh dokumenta. To daje dizajnerima čist način dijeljenja rada izravno sa svima u timu.
Slack je trenutno najpopularnija chat aplikacija koja podržava mnoge slične značajke. Sve veća Slack korisnička baza nepokolebljiva je u stvaranju proširenja koja uvelike poboljšavaju Slackove mogućnosti i povezuju se s drugim proizvodima kao što su Hangouts, MailChimp, pa čak i WordPress.
10. Odgovarajući okviri sučelja
Frontendski okviri poput Bootstrap-a postoje već godinama i nastavljaju se pokazivati korisnima na osobnim i profesionalnim projektima. Prilagodljivi dizajn prisilio se u okvire i stvorio potražnju za kodom frontenda umjesto samo pozadinskog (Django, Laravel, itd.).
Premještanje u 2016. Mislim da ćemo čitati puno više o odgovornim okvirima sučelja i njihovoj vrijednosti u web projektima. Mnogi razvojni timovi željno iščekuju izdanje Foundation 6 i javno v1 izdanje Bootstrap 4.
Ostali manje poznati okviri koje možete provjeriti su Gumby i Pure CSS.
11. Veći fokus na UX dizajnu
Područje dizajna korisničkog doživljaja nastavit će ubrzano rasti s više dizajnera i programera koji će primijetiti. Dizajn korisničkog sučelja dio je UX dizajna, ali nije krajnji cilj. Korisničko sučelje je sredstvo za postizanje cilja, a kraj je fantastično korisničko iskustvo.
Prije samo 5 godina bio sam jedva upoznat s UX-om ili načinom na koji je primijenjen na dizajn sučelja. Sada imamo resurse kao UX Stack Exchange i besplatne UX e-knjige. Ako ne znate mnogo o korisničkom iskustvu, sada je najbolje vrijeme za proučavanje i učenje kako se UX načela mogu primijeniti na sve oblike digitalnih sučelja.
12. Voditelji paketa
Upravitelji digitalnih paketa su tako brzo porasli da su praktično zahtjev za modernim razvojem weba. Rješenja kao što su Bower i NPM mogu uštedjeti puno vremena na pokretanju novih projekata.
Za savladavanje nove tehnologije potrebno je vrijeme i dolazi s krivuljom učenja. Ali ako postoji jedna stvar koju bi svaki frontend (ili backend) programer trebao znati, to je paketni upravitelj. Oni zahtijevaju određena znanja o terminalnim naredbama, ali kada se naviknete na proces, nećete se htjeti vratiti.
13. Napredne animacije korisničkog sučelja
CSS3 prijelazi bili su samo početak dugoročnog trenda animacije na webu. Sada imamo desetke CSS i JavaScript knjižnica posvećenih animaciji. Stvari koje nisam ni sanjao moguće sada su izgrađene i dostupne besplatno ako znate gdje da tražite.
Animacija nije uvjet za dobar dizajn. Ali to može napraviti dobar dizajn u veliki dizajn kada se koristi ispravno.
Pratite animirane trendove za sučelja i pogledajte što možete oduzeti od raznih web-lokacija. Zapamtite da web-animacija nije Disneyev film i treba je tretirati s poštovanjem. Koristite animaciju nježno tako da poboljšava sučelje bez da postane neugodan ili ometajući element dizajna.
14. Dizajneri uče kodirati
Tema vrućeg gumba ove godine je slučaj kod dizajnera koji uče kodirati. Neki dizajneri osjećaju da nije njihov posao da pišu kod, dok drugi smatraju da to postaje norma i da ih treba prihvatiti.
Pročitao sam oštre rasprave i fascinantne postove o ovoj temi, a čini se da samo privlače emocionalne odgovore. Dobar dizajn je samo lijepa slika bez koda. Ipak, usredotočiti se na oboje zahtijeva od dizajnera da manje vremena provodi vježbajući obrt.
Postoji li konačan odgovor? Neki bi tvrdili da se održivost posla povećava za dizajnere koji poznaju programiranje kodiranja. Ali što ako netko ne želi pisati kod? Je li vrijedno učenja samo natjecati se?
Osjećam da je najjasniji odgovor učiniti što god želite. No čini se da je ova tema još uvijek na stolu za mnoge dizajnere koji će vjerojatno nastaviti raspravu u 2016. godini.
15. Besplatni online alati i web-aplikacije
Nekada je bilo da su svi programi pokrenuti s radne površine bez obzira na to što trebate učiniti. Ali danas sam dosljedno zadivljen s koliko webapps su dostupni za besplatno online.
Naći ćete sve, od kodiranja / dekodiranja URL-a do potpuno besplatnog Markdown editora. Čak je i Google disk preuzeo Microsoft Office proizvode u preglednik (opet, potpuno besplatno).
Trenutna razina računalne snage i homogenih standarda iz web-preglednika nude naizgled neograničene mogućnosti. Složeni zadaci kao što je nastavak stvaranja do kompresije slika mogu se obraditi izravno iz prozora preglednika.
16. Rast web-komponenti
Web komponente pokušavaju riješiti probleme složenosti za programere. WebComponents web stranica ima velike resurse i materijale kako bi programerima pokrenuo skok u ovu temu.
Ako niste sigurni kako razumjeti modularne web-komponente, provjerite ovaj post da biste saznali više.
Dok se komponente ne pogoršavaju posebno u mainstream status, o njima raspravljaju profesionalni programeri širom svijeta. Google je izdao Polymer koji je okvir za dodavanje web-komponenti putem JS-a i HTML-a.
To možda još nije praktično koristiti u većim projektima klijenata. Međutim tehnologija je dostupna i uz malo prakse možete svladati koncepte s lakoćom. Da biste saznali više i vidjeli nekoliko uzoraka koda, možete pročitati ovaj post CSS-Tricks na modularnim web-komponentama.
17. Resursi za online učenje
Svi znamo da je sada najjednostavnije vrijeme da naučite bilo koju vještinu iz udobnosti vašeg računala. Čini se da internetsko tržište učenja eksponencijalno raste s novim tečajevima i web-stranicama koje se svake godine pojavljuju.
Osjećam se sigurnije nego ikad prije da ćemo vidjeti porast online učenja. Poznate web-lokacije kao što su Treehouse i CodeSchool nude nevjerojatne tečajeve uz novije web-lokacije kao što su Bitfountain i Learn-Verified.
Ako postoji tema koju želite naučiti, vjerojatno postoji online tečaj - posebno ako želite naučiti digitalne tehnike poput dizajna korisničkog sučelja ili razvoja aplikacije.
18. JavaScript na strani poslužitelja
Iako su prošle opcije za JS na strani poslužitelja, nitko nije prožimao tako brzo kao Node.js. JavaScript-ovi su se zaljubili u ovu biblioteku i gledali su kako izlazi u izravnu konkurenciju drugim pozadinskim jezicima, kao što su Python ili PHP.
Čvor omogućuje programerima izradu web-lokacija pomoću jednog jezika za prednji + backend kôd. A resursi poput Upravitelja paketa čvorova daju još veću vrijednost Node.js.
Iz onoga što mogu reći, Node je još uvijek u usponu i nastavlja se privlačiti od entuzijasta industrije. Bez obzira planirate li učiti Node ili ne, nema sumnje da će i dalje rasti kao glavni trend u 2016. godini.
19. Značajke web-mjesta koja podržavaju dodir
Pametni preglednici uvijek su podržavali značajke dodira za sve web-lokacije kako bi zadržale kompatibilnost unatrag. Nedavno sam primijetio više dodataka i prilagođenih značajki dodanih na web-lokacije s određenim ciljem rukovanja dodirnim događajima.
Dodaci kao što su Photoswipe i Dragend.js izgrađeni su za rukovanje prelaskom i dodirom na zaslonima osjetljivim na dodir. Čini se da web-programeri ne grade samo web-lokacije s preporukama, nego i web-lokacije koje podržavaju dodir.
Ako pretražujete, pronaći ćete neke doista impresivne značajke koje su izgrađene za web i oslanjaju se isključivo na dodirne događaje.
20. Dizajn materijala na webu
Googleovo izdanje dizajna materijala bilo je ogroman uspjeh za Android dizajnere. Dizajn materijala smatra se dizajnerskim jezikom namijenjenim pojednostavljenju procesa izrade korisničkih sučelja za pametne telefone Android.
Vremenom su web dizajneri to shvatili i izgradili cijele web-lokacije na temelju Googleovog novog dizajnerskog jezika. Čini se da je trend oblikovanja materijala pomaknut izvan samo mobilnih aplikacija u svijet web dizajna.
Ljudi koji žele graditi web-mjesta za materijale ne moraju niti izmisliti točak. Besplatne knjižnice kao što su Material UI i Materialize nude prilagođene kodove za strukturiranje novog izgleda na temeljima dizajna materijala.
zatvaranje
Pregledavši ove trendove, trebalo bi biti jasno da vidimo pravi zajednički napor web-zajednice kako bismo olakšali proces izrade web-lokacija. Svi želimo uštedjeti vrijeme u svakodnevnom radu.
Od početka web-a vidjeli smo kako se mnoge tehnologije povećavaju, da bi ih zamijenile bolje alternative. Ovi trendovi u 2016. gurnuli su za ujednačenijim dizajnerskim tehnikama koje će olakšati i znatno manje složene web-lokacije za izgradnju.
