52 de instrumente de proiectare web pentru a vă ajuta să lucrați mai inteligent în 2021

Cele mai bune instrumente de proiectare web: Fotografie de John Kappa pe Unsplash
(Credit de imagine: Fotografie de John Kappa pe Unsplash)
Pagina 1 din 2: Pagina 1 SARI LA:

Există atât de multe instrumente excelente de design web în aceste zile. Indiferent de problema pe care încercați să o rezolvați în fluxul de lucru de design web, este probabil ca cineva să fi creat un instrument pentru acesta, indiferent dacă este vorba de un utilitar independent sau de o caracteristică dintr-o aplicație mai mare. Și, deși comunitatea de design web s-a schimbat foarte mult încă din primele zile, există încă un spirit de a vă împărtăși munca, așa că multe dintre aceste instrumente grozave sunt gratuite.

Proliferarea instrumentelor este o mare binecuvântare, dar vă poate lăsa să vă simțiți răsfățați pentru alegere, deoarece există atât de multe modalități de a face același lucru. În acest articol, am completat ceea ce considerăm că sunt cele mai bune instrumente din acest moment. Bineînțeles că nu este o listă exhaustivă, dar, sperăm, reducând-o și evidențiind unele dintre cele mai bune, vă vom face mai ușor să puneți împreună setul de instrumente potrivit pentru fluxul dvs. de lucru.

Deoarece aceasta este o listă destul de lungă, am aranjat instrumentele în secțiuni pentru a facilita navigarea articolului. Pe această pagină veți găsi un software complet de proiectare web, urmat de instrumente dedicate de bază pentru wireframing, precum și cadre și biblioteci de proiectare web. În pagina a doua, există o gamă de instrumente mai mici și mai specializate pentru orice, de la lucrul cu imagini până la practicarea AR și VR.



În timp ce sunteți aici, vă recomandăm să verificați rezumatele de cele mai bune servicii de găzduire web si cei mai buni constructori de site-uri web pentru 2020

celebră fotografie de natură moartă alb-negru

Generează banner JS

Faceți clic pe imagine pentru a afla mai multe și pentru a vă cumpăra biletele(Credit de imagine: Future / Toa Heftiba, Unsplash)

Instrumente complete de proiectare

01. InVision Studio

InVision își propune să fie singurul instrument de interfață pentru dvs.

InVision își propune să fie singurul instrument de interfață de care veți avea nevoie vreodată(Credit imagine: InVision)

InVision Studio își propune să acopere toate bazele și să fie singurul instrument UI de care aveți nevoie. Acesta vine cu o mulțime de funcții pentru a vă ajuta să creați interfețe interactive frumoase, inclusiv instrumente pentru prototipare rapidă, design receptiv și colaborativ și lucrul cu sisteme de proiectare.

Dacă folosiți deja InVision cu instrumente precum Sketch, există destul de mult crossover în funcții. Cu toate acestea, puterea Studio rezidă în departamentul de prototipuri, mai ales dacă designul dvs. implică animație. Prototiparea rapidă vă va permite să creați tranziții complexe și imaginative, permițându-vă să atingeți cu adevărat nivelul de animație dorit. Descoperiți pur și simplu cum doriți ca interfața dvs. de utilizare să privească la începutul tranziției sale, apoi să proiectați rezultatul final. InVision Studio va rezolvă restul.

Mai mult decât atât, puteți crea aceste animații și tranziții personalizate dintr-o serie de gesturi și interacțiuni, cum ar fi glisarea, clicul și deplasarea.

Când ați terminat, exportați-vă prototipurile prin InVision și invitați oamenii să colaboreze. Puteți vizualiza proiectul pe platforma propusă - o modalitate excelentă de a explora și testa testul dvs. Clienții vor putea apoi să comenteze direct proiectul.

În plus, nu vă mai puteți gândi să creați numeroase planșe de artă pentru mai multe dispozitive - motorul de aspect al Studio vă va ajusta automat designul pe orice ecran. Acest economisire de timp vă oferă spațiu pentru a vă gândi mult mai mult la designul dvs.

02. Schiță

Sketch a înlocuit Photoshop ca instrument de design UI ales de mulți designeri web [Imagine: Bohemian Coding]

Sketch a înlocuit Photoshop ca instrument de design UI ales de mulți designeri web [Imagine: Bohemian Coding](Credit de imagine: Bohemian Coding)

Bohemian Coding Schiță este una dintre cele mai utilizate platforme de design web; este un instrument puternic bazat pe vectori pentru construirea de interfețe și prototipuri într-un mod colaborativ. Sketch a fost conceput special pentru a crea site-uri web și aplicații, astfel încât să nu existe funcții inutile care să aglomereze interfața și este mai rapid și mai eficient decât software-ul care are un domeniu de aplicare mai larg.

Rory Berry, director creativ la Superrb , a făcut trecerea la Sketch în 2017 și o recomandă cu tărie. „În comparație cu Photoshop, sortarea tuturor documentelor și revizuirea pe Sketch este mult mai ușoară”, începe el. „Sketch are documente mici, în timp ce Photoshop are documente mari. Datorită faptului că este o aplicație bazată pe vector, dimensiunile fișierelor sunt dramatic mai mici în comparație cu Photoshop. ”

Și asta nu este tot. „Sistemul de rețea încorporat din Sketch este excelent și facilitează mult designul interfeței. Cred că interfața generală și simțul minim îl fac mult mai curat în proiectare și ușor de utilizat. Photoshop pare foarte complicat în comparație. ”

Comunitatea oferă sute de Schiță pluginuri pentru a vă face fluxul de lucru de proiectare mai ușor și mai lin.

Dezavantajul Sketch este că este disponibil numai pe Mac și nu există planuri pentru a sprijini alte sisteme de operare. Aceasta a fost o problemă, deoarece designerii vor dori adesea să partajeze fișiere .sketch cu dezvoltatorii care utilizează Windows. Din fericire există acum o aplicație „Sketch for Windows” numită Nebunie care va deschide și edita fișiere .sketch și va elimina cea mai mare parte a acestei probleme - citiți despre aceasta în Exportul și conversia secțiunea acestui articol.

Nu ratați-o pe a noastră sfaturi de top pentru utilizarea Sketch .

03. Adobe XD

Adobe XD are o interfață ușoară care vă permite să faceți prototip cu ușurință

Adobe XD are o interfață ușoară care vă permite să faceți prototip cu ușurință(Credit de imagine: Adobe)

Adobe XD oferă cel mai bun mediu pentru proiecte digitale în cadrul suitei Adobe Creative Cloud. Dacă sunteți un utilizator Adobe îndrăgostit și nou în XD, este posibil ca interfața să nu fie prea „asemănătoare cu Adobe” pentru început. Cu toate acestea, se stochează până la celelalte instrumente de conducere de acolo. Este un salt dacă ați proiectat și în Photoshop de ceva vreme, dar merită foarte mult pentru designul UI.

Acest instrument de proiectare vectorială și wireframing continuă să se îmbunătățească, cu adăugiri precum suport pentru prototiparea vocii asigurându-vă că instrumentul poate ține pasul cu ultimele tendințe în UX. XD include instrumente de desen, instrumente care vă permit să definiți interacțiuni nestatice, previzualizări mobile și desktop și instrumente de partajare pentru a oferi feedback cu privire la design-uri. Vă permite să selectați dimensiunea unei planșe de lucru specifice dispozitivului pentru a începe un proiect și puteți chiar să importați un kit de interfață populară, de exemplu, Material Design de la Google.

În mod crucial, Adobe XD se integrează cu restul Creative Cloud, ceea ce înseamnă că veți putea importa și lucra cu materiale de la Photoshop sau Illustrator cu ușurință. Dacă utilizați deja alte aplicații Adobe, interfața de utilizare se va simți bine și familiară și nu ar trebui să prezinte prea multă curbă de învățare.

Andrei Robu , director de design la Robu Studio din Barcelona, ​​se numără printre fanii săi. „Pentru machete rapide este minunat”, spune el. „Este o interfață foarte ușoară, cu multe fotografii încărcate și excelentă pentru moodboard-uri. Prototiparea este foarte utilă pentru a le arăta clienților cum funcționează lucrurile, mai ales pentru că puteți împinge conținutul online imediat. '

Ellis Rogers, grafician la Receptional Ltd. îl recomandă, de asemenea. „Când proiectul / prototipul sau wireframe-ul este complet, Adobe XD vă permite să selectați foarte repede elemente și să creați tranziții de pagină pentru un prototip funcțional, care poate fi partajat printr-un link”, explică el. „Link-ul vă permite, de asemenea, să adunați feedback pe pagină, menținându-l pe toate organizate. Link-ul poate fi actualizat în Adobe XD, astfel încât clientul să poată vedea întotdeauna cea mai recentă versiune, fără a fi nevoit să se îngrijoreze de versiunile incorecte. Este o bucurie absolută să lucrezi cu el.

04. Marvel

Minune

Marvel vine cu un instrument integrat de testare a utilizatorilor(Credit de imagine: Marvel)

Marvel este un alt instrument de proiectare web excelent pentru a produce idei rapide, pentru a rafina o interfață cu modul în care doriți să arate și pentru a construi prototipuri. Minune oferă un mod foarte elegant de a construi pagini, permițându-vă să vă simulați designul printr-un prototip. Există câteva integrări minunate pentru inserarea proiectelor în fluxul de lucru al proiectului. Interesant este faptul că există o funcție integrată de testare a utilizatorilor, care este încă destul de neobișnuită în domeniul instrumentelor de design web. Și totul este online, deci nu este nevoie să descărcați nimic.

05. Figma

instrumente de proiectare web: Figma screengrab

Figma vă permite să proiectați, să prototipați și să adunați feedback cu alți designeri în timp real [Imagine: Figma]

Figma este un instrument de proiectare a interfeței care permite mai multor designeri să colaboreze în timp real. Acest lucru este foarte eficient atunci când aveți mai multe părți interesate în proiect care sunt implicate în conturarea rezultatului. Este disponibil în browser sau pe Windows, Mac sau Linux și există atât versiuni gratuite, cât și plătite, în funcție de ce îl folosiți.

Iată câteva dintre caracteristicile sale remarcabile:

„Figma are un USP similar cu Sketch, cu excepția faptului că este multiplataforma”, explică designerul frontend Benjamin Read . „Când l-am folosit pentru a crea câteva pictograme, am găsit fluxul de lucru incredibil de neted. Nu mi-a luat timp să învăț și am avut avantajul suplimentar de a fi colaborator: puteți partaja grafică cu alții în cadrul aplicației. '

„Am încercat să trec la Linux pentru munca mea și uneori folosim Windows, așa că Figma are sens pentru mine din punct de vedere practic”, adaugă el.

Scriitor și lucrător de conținut independent David Eastwood are, de asemenea, lucruri bune de spus despre Figma. „A fost, de asemenea, un instrument cu adevărat util atunci când a trebuit să ne batjocorim rapid MVT-urile; uneori mici adăugiri la un aspect existent. Ne place că puteți crea rapid modele pentru desktop, tabletă și mobil. '

06. Designer de afinitate

Affinity Designer este la fel de puternic pe iPad ca și pe desktop [Affinity Designer]

Affinity Designer este la fel de puternic pe iPad ca și pe desktop [Affinity Designer](Credit imagine: Serif)

- Serif Designer de afinitate a fost supranumit „ucigașul Photoshop” de către unii și este ușor de văzut de ce ”, spune designerul de produse Și Edwards . „Au fost câteva caracteristici care mi-au plăcut foarte mult, inclusiv straturi reglabile, nedistructive. Aceasta înseamnă, în esență, că puteți regla imagini sau vectori fără a le deteriora.

„Zoomul de 1.000.000 la sută a fost doar o fericire; este util mai ales atunci când lucrezi cu arta vectorială, deoarece poți să te apropii cu adevărat. Caracteristicile de anulare și istoric sunt, de asemenea, foarte utile: Affinity vă permite să reveniți peste 8.000 de pași! '

„Când vine vorba de proiectare, interfața de utilizare se simte familiară. Când se mută din Photoshop, toată lumea pare să vrea să o ia de la capăt, ceea ce poate reprezenta o adevărată provocare. Ceea ce a făcut Affinity este să păstreze aspectul familiar, în timp ce strângeți totul și ascundeți distracțiile. Am reușit cu ușurință să sar direct și să mă proiectez.

Affinity Designer este de asemenea disponibil pentru iPad . Și rețineți că aceasta nu este versiunea redusă a aplicației mobile la care v-ați putea aștepta: este aceeași versiune completă pe care o obțineți pe desktop.

Nu ratați ghidurile noastre pentru utilizarea Persoană Pixel , Exportă persoana si Instrument pentru stilou în Affinity Designer. De asemenea, rețineți că Serif face și o alternativă Photoshop, Foto de afinitate și o alternativă InDesign, Affinity Publisher ; toate care se joacă frumos împreună.

Mașini și prototipuri

07. UXPin

UXPin: instrumente de proiectare web

UXPin vă permite să faceți prototip cu stări interactive și logică(Credit imagine: UXPin)

Următorul instrument de design web din lista noastră este UXPin. Această aplicație dedicată de prototipare este disponibilă pentru Mac, Windows sau în browser. Cu majoritatea celorlalte instrumente de proiectare, puteți imita interacțiunile doar prin legarea diferitelor elemente de pe planșa dvs., UXPin se apropie de cod și vă permite să lucrați cu stări interactive, logică și componente de cod.

Există biblioteci de elemente integrate pentru iOS, Material Design și Bootstrap, plus sute de seturi de pictograme gratuite , pentru a vă ajuta în drum. De asemenea, UXPin a introdus recent funcții de accesibilitate pentru a vă asigura că proiectele dvs. rămân în concordanță cu standardele WCAG, pe care le aplaudăm.

Cererea API este cea mai recentă adăugire la capabilitățile de interacțiuni ale UXPin. Funcția vă permite să prototipați aplicația care „vorbește” cu produsele dvs. direct din instrumentul dvs. de proiectare - fără a fi nevoie de cod. Funcționează permițându-vă să trimiteți solicitări HTTP către un API extern.

Puteți crea primul dvs. prototip în UXPin gratuit și, dacă vă convine, treceți la un abonament lunar plătit (sunt disponibile abonamente la echipă). UXPin și-a îmbunătățit recent integrarea cu Sketch, deci ar putea fi unul de introdus în fluxul dvs. de lucru dacă sunteți un fan Sketch care consideră că limitează capacitățile sale de prototipare.

08. Proto.io

Acest instrument vă ajută să creați prototipuri realiste

Acest instrument vă ajută să creați prototipuri realiste(Credit imagine: Proto.io)

Proto.io este o aplicație de top care permite începerea unor prototipuri realiste care încep cu idei aspre și se termină cu modele complete. Instrumentul vă oferă, de asemenea, o serie de posibilități pentru proiectele dvs., inclusiv animații vectoriale detaliate și personalizate.

Puteți începe prin a dezvolta idei inițiale cu un stil desenat manual, să le transformați în fire și să le terminați cu un prototip de înaltă fidelitate. Pluginurile Sketch și Photoshop vă ajută dacă doriți să proiectați folosind alte instrumente, dar Proto.io gestionează bine procesul de proiectare end-to-end. Alte caracteristici - testarea utilizatorilor, de exemplu - vă vor ajuta să vă validați proiectele. Aceasta este o soluție all-in-one, cu un număr mare de mărci de încredere care o utilizează deja.

Există o grămadă de demonstrații grozave cu care puteți începe să vă jucați și puteți vedea cu adevărat cât de ușor această soluție end-to-end ar putea înlocui o serie de instrumente existente în prezent. Adăugări relativ recente, Proto.io a inclus recent o gamă largă de caracteristici noi - inclusiv manageri de active, ghiduri pentru dezvoltatori și capacitatea de a vă înregistra prototipul - aliniază acest instrument cu multe dintre instrumentele de prototipare mai bune.

09. Balsamiq

Interfața Balsamiq

Balsamiq este excelent pentru încadrarea rapidă a firelor(Credit imagine: Balsamiq)

Dacă sunteți în căutarea unei încadrări rapide și eficiente Balsamiq este o sugestie puternică. Puteți dezvolta rapid o structură și machete pentru proiectele dvs. cu ușurință. Elementele glisare și plasare ușurează viața și puteți conecta butoane la alte pagini. Prin wireframing, puteți începe rapid să vă planificați interfețele și să le partajați echipei sau clienților dvs. Balsamiq funcționează din 2008 și se mândrește cu abordarea sa fără prostii, fidelă, rapidă și concentrată.

10. ProtoPie

Începeți să vă jucați cu senzori nativi folosind acest instrument

recenzie xara foto și designer grafic
Începeți să vă jucați cu senzori nativi folosind acest instrument(Credit imagine: ProtoPie)

Instrument de proiectare web ProtoPie vă permite să creați interacțiuni complexe și să vă apropiați de funcția finală ideală a designului. Poate că caracteristica deosebită este capacitatea de a controla senzorii dispozitivelor inteligente din prototipul dvs., cum ar fi înclinarea, sunetul, busola și senzorii 3D Touch. În funcție de proiectul dvs., acesta este un instrument excelent pentru cei care doresc să includă caracteristicile aplicației native. Este ușor ca plăcintă și nu este necesar niciun cod.

Versiunea lansată recent 4.2 conține două noi caracteristici extrem de solicitate: acum puteți adăuga SVG-uri editabile la scenele dvs. și puteți găsi distanța dintre două straturi instantaneu la selectare.

11. MockFlow

MockFlow

Acest instrument este excelent pentru a juca idei aspre(Credit de imagine: MockFlow)

MockFlow este o suită de aplicații pentru încadrarea și planificarea site-urilor web. WireframePro vă ajută să vă expuneți ideea inițială și apoi să iterați până când este corect - există un tracker de revizuire a interfeței de utilizare care să vă ajute în acest sens. Acesta vine cu mii de componente și aspecte pre-construite pe care le puteți regla pentru a satisface cerințele dvs. și există un mod de previzualizare pentru a vă prezenta munca colegilor și clienților.

După ce ați realizat wireframe-urile, restul suitei vă poate ajuta cu alte aspecte ale planificării site-ului web, inclusiv arhitectura informațiilor, realizarea unui ghid de stil (acest lucru poate fi generat automat) și lucrul printr-un proces de semnare.

Dacă doriți să vedeți alte opțiuni, consultați rezumatul nostru de sus unelte cu sârmă .

12. Comp. Adobe

Comp. Adobe este un instrument fantastic de proiectare web pentru iPad, care ajută la crearea de fireframes, prototipuri și concepte de aspect pentru pagini web. Un sketchpad inteligent alimentat cu Cloud creativ, dacă doriți. Are șabloane de bază pentru o serie de machete pentru dispozitive mobile și web și chiar tipărește dacă asta îți place, și poți crea substituenți rapidi desenând forme intuitive pentru a reprezenta imagini, text și multe altele. Comp transformă contururile aspre în linii drepte, cercuri și dreptunghiuri.

În mod uimitor, Adobe nu a considerat oportun să includă exportul direct către XD - nebun! - în ciuda o cerere de lungă durată care a fost în curs de examinare pentru ceea ce pare pentru totdeauna. Cu toate acestea, exportul către Photoshop este încorporat (împreună cu Illustrator și InDesign) și, odată ce modificările la macheta dvs. sunt făcute în editorul de imagini omniprezent, puteți exporta de acolo în XD. În ciuda acestui pas suplimentar nedorit în călătoria utilizatorului wireframerului devotat de Adobe, Comp își merită pe deplin includerea în această listă cu capacitățile sale de acces oriunde, ușurința de utilizare și interfața de utilizare impresionantă.

13. Flinto

Interfață Flinto

Proiectați stările înainte și după, iar Flinto va stabili diferența și va anima pentru dvs.(Credit imagine: Flinto)

Flinto este un instrument de proiectare care vă permite să creați interacțiuni unice în cadrul proiectelor dvs. Puteți utiliza o serie de gesturi și puteți efectua tranziții ușoare prin proiectarea stărilor înainte și după. Flinto pur și simplu rezolvă diferențele și animațiile pentru dvs. - foarte util.

Rețineți că acesta este doar iOS, dar vă va fi familiar atunci când începeți să îl utilizați. Există documentație online pentru a vă ajuta pe drumul dvs. și importarea din Sketch și Figma este simplă.

14. Axure

Interfață Axure

Interfețe complexe Wireframe cu date dinamice(Credit de imagine: Axure)

Axure a fost întotdeauna unul dintre cele mai bune instrumente de wireframing de pe piață, excelent pentru proiecte complexe care necesită date dinamice. Cu Axure, vă puteți concentra cu adevărat asupra simulării proiectelor care sunt atât tehnice, cât și care necesită o atenție esențială asupra structurii și datelor.

Procesul de transfer al Axure include crearea de specificații amănunțite care îi ajută pe dezvoltatori să creeze un produs final care să se potrivească cu proiectele tale.

15. Justinmind

Justinmind

Justinmind se integrează cu instrumente precum Sketch și Photoshop(Credit de imagine: JustInMind)

Justinmind va ajuta la realizarea de prototipuri și se integrează cu alte instrumente precum Sketch și Photoshop. Puteți alege interacțiunile și gesturile pentru a vă ajuta să vă asamblați prototipul. De asemenea, conține kituri de interfață, astfel încât să puteți pune împreună ecranele rapid și, de asemenea, este receptiv.

16. Fluid

Interfață fluidă

Fluidul este excelent pentru un design UI rapid(Credit imagine: Fluid)

Fluid este un instrument simplu și intuitiv pentru construirea prototipurilor rapide și elaborarea proiectelor. Pachetează niște active frumoase pentru a vă ajuta să mergeți cu prototipuri rapide. Odată ce ați făcut upgrade, este foarte ușor să vă asamblați propriile simboluri cu propriile materiale UI preferate. Acest instrument oferă un design UI foarte rapid, cu active disponibile atât pentru prototipuri de înaltă, cât și de joasă fidelitate.

17. Interacțiune

Interplay ajută la menținerea tuturor pe aceeași pagină [Imagine: Interplay]

Interplay ajută la menținerea tuturor pe aceeași pagină [Imagine: Interplay](Credit de imagine: Interplay)

Interacţiune este un sistem de prototipare care îmbunătățește comunicarea și colaborarea în echipa dvs., în special între designeri și dezvoltatori. Este construit având în vedere sistemele de proiectare și se integrează cu codul dvs. pentru a genera documentație ușor de urmărit și actualizat automat. Menținerea tuturor pe aceeași pagină și actualizate este o funcție esențială - așa că atunci când codul dvs. se actualizează, la fel și designul dvs. Interplay este încă în versiune beta, dar funcționează deja cu o serie de mari instrumente de proiectare și dezvoltare.

Structuri de proiectare și biblioteci

18. Bootstrap

instrumente de proiectare web: Bootstrap screengrab

Vechiul Bootstrap preferat are câteva noi actualizări puternice

Bootstrap nu este cu siguranță un instrument nou, dar a revoluționat dezvoltarea și continuă să modeleze modul în care construim lucruri pe web.

La momentul scrierii, cea mai recentă versiune (4.4.1, lansată în noiembrie 2019) a introdus noi containere receptive, care sunt fluide până la un anumit punct de întrerupere, și noi clase responsive .row-cols pentru specificarea eficientă a numărului de coloane între punctele de întrerupere.

Bootstrap a lansat, de asemenea, recent propria sa bibliotecă de pictograme open source, Icoane Bootstrap , care este conceput pentru a funcționa cu componentele Bootstrap.

Găsi cele mai bune teme gratuite Bootstrap din ghidul nostru .

19. Pornire 3

Creați un site Bootstrap fără a scrie cod [Imagine: Designmodo]

Creați un site Bootstrap fără a scrie cod [Imagine: Designmodo](Credit de imagine: Designmodo)

Dacă vă place Bootstrap, dar nu doriți să vă scufundați în lucrurile brute, Startup 3 este modalitatea ușoară; este o aplicație online cu șabloane și teme încorporate pentru crearea de site-uri web bazate pe Bootstrap 4 cu o grilă de 12 coloane. Vă puteți construi site-ul fără a scrie cod folosind interfața drag-and-drop, dar veți avea nevoie de cunoștințe despre HTML și CSS pentru a finaliza lucrurile.

20. Vue.js

instrumente de proiectare web: vue.js screengrab

Nu sunteți obișnuit cu bibliotecile JavaScript complexe? Vue.js este perfect pentru dvs. [Imagine: Vue.js]

Vue.js este un cadru pentru construirea interfețelor utilizator și folosește un DOM virtual. Așa cum sugerează și numele, biblioteca principală Vue este concentrată pe stratul de vizualizare.

Uitați-vă la un exemplu de cod, preluat din documentele Vue, care utilizează informațiile utilizatorilor și demonstrează eleganța bibliotecii. Vom începe cu HTML:

mouse-ul de mere vs mouse-ul magic 2

{{ message }}

Reverse Message

Observați handlerul personalizat v-on care apelează Mesaj invers metodă. Iată JavaScript:

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

Acest exemplu a completat paragraful cu date și definește Mesaj invers metodă. Vue este excelent pentru cei mai puțin experimentați cu biblioteci complexe, dar are și o serie de plugin-uri pentru a ajuta la dezvoltarea aplicațiilor web complexe cu o singură pagină.

21. Laboratorul de modele

instrumente de proiectare web: Screengrab Pattern Lab

Pattern Lab se bazează pe proiectarea atomică [Imagine: Pattern Lab]

Pattern Lab este un frumos instrument de design bazat pe modele creat de Dave OIsen și Brad Frost. Se bazează pe conceptul de Design atomic , care spune că ar trebui să vă împărțiți designul în cele mai mici părți ale sale - atomi - și să le combinați pentru a forma componente mai mari, reutilizabile - molecule și organisme - care pot fi apoi transformate în șabloane utilizabile.

Deși în centrul său este un generator de site static care îmbină componentele UI, există multe altele Model de laborator decât că. Este un limbaj și un instrument agnostic; vă permite să cuibăriți modele UI unul în celălalt și să proiectați cu date dinamice; are instrumente de redimensionare a ecranului agnostic de dispozitiv pentru a vă ajuta să vă asigurați că sistemul de proiectare este complet receptiv; și este complet extensibil, astfel încât să puteți fi siguri că se va extinde pentru a satisface nevoile dvs.

22. Proiectarea materialelor

Material Design este un set de principii de la Google [Imagine: Google]

Material Design este un set de principii de la Google [Imagine: Google](Credit de imagine: Google)

Proiectarea materialelor este un limbaj vizual de la Google care își propune să combine principiile clasice ale unui bun design cu inovații în tehnologie și știință pentru a crea o bază coezivă și flexibilă site-ul dvs. web.

Site-urile și aplicațiile create folosind cadrul de proiectare a materialelor vor arăta moderne și vor fi familiare utilizatorului, astfel încât oamenilor le va fi ușor să vă utilizeze produsul imediat. Există multe instrumente disponibile pentru a ajuta la acest sistem de proiectare; faceți clic pe Resurse pe bara de navigare pentru a le găsi.

Generează banner JS

(Credit de imagine: Future / Toa Heftiba, Unsplash)

Alăturați-vă nouă în aprilie 2020 cu gama noastră de superstaruri JavaScript la GenerateJS - conferința care vă ajută să creați JavaScript mai bun. Rezervați acum la generateconf.com

Pagina următoare: instrumente specializate de proiectare web pentru a rezolva orice problemă

  • 1
  • Două

Pagina curenta: Pagina 1

Pagina următoare Pagina 2