20 kuuminta trendiä, jotka muodostavat Web Designin tulevat 2016
Kun aika kuluu vuosittain eteenpäin, monet uudet suunnittelusuunnat ovat horisontissa. Verkkosuunnittelun ala muuttuu aina uusien työkalujen, työnkulkujen ja parhaiden käytäntöjen avulla käytettävien asettelujen rakentamisessa.
On vaikea ennustaa, mitkä tarkat suuntaukset kiinnittävät eniten huomiota. Viimeaikainen historia osoittaa kuitenkin suuntauksia, jotka ovat kasvaneet kuin tulipalot. Olen järjestänyt 20 ainutlaatuista trendiä, jotka ovat saaneet vetovoiman vuoden 2015 aikana, ja todennäköisesti jatkuvat hyvin myös vuonna 2016.
1. Piirrä sovellus UI-suunnitteluun
Sketch korvaa nopeasti Photoshopin kaikkiin UI-suunnittelutöihin, jotka vaihtelevat matalat uskollisuudet että erittäin uskolliset mockups & icon design.
Sketch App on Mac-sovellus, joka on tehty erityisesti web- ja mobiilisuunnittelijoille. Se tarjoaa tasaisemman työympäristön käsityö vektorielementeille mihin tahansa rajapintaan, mutta se säilyttää myös monia ominaisuuksia, joita voit odottaa Photoshopin kaltaisilta tekstitehosteilta ja kerrostyyliltä.
Vaikka ei ole mitään näyttöä siitä, että Sketch on koskaan julkaistu Windowsille, OS X -käyttäjät ovat yhä arvostaneet sitä. Yksinkertaistettu työnkulku ja halvempi hintalappu antaa Adobelle rahan. Jos Sketch tarjoaa edelleen parhaan käyttöliittymän suunnittelukokemuksen, se tulee varmasti jatkamaan kasvua myös vuonna 2016 ja sen jälkeen.
2. Selainpohjaiset IDE: t
Työpöydän IDE: t ovat olleet noin vuosikymmeniä, ja niiden vaihtoehdot ovat Notepad ++ - Xcode ja Visual Studio. IDE helpottaa koodin kirjoittamista ehdotuksilla ja syntaksin korostuksella (muiden ominaisuuksien joukossa).
Perinteisesti IDE: t on julkaistu työpöytäsovelluksina. Viime vuosina olemme nähneet dramaattisen kasvun selainpohjaisten pilvipalveluiden IDE-järjestelmissä. Nämä eivät vaadi mitään muuta ohjelmistoa kuin web-selain, jonka avulla devs voi kirjoittaa koodin mistä tahansa tietokoneesta, jossa on Internet-yhteys.
Cloud IDE: t toimivat enemmän kuin web-sovellukset, joissa voit tallentaa koodinpätkät tilillesi jakamista tai tallennusta varten. CodePen on yksi suosituimmista IDE: istä, jotka tukevat HTML / CSS / JS: ää yhdessä mukautetun esikäsittelyn kanssa, kuten Jade / Haml ja LESS / SCSS.
Mozilla Thimble on toinen IDE aloittelijoille, jotka haluavat oppia, kun ne koodittavat. Myös Codeply on hyvä testaamaan tiettyjä reagoivia kehyksiä kuten Bootstrap tai Zurb's Foundation ilman tarvetta ladata tiedostoja.
3. Vapaa Sass / SCSS Mixins
Esikäsittelijät ovat olleet trendikkäitä vuosia, mutta vasta viime aikoina niistä tuli riittävästi valtavirtaista tuntemusta kaikkialla web-suunnittelun / kehittämisen alalla. Nykyään on outoa kirjoittaa vanilja CSS: ää, kun Sass / SCSS voi tarjota paljon enemmän.
Yksi etu on Sass mixin -kirjastojen kasvava tarjonta. Yksinkertaiset sekoittimet ovat kuin koodinpätkät tai perustoiminnot toistettavan koodin tuottamiseksi CSS: ssä. Vaikka voit aina kirjoittaa omia, monet kehittäjät ovat olleet ystävällisiä julkaisemalla ilmaisia sekoittimia verkossa.
Jotkut mixins ovat kirjastoissa kuten Bourbon, kun taas toiset voivat olla itsenäisiä kohteita. Yritä tehdä haun GitHubissa Sass / SCSS-sekoittimille nähdäksesi mitä löydät.
4. Korttiasetukset
Sivustolla mainostettiin ensin verkkosivustokorttien ulkoasuja muutama vuosi sitten, ja siitä on tullut sisältöä sisältävien raskaiden verkkosivujen suuntaus. Ilmaisia laajennuksia, kuten jQuery-muurausta, voidaan käyttää jäljittelemään tätä ulkoasun tyyliä animoitujen korttien avulla eri korkeuksiin ja leveyksiin.
Korttiasetusta käytetään parhaiten sivuilla, joissa on paljon skannattavia tietoja. Google Nowin aloitussivulla käytetään kortin asettelua mainostamalla valinnaisia kortteja Google Now -sovellukseen.
Voit ajatella kortin ulkoasuja dynaamisemmiksi ruuteiksi, joissa keskitytään minimoimaan sisällön paljain perustein, jolloin luetteloon voidaan lisätä useampia kohteita. Online-aikakauslehdet, kuten UGSMAG ja The Next Web, ovat molemmat täydellisiä esimerkkejä kortin asetteluista, joita käytetään viimeisimpien viestien näyttämiseen.
5. Custom Explainer Videot
Sekä suuret että pienet yritykset ovat siirtyneet mukautettujen selitysvideoiden suuntaukseen. Nämä luodaan usein animaatiolla, kuten Crazy Egg-esimerkillä. Mutta muut videot perustuvat todelliseen elokuvaan kuten Instagram Direct.
Selitysvideon tarkoituksena on osoittaa, miten tuote tai palvelu toimii. Vierailijat voivat ohittaa luettelon ominaisuuksista, ja heillä ei vieläkään ole aavistustakaan siitä, miten tuote toimii. Videot selventävät kaiken visuaalisesti ja peittävät tärkeät asiat vain muutamassa minuutissa.
Jos haluat kokeilla kättäsi tekemällä mukautetun selitysvideon, tutustu tähän Udemy-kurssiin. Se on perusteellinen tutkimus, joka keskittyy aloitussivun suunnitteluun tarkoitettuihin videoihin.
6. Live-tuotteen esikatselut
Aloitussivun suunnittelu on kasvattanut uskomattoman kasvua Internetin nopeammin ja selaimen ominaisuuksien ansiosta. Yksi tärkeimmistä suuntauksista, joita olen huomannut, on elävien tuotteiden esikatseluiden lisääminen kotisivuihin tai mukautettuihin aloitussivuihin.
Ota esimerkiksi Slackin tuotesivu. Siinä on video- ja vektorigrafiikka, joka kattaa Slack-käyttöliittymän. Näiden tuotteen esikatselujen tarkoituksena on antaa potentiaalisille käyttäjille tietoa siitä, miten tuote toimii.
Webydo on toinen loistava esimerkki, jossa on live-animaatio kotisivulla. Tämän ansiosta kävijät voivat nähdä Webydon toiminnassa ilman, että tuotteen manuaalista demoa demoidaan. Tuotteiden esikatseluissa ei kuitenkaan tarvitse aina luottaa animaatioihin. Iconjar käyttää yksinkertaista PNG-kuvakaappausta, jossa näkyy, mitä tuote on ja miten se toimii.
7. Automatisoidut tehtävät
Frontend-kehityksen maailma on muuttunut niin paljon, että verkkosivustojen luominen on kourallinen. Tehtävien juoksijoita / rakennusjärjestelmiä, kuten Gulp ja Grunt, käytetään paljon useammin tehtäviä varten, jotka vaativat aiemmin käsin tehtävää työtä.
Automaatio on nopean kääntämisen ja laatukoodin huuhtelu. Koneet eivät tee virheitä, joten mitä enemmän voit automatisoida luotettavasti vähemmän ongelmia, joita sinulla on (teoriassa).
Jos haluat lisätietoja, tutustu tähän Reddit-postiin, jossa selitetään, miten tehtävänajot toimivat. Nämä työkalut suorittavat periaatteessa JS-koodin, joka automatisoi työnkulun osat, joko mukautetun JS: n tai muiden kirjoittamia komentosarjoja.
8. Native JS Mobile -sovellukset
Olen suuri kannattaja oikeiden työkalujen käyttämiseen. Mobiilisovellusten kehittämisen tapauksessa tämä tarkoittaa Java Androidille, Objective-C / Swift iOS: lle.
Mutta kaikki eivät halua oppia uutta kieltä vain rakentaakseen mobiilisovelluksen. Onneksi on helpompaa luoda alkuperäisiä sovelluksia ja kääntää ne vaihtoehtoisten kirjastojen, kuten NativeScriptin tai React Nativein, avulla..
Kuilu mobiilisovelluksen ohjelmoijaksi on lyhentynyt, koska kyky luoda mobiilisovelluksia JavaScriptin avulla. PhoneGap on toinen vaihtoehto HTML / CSS / JS-koodin perusteella.
Vaikka luomisprosessi vaihtelee suuresti, JS: stä tulee nopeasti ratkaisu koodereille, jotka haluavat rakentaa mobiilisovelluksia oppimatta uutta kieltä.
9. Yhteistyön työkalut suunnitteluun
Pikaviestintä ja ryhmäkeskustelu on ollut käytössä jo yli vuosikymmenen ajan. Nämä resurssit ovat kuitenkin perinteisesti luottaneet pelkkään tekstiin, jolla on kyky liittää tiedostoja.
Uusi kehittyvä suuntaus on kyky jakaa live-dokumentteja chat-sovelluksissa. Huomionarvoista on esimerkki, jossa huomautukset ja kommentit voidaan kerrosta suoraan asiakirjan päälle. Tämä antaa suunnittelijoille puhtaan tavan jakaa töitä suoraan tiimin kaikkien kanssa.
Slack on tällä hetkellä suosituin chat-sovellus, joka tukee monia samankaltaisia ominaisuuksia. Kasvava Slack-käyttäjäpohja on ollut tiukkaa siitä, että luodaan laajennuksia, jotka parantavat suuresti Slackin ominaisuuksia ja sitomista muihin tuotteisiin, kuten Hangoutsiin, MailChimpiin ja jopa WordPressiin.
10. Reagoivat Frontend-kehykset
Frontend-kehykset, kuten Bootstrap, ovat olleet jo vuosia, ja ne ovat edelleen hyödyllisiä sekä henkilökohtaisissa että ammattimaisissa projekteissa. Reagoiva muotoilu on pakottanut tiensä kehyksiin ja luonut kysynnän frontend-koodille pelkästään backendin (Django, Laravel jne.) Sijaan..
Siirtyminen vuoteen 2016 luulen, että luemme paljon enemmän reagoivista frontend-kehyksistä ja niiden arvosta web-projekteissa. Monet devs odottavat innokkaasti säätiön 6 vapauttamista ja Bootstrap 4: n julkista v1-julkaisua.
Muita vähemmän tunnettuja kehyksiä, joita saatat tarkistaa, ovat Gumby ja Pure CSS.
11. Suurempi keskittyminen UX-suunnitteluun
Käyttökokemuksen muotoilu kasvaa edelleen nopeasti, kun suunnittelijat ja kehittäjät ovat huomanneet. UI-suunnittelu on osa UX-suunnittelua, mutta se ei ole lopullinen tavoite. UI on keino lopettaa, ja loppu on fantastinen käyttäjäkokemus.
Vain 5 vuotta sitten olin tuskin tutkinut UX: ää tai sitä, miten se soveltui käyttöliittymän suunnitteluun. Nyt meillä on resursseja, kuten UX Stack Exchange ja ilmaisia UX-e-kirjoja. Jos et tiedä paljon käyttäjäkokemuksesta, nyt on paras aika tutkia ja oppia, miten UX-periaatteita voidaan soveltaa kaikkiin digitaalisiin rajapintoihin.
12. Pakettien hallinta
Digitaaliset pakettien johtajat ovat nousseet niin nopeasti, että ne ovat käytännössä vaatimus nykyaikaiselle web-kehitykselle. Ratkaisut, kuten Bower ja NPM, voivat säästää paljon uusia projekteja.
Uuden tekniikan hallitseminen vie aikaa ja mukana tulee oppimiskäyrä. Mutta jos joku frontend (tai backend) -kehittäjä tietää yhden, se on pakettien hallinta. Ne vaativat jonkin verran tietoa terminaalikomennoista, mutta kun olet tottunut prosessiin, et koskaan halua palata takaisin.
13. Kehittynyt käyttöliittymän animaatiot
CSS3-siirtymät olivat vain alussa pitkän aikavälin animaation suuntaus verkossa. Nyt meillä on kymmeniä animoituja CSS- ja JavaScript-kirjastoja. Asiat, joita en koskaan voinut unelmoida, on nyt rakennettu ja saatavilla ilmaiseksi, jos tiedät mistä etsiä.
Animaatio ei ole vaatimus hyvästä suunnittelusta. Mutta se voi tehdä hyvästä suunnittelusta erinomaisen muotoilun, kun sitä käytetään oikein.
Pidä silmällä animoituja trendejä käyttöliittymissä ja katso, mitä voit ottaa pois eri verkkosivuilta. Muista, että web-animaatio ei ole Disney-elokuva, ja sitä tulisi käsitellä kunnioittavasti. Käytä animaatiota varovasti niin, että se lisää käyttöliittymää ilman, että siitä tulee haitallinen tai häiritsevä elementti.
14. Suunnittelijat oppivat koodittamaan
Kuuma-painike-aihe on tänä vuonna ollut sellainen, että suunnittelijat oppivat koodimaan. Jotkut suunnittelijat kokevat, että heidän työnsä ei ole kirjoittaa koodia, kun taas toiset kokevat, että siitä on tulossa normi ja että se pitäisi ottaa mukaan.
Olen lukenut kuumia keskusteluja ja kiehtovia viestejä tästä aiheesta, joka näyttää vain vetävän emotionaalisia vastauksia. Hyvä muotoilu on vain kaunis kuva ilman koodia. Molempiin keskittyminen edellyttää kuitenkin, että suunnittelija viettää vähemmän aikaa harjoitella alusta.
Onko siis olemassa lopullinen vastaus? Jotkut väittävät, että työn elinkelpoisuus kasvaa suunnittelijoille, jotka tuntevat frontend-koodauksen. Mutta mitä jos joku ei halua kirjoittaa koodia? Onko syytä oppia vain kilpailemaan?
Mielestäni selkein vastaus on tehdä mitä haluat. Mutta näyttää siltä, että tämä aihe on edelleen pöydällä monille suunnittelijoille, jotka todennäköisesti jatkavat keskustelua vuonna 2016.
15. Ilmaiset online-työkalut ja verkkopalvelut
Aiemmin se oli, että kaikki ohjelmat ajettiin työpöydältä riippumatta siitä, mitä sinun tarvitsi tehdä. Mutta nykyään olen jatkuvasti hämmästynyt siitä, kuinka monta webappia on saatavilla ilmaiseksi verkossa.
Löydät kaiken URL-koodauksesta / dekoodauksesta täysin vapaaseen Markdown-editoriin. Jopa Google Drive on ottanut Microsoft Office -tuotteet selaimeen (uudelleen, täysin ilmaiseksi).
Nykyinen tietotekniikan taso ja web-selaimien homogeeniset standardit tarjoavat näennäisesti rajattoman määrän mahdollisuuksia. Monimutkaisia tehtäviä, kuten luomisen jatkaminen kuvien pakkaamiseen, voidaan käsitellä suoraan selainikkunasta.
16. Web-komponenttien kasvu
Web-komponentit yrittävät ratkaista monimutkaisuusongelmia kehittäjille. WebComponents-sivustolla on hyvät resurssit ja materiaalit, joiden avulla kehittäjät voivat käynnistää tämän aiheen.
Jos et ole varma, miten ymmärrät modulaariset web-komponentit, tutustu tähän viestiin saadaksesi lisätietoja.
Vaikka komponentit eivät ole erityisen räjähtäneet valtavirtaan, ammattilaiset kehittäjät keskustelevat siitä. Google on julkaissut Polymerin, joka on kehys, jota käytetään lisäämään Web-komponentteja JS: n ja HTML: n kautta.
Tämä ei ehkä ole käytännöllistä käyttää suurissa asiakasprojekteissa vielä. Teknologia on kuitenkin käytettävissä ja hieman käytännössä voit hallita käsitteitä helposti. Jos haluat lisätietoja ja nähdä muutamia koodinäytteitä, voit lukea tämän CSS-Tricks-postin modulaaristen web-komponenttien kautta.
17. Online-oppimisresurssit
Me kaikki tiedämme, että nyt on helpoin aika oppia taitojasi tietokoneen mukavasti. Näyttää siltä, että verkko-oppimismarkkinat kasvavat eksponentiaalisesti uusien kurssien ja verkkosivujen avulla, jotka avautuvat vuosittain.
Tunnen itseni luottavaisemmaksi kuin koskaan ennen, että näemme online-oppimisen nousun. Tunnettuja sivustoja, kuten Treehouse ja CodeSchool, tarjoavat uskomattomia kursseja uudempien sivustojen rinnalla, kuten Bitfountain ja Learn-Verified.
Jos on aihe, jonka haluat oppia, on todennäköistä, että kurssi on verkossa - varsinkin jos haluat oppia digitaalisia tekniikoita, kuten käyttöliittymän suunnittelua tai sovelluskehitystä.
18. Palvelinpuolen JavaScript
Vaikka palvelinpuolen JS: ssä on ollut aiempia vaihtoehtoja, kukaan ei ole läpäissyt yhtä nopeasti kuin Node.js. JavaScript devs on rakastunut tähän kirjastoon ja katseli sen nousevan suoraksi kilpailuksi muiden taustalla käytettävien kielten, kuten Pythonin tai PHP: n kanssa..
Solmu sallii kehittäjien rakentaa verkkosivuja käyttäen yhtä kieltä sekä frontend + backend-koodille. Ja resurssit, kuten Node Package Manager, antavat Node.js: lle vielä enemmän arvoa.
Sen perusteella, mitä voin kertoa, Node on edelleen nousussa, ja se saa edelleen vetovoimaa teollisuuden harrastajilta. Aiotko oppia solmua vai ei, ei ole epäilystäkään, että se kasvaa edelleen merkittävästi vuonna 2016.
19. Touch-tuetut verkkosivuston ominaisuudet
Älypuhelimen selaimet ovat aina tukeneet kaikkien sivustojen kosketusominaisuuksia taaksepäin yhteensopivuuden ylläpitämiseksi. Viime aikoina olen kuitenkin huomannut lisää laajennuksia ja mukautettuja ominaisuuksia, jotka on liitetty verkkosivuille ja joilla on erityinen tavoite koskettaa tapahtumia.
Lisäosat kuten Photoswipe ja Dragend.js on suunniteltu käsittelemään pyyhkäisyä ja kosketusnäyttöjen koskettamista. Näyttää siltä, että web-kehittäjät eivät rakenna pelkästään reagoivia verkkosivustoja, vaan myös kosketuskäyttöiset sivustot.
Jos etsit ympäri, löydät joitakin todella vaikuttavia ominaisuuksia, jotka on rakennettu verkolle ja jotka perustuvat pelkästään kosketustapahtumiin.
20. Materiaalinen suunnittelu verkossa
Googlen materiaalisuunnittelu oli Android-suunnittelijoille valtava menestys. Materiaalisuunnittelua pidetään suunnittelukielenä, jonka tarkoituksena on yksinkertaistaa Android-älypuhelimien käyttöliittymien käsittelyn prosessia.
Ajan mittaan web-suunnittelijat ovat ottaneet tämän sydämeen ja rakentaneet kokonaisia verkkosivustoja Googlen uuden muotoilukielen perusteella. Näyttää siltä, että materiaalisuunnittelun kehitys on siirtynyt pelkästään mobiilisovellusten ulkopuolelle web-suunnittelun maailmaan.
Ihmiset, jotka haluavat rakentaa aineellisia verkkosivustoja, eivät tarvitse edes keksiä pyörää. Ilmaiset kirjastot, kuten Materiaali-käyttöliittymä ja Materialize, tarjoavat mukautettuja koodeja uuden ulkoasun jäsentämiseksi materiaalin suunnittelun perustan päälle.
Sulkeminen
Näitä suuntauksia tarkasteltaessa on selvää, että web-yhteisö pyrkii tekemään todellisia yhteisiä ponnisteluja, jotta verkkosivujen rakentamisprosessi olisi helpompaa. Me kaikki haluamme säästää aikaa päivittäisessä työnkulussa.
Koska verkko on käynnistynyt, olemme nähneet monia tekniikoita, jotka korvataan vain paremmilla vaihtoehdoilla. Nämä vuoden 2016 kehityssuuntaukset pyrkivät yhtenäisempään suunnittelutekniikkaan, joka tekee verkkosivustojen rakentamisesta helpompaa ja monimutkaisempaa.
