20 kuumimat trendi, mis kujundavad veebidisaini 2016. aastal
Kuna aeg läheb iga aasta võrra edasi, on paljud uued disainisuunad silmapiiril. Veebidisaini valdkond muutub alati uute tööriistade, töövoogude ja kasutatavate paigutuste koostamise parimate tavade abil.
On raske ennustada, millised täpsed suundumused kõige rohkem tähelepanu pööravad. Siiski näitab hiljutine ajalugu suundumusi, mis on kasvanud nagu tulekahju. Ma olen korraldanud 20 ainulaadset suundumust, mis on 2015. aastal saavutanud tõmbe ja tõenäoliselt ka 2016. aastal.
1. Visandage rakendus UI disaini jaoks
Sketch asendab Photoshopi kiiresti kõigi kasutajaliidese disainiülesannete jaoks alates vähese truuduse juhtmed kuni kõrgekvaliteedilised makettid ja ikoonide kujundus.
Sketch App on ainult veebi ja mobiilsete disainerite jaoks mõeldud Mac-rakendus. See pakub sujuvamat töökeskkonda igasuguse liidese käsitöö vektori elementidele, kuid säilitab ka palju funktsioone, mida soovite Photoshopilt oodata, nagu tekstiefektid ja kihtstiilid.
Kuigi pole mingeid tõendeid selle kohta, et Sketch'i kunagi Windowsi jaoks vabastatakse, on OS X kasutajad ikka saanud väärtuslikuks valikuks. Lihtsustatud töövoog ja odavam hinnasild annab Adobeile oma raha. Kui sketch pakub jätkuvalt parimat kasutajaliidese disaini kogemust, jätkub see kindlasti 2016. aastal ja hiljem.
2. Brauseripõhised IDEd
Desktop IDE-d on olnud aastakümneid koos valikutega, mis ulatuvad Notepad ++ -st kuni Xcode-i ja Visual Studio. IDE muudab koodide kirjutamise soovituste ja süntaksi esiletõstmise abil lihtsamaks.
Traditsiooniliselt on IDEd vabastatud töölaua rakendustena. Viimaste aastate jooksul oleme näinud brauseripõhiste pilv IDE-de dramaatilist tõusu. Need ei nõua mingit muud tarkvara peale veebibrauseri, mis võimaldab devidel kirjutada koodi internetiühendusega arvutist.
Cloud IDE-d töötavad rohkem veebirakendustega, kus saate oma kontole kodeerimisskeeme salvestamiseks ja isiklikuks säilitamiseks salvestada. CodePen on üks populaarsemaid IDE-sid, mis toetavad HTML / CSS / JS-i koos kohandatud eeltöötlusega nagu Jade / Haml ja LESS / SCSS.
Mozilla Thimble on järjekordne IDE algajatele arendajatele, kes soovivad õppida, kui nad seda koodivad. Ka Codeply on suurepärane, et testida spetsiifilisi reageerivaid raamistikke nagu Bootstrap või Zurb Foundation, ilma et oleks vaja faile alla laadida.
3. Vaba Sass / SCSS Mixins
Eelprotsessorid on olnud aastate jooksul trendikad, kuid alles hiljuti said need peavooluks, et tunda seda kogu veebi disaini / arendamise valdkonnas. Tänapäeval tundub imelik kirjutada vanilje CSS, kui Sass / SCSS suudab pakkuda palju rohkem.
Üks kasu on Sass mixini raamatukogude kasvav pakkumine. Lihtsad segud on nagu koodilõigud või põhifunktsioonid, et genereerida korduvkoodi CSS-is. Kuigi te saate alati kirjutada oma, on paljud arendajad olnud sõbralikud, et vabalt segada võrgus.
Mõned mixinsid tulevad raamatukogudesse nagu Bourbon, teised aga võivad olla iseseisvad. Proovige teha otsingut GitHubis Sass / SCSS segude jaoks, et näha, mida saate leida.
4. Kaardi paigutus
Veebisaidi kaartide paigutusi populariseeriti Pinterestiga juba mõni aasta tagasi ja on sellest ajast alates kujunenud suundumuseks sisu-raskete veebilehtede jaoks. Tasuta pluginaid, nagu jQuery Masonry, saab kasutada selle kujundusstiili matkimiseks erinevate kõrguste ja laiustega animeeritud kaartidega.
Kaardi paigutust on kõige parem kasutada lehekülgedel, kus on palju andmeid, mis peaksid olema skannitavad. Google Now'i sihtlehel kasutatakse Google Now'i rakenduse valikuliste kaartide reklaamimiseks kaardi paigutust.
Te võite mõelda kaardiplaatidele kui dünaamilisematele võrkudele, mille keskmes on minimaalse sisu vähendamine, et lisada rohkem elemente. Online-ajakirjad nagu UGSMAG ja The Next Web on mõlemad täiuslikud näited kaartide paigutustest, mida kasutatakse viimaste postituste sisu esitlemiseks.
5. Kohandatud Explainer videod
Nii suured kui ka väikesed ettevõtted on võtnud endale kohandatud seletajavideod. Need on sageli loodud animatsiooniga nagu Crazy Egg. Kuid teised videod tuginevad tegelikule filmile nagu Instagram Direct.
Seletajavideo eesmärk on näidata, kuidas toode või teenus toimib. Külastajatel on võimalik funktsioonide loendist loobuda ja endiselt ei tea, kuidas toode töötab. Videod selgitavad kõike visuaalselt ja katavad olulised asjad vaid mõne minutiga.
Kui soovid oma kätt proovida, siis kohandatud video selgitamiseks vaadake seda Udemy kursust. See on põhjalik uuring, mis keskendub sihtlehe kujunduse videodele.
6. Live-toote eelvaated
Sihtlehekülje kujundus on näinud uskumatu kasvu, mis tuleneb interneti kiirusest ja brauseri võimekusest. Üks olulisi suundumusi, mida olen märganud, on veebisaitidel või kohandatud sihtlehtedel elavate toodete eelvaate lisamine.
Võtke näiteks Slacki toote leht. See sisaldab video- ja vektorgraafikat, mis hõlmab Slacki liidest. Need toote eelvaated on mõeldud andma potentsiaalsetele kasutajatele ülevaate toote toimimisest.
Webydo on järjekordne suurepärane näide, kus koduleheküljel mängitakse elavat animatsiooni. See võimaldab külastajatel näha Webydo toimingut ilma toote käsitsi demoveerimata. Kuid te ei pea alati toote eelvaateid toetama. Iconjar kasutab lihtsat PNG-pilti, et näidata, mis toode on ja kuidas see toimib.
7. Automatiseeritud ülesannete jooksjad
Frontendite arendamise maailm on muutunud nii palju, et saidi loomise jaoks on olemas mõned uued parimad tavad. Tööülesandeid / ehitamissüsteeme, nagu Gulp ja Grunt, kasutatakse palju sagedamini ülesannete jaoks, mis nõudsid varem käsi..
Automaatika on kiire ümbermineku ja kvaliteedikoodi kustutamine. Masinad ei tee vigu, nii et mida rohkem saate usaldusväärselt automatiseerida vähem probleeme (teoreetiliselt).
Lisateabe saamiseks vaadake seda Redditi postitust, kus selgitatakse, kuidas ülesannete jooksjad töötavad. Need tööriistad töötavad põhimõtteliselt JS-koodi, mis automatiseerib teie töövoo osi, kas kohandatud JS või teiste poolt kirjutatud skripte..
8. JS mobiilirakendused
Ma olen suur tööriistadele sobivate vahendite kasutamise pooldaja. Mobiilirakenduste arendamise puhul tähendab see Java Androidile, Objective-C / Swift iOS-i jaoks.
Kuid mitte igaüks tahab õppida uut keelt, et luua mobiilirakendus. Õnneks on lihtsam luua kohalike rakenduste loomine ja kompileerimine alternatiivsete raamatukogudega nagu NativeScript või React Native.
Lõheks mobiilirakenduse programmeerijaks on lühendamine võime abil luua mobiilirakendusi JavaScripti kaudu. PhoneGap on veel üks võimalus, mis põhineb HTML / CSS / JS koodil.
Kuigi loomise protsess on väga erinev, muutub JS kiiresti lahenduseks koodritele, kes soovivad mobiilirakendusi ehitada ilma uue keele õppimata.
9. Koostöövahendid disainiks
Kiirsõnumid ja grupivestlus on olnud juba üle kümne aasta. Kuid need ressursid on traditsiooniliselt tuginenud lihttekstile, millel on mõned võimalused failide lisamiseks.
Uus esilekerkiv trend on võime jagada live-disaini dokumente vestlusrakendustes. Tähelepanuväärne on üks näide, kus annotatsioone ja kommentaare saab dokumendi peale panna. See annab disaineritele puhta viisi, kuidas vahetada tööd otse meeskonnaga.
Slack on hetkel kõige populaarsem vestlusrakendus, mis toetab mitmeid sarnaseid funktsioone. Kasvav Slacki kasutajaliides on olnud hoolimatu laienduste loomisel, mis parandavad oluliselt Slacki võimeid ja sidemeid teistesse toodetesse nagu Hangouts, MailChimp ja isegi WordPress.
10. Reageerivad esipaneeliraamid
Frontend raamistikud nagu Bootstrap on olnud juba aastaid ja osutuvad endiselt kasulikuks nii isiklikel kui professionaalsetel projektidel. Vastupidav disain on sundinud oma teed raamistikesse ja loonud nõudluse esipaneeli koodide asemel just backend (Django, Laravel jne).
2016. aastal liikudes arvan, et me loeme palju rohkem tundlikest esipaneeli raamistikest ja nende väärtusest veebiprojektides. Paljud devsid ootavad innukalt Foundation 6 vabastamist ja Bootstrap 4 avalikku v1 vabastamist.
Teised vähem tuntud raamid, mida võite vaadata, on Gumby ja Pure CSS.
11. Suurem keskendumine UX disainile
Kasutajate kogemuste disaini valdkond kasvab jätkuvalt kiiresti, märkides rohkem projekteerijaid ja arendajaid. UI disain on osa UX disainist, kuid see ei ole lõplik eesmärk. UI on vahend lõpuni, mille lõpptulemus on fantastiline kasutaja kogemus.
Vaid 5 aastat tagasi olin UXi tuttav või seda, kuidas seda liidese kujundamisel rakendati. Nüüd on meil selliseid ressursse nagu UX Stack Exchange ja tasuta UX e-raamatud. Kui te ei tea kasutaja kogemusest palju, on nüüd parim aeg uurida ja õppida, kuidas UX põhimõtteid saab rakendada kõigi digitaalsete liideste vormide jaoks.
12. Pakettide haldajad
Digitaalsete pakettide haldajad on tõusnud nii kiiresti, et nad on praktiliselt nõue kaasaegse veebiarenduse järele. Sellised lahendused nagu Bower ja NPM võivad säästa palju uusi projekte.
Uute tehnoloogiate omandamine võtab aega ja sisaldab õpikõverat. Aga kui on üks asi, mida iga frontend (või backend) arendaja peaks teadma, on see pakettide haldur. Nad nõuavad mõningaid teadmisi terminali käskudest, kuid kui oled sellega harjunud, ei taha te kunagi tagasi minna.
13. Täpsem kasutajaliidese animatsioon
CSS3 üleminekud olid alles alguses animatsiooni pikaajaline trend veebis. Nüüd on meil animatsioone pühendatud kümneid CSS- ja JavaScript-raamatukogusid. Asjad, mida ma kunagi ei unistanud, on nüüd ehitatud ja saadaval tasuta, kui tead, kust otsida.
Animatsioon ei ole hea disaini nõue. Aga see võib olla hea disaini korralikuks disainiks.
Jälgige liideste animeeritud trende ja vaadake, mida saate erinevatelt veebisaitidelt ära võtta. Pea meeles, et veebi animatsioon ei ole Disney film ja seda tuleb austada. Kasutage animatsiooni õrnalt, et see suurendaks liideseid, ilma et see muutuks disaini häirivaks või häirivaks elemendiks.
14. Kujundajad, kes õpivad kodeerima
Kuuma nupu teema on sel aastal olnud nii disainerite jaoks, kes õpivad koodi. Mõned disainerid tunnevad, et koodide kirjutamine ei ole nende ülesanne, samas kui teised tunnevad, et see muutub normiks ja peaks olema omaks võetud.
Olen lugenud selle teema kohta kuumaid arutelusid ja põnevaid postitusi, mis tunduvad ainult emotsionaalset vastust. Hea disain on lihtsalt ilus pilt ilma koodita. Kuid mõlemale keskendumiseks peab disainer kulutama vähem aega veesõidukite harjutamiseks.
Kas on olemas lõplik vastus? Mõned väidavad, et tööelu elujõulisus suureneb disainerite puhul, kes teavad frontendi kodeerimist. Aga mis siis, kui keegi ei taha koodi kirjutada? Kas tasub õppida ainult konkureerima?
Ma tunnen, et kõige selgem vastus on teha mida iganes sa tahad. Kuid tundub, et see teema on ikka veel paljude disainerite jaoks laual, kes tõenäoliselt jätkavad arutelu 2016. aastal.
15. Tasuta online-tööriistad ja veebipõhised rakendused
Varem oli see, et kõik programmid käivitati töölaual, olenemata sellest, mida te vajate. Aga tänapäeval olen üllatunud, kui palju veebipõhiseid veebisaite on tasuta saadaval.
Leiad kõike URL-i kodeeringust / dekodeerimisest täiesti tasuta Markdowni redaktorisse. Isegi Google Drive on võtnud brauserisse Microsoft Office'i tooted (jällegi täiesti tasuta).
Arvutivõimsuse ja veebibrauserite homogeensete standardite praegune tase pakuvad näiliselt piiramatud võimalused. Keerukaid ülesandeid, nagu loomise jätkamine pildi tihendamiseks, saab käsitseda otse brauseri aknast.
16. Veebikomponentide kasv
Veebikomponendid püüavad lahendada arendajate keerukuse probleeme. WebComponents'i veebisaidil on suured ressursid ja materjalid, mis annavad arendajatele selle teema hüpata.
Kui te pole kindel, kuidas mõista moodulseid veebikomponente, siis vaadake seda postitust rohkem teada.
Ehkki komponendid ei ole eriti tavapärasesse seisundisse puhutud, arutavad neid professionaalsed arendajad üle maailma. Google on välja andnud Polymeri, mis on raamistik, mida kasutatakse veebikomponentide lisamiseks JS ja HTML kaudu.
See ei pruugi olla veel praktikas suuremates kliendiprojektides kasutada. Siiski on tehnoloogia olemas ja vähe praktikat kasutades saab neid mõisteid kergesti hallata. Lisateabe saamiseks ja mõnede koodinäidiste nägemiseks saate lugeda läbi selle CSS-trikke postituse modulaarsetes veebikomponentides.
17. Online-õppevahendid
Me kõik teame, et nüüd on kõige lihtsam aeg oma arvuti mugavusest õppida. Tundub, et online-õppe turg kasvab eksponentsiaalselt uute kursuste ja veebisaitide avamisega igal aastal.
Ma tunnen ennast rohkem kui kunagi varem, et näeme online-õppe tõusu. Tuntud saidid nagu Treehouse ja CodeSchool pakuvad uskumatuid kursusi koos uuemate saitidega nagu Bitfountain ja Learn-Verified.
Kui on teema, mida soovite õppida, on tõenäoline, et kursus on online - eriti kui soovite õppida digitaaltehnoloogiaid, nagu kasutajaliidese disain või rakenduste arendamine.
18. Serveripoolne JavaScript
Kuigi serveripoolse JS-i jaoks on tehtud varasemaid valikuid, ei ole ükski neist läbinud nii kiiresti kui Node.js. JavaScripti devs on sellesse raamatukogusse armunud ja jälginud, et see muutuks otseseks konkurentsiks teiste taustaprogrammide keeltega nagu Python või PHP.
Sõlm võimaldab arendajatel luua veebilehti, mis kasutavad nii frontend + backend-koodi jaoks ühte keelt. Ja ressursid, nagu Node Package Manager, annavad Node.jsile veelgi suurema väärtuse.
Sellest, mida võin öelda, on Node endiselt tõusuteel ja jätkab tööstusharu harrastajatelt tõmbejõudu. Kas kavatsete õppida Node'i või mitte, pole kahtlust, et see kasvab 2016. aastal peamise trendina.
19. Touch-toega veebisaidi funktsioonid
Nutitelefoni brauserid on alati toetanud kõigi veebisaitide puudutavaid funktsioone, et säilitada ühilduvus. Hiljuti olen märganud rohkem pluginaid ja kohandatud funktsioone, mis on lisatud veebisaitidele, mille konkreetne eesmärk on puudutada sündmusi.
Pluginad, nagu Photoswipe ja Dragend.js, on ehitatud puutetundliku ekraani kuvamiseks ja koputamiseks. Tundub, et veebiarendajad ei ehita ainult vastavaid veebisaite, vaid ka puudutavaid veebisaite.
Kui otsite ringi, leiad veebilehe jaoks tõeliselt muljetavaldavad funktsioonid, mis tuginevad ainult puudutavatele sündmustele.
20. Materiaalne disain veebis
Google'i disainilahenduste vabastamine oli tohutu edu Androidi disaineritele. Materjali disain on disainikeel, mille eesmärk on lihtsustada Android-nutitelefonide kasutajaliideste käsitlemist.
Aja jooksul on veebidisainerid võtnud selle südamesse ja ehitanud Google'i uue disainikeele põhjal terve veebisaidi. Tundub, et materjali kujundamise suundumus on muutunud üle mobiilirakenduste veebidisaini maailma.
Inimesed, kes soovivad luua materiaalset veebisaiti, ei pea isegi ratast leiutama. Vaba raamatukogud, nagu materjali kasutajaliides ja materialiseerimine, pakuvad kohandatud koode uue kujunduse struktureerimiseks materjali kujundamise sihtasutuse peale.
Sulgemine
Nende suundumuste üle vaadates peaks olema selge, et me näeme veebikogukonnalt tõelist kooskõlastatud jõupingutust, et muuta veebisaitide loomise protsess lihtsamaks. Me kõik tahame säästa aega meie igapäevases tööprotsessis.
Alates veebi loomisest oleme näinud paljusid tehnoloogiaid, vaid need tuleb asendada paremate alternatiividega. Need 2016. aasta suundumused nõuavad ühtsemat disainitehnikat, mis muudab veebisaitide ehitamise lihtsamaks ja vähem keerukaks.
