52 interneto dizaino įrankiai, padėsiantys dirbti protingiau 2021 m

(Vaizdo kreditas: John Kappa nuotrauka „Unsplash“)
Puslapis 1 iš 2: Puslapis 1 Pereiti į:

Šiais laikais yra tiek daug puikių interneto dizaino įrankių. Nesvarbu, kokią problemą bandote išspręsti savo interneto dizaino darbo eigoje, tikėtina, kad kas nors sukūrė tam skirtą įrankį, nesvarbu, ar tai atskiras įrankis, ar didesnės programos funkcija. Nors interneto svetainių kūrimo bendruomenė nuo pat pradžių labai pasikeitė, vis dar tvyro dalijimosi savo darbu dvasia, todėl daugelis šių puikių įrankių yra nemokami.

Įrankių gausa yra puikus pranašumas, tačiau tai taip pat gali palikti jus pasimetusį dėl pasirinkimo, nes yra daugybė būdų padaryti tą patį. Šiame straipsnyje mes suapvalinome, mūsų manymu, šiuo metu geriausias priemones. Žinoma, tai nėra išsamus sąrašas, tačiau tikimės, kad jį susiaurindami ir paryškindami pačius geriausius, jums bus lengviau sudaryti tinkamą jūsų darbo eigos įrankių rinkinį.

Kadangi tai yra gana ilgas sąrašas, įrankius suskirstėme į dalis, kad straipsnyje būtų lengviau naršyti. Šiame puslapyje rasite išsamią interneto dizaino programinę įrangą, paskui pagrindinius specialius laidų rėmelių įrankius, interneto dizaino sistemas ir bibliotekas. Antrajame puslapyje yra daugybė mažesnių, labiau specializuotų įrankių, skirtų viskam, pradedant darbu su vaizdais, baigiant AR ir VR.



Kol būsite čia, galbūt norėsite patikrinti geriausios interneto prieglobos paslaugos ir geriausi svetainių kūrėjai 2020 m

kaip geriau piešti gestus

GeneruotiJS reklamjuostę

Norėdami sužinoti daugiau ir nusipirkti bilietus, spustelėkite paveikslėlį(Vaizdo kreditas: „Future“ / Toa Heftiba, „Unsplash“)

Išbaigti projektavimo įrankiai

01. „InVision Studio“

„InVision“ siekia būti vienintelis vartotojo sąsajos įrankis, kurio jums kada nors prireiks(Vaizdo kreditas: „InVision“)

„InVision“ studija siekia aprėpti visas bazes ir būti vieninteliu vartotojo sąsajos įrankiu, kurio jums reikės. Jame yra daugybė funkcijų, kurios padės sukurti gražias interaktyvias sąsajas, įskaitant greito prototipų kūrimo, interaktyvaus ir bendradarbiavimo projektavimo ir darbo su projektavimo sistemomis įrankius.

Jei jau naudojate „InVision“ su tokiais įrankiais kaip „Sketch“, funkcijose yra nemažai kryžminimo. Tačiau „Studio“ galia slypi prototipų kūrimo skyriuje, ypač jei jūsų dizainas susijęs su animacija. Greitas prototipų sudarymas leis sukurti sudėtingus ir vaizduotę atitinkančius perėjimus, leidžiančius iš tikrųjų pasiekti norimą animacijos lygį. Paprasčiausiai išsiaiškinkite, kaip norite, kad jūsų vartotojo sąsaja pažvelgtų į perėjimo pradžią, ir tada suprojektuokite galutinį rezultatą. „InVision Studio“ visa kita jums padės.

Be to, galite sukurti šias pasirinktines animacijas ir perėjimus iš daugybės gestų ir sąveikų, pvz., Perbraukimo, paspaudimo ir užvedimo.

Baigę eksportuokite savo prototipus per „InVision“ ir pakvieskite žmones bendradarbiauti. Galite peržiūrėti savo projektą numatytoje platformoje - tai puikus būdas ištirti ir išbandyti savo dizainą. Tada klientai galės pakomentuoti tiesiai į dizainą.

Be to, galite nustoti galvoti apie daugybės lentų kūrimą keliems įrenginiams - „Studio“ maketo variklis automatiškai pritaikys jūsų dizainą prie bet kurio ekrano. Šis laiko taupymas suteikia jums vietos daugiau galvoti apie savo dizainą.

02. Eskizas

„Sketch“ pakeitė „Photoshop“ kaip daugelio interneto dizainerių pasirinktą vartotojo sąsajos dizaino įrankį [Paveikslėlis: Bohemian Coding](Vaizdo kreditas: „Bohemian Coding“)

„Bohemian Coding's“ Eskizas yra viena plačiausiai naudojamų interneto dizaino platformų; tai labai galingas vektorinis įrankis sąsajoms ir prototipams kurti bendradarbiaujant. „Eskizas“ buvo sukurtas specialiai svetainėms ir programoms kurti, todėl nėra jokių nereikalingų funkcijų, trukdančių jūsų sąsajai, ir ji yra greitesnė ir efektyvesnė nei platesnės apimties programinė įranga.

Rory Berry, kūrybinis direktorius Superrb , perėjo prie „Sketch“ 2017 m. ir labai rekomenduoja. „Palyginti su„ Photoshop “, daug lengviau rūšiuoti visus dokumentus ir pataisyti„ Sketch “, - pradeda jis. „„ Sketch “turi mažus dokumentus, o„ Photoshop “- didelius. Kadangi tai yra vektorinė programa, failų dydžiai yra dramatiškai mažesni, palyginti su „Photoshop“.

Ir tai dar ne viskas. „„ Sketch “įmontuota tinklo sistema yra puiki ir žymiai palengvina sąsajos dizainą. Manau, kad dėl bendros vartotojo sąsajos ir minimalaus pojūčio dizainas yra patogesnis ir patogesnis vartotojui. „Photoshop“ atrodo labai sudėtinga. “

Bendruomenė siūlo šimtus Eskiziniai įskiepiai kad jūsų darbo eiga būtų lengvesnė ir sklandesnė.

„Sketch“ trūkumas yra tas, kad jis prieinamas tik „Mac“, o kitų operacinių sistemų palaikyti neketinama. Tai buvo problema, nes dizaineriai dažnai norės dalintis .sketch failais su kūrėjais, naudojančiais „Windows“. Laimei, dabar yra „Sketch for Windows“ programa Beprotybė kad atidarys ir redaguos .sketch failus ir pašalins didžiąją dalį šio skausmo - apie tai skaitykite Eksportavimas ir konvertavimas šio straipsnio skyriuje.

Nepraleisk mūsų populiariausi „Sketch“ naudojimo patarimai .

03. „Adobe XD“

„Adobe XD“ turi lengvą sąsają, leidžiančią lengvai kurti prototipus(Vaizdo kreditas: „Adobe“)

„Adobe XD“ siūlo geriausią aplinką skaitmeniniams projektams pagal „Adobe Creative Cloud“ rinkinį. Jei esate norus „Adobe“ vartotojas ir naujokas „XD“, jums gali būti, kad sąsaja nėra labai panaši į „Adobe“. Tačiau jis sukrauna kitus pagrindinius įrankius. Tai yra šuolis, jei jau kurį laiką kuriate dizainą „Photoshop“, bet labai verta dėl vartotojo sąsajos dizaino.

Šis vektorinio dizaino ir vielinio kadro kūrimo įrankis vis gerėja, papildydamas tokius kaip palaikymas balso prototipų kūrimas užtikrinant, kad įrankis galėtų neatsilikti nuo naujausių „UX“ tendencijų. XD apima piešimo įrankius, įrankius, leidžiančius apibrėžti nestatiškas sąveikas, mobiliojo ir darbalaukio peržiūras ir dalijimosi įrankius, skirtus atsiliepimams apie dizainą pateikti. Tai leidžia pasirinkti konkretaus įrenginio meno lentos dydį, kad pradėtumėte projektą, ir netgi galite importuoti populiarų vartotojo sąsajos rinkinį, pavyzdžiui, „Google“ medžiagų dizainą.

Svarbiausia, kad „Adobe XD“ integruojamas su likusia „Creative Cloud“ dalimi, o tai reiškia, kad galėsite lengvai importuoti ir dirbti su turtais iš „Photoshop“ ar „Illustrator“. Jei jau naudojate kitas „Adobe“ programas, vartotojo sąsaja jausis maloniai ir pažįstama ir neturėtų pateikti per daug mokymosi kreivės.

Andrejus Robu , Barselonos „Robu Studio“ dizaino direktorius, yra vienas iš jos gerbėjų. „Greitiems maketams tai puiku“, - sako jis. „Tai labai lengva sąsaja, įkelta daugybė nuotraukų ir puikiai tinka nuotaikų lentoms. Prototipai yra labai naudingi norint parodyti klientams, kaip viskas veikia, ypač todėl, kad turinį galite iš karto perduoti internete “.

Ellis Rogers, grafikos dizaineris Receptional Ltd taip pat rekomenduoja. „Kai dizainas / prototipas ar vielinis rėmas bus baigtas,„ Adobe XD “leidžia labai greitai pasirinkti elementus ir sukurti puslapio perėjimus veikiančiam prototipui, kurį galima bendrinti per nuorodą“, - aiškina jis. „Nuoroda taip pat leidžia surinkti atsiliepimus kiekviename puslapyje, kad viskas būtų tvarkinga. Nuorodą galima atnaujinti „Adobe XD“, kad klientas visada galėtų pamatyti naujausią versiją, nesijaudindamas dėl neteisingų versijų. Visiškas džiaugsmas dirbti “.

04. Stebuklas

Stebuklas

„Marvel“ komplekte yra integruotas vartotojo testavimo įrankis(Vaizdo kreditas: „Marvel“)

„Marvel“ yra dar vienas interneto dizaino įrankis, kuris puikiai tinka greitai kurti idėjas, patobulinti sąsają, kaip norite, kad ji atrodytų, ir kurti prototipus. Stebuklas siūlo tikrai tvarkingą puslapių kūrimo būdą, leidžiantį imituoti savo dizainą naudojant prototipą. Yra keletas puikių integracijų, kaip įterpti savo dizainą į projekto darbo eigą. Įdomu tai, kad yra integruota vartotojo testavimo funkcija, kuri vis dar yra gana neįprasta interneto dizaino įrankiuose. Viskas taip pat internete, todėl nereikia nieko atsisiųsti.

05. Figma

„Figma“ leidžia jums realiu laiku kurti, prototipuoti ir rinkti atsiliepimus su kitais dizaineriais [Paveikslėlis: Figma]

Figma yra sąsajos projektavimo įrankis, leidžiantis keliems dizaineriams bendradarbiauti realiuoju laiku. Tai labai efektyvu, kai projekte turite keletą suinteresuotųjų šalių, kurios dalyvauja formuojant rezultatą. Jis pasiekiamas naršyklėje arba „Windows“, „Mac“ ar „Linux“ ir yra nemokamų ir mokamų versijų, atsižvelgiant į tai, kam ją naudojate.

Štai keletas išskirtinių savybių:

„„ Figma “turi panašų USP kaip„ Sketch “, išskyrus tai, kad jis yra tarp platformų“, - aiškina priekinės dalies dizaineris Benjaminas skaitė . „Kai ją panaudojau kurdamas kelias piktogramas, darbo eiga buvo neįtikėtinai sklandi. Man nereikėjo laiko mokytis, o man buvo naudinga bendradarbiauti: programoje galite bendrinti grafiką su kitais. “

„Savo darbui bandžiau pereiti prie„ Linux “ir kartais mes naudojame„ Windows “, todėl Figma man yra prasminga praktiškai“, - priduria jis.

Laisvai samdomas turinio rašytojas ir meno kūrėjas Davidas Eastwoodas taip pat turi gerų dalykų pasakyti apie Figmą. „Tai taip pat buvo tikrai naudinga priemonė, kai mums reikėjo greitai tyčiotis iš MVT; kartais nedideli esamo maketo papildymai. Mums patinka, kad galite greitai sukurti stalinių, planšetinių ir mobiliųjų telefonų dizainus. “

06. „Affinity Designer“

„Affinity Designer“ yra tokia pat galinga „iPad“, kaip ir darbalaukyje [„Affinity Designer“)(Vaizdo kreditas: „Serif“)

„Serifas“ „Affinity Designer“ kai kurie vadino „Photoshop killer“, ir nesunku suprasti, kodėl “, - sako produktų dizaineris Ir Edvardsas . „Buvo keletas funkcijų, kurios man labai patiko, įskaitant reguliuojamus, nesugriaunamus sluoksnius. Tai iš esmės reiškia, kad galite koreguoti vaizdus ar vektorius, nepažeisdami jų.

1 000 000 procentų priartinimas buvo tik palaima; tai ypač naudinga dirbant su vektoriniu menu, nes jūs tikrai galite suartėti. Anuliavimo ir istorijos funkcijos taip pat yra labai patogios: „Affinity“ leidžia grįžti daugiau nei 8000 žingsnių! “

„Kuriant dizainą, vartotojo sąsaja jaučiasi pažįstama. Atrodo, kad persikėlę iš „Photoshop“ visi nori pradėti iš naujo, o tai gali kelti tikrą iššūkį. „Affinity“ padarė tai, kad išdėstymas būtų gerai žinomas, tuo pačiu sugriežtinant viską ir slepiant blaškymąsi. Aš nesunkiai galėjau šokti tiesiai ir kurti dizainą “.

Taip pat yra „Affinity Designer“ skirta „iPad“ . Ir atkreipkite dėmesį, kad tai nėra sumažinta mobiliosios programos versija, kurios galite tikėtis: tai ta pati pilna versija, kurią gaunate darbalaukyje.

Nepraleiskite mūsų vadovų, kaip naudotis „Pixel“ asmuo , Eksportuoti asmenį ir Rašiklio įrankis filme „Affinity Designer“. Taip pat atkreipkite dėmesį, kad „Serif“ taip pat suteikia „Photoshop“ alternatyvą, Bendrų interesų nuotrauka ir „InDesign“ alternatyva, „Affinity“ leidėjas ; kurie visi gražiai žaidžia kartu.

Maketai ir prototipai

07. „UXPin“

Naudodami „UXPin“ galite prototipuoti naudodami interaktyvias būsenas ir logiką(Vaizdo kreditas: UXPin)

Kitas mūsų sąraše esantis interneto dizaino įrankis yra „UXPin“. Ši speciali prototipų kūrimo programa pasiekiama „Mac“, „Windows“ arba naršyklėje. Naudodamiesi daugeliu kitų dizaino įrankių, galite imituoti sąveiką tik susiedami skirtingus elementus savo dailylentėje. „UXPin“ priartėja prie kodo ir leidžia dirbti su interaktyviomis būsenomis, logika ir kodo komponentais.

Yra integruotos „iOS“, „Material Design“ ir „Bootstrap“ elementų bibliotekos, be to, šimtai nemokamų piktogramų rinkiniai , kad padėtų jums jūsų kelyje. „UXPin“ taip pat neseniai pristatė pritaikymo neįgaliesiems funkcijas, kad jūsų dizainas atitiktų WCAG standartus, kuriems mes pritariame.

API užklausa yra naujausias „UXPin“ sąveikos galimybių priedas. Ši funkcija leidžia jums prototipuoti programą, „kalbančią“ su jūsų produktais tiesiogiai iš jūsų dizaino įrankio - nereikia kodo. Tai veikia leidžiant jums siųsti HTTP užklausas į išorinę API.

Pirmąjį prototipą galite sukurti UXPin nemokamai, ir jei jums tinka, pereikite prie mokamos mėnesinės prenumeratos (yra komandos narystės). „UXPin“ neseniai patobulino integraciją su „Sketch“, todėl tai gali būti viena, kurią galite įtraukti į savo darbo eigą, jei esate „Sketch“ ventiliatorius, kuriam prototipų kūrimo galimybės yra ribojamos.

08. Proto.io

Šis įrankis padeda sukurti tikroviškus prototipus

Šis įrankis padeda sukurti tikroviškus prototipus(Vaizdo kreditas: Proto.io)

Proto.io yra geriausia programa, leidžianti sukurti tikroviškus prototipus, kurie prasideda nuo grubių idėjų ir baigiasi visaverčiais dizainais. Šis įrankis taip pat suteikia jums daugybę galimybių įgyvendinti jūsų projektus, įskaitant išsamią ir pasirinktinę vektorinę animaciją.

kaip piešti kopijų žymekliais

Galite pradėti nuo pradinių idėjų kūrimo ranka pieštu stiliumi, suformuoti jas į vielinius rėmus ir užbaigti aukštos kokybės prototipu. „Sketch“ ir „Photoshop“ papildiniai padeda, jei norite kurti naudodamiesi kitais įrankiais, tačiau „Proto.io“ puikiai tvarko projektavimo procesą nuo galo iki galo. Kitos funkcijos - pavyzdžiui, vartotojo bandymai - padės patvirtinti jūsų dizainą. Tai „viskas viename“ sprendimas, kurį jau naudoja daugybė patikimų prekės ženklų.

Yra daugybė puikių demonstracinių versijų, su kuriomis norite žaisti, ir jūs tikrai galite pamatyti, kaip lengvai šis „galas iki galo“ sprendimas gali pakeisti daugybę šiuo metu naudojamų įrankių. Palyginti naujausi papildymai, „Proto.io“ neseniai įtraukė daugybę naujų funkcijų - įskaitant turto valdytojus, kūrėjų vadovus ir galimybę įrašyti jūsų prototipą - suderinti šį įrankį su daugeliu geresnių prototipų kūrimo įrankių.

09. Balsamiq

„Balsamiq“ puikiai tinka greitam laidų formavimui(Vaizdo kreditas: „Balsamiq“)

Jei greito ir efektyvaus vielinio rėminimo yra tai, ko tada ieškote Balsamiq yra tvirtas pasiūlymas. Galite lengvai sukurti savo projektų struktūrą ir išdėstymą. Nuvilkimo elementai palengvina gyvenimą, o mygtukus galite susieti su kitais puslapiais. Kurdami laidą, galite greitai pradėti planuoti savo sąsajas ir dalytis jomis su savo komanda ar klientais. „Balsamiq“ tęsiasi nuo 2008 m. Ir didžiuojasi savo neištikimu, greitu ir tikslingu požiūriu.

10. „ProtoPie“

Pradėkite žaisti naudodami vietinius jutiklius naudodami šį įrankį

Pradėkite žaisti naudodami vietinius jutiklius naudodami šį įrankį(Vaizdo kreditas: „ProtoPie“)

Interneto dizaino įrankis Protopic leidžia kurti sudėtingas sąveikas ir priartėti prie savo dizaino idealios pabaigos funkcijos. Galbūt išskirtinė funkcija yra galimybė valdyti prototipo išmaniųjų įrenginių jutiklius, tokius kaip pakreipimo, garso, kompaso ir „3D Touch“ jutikliai. Priklausomai nuo jūsų projekto, tai yra puikus įrankis tiems, kurie nori apimti vietinių programų funkcijas. Tai lengva kaip pyragas ir nereikia kodo.

Neseniai išleistoje 4.2 versijoje yra dvi naujos labai reikalingos funkcijos: dabar galite pridėti redaguojamų SVG prie savo scenų ir iškart pasirinkti atstumą tarp dviejų sluoksnių.

11. „MockFlow“

Šis įrankis puikiai tinka šaipytis iš grubių idėjų(Vaizdo kreditas: „MockFlow“)

„MockFlow“ yra programų rinkinys, skirtas kurti ir kurti svetaines. „WireframePro“ padeda išdėstyti pradinę idėją ir tada kartoti, kol ji bus tinkama - jums tai padės vartotojo sąsajos peržiūros stebėjimo priemonė. Jame yra tūkstančiai iš anksto sukurtų komponentų ir išdėstymų, kuriuos galite pritaikyti, kad atitiktų jūsų reikalavimus, ir yra peržiūros režimas, kaip pristatyti savo darbą kolegoms ir klientams.

Kai atliksite laidų rėmus, likusi komplekto dalis gali padėti jums planuoti savo svetainę, įskaitant informacijos architektūrą, stiliaus vadovo sudarymą (tai gali būti sukurta automatiškai) ir prisijungimo procesą.

Jei norite pamatyti keletą kitų parinkčių, peržiūrėkite mūsų viršutinę dalį vielos rėmo įrankiai .

12. „Adobe Comp.“

„Adobe Comp.“ yra fantastinis „iPad“ interneto dizaino įrankis, padedantis kurti vielinius rėmus, prototipus ir išdėstymo koncepcijas tinklalapiams. „Creative Cloud“ valdoma intelektuali eskizų juosta, jei norite. Jame yra pagrindiniai šablonai, skirti daugybei mobiliųjų telefonų ir žiniatinklio maketų, ir net galite spausdinti, jei tai jūsų reikalas, ir jūs galite sukurti greitas vietos rezervavimo vietas, piešdami intuityvias figūras vaizdams, tekstui ir kitam. „Comp“ paverčia grubius kontūrus tiesiomis linijomis, apskritimais ir stačiakampiais.

Nenuostabu, kad „Adobe“ nematė tikslo įtraukti tiesioginį eksportą į XD - beprotiška! - nepaisant seniai prašymą kad buvo peržiūrėta, atrodo, amžinai. Tačiau eksportavimas į „Photoshop“ yra įmontuotas (kartu su „Illustrator“ ir „InDesign“), o kai jūsų maketo patikslinimai atliekami visur esančiame vaizdų redagavimo priemonėje, galite eksportuoti iš ten į XD. Nepaisant šio nepageidaujamo papildomo „Adobe“ bhaktos „wireframer“ vartotojo kelio žingsnio, „Comp“ visiškai nusipelno savo įtraukimo į šį sąrašą, turėdamas visas galimybes, patogumą naudoti ir įspūdingą vartotojo sąsają.

13. Flinto

Flinto sąsaja

Sukurkite būsenas prieš ir po, o Flinto išsiaiškins skirtumą ir atgaivins jus(Vaizdo kreditas: Flinto)

„Flinto“ yra dizaino įrankis, leidžiantis jums sukurti unikalią sąveiką savo dizainuose. Galite naudoti daugybę gestų ir lengvai pereiti, sukurdami būsenas prieš ir po. Flinto paprasčiausiai išsiaiškina skirtumus ir atgaivina jus - labai naudinga.

Turėkite omenyje, kad tai tik „iOS“, bet pradėjus naudotis, ji jausis pažįstama. Internetu yra dokumentų, kurie jums padės, o importuoti iš „Sketch“ ir „Figma“ taip pat paprasta.

14. Ašis

Ašies sąsaja

Vielinio rėmo sudėtingos sąsajos su dinaminiais duomenimis(Vaizdo kreditas: „Axure“)

Axure visada buvo viena iš geriausių laidų kūrimo priemonių rinkoje, puikiai tinkanti sudėtingiems projektams, kuriems reikalingi dinamiški duomenys. Naudodami „Axure“ galite iš tikrųjų sutelkti dėmesį į projektų, kurie yra techniniai ir kuriems reikia skirti daug dėmesio, struktūrą ir duomenis.

„Axure“ perdavimo procesas apima išsamių specifikacijų sukūrimą, kurios kūrėjams padės sukurti jūsų dizainą atitinkantį galutinį produktą.

15. Justinmindas

Justinmind

„Justinmind“ integruojasi su tokiais įrankiais kaip „Sketch“ ir „Photoshop“(Vaizdo kreditas: JustInMind)

Justinmind padės kurti prototipus ir integruosis su kitais įrankiais, tokiais kaip „Sketch“ ir „Photoshop“. Norėdami pasirinkti prototipą, galite pasirinkti sąveiką ir gestus. Jame taip pat yra vartotojo sąsajos rinkinių, todėl galite greitai sudėti ekranus ir tai taip pat reaguoja.

16. Skystis

Skysčio sąsaja

Skystis yra puikus greitas vartotojo sąsajos dizainas(Vaizdo kreditas: „Fluid“)

Skystis yra paprastas ir intuityvus įrankis kuriant greitus prototipus ir kuriant dizainą. Tai supakuoja keletą puikių „ne dėžutėje“ esančių turtų, kad galėtumėte greitai naudotis prototipais. Atnaujinę tikrai lengva surinkti savo simbolius su jūsų pageidaujamais vartotojo sąsajos ištekliais. Šis įrankis siūlo labai greitą vartotojo sąsajos dizainą, turimą turtą tiek aukštos, tiek žemos kokybės prototipams.

17. Sąveika

Sąveika padeda išlaikyti visus viename puslapyje [Vaizdas: Sąveika]

Sąveika padeda išlaikyti visus viename puslapyje [Vaizdas: Sąveika](Vaizdo kreditas: „Interplay“)

Sąveika yra prototipų kūrimo sistema, kuri pagerina jūsų komandos bendravimą ir bendradarbiavimą, ypač tarp dizainerių ir kūrėjų. Jis sukurtas atsižvelgiant į projektavimo sistemas ir integruojamas su jūsų kodu, kad būtų sukurta lengvai stebima ir automatiškai atnaujinama dokumentacija. Visų tame pačiame puslapyje atnaujinimas yra pagrindinė funkcija - taigi, atnaujinant kodą, keičiasi ir jūsų dizainas. „Interplay“ vis dar yra beta versijoje, tačiau jau veikia su daugeliu didelių projektavimo ir kūrimo įrankių.

Dizaino rėmai ir bibliotekos

18. Bootstrap

Senas mėgstamas „Bootstrap“ turi keletą galingų naujų atnaujinimų

Bootstrap tikrai nėra nauja priemonė, tačiau ji sukėlė revoliuciją ir toliau formuoja tai, kaip mes kuriame žiniatinklį.

Rašymo metu naujausia versija (4.4.1, paleista 2019 m. Lapkričio mėn.) Buvo pristatyti nauji reaguojantys konteineriai, kurie yra skysti iki tam tikro lūžio taško, ir naujos reaguojančios .row-cols klasės, skirtos efektyviai nurodyti stulpelių skaičių pertraukimo taškuose.

„Bootstrap“ taip pat neseniai pristatė savo atvirojo kodo piktogramų biblioteką, Bootstrap piktogramos , sukurta dirbti su „Bootstrap“ komponentais.

Surask geriausios nemokamos „Bootstrap“ temos mūsų vadove .

19. Paleidimas 3

Sukurkite „Bootstrap“ svetainę nerašydami kodo [Vaizdas: Designmodo](Vaizdo kreditas: Designmodo)

Jei jums patinka „Bootstrap“, bet nenorite pasinerti į neapdorotą dalyką, „Startup 3“ yra paprastas būdas; tai internetinė programa su įmontuotais šablonais ir temomis svetainių kūrimui pagal „Bootstrap 4“ su 12 stulpelių tinkleliu. Galite sukurti savo svetainę nerašydami kodo naudodami „drag and drop“ sąsają, tačiau norint užbaigti reikalingas tam tikras HTML ir CSS žinojimas.

20. Vue.js

Nenaudojate sudėtingų „JavaScript“ bibliotekų? „Vue.js“ puikiai tinka jums [Vaizdas: Vue.js]

Vue.js yra vartotojo sąsajų kūrimo sistema ir naudojama virtuali DOM. Kaip rodo pavadinimas, pagrindinė „Vue“ biblioteka yra orientuota į rodinio sluoksnį.

Pažvelkite į kodo pavyzdį, paimtą iš „Vue“ dokumentų, kuris naudoja vartotojo įvestį ir demonstruoja bibliotekos eleganciją. Pradėsime nuo HTML:

{{ message }}

Reverse Message

Atkreipkite dėmesį į pasirinktinį „V-on“ tvarkyklę, kuri iškviečia atvirkštinis pranešimas metodas. Štai „JavaScript“:

var myApp = new Vue({ el: '#example', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split(''). reverse().join('') } } });

Šiame pavyzdyje pastraipa buvo užpildyta duomenimis ir apibrėžta atvirkštinis pranešimas metodas. „Vue“ puikiai tinka tiems, kurie mažiau patyrę sudėtingų bibliotekų, tačiau taip pat turi daugybę papildinių, padedančių kurti sudėtingas vieno puslapio žiniatinklio programas.

21. Rašto laboratorija

„Pattern Lab“ remiasi „Atomic Design“ [Paveikslėlis: Pattern Lab]

„Pattern Lab“ yra gražus modeliu pagrįstas dizaino įrankis, kurį sukūrė Dave'as OIsenas ir Bradas Frostasas. Tai pagrįsta Atominis dizainas , kuriame sakoma, kad turėtumėte suskirstyti savo dizainą į mažiausias jo dalis - atomus - ir juos sujungti, kad susidarytumėte didesnius, daugkartinio naudojimo komponentus - molekules ir organizmus - kuriuos vėliau būtų galima paversti tinkamais šablonais.

Nors savo esme tai yra statinis svetainės generatorius, sujungiantis vartotojo sąsajos komponentus, yra daug daugiau Rašto laboratorija negu tai. Tai kalbos ir įrankių agnostika; tai leidžia jums įdėti vartotojo sąsajų modelius vienas į kitą ir kurti dinaminius duomenis; jame yra prietaiso-agnostikos peržiūros srities dydžio keitimo įrankiai, kurie padės jums užtikrinti, kad jūsų dizaino sistema būtų visiškai reaguojanti; ir jis yra visiškai išplečiamas, todėl galite būti tikri, kad jis išsiplės, kad atitiktų jūsų poreikius.

22. Medžiagų dizainas

Medžiagų dizainas yra „Google“ principų rinkinys [Vaizdas: „Google“](Vaizdo kreditas: „Google“)

Medžiagų dizainas yra vaizdinė „Google“ kalba, kuria siekiama sujungti klasikinius gero dizaino principus su technologijų ir mokslo naujovėmis, kad jūsų svetainė būtų vientisa ir lanksti.

Svetainės ir programos, sukurtos naudojant „Material Design“ sistemą, atrodys šiuolaikiškai ir bus žinomos vartotojui, todėl žmonėms bus lengva iš karto naudoti jūsų produktą. Yra daugybė priemonių, galinčių padėti kuriant šią projektavimo sistemą; Naršymo juostoje spustelėkite ištekliai, kad juos rastumėte.

GeneruotiJS reklamjuostę

(Vaizdo kreditas: „Future“ / Toa Heftiba, „Unsplash“)

Prisijunkite prie mūsų 2020 m. Balandžio mėn., Naudodamiesi „JavaScript“ superžvaigždžių grupe „GenerateJS“ - konferencijoje, padedančioje sukurti geresnę „JavaScript“. Užsisakykite dabar generateconf.com

Kitas puslapis: specializuoti interneto dizaino įrankiai, skirti spręsti bet kokias problemas

  • 1
  • du

Dabartinis puslapis: Puslapis 1

kaip sustabdyti „icloud“ saugyklą, yra visas pranešimas
Kitas puslapis 2 puslapis