20 karščiausių tendencijų, kurios formuos interneto dizainą

Kadangi laikas eina į priekį su kiekvienais metais, daug naujų dizaino tendencijų žvelgia į horizontą. Žiniatinklio dizaino sritis visada keičiasi su naujais įrankiais, darbo eigomis ir geriausia patirtimi, kaip sukurti tinkamus išdėstymus.

Sunku nuspėti, kurios tikslios tendencijos atkreips didžiausią dėmesį. Vis dėlto naujausia istorija rodo tendencijas, kurios auga kaip gaisras. Aš surengiau 20 unikalių tendencijų, kurios įgijo traukos tempus per 2015 m. Ir greičiausiai tęsis iki 2016 m.

1. Prognozuokite programą, skirtą UI dizainui

„Sketch“ greitai pakeičia „Photoshop“ visoms UI dizaino užduotims, pradedant nuo mažos ištikimybės wireframes į aukštos kokybės modeliai ir piktogramų dizainas.

„Sketch App“ yra tik „Mac“ programa, sukurta specialiai interneto ir mobiliesiems dizaineriams. Jis siūlo sklandesnę darbo aplinką amatų vektoriniams elementams bet kuriai sąsajai, tačiau ji taip pat išlaiko daugybę funkcijų, kurias tikitės iš „Photoshop“ kaip teksto efektai ir sluoksnių stiliai.

Nors nėra jokių įrodymų, kad „Sketch“ kada nors bus išleista „Windows“, ji vis dar tapo vertingu OS X naudotojų pasirinkimu. Supaprastinta darbo eiga ir pigesnė žyma suteikia „Adobe“ savo pinigus. Jei „Sketch“ ir toliau suteiks geriausią UI dizaino patirtį, tuomet jis ir toliau išaugs iki 2016 m. Ir vėliau.

2. Naršyklės IDE

Darbalaukio IDE jau dešimtmečius buvo pasirinkę nuo Notepad ++ iki Xcode ir Visual Studio. IDE palengvina kodo rašymą su pasiūlymais ir sintaksės paryškinimu (be kitų funkcijų).

Tačiau tradiciškai IDE buvo išleistos kaip darbalaukio programos. Per pastaruosius kelerius metus matėme, kad sparčiai didėja naršyklės IDE. Tai nereikalauja jokios kitos programinės įrangos, išskyrus žiniatinklio naršyklę, kuri leidžia devams rašyti kodą iš bet kurio kompiuterio su interneto prieiga.

„Cloud IDE“ veikia labiau kaip žiniatinklio programos, kuriose galite išsaugoti kodo fragmentus į paskyrą, kad galėtumėte juos bendrinti ar saugoti. „CodePen“ yra vienas iš populiariausių IDE, palaikantis HTML / CSS / JS, kartu su pasirinktiniu išankstiniu apdorojimu, pvz., „Jade / Haml“ ir „LESS / SCSS“.

„Mozilla Thimble“ yra dar vienas IDE, skirtas pradedantiesiems kūrėjams, norintiems sužinoti, kaip jie koduoja. „Codeply“ taip pat puikiai tinka bandant konkrečias reagavimo sistemas, pvz., „Bootstrap“ arba „Zurb“ fondą, nereikia atsisiųsti jokių failų.

3. Nemokama Sass / SCSS Mixins

Preprocesoriai buvo madingi jau daugelį metų, tačiau tik neseniai tapo pakankamai svarbūs, kad jaustųsi visur žiniatinklio dizaino / kūrimo srityje. Šiandien atrodo keista rašyti vanilės CSS, kai Sass / SCSS gali suteikti tiek daug daugiau.

Viena nauda yra auganti Sass mixin bibliotekų pasiūla. Paprasti „mixins“ yra panašūs į kodo fragmentus arba pagrindines funkcijas, leidžiančias CSS kartoti kodą. Nors visada galite rašyti savo, daugelis kūrėjų buvo malonūs, kad išleistų nemokamus mišinius internete.

Kai kurie mišiniai yra bibliotekose, tokiose kaip Bourbon, o kiti gali būti atskiri elementai. Pabandykite atlikti paiešką „GitHub“ sistemoje „Sass“ / „SCSS“ mišiniams, kad pamatytumėte, ką galite rasti.

4. Kortelių išdėstymas

Svetainės kortelės išdėstymas pirmą kartą buvo populiarinamas Pinterest keletą metų atgal ir nuo šiol tapo turinio sunkių tinklalapių tendencija. Nemokami priedai, pvz., „JQuery Masonry“, gali būti naudojami imituoti šį išdėstymo stilių su įvairaus aukščio ir pločio animacinėmis kortelėmis.

Kortelės išdėstymas geriausiai naudojamas puslapiuose, kuriuose yra daug duomenų, kuriuos reikia nuskaityti. „Google Now“ nukreipimo puslapyje naudojamas kortelių išdėstymas reklamuojant papildomas „Google Now“ programos korteles.

Jūs galite galvoti apie kortelių išdėstymą kaip dinamiškesnius tinklus, kuriuose pagrindinis dėmesys skiriamas minimalaus turinio sumažinimui, kad būtų galima įtraukti daugiau elementų. Internetiniai žurnalai, pvz., „UGSMAG“ ir „The Next Web“, yra puikūs kortelių išdėstymo pavyzdžiai, naudojami neseniai paskelbtam turiniui rodyti.

5. „Custom Explainer“ vaizdo įrašai

Didelės ir mažos įmonės taip pat ėmėsi pritaikyti paaiškinimo vaizdo įrašų. Tai dažnai sukuriama su animacija, pavyzdžiui, „Crazy Egg“ pavyzdžiu. Tačiau kiti vaizdo įrašai priklauso nuo realaus gyvenimo medžiagos, pavyzdžiui, Instagram Direct.

Paaiškintojo vaizdo įrašo tikslas - parodyti, kaip veikia produktas ar paslauga. Lankytojai gali nugriebti funkcijų sąrašą ir vis dar nesupranta, kaip produktas veikia. Vaizdo įrašai viską aiškina vizualiai ir per kelias minutes padengia svarbius dalykus.

Jei norite išbandyti savo ranką, kad pasirinktinis paaiškinimo vaizdo įrašas būtų patikrintas, patikrinkite šį „Udemy“ kursą. Tai išsamus tyrimas, kuriame daugiausia dėmesio skiriama nukreipimo puslapio dizaino vaizdo įrašams.

6. Tiesioginiai produkto peržiūra

Nukreipimo puslapio dizainas parodė neįtikėtiną augimą dėl didesnio interneto greičio ir naršyklės galimybių. Viena iš pagrindinių pastebimų tendencijų yra tiesioginių produktų peržiūrų pridėjimas tinklalapiuose arba pasirinktiniuose nukreipimo puslapiuose.

Pavyzdžiui, pasiimkite „Slack“ produkto puslapį. Jame yra vaizdo turas ir vektorinė grafika, apimanti „Slack“ sąsają. Šie produkto peržiūros yra skirti suteikti potencialiems vartotojams žvilgsnį, kaip produktas veikia.

„Webydo“ yra dar vienas puikus pavyzdys, kuriame pagrindiniame puslapyje groja gyva animacija. Tai leidžia lankytojams matyti „Webydo“ veiksmą, nereikalaujant rankinio produkto demonstravimo. Tačiau ne visada reikia pasikliauti animacijomis produktų peržiūrai. „Iconjar“ naudoja paprastą PNG ekraną, kad parodytų, koks produktas yra ir kaip jis veikia.

7. Automatiniai užduočių bėgikai

„Frontend“ vystymosi pasaulis taip pat pasikeitė su nemažai naujų geriausių interneto svetainių kūrimo praktikų. Užduoties / statymo sistemos, pvz., „Gulp“ ir „Grunt“, dažniau naudojamos užduotims, kurias anksčiau reikėjo atlikti rankiniu būdu..

Automatika yra greito apsisukimo ir kokybės kodo gedimas. Mašinos neteikia klaidų, taigi kuo daugiau galite automatizuoti pasitikėjimą tuo, kad mažiau problemų turėsite (teoriškai).

Jei norite sužinoti daugiau, patikrinkite šį „Reddit“ įrašą, kuriame paaiškinama, kaip veikia užduočių bėgikai. Šie įrankiai iš esmės vykdo JS kodą, kuris automatizuos jūsų darbo eigos dalis, arba pasirinktinius JS, arba kitų scenarijų, kuriuos parašė kiti.

8. Native JS Mobile Apps

Esu didelis advokatas, naudodamasis tinkamais įrankiais. Mobiliųjų programų kūrimo atveju tai reiškia „Java“ „Android“, „Objective-C / Swift“ iOS.

Tačiau ne kiekvienas nori išmokti naują kalbą, kad sukurtų mobiliąją programą. Laimei lengviau kurti vietines programas ir jas surinkti su kitomis bibliotekomis, pvz., „NativeScript“ arba „React Native“.

Skirtumas tapti mobiliosios programos programuotoju sutrumpėja, nes galima kurti mobilias programas naudojant „JavaScript“. PhoneGap yra dar viena galimybė, pagrįsta HTML / CSS / JS kodu.

Nors kūrimo procesas labai skiriasi, „JS“ greitai tampa sprendimu programuotojams, norintiems kurti mobilias programas nesimokant naujos kalbos.

9. Bendradarbiavimo įrankiai dizainui

Momentiniai pranešimai ir pokalbių pokalbiai jau beveik dešimtmetį. Tačiau šie ištekliai tradiciškai rėmėsi paprastu tekstu, tam tikru pajėgumu pridėti failus.

Nauja tendencija yra galimybė bendrinti gyvus dizaino dokumentus pokalbių programose. Pažymėtina tai, kad anotacijos ir komentarai gali būti sluoksniuoti tiesiai ant dokumento. Tai suteikia dizaineriams švarų būdą tiesiogiai dalytis darbu su kiekvienu komandos nariu.

„Slack“ yra populiariausia pokalbių programa, kuri palaiko daug panašių funkcijų. Didėjanti „Slack“ naudotojų bazė buvo tvirtai pasirengusi kurti plėtinius, kurie labai pagerina „Slack“ galimybes ir sąsajas su kitais produktais, pvz., „Hangout“, „MailChimp“ ir net „WordPress“.

10. Reaguojančios priekinės struktūros

„Frontend“ sistemos, kaip antai „Bootstrap“, jau daugelį metų yra ir yra naudingos projektams, tiek asmeniniams, tiek profesionaliems. Atsakingas dizainas privertė savo kelią į sistemas ir sukūrė „frontend“ kodo paklausą, o ne tik „backend“ („Django“, „Laravel“ ir kt.).

Persikėlimas į 2016 m., Manau, mes skaitysime daug daugiau apie jautrias frontendo sistemas ir jų vertę interneto projektuose. Daugelis devs labai nekantriai laukia fondo 6 išleidimo ir viešo „Bootstrap 4“ išleidimo.

Kitos mažiau žinomos sistemos, kurias galite patikrinti, yra „Gumby“ ir „Pure CSS“.

11. Didesnis dėmesys UX dizainui

Naudotojų patirties dizainas toliau sparčiai augs, pastebėdamas daugiau dizainerių ir kūrėjų. UI dizainas yra UX dizaino dalis, tačiau tai nėra galutinis tikslas. UI yra priemonė baigti, o galas - fantastiška vartotojo patirtis.

Vos prieš 5 metus buvau vos susipažinęs su UX arba kaip jis buvo taikomas sąsajos dizainui. Dabar mes turime išteklių, pvz., „UX Stack Exchange“ ir nemokamų „UX“ knygų. Jei nežinote apie vartotojo patirtį, dabar yra geriausias laikas ištirti ir sužinoti, kaip UX principai gali būti taikomi visoms skaitmeninių sąsajų formoms.

12. Paketų vadovai

Skaitmeninių paketų valdytojai taip greitai išaugo, kad jie praktiškai reikalauja modernios interneto plėtros. Tokie sprendimai kaip „Bower“ ir „NPM“ gali sutaupyti daug laiko pradedant naujus projektus.

Įgyti bet kokią naują technologiją reikės laiko ir ateis mokymosi kreivė. Bet jei yra vienas dalykas, kurį turėtų žinoti kiekvienas „frontend“ (arba „backend“) kūrėjas, tai yra paketų tvarkyklė. Jie reikalauja tam tikrų žinių apie terminalo komandas, bet kai tik pripratote prie proceso, jūs niekada nenorėsite grįžti.

13. Išplėstinė UI animacija

CSS3 perėjimai buvo tik ilgalaikės animacijos tendencijos internete pradžia. Dabar turime daugybę CSS ir JavaScript bibliotekų, skirtų animacijai. Ką aš niekada svajojau, dabar statomi ir prieinami nemokamai, jei žinote, kur ieškoti.

Animacija nėra gero dizaino reikalavimas. Bet jis gali būti geras dizainas, kad jis būtų puikus dizainas, kai naudojamas tinkamai.

Stebėkite animuotas sąsajų tendencijas ir pažiūrėkite, ką galite atimti iš įvairių svetainių. Atminkite, kad internetinė animacija nėra „Disney“ filmas ir turėtų būti traktuojama pagarbiai. Švelniai naudokite animaciją, kad ji padidintų sąsają ir netaptų nepatogiu ar trukdančiu dizaino elementu.

14. Projektuotojai mokosi koduoti

Karšto mygtuko tema šiais metais buvo skirta projektuotojams mokytis koduoti. Kai kurie dizaineriai mano, kad ne jų darbas yra parašyti kodą, o kiti mano, kad tampa norma ir turėtų būti priimami.

Aš perskaičiau karštą diskusiją ir įdomius pranešimus apie šį dalyką, kuris, atrodo, tik daro emocinius atsakymus. Geras dizainas yra tik gražus vaizdas be kodo. Tačiau, norint sutelkti dėmesį į abi puses, reikia, kad dizaineris praleistų mažiau laiko praktikuojant amatų.

Taigi ar yra galutinis atsakymas? Kai kurie teigia, kad darbų gyvybingumas didėja dizaineriams, kurie žino frontendą. Tačiau kas, jei kas nors nenori rašyti kodo? Ar verta mokytis tik konkuruoti?

Manau, kad aiškiausias atsakymas yra daryti viską, ką norite. Tačiau atrodo, kad ši tema vis dar pateikiama daugeliui dizainerių, kurie greičiausiai tęs diskusijas į 2016 m.

15. Nemokami internetiniai įrankiai ir žiniatinklis

Tai buvo, kad visos programos buvo paleistos iš darbalaukio, nesvarbu, ką jums reikia padaryti. Tačiau šiandien aš nuolat stebiuosi, kiek internetinių pranešimų yra prieinami nemokamai internete.

Viską rasite nuo URL kodavimo / dekodavimo iki visiškai nemokamo „Markdown“ redaktoriaus. Net „Google“ diskas „Microsoft Office“ produktus ėmėsi į naršyklę (dar kartą, visiškai nemokamai).

Dabartinis skaičiavimo galios ir homogeninių standartų iš žiniatinklio naršyklių lygis suteikia akivaizdžiai neribotas galimybes. Kompleksines užduotis, pavyzdžiui, atnaujinti kūrimą į vaizdo suspaudimą, galima tvarkyti tiesiai iš naršyklės lango.

16. Web komponentų augimas

Interneto komponentai bando išspręsti sudėtingų kūrėjų problemas. „WebComponents“ svetainėje yra daug išteklių ir medžiagų, leidžiančių kūrėjams pereiti į šią temą.

Jei nesate tikri, kaip suprasti modulinius žiniatinklio komponentus, patikrinkite šį įrašą ir sužinokite daugiau.

Nors komponentai nėra ypač susprogdinti prie pagrindinės būklės, juos aptaria profesionalūs kūrėjai visame pasaulyje. „Google“ išleido „Polymer“, kuris yra sistema, naudojama interneto komponentams pridėti per JS ir HTML.

Tai gali būti praktiška naudoti dar tik dideliuose kliento projektuose. Tačiau ši technologija yra prieinama ir su nedideliu praktiku, jūs galite lengvai suvokti sąvokas. Norėdami sužinoti daugiau ir pamatyti kelis kodo pavyzdžius, galite skaityti šį CSS-Tricks pranešimą moduliniuose žiniatinklio komponentuose.

17. Mokymosi internete priemonės

Visi žinome, kad dabar yra lengviausias laikas išmokti bet kokių įgūdžių iš jūsų kompiuterio patogumo. Atrodo, kad internetinė mokymosi rinka auga eksponentiškai, kai kasmet atsiranda naujų kursų ir svetainių.

Jaučiausi labiau pasitikintys nei bet kada anksčiau, kad pamatysime mokymąsi internetu. Gerai žinomos svetainės, pvz., „Treehouse“ ir „CodeSchool“, siūlo neįtikėtinus kursus kartu su naujesnėmis svetainėmis, pvz., „Bitfountain“ ir „Learn-Verified“.

Jei yra dalykas, kurį norite sužinoti, greičiausiai yra kursas internete - ypač jei norite sužinoti skaitmeninius metodus, pvz., Vartotojo sąsajos dizainą ar programų kūrimą.

18. Serverio pusės „JavaScript“

Nors serverio pusėje yra buvusios JS parinktys, nė vienas iš jų nėra pernelyg greitai perėjęs į „Node.js.“ „JavaScript devs“ įsimylėjo šią biblioteką ir stebėjo, kaip ji iš tiesų konkuruoja su kitomis „backend“ kalbomis, pvz., „Python“ arba „PHP“.

Mazgas leidžia kūrėjams kurti svetaines, naudojant vieną kalbą tiek „frontend“, tiek „backend“ kodui. Ir tokie šaltiniai, kaip „Node Package Manager“, suteikia „Node.js“ dar didesnę vertę.

Iš to, ką galiu pasakyti, „Node“ vis dar auga ir toliau gauna traukos iš pramonės entuziastų. Nesvarbu, ar ketinate mokytis mazgo, ar ne, neabejotina, kad jis ir toliau augs kaip pagrindinė tendencija 2016 m.

19. Palaikomos svetainės funkcijos

Išmaniųjų telefonų naršyklės visuomet palaikė visų svetainių jutiklines funkcijas, kad būtų išlaikytas atgalinis suderinamumas. Vis dėlto neseniai pastebėjau daugiau įskiepių ir priskirtų funkcijų, kurios pridedamos prie svetainių, kurių specifinis tikslas yra tvarkyti liesti įvykius.

Priedai, tokie kaip „Photoswipe“ ir „Dragend.js“, yra sukonstruoti taip, kad tvarkytų „swiping“ ir bakstelėjimą jutikliniame ekrane. Atrodo, kad žiniatinklio kūrėjai ne tik sukuria reaguojančias svetaines, bet ir tinkamas svetaines.

Jei ieškosite, rasite keletą tikrai įspūdingų žiniatinklyje sukurtų funkcijų, kurios remiasi vien tik ryšių įvykiais.

20. Medžiagos dizainas internete

„Google“ išleido materialųjį dizainą „Android“ dizaineriams. Medžiagos dizainas laikomas dizaino kalba, skirta supaprastinti „Android“ išmaniųjų telefonų vartotojo sąsajų kūrimo procesą.

Laikui bėgant interneto dizaineriai tai ėmėsi širdyje ir sukūrė visas „Google“ dizaino kalbos pagrindu sukurtas svetaines. Atrodo, kad medžiagos dizaino tendencija peržengė tik mobilias programas į interneto dizaino pasaulį.

Žmonės, norintys kurti materialines svetaines, net neturi išradinėti rato. Laisvos bibliotekos, pvz., „Material UI“ ir „Materialize“, siūlo individualius kodus, skirtus struktūrizuoti naują maketą ant medžiagos dizaino pagrindo.

Uždarymas

Žvelgiant į šias tendencijas, turėtų būti aišku, kad matome tikrą suderintą žiniatinklio bendruomenės pastangas, kad svetainių kūrimo procesas būtų paprastesnis. Mes visi norime sutaupyti laiko kasdieniame darbe.

Nuo žiniatinklio pradžios mes matėme daug technologijų, kurios turi būti pakeistos tik geresnėmis alternatyvomis. Šios 2016 m. Tendencijos reikalauja vienodesnio dizaino metodų rinkinio, kuris palengvins ir mažiau sudėtingas pastatų svetaines.