20 karstākās tendences, kas radīs Web dizaina noformējumu 2016. gadā

Laikā, kad katru gadu turpinās laiks collas, daudzas jaunas dizaina tendences ir redzamas uz horizonta. Web dizaina joma vienmēr mainās, izmantojot jaunus rīkus, darbplūsmas un labāko praksi izmantojamu izkārtojumu veidošanai.

Ir grūti paredzēt, kādas precīzas tendences pievērsīs vislielāko uzmanību. Tomēr nesenā vēsture liecina par tendencēm, kas ir pieaugušas līdzīgi ugunsgrēkiem. Esmu organizējis 20 unikālas tendences, kas ir ieguvušas vilcienu 2015. gadā un, iespējams, turpināsies arī 2016. gadā.

1. Ieskicēt lietotni UI dizainam

Skice ātri aizstāj Photoshop ar visiem UI dizaina uzdevumiem, sākot no zemas precizitātes wireframes uz augstas precizitātes maketi un ikonu dizains.

Sketch App ir tikai Mac lietojumprogramma, kas īpaši izstrādāta tīmekļa un mobilajiem dizaineriem. Tā piedāvā vienmērīgāku darba vidi amatniecības vektora elementiem jebkuram interfeisam, tomēr tā arī saglabā daudzas funkcijas, kuras jūs sagaidāt no Photoshop, piemēram, teksta efekti un slāņu stili.

Lai gan nav pierādījumu, ka skice kādreiz tiks izlaista Windows sistēmai, OS X lietotāji to joprojām ir novērtējuši. Vienkāršotā darbplūsma un lētāka cenu zīme piešķir Adobe par savu naudu. Ja skice turpina nodrošināt labāko UI dizaina pieredzi, tad tā noteikti turpinās augt arī 2016. gadā un vēlāk.

2. Uz pārlūkprogrammu balstīti IDE

Darbvirsmas IDE ir jau vairākus gadu desmitus ar iespējām, sākot no Notepad ++ līdz Xcode un Visual Studio. IDE ļauj vieglāk rakstīt kodu ar ieteikumiem un sintakses izcelšanu (cita starpā).

Taču tradicionāli IDE ir izlaistas kā darbvirsmas lietojumprogrammas. Pēdējo gadu laikā mēs esam redzējuši dramatisku pārlūkprogrammu IDE pieaugumu. Tām nav nepieciešama cita programmatūra, kas nav tīmekļa pārlūkprogramma, kas ļauj deviem rakstīt kodu no jebkura datora ar piekļuvi internetam.

Mākoņa IDE darbojas vairāk kā tīmekļa lietojumprogrammas, kur varat kopēt vai personiskai uzglabāšanai savam kontam saglabāt koda fragmentus. CodePen ir viens no populārākajiem IDE ar atbalstu HTML / CSS / JS kopā ar pasūtījuma priekšapstrādi, piemēram, Jade / Haml un LESS / SCSS.

Mozilla Thimble ir vēl viens IDE, lai sāktu izstrādātājus, kuri vēlas iemācīties, kad tie kodē. Arī Codeply ir lielisks, lai pārbaudītu konkrētas atsaucīgas sistēmas, piemēram, Bootstrap vai Zurb's Foundation, neprasot lejupielādēt failus.

3. Bezmaksas Sass / SCSS Mixins

Priekšprocesori ir bijuši moderni jau daudzus gadus, taču tikai nesen tie kļuva par visaptverošiem, lai justos visuresošos visā tīmekļa dizaina / izstrādes jomā. Mūsdienās šķiet dīvaini rakstīt vaniļas CSS, kad Sass / SCSS var sniegt daudz vairāk.

Viens no ieguvumiem ir Sass mixin bibliotēku pieaugošais piedāvājums. Vienkārši maisījumi ir līdzīgi koda fragmentiem vai pamatfunkcijām, lai ģenerētu atkārtotu kodu CSS. Lai gan jūs vienmēr varat rakstīt savu, daudzi izstrādātāji ir bijuši laipni, lai tiešsaistē atbrīvotu bezmaksas maisījumus.

Daži maisījumi ir tādās bibliotēkās kā Bourbon, bet citi var būt savrupi. Mēģiniet veikt meklēšanu GitHub for Sass / SCSS mixins, lai redzētu, ko varat atrast.

4. Kartes izkārtojumi

Vietnes karšu izkārtojumus Pinterest pirmo reizi popularizēja dažus gadus atpakaļ un kopš tā laika ir kļuvušas par tendencēm satura satura smagām tīmekļa lapām. Bezmaksas spraudņi, piemēram, jQuery Masonry, var izmantot, lai imitētu šo izkārtojumu stilu ar animētām kartēm dažādiem augstumiem un platumiem.

Kartes izkārtojumu vislabāk izmantot lapās, kurās ir daudz datu, kas būtu jāpārbauda. Google tagadnes galvenajā lapā tiek izmantots kartes izkārtojums, lai reklamētu papildu kartes Google tagadnei.

Kartes izkārtojumus var uzskatīt par dinamiskākiem tīkliem, kas vērsti uz satura minimizēšanu līdz svarīgākajiem elementiem, lai kopā uzskaitītu vairāk vienumu. Tiešsaistes žurnāli, piemēram, UGSMAG un nākamais tīmeklis, ir gan perfekti piemēroti karšu izkārtojumiem, ko izmanto, lai parādītu jaunāko ziņu saturu.

5. Custom Explainer Videos

Gan lielie, gan mazie uzņēmumi ir izvēlējušies pielāgotus paskaidrojošus videoklipus. Tie bieži tiek radīti ar animāciju, piemēram, Crazy Egg piemēru. Bet citi videoklipi balstās uz reālām filmām, piemēram, Instagram Direct.

Skaidrojošā video mērķis ir parādīt, kā darbojas produkts vai pakalpojums. Apmeklētāji var izsmelt īpatnību sarakstu un joprojām nav ne jausmas, kā produkts darbojas. Video izskaidro visu vizuāli un aptver svarīgās lietas tikai dažu minūšu laikā.

Ja vēlaties izmēģināt savu roku, veicot pielāgotus paskaidrojošus videoklipus, pārbaudiet šo Udemy kursu. Tas ir padziļināts pētījums, kurā galvenā uzmanība pievērsta videoklipiem, kas paredzēti izvietošanas lapas dizainam.

6. Live produktu priekšskatījumi

Galvenās lapas dizains ir parādījis neticamu izaugsmi, kas izriet no lielākiem interneta ātrumiem un pārlūka iespējām. Viena no lielākajām tendencēm, ko esmu ievērojis, ir tiešraides produktu priekšskatījumu pievienošana mājas lapās vai pielāgotās galamērķa lapās.

Veikt, piemēram, Slack produktu lapu. Tajā ir video tūre un vektorgrafika, kas aptver Slack interfeisu. Šie produktu priekšskatījumi ir paredzēti, lai potenciālajiem lietotājiem sniegtu ieskatu, kā produkts darbojas.

Webydo ir vēl viens izcils piemērs ar dzīvu animāciju, kas spēlē mājas lapā. Tas ļauj apmeklētājiem redzēt Webydo darbībā bez nepieciešamības manuāli demonstrēt produktu. Bet jums ne vienmēr ir jāpaļaujas uz produkta priekšskatījumu animācijām. Iconjar izmanto vienkāršu PNG ekrānuzņēmumu, lai parādītu, kas ir produkts un kā tas darbojas.

7. Automatizētie uzdevumu izpildītāji

Frontendu attīstības pasaule ir tik daudz mainījusies, ka ir izveidojusies jauna labākā prakse tīmekļa vietņu izveidei. Uzdevumu skrējēji / būvniecības sistēmas, piemēram, Gulp un Grunt, tiek izmantotas daudz biežāk, veicot uzdevumus, kas iepriekš prasīja manuālu piepūli.

Automatizācija ir ātra apgrozījuma un kvalitātes koda izplūde. Mašīnas nedara kļūdas, tāpēc jo vairāk jūs varat automatizēt ar pārliecību, ka mazāk problēmu jums būs (teorētiski).

Lai uzzinātu vairāk, skatiet šo Reddit ziņu, paskaidrojot, kā darbojas uzdevumu skrējēji. Šie rīki pamatā darbina JS kodu, kas automatizēs jūsu darbplūsmas daļas - vai nu pielāgotu JS, vai citu rakstīto skriptu.

8. Native JS Mobile Apps

Es esmu liels aizstāvis, lai izmantotu pareizos instrumentus darbam. Mobilo lietotņu izstrādes gadījumā tas nozīmē Java for Android, Objective-C / Swift iOS.

Bet ne visi vēlas apgūt jaunu valodu, lai izveidotu mobilo lietotni. Par laimi tas, ka vietējām lietotnēm ir vieglāk izveidot un apkopot ar alternatīvām bibliotēkām, piemēram, NativeScript vai Reaģēt native.

Plaisa, lai kļūtu par mobilās lietotnes programmētāju, ir saīsināta ar iespēju izveidot mobilās lietotnes, izmantojot JavaScript. PhoneGap ir vēl viena iespēja, pamatojoties uz HTML / CSS / JS kodu.

Kaut arī radīšanas process ir ļoti atšķirīgs, JS ātri kļūst par risinājumu kodētājiem, kuri vēlas veidot mobilās lietotnes bez jaunas valodas apguves.

9. Dizaina sadarbības rīki

Tērzēšana un grupas tērzēšana jau vairāk nekā desmit gadus. Tomēr šie resursi tradicionāli balstās uz vienkāršu tekstu ar zināmām iespējām pievienot failus.

Jauna tendence ir spēja dalīties tiešraides dizaina dokumentos tērzēšanas lietojumprogrammās. Ievērojams ir viens piemērs, kur anotācijas un komentārus var slāņot pa labi dokumenta augšpusē. Tas dod dizaineriem tīru veidu, kā dalīties darbā tieši ar visiem komandā.

Slack ir šobrīd populārākā tērzēšanas programma, kas atbalsta daudzas līdzīgas funkcijas. Pieaugošā Slack lietotāju bāze ir apņēmusies veidot paplašinājumus, kas ievērojami uzlabo Slack spējas un saikni ar citiem produktiem, piemēram, Hangouts, MailChimp un pat WordPress.

10. Reaģējošie priekšējie ietvari

Frontendu ietvari, piemēram, Bootstrap, ir bijuši aptuveni gadus ilgi un joprojām ir noderīgi gan personīgiem, gan profesionāliem projektiem. Reaģējošs dizains ir spiests iekļūt ietvaros un radījis pieprasījumu pēc frontenda koda, nevis tikai backend (Django, Laravel uc)..

Pārceļoties uz 2016.gadu, es domāju, ka mēs lasīsim daudz vairāk par atsaucīgām frontendu sistēmām un to vērtību tīmekļa projektos. Daudzi devs ar nepacietību gaida fonda 6 atbrīvošanu un Bootstrap 4 publisko v1 versiju.

Citas mazāk pazīstamas sistēmas, kuras jūs varētu pārbaudīt, ir Gumby un Pure CSS.

11. Lielāks fokuss uz UX dizainu

Lietotāju pieredzes dizaina joma turpinās strauji augt ar vairākiem dizaineriem un izstrādātājiem. UI dizains ir daļa no UX dizaina, taču tas nav galīgais mērķis. UI ir līdzeklis, lai beigtu, un gala rezultāts ir fantastiska lietotāja pieredze.

Tikai pirms 5 gadiem es tik tikko pazīstu UX vai to, kā tas attiecās uz interfeisa dizainu. Tagad mums ir resursi, piemēram, UX Stack Exchange un bezmaksas UX ebooks. Ja jūs nezināt daudz par lietotāja pieredzi, tad tagad ir labākais laiks, lai izpētītu un uzzinātu, kā UX principus var piemērot visiem digitālo saskarņu veidiem.

12. Iepakojuma vadītāji

Digitālo pakotņu pārvaldnieki ir tik strauji palielinājušies, ka viņi praktiski ir prasība modernai tīmekļa attīstībai. Tādi risinājumi kā Bower un NPM var ietaupīt daudz laika, uzsākot jaunus projektus.

Jebkuras jaunas tehnoloģijas apguve prasīs laiku un nāk ar mācīšanās līkni. Bet, ja ir viena lieta, ka katram priekšgala (vai backend) izstrādātājam būtu jāzina, tas ir paketes pārvaldnieks. Viņiem ir nepieciešamas zināšanas par termināļa komandām, bet, kad esat pieradis pie procesa, jūs nekad nevēlaties atgriezties.

13. Uzlabotas lietotāja interfeisa animācijas

CSS3 pārejas bija tikai sākums ilglaicīgai animācijas tendencei tīmeklī. Tagad mums ir desmitiem CSS un JavaScript bibliotēku, kas veltītas animācijai. Lietas, kuras es nekad nebiju sapņojis, tagad ir pieejamas un pieejamas bez maksas, ja zināt, kur meklēt.

Animācija nav laba dizaina prasība. Bet tas var padarīt labu dizainu par lielisku dizainu, ja to lieto pareizi.

Sekojiet saskarņu animētajām tendencēm un skatiet, ko varat atņemt no dažādām vietnēm. Atcerieties, ka tīmekļa animācija nav Disney filma, un tā ir jāārstē ar cieņu. Izmantojiet animāciju viegli, lai tas uzlabotu interfeisu, nekļūstot par traucējošu vai traucējošu elementu dizainam.

14. Dizaineri, kas mācās kodēt

Karstā pogas tēma šogad ir bijusi tā, ka dizaineri mācās kodēt. Daži dizaineri uzskata, ka viņu uzdevums nav rakstīt kodu, bet citi uzskata, ka tas kļūst par normu, un tas būtu jāpieņem.

Esmu lasījis apsildāmas diskusijas un aizraujošas ziņas par šo tēmu, kas, šķiet, tikai rada emocionālas atbildes. Labs dizains ir tikai skaists attēls bez koda. Tomēr, lai koncentrētos uz abiem, ir nepieciešams, lai dizainers pavadītu mazāk laika praktizē kuģi.

Vai ir galīga atbilde? Daži apgalvo, ka darba dzīvotspēja palielinās dizaineriem, kuri zina frontend kodēšanu. Bet ko tad, ja kāds nevēlas rakstīt kodu? Vai ir vērts mācīties tikai konkurēt?

Es uzskatu, ka skaidrākā atbilde ir darīt visu, ko vēlaties. Bet šķiet, ka šis temats joprojām ir pieejams daudziem dizaineriem, kuri, iespējams, turpinās diskusiju 2016. gadā.

15. Bezmaksas tiešsaistes rīki un tīmekļa vietnes

Tas bija agrāk, ka visas programmas tika palaistas no darbvirsmas neatkarīgi no tā, ko jums vajadzēja darīt. Bet mūsdienās es esmu nepārprotami pārsteigts par to, cik daudz tīmekļa pārraides ir pieejamas bez maksas tiešsaistē.

Jūs atradīsiet visu, sākot no URL kodēšanas / dekodēšanas līdz pilnīgi bezmaksas Markdown redaktoram. Pat Google disks pārlūkprogrammā ir lietojis Microsoft Office produktus (atkal, pilnīgi bez maksas).

Pašreizējais skaitļošanas jaudas un tīmekļa pārlūkprogrammu standartu līmenis piedāvā šķietami neierobežotu iespēju apjomu. Sarežģītus uzdevumus, piemēram, atsākt radīšanu līdz attēla saspiešanai, var apstrādāt tieši no pārlūka loga.

16. Web komponentu pieaugums

Web komponenti cenšas atrisināt sarežģītības problēmas izstrādātājiem. WebComponents tīmekļa vietnei ir lieliski resursi un materiāli, kas sniedz izstrādātājiem iespēju sākt šo tēmu.

Ja neesat pārliecināts, kā saprast moduļu tīmekļa komponentus, tad pārbaudiet šo ziņu, lai uzzinātu vairāk.

Kaut arī komponenti nav īpaši uzspridzināti līdz galvenajam statusam, tos apspriež profesionāli izstrādātāji visā pasaulē. Google ir izlaidusi Polymer, kas ir sistēma, ko izmanto, lai pievienotu tīmekļa komponentus, izmantojot JS un HTML.

Tas var nebūt praktiski izmantot lielos klientu projektos. Tomēr tehnoloģija ir pieejama, un ar nelielu praksi jūs varat viegli apgūt koncepcijas. Lai uzzinātu vairāk un redzētu dažus koda paraugus, varat izlasīt šo CSS-Tricks ziņu modulārajos tīmekļa komponentos.

17. Tiešsaistes mācību resursi

Mēs visi zinām, ka tagad ir vieglākais laiks, lai uzzinātu jebkuru prasmi no sava datora komforta. Šķiet, ka tiešsaistes mācību tirgus aug eksponenciāli ar jauniem kursiem un tīmekļa vietnēm, kas katru gadu tiek atvērtas.

Es jūtos pārliecinātāk nekā jebkad agrāk, ka mēs redzēsim tiešsaistes apmācību pieaugumu. Labi pazīstamas vietas, piemēram, Treehouse un CodeSchool, piedāvā neticamus kursus līdzās jaunākajām vietnēm, piemēram, Bitfountain un Learn-Verified.

Ja ir kāds priekšmets, kuru vēlaties uzzināt, iespējams, ka būs pieejams kurss tiešsaistē, it īpaši, ja vēlaties uzzināt digitālās tehnoloģijas, piemēram, lietotāja interfeisa dizainu vai lietotņu izstrādi.

18. Servera puses JavaScript

Lai gan servera pusē ir bijušas JS iespējas, neviena no tām nav tik ātri nokļuvusi kā Node.js. JavaScript devs ir iemīlējies šajā bibliotēkā un noskatījos, kā tas kļūst par tiešu konkurenci ar citām backend valodām, piemēram, Python vai PHP.

Mezgls ļauj izstrādātājiem veidot tīmekļa vietnes, izmantojot vienu valodu gan frontend + backend kodam. Un resursi, piemēram, mezgla pakotnes pārvaldnieks, dod vēl lielāku vērtību Node.js.

No tā, ko es varu pateikt, mezgls joprojām ir uz augšu un turpina iegūt vilcienu no nozares entuziastiem. Vai jūs plānojat apgūt mezglu vai nē, nav šaubu, ka tā turpinās augt kā nozīmīga tendence 2016. gadā.

19. Pieskārienu atbalstītas vietnes funkcijas

Viedtālruņu pārlūkprogrammas vienmēr ir atbalstījušas pieskāriena funkcijas visām tīmekļa vietnēm, lai saglabātu atgriezenisko savietojamību. Tomēr nesen esmu ievērojis vairākus spraudņus un pielāgotas funkcijas, kas pievienotas tīmekļa vietnēm ar konkrētu mērķi, kā rīkoties ar skārieniem.

Spraudņi, piemēram, Photoswipe un Dragend.js, ir veidoti tā, lai tos varētu apstrādāt ar skārienekrānu un pieskaroties skārienekrāna displejiem. Šķiet, ka tīmekļa izstrādātāji ne tikai veido atsaucīgas tīmekļa vietnes, bet arī pieskārienu iespējotas tīmekļa vietnes.

Ja meklējat apkārt, jūs atradīsiet dažas iespaidīgas tīmekļa vietnes funkcijas, kas balstās tikai uz pieskārienu notikumiem.

20. Materiālu dizains tīmeklī

Google dizaina materiālu izlaišana bija milzīgs panākums Android dizaineriem. Materiālu dizains tiek uzskatīts par dizaina valodu, kas paredzēta, lai vienkāršotu Android saskarņu lietotāja interfeisu izstrādi.

Laika gaitā tīmekļa dizaineri ir pieņēmuši šo sirdi un izveidojuši visas tīmekļa vietnes, pamatojoties uz Google jauno dizaina valodu. Šķiet, ka materiāla dizaina tendence ir pārsniegusi tikai mobilās lietotnes tīmekļa dizaina pasaulē.

Cilvēkiem, kuri vēlas veidot materiālās tīmekļa vietnes, nav pat jāizgudro ritenis. Bezmaksas bibliotēkas, piemēram, Materiālu lietotāja interfeiss un Materializēt, piedāvā pielāgotus kodus, lai strukturētu jaunu izkārtojumu materiāla dizaina pamatu virsū.

Slēgšana

Aplūkojot šīs tendences, ir skaidrs, ka mēs redzam reālu saskaņotu darbu no tīmekļa kopienas, lai atvieglotu tīmekļa vietņu veidošanas procesu. Mēs visi vēlamies ietaupīt laiku mūsu ikdienas darbplūsmā.

Kopš mājas lapas izveides mēs esam redzējuši daudzas tehnoloģijas, un tās ir jāaizstāj tikai ar labākām alternatīvām. Šīs 2016. gada tendences veicina vienveidīgāku dizaina metožu kopumu, kas padarīs ēku mājas lapas vieglākas un daudz mazāk sarežģītas.