52 alata za web dizajn koji će vam pomoći da pametnije radite 2021. godine

Najbolji alati za web dizajn: Foto John Kappa na Unsplash-u
(Slika pripisana: Foto John Kappa na Unsplash-u)
Stranica 1 od 2: Stranica 1 SKOČI NA:

U današnje vrijeme postoji toliko sjajnih alata za web dizajn. Bez obzira koji problem pokušavate riješiti u svom tijeku izrade web stranica, vjerojatno je netko za to izradio alat, bilo da je to samostalni uslužni program ili značajka u većoj aplikaciji. Iako se zajednica web dizajna dosta promijenila od ranih dana, još uvijek postoji duh dijeljenja vašeg rada, pa su mnogi od ovih izvrsnih alata besplatni.

Širenje alata velika je blagodat, ali također se možete osjećati razmaženo zbog izbora, jer postoji toliko mnogo načina da se učini isto. U ovom smo članku zaokružili ono što smatramo najboljim alatima u ovom trenutku. Naravno da to nije iscrpan popis, ali nadamo se da ćemo ga sužavanjem i isticanjem nekih najboljih olakšati sastavljanje pravog alata za vaš tijek rada.



Budući da je ovo prilično dugačak popis, alate smo razvrstali u odjeljke kako bismo članku olakšali navigaciju. Na ovoj stranici pronaći ćete cjeloviti softver za web dizajn, praćen osnovnijim namjenskim alatima za žičano oblikovanje te okvire i knjižnice za web dizajn. Na drugoj stranici nalazi se niz manjih, specijaliziranih alata za sve, od rada sa slikama do blještavila u AR-u i VR-u.



Dok ste ovdje, možda biste htjeli provjeriti zaokruživanja najbolje usluge web hostinga i najbolji graditelji web stranica za 2020. godinu

kako uskladiti tekst u

Generiraj JS natpis



Kliknite sliku da biste saznali više i kupili ulaznice(Slika pripisana: Future / Toa Heftiba, Unsplash)

Kompletni alati za dizajn

01. InVision Studio

InVision želi biti jedini alat za korisničko sučelje

InVision želi biti jedini alat za korisničko sučelje koji će vam ikad trebati(Slika pripisana: InVision)

InVision Studio ima za cilj pokriti sve baze i biti jedini alat za korisničko sučelje koji će vam trebati. Dolazi sa skupom značajki koje vam pomažu stvoriti prekrasna interaktivna sučelja, uključujući alate za brzo izradu prototipa, reagiranje i suradnički dizajn te rad sa sustavima za dizajn.

Ako već upotrebljavate InVision s alatima poput Sketcha, u značajkama je poprilično križanja. Međutim, snaga Studija leži u odjelu za izradu prototipova, pogotovo ako vaš dizajn uključuje animaciju. Brzo izrađivanje prototipa omogućit će vam stvaranje složenih i maštovitih prijelaza, omogućujući vam stvarno postizanje razine animacije koju želite. Jednostavno shvatite kako želite da vaše korisničko sučelje gleda na početak svoje tranzicije, a zatim dizajnirajte krajnji rezultat. InVision Studio za vas radi ostalo.



Povrh toga, možete stvoriti ove prilagođene animacije i prijelaze od niza gesta i interakcija poput prevlačenja, klika i lebdenja.

Kad završite, izvezite svoje prototipove putem InVisiona i pozovite ljude na suradnju. Svoj projekt možete pregledati na predviđenoj mu platformi - sjajan način za istraživanje i testiranje vašeg dizajna. Klijenti će tada moći komentirati dizajn.

Povrh toga, možete prestati razmišljati o stvaranju brojnih umjetničkih ploča za više uređaja - Studijin mehanizam za postavljanje automatski će prilagoditi vaš dizajn bilo kojem zaslonu. Ovaj vam štedi vrijeme daje prostor da razmišljate puno više o svom dizajnu.

02. Skica

Sketch je zamijenio Photoshop kao odabrani alat za izradu korisničkog sučelja za mnoge web dizajnere [Slika: Bohemian Coding]

Sketch je zamijenio Photoshop kao odabrani alat za izradu korisničkog sučelja za mnoge web dizajnere [Slika: Bohemian Coding](Slika pripisana: Bohemian Coding)

Boemsko kodiranje Skica jedna je od najčešće korištenih platformi za web dizajn; to je vrlo moćan alat zasnovan na vektorima za zajedničku izgradnju sučelja i prototipova. Sketch je izrađen posebno za izradu web stranica i aplikacija, tako da nema nepotrebnih značajki koje pretrpavaju vaše sučelje, a brži je i učinkovitiji od softvera koji ima širi opseg.

Rory Berry, kreativni direktor u Superrb , prebacio se na Sketch 2017. godine i toplo ga preporučuje. 'U usporedbi s Photoshopom, sortiranje svih dokumenata i izvršavanje revizija na Skici je puno lakše', započinje. “Sketch ima male dokumente, dok Photoshop ima velike. Budući da je riječ o aplikaciji koja se temelji na vektorima, veličine datoteka su dramatično manje u odnosu na Photoshop. '

I to nije sve. “Ugrađeni mrežni sustav u programu Sketch izvrstan je i znatno olakšava dizajn sučelja. Mislim da cjelokupno korisničko sučelje i minimalan osjećaj čine ga mnogo čišćim za dizajn i jednostavnijim za upotrebu. Photoshop izgleda vrlo komplicirano u usporedbi. '

Zajednica nudi stotine Dodaci za skice kako bi vaš radni postupak dizajna bio lakši i glatkiji.

Loša strana programa Sketch je što je dostupan samo na Macu i ne planira se podržavati drugi operativni sustavi. To je predstavljalo problem jer će dizajneri često htjeti podijeliti .sketch datoteke s programerima koji koriste Windows. Srećom sada postoji aplikacija 'Skica za Windows' pod nazivom Ludilo koji će otvoriti i urediti .sket datoteke i ukloniti većinu te boli - pročitajte o tome u Izvoz i pretvorba odjeljak ovog članka.

Ne propustite naše glavni savjeti za korištenje Sketcha .

03. Adobe XD

Adobe XD ima lagano sučelje koje vam omogućuje jednostavnu izradu prototipa

Adobe XD ima lagano sučelje koje vam omogućuje jednostavnu izradu prototipa(Slika dodijeljena: Adobe)

Adobe XD nudi najbolje okruženje za digitalne projekte u sklopu paketa Adobe Creative Cloud. Ako ste zagriženi korisnik Adobea i novi ste u XD-u, možda za početak nećete pronaći sučelje baš poput Adobe-a. Međutim, slaže se s ostalim vodećim alatima vani. Poskok je ako i vi već neko vrijeme dizajnirate u Photoshopu, ali itekako se isplati za dizajn korisničkog sučelja.

Ovaj alat za vektorsko dizajniranje i postavljanje žičanih okvira postaje sve bolji, s dodacima kao što je podrška za prototipiranje glasa osiguravajući da alat može pratiti najnovije trendove u UX-u. XD uključuje alate za crtanje, alate koji vam omogućuju definiranje nestatičnih interakcija, preglede na mobilnim uređajima i radnoj površini te alate za dijeljenje za davanje povratnih informacija o dizajnu. Omogućuje vam da odaberete veličinu umjetničke ploče za uređaj za pokretanje projekta, a možete čak i uvesti popularni komplet korisničkog sučelja, na primjer Googleov materijalni dizajn.

Od presudne je važnosti da se Adobe XD integrira s ostatkom Creative Cloud-a, što znači da ćete lako moći uvesti i raditi sa sredstvima iz Photoshopa ili Illustratora. Ako već koristite druge Adobeove aplikacije, korisničko će se sučelje osjećati lijepo i poznato te ne bi trebalo predstavljati preveliku krivulju učenja.

Andrej Robu , direktor dizajna u Robu Studiu u Barceloni, među je obožavateljima. 'Za brze makete je sjajno', kaže. 'Vrlo je lagano sučelje, s puno umetnutih fotografija i izvrsno za moodboarde. Izrada prototipa vrlo je korisna kako bi se klijentima pokazalo kako stvari funkcioniraju, posebno zato što sadržaj možete odmah poslati na mrežu. '

Ellis Rogers, grafički dizajner u Reception Ltd također ga preporučuje. 'Kad je dizajn / prototip ili žičani okvir završen, Adobe XD omogućuje vam vrlo brzo odabir elemenata i stvaranje prijelaza stranica za radni prototip, koji se mogu dijeliti putem veze', objašnjava. 'Link vam također omogućuje prikupljanje povratnih informacija po stranici, održavajući sve to organizirano. Poveznica se može ažurirati u programu Adobe XD, tako da klijent uvijek može vidjeti najnoviju verziju, bez brige zbog netočnih verzija. Apsolutna je radost raditi s njom. '

04. Čudo

Čudo

Marvel dolazi s integriranim alatom za testiranje korisnika(Slika zasluga: Marvel)

Marvel je još jedan alat za web dizajn koji je sjajan za stvaranje brzih ideja, pročišćavanje sučelja kako želite da izgleda i izradu prototipova. Čudo nudi zaista uredan način izrade stranica, omogućujući vam simuliranje vašeg dizajna kroz prototip. Postoje neke prekrasne integracije za umetanje vaših dizajna u tijek rada vašeg projekta. Zanimljivo je da postoji integrirana značajka korisničkog testiranja, koja je još uvijek prilično neobična u okruženju alata za web dizajn. Sve je to i na mreži, pa ne trebate ništa preuzimati.

05. Figma

alati za web dizajn: Figma screengrab

Figma vam omogućuje dizajniranje, izradu prototipa i prikupljanje povratnih informacija s drugim dizajnerima u stvarnom vremenu [Slika: Figma]

Figma je alat za dizajn sučelja koji omogućava više dizajnera da surađuju u stvarnom vremenu. To je vrlo učinkovito kada imate više dionika u projektu koji sudjeluju u oblikovanju ishoda. Dostupan je u pregledniku ili na sustavima Windows, Mac ili Linux, a postoje i besplatne i plaćene verzije, ovisno o tome za što ga koristite.

Evo nekoliko njegovih izvanrednih karakteristika:

'Figma ima sličan USP kao i Sketch, osim što je višeplatforma', objašnjava dizajner frontenda Benjamin Read . „Kad sam ga koristio za stvaranje nekoliko ikona, tok rada smatrao sam nevjerojatno glatkim. Nije mi trebalo vremena za učenje i imao sam dodatnu prednost suradnje: grafiku možete dijeliti s drugima u aplikaciji. '

'Pokušavam se prebaciti na Linux za svoj posao, a ponekad koristimo Windows, tako da mi Figma ima smisla s praktičnog stajališta', dodaje.

Slobodni pisac sadržaja i umjetnik David Eastwood također ima dobre stvari za reći o Figmi. 'To je također stvarno koristan alat kada smo se trebali brzo rugati MVT-ima; ponekad mali dodaci postojećem izgledu. Sviđa nam se što možete brzo stvoriti dizajn za stolna računala, tablete i mobilne uređaje. '

06. Dizajner afiniteta

Affinity Designer moćan je na iPadu kao i na radnoj površini [Affinity Designer]

Affinity Designer moćan je na iPadu kao i na radnoj površini [Affinity Designer](Slika zaslužna: Serif)

'Serif's Dizajner afiniteta neki su prozvali 'ubojicom Photoshopa', a lako je shvatiti i zašto ', kaže dizajner proizvoda I Edwards . 'Bilo je nekoliko značajki u kojima sam zaista uživao, uključujući podesive, nerazorne slojeve. To u osnovi znači da možete prilagoditi slike ili vektore bez da ih oštetite.

'Zum od 1.000.000 posto bilo je samo blaženstvo; posebno je korisno u radu s vektorskom umjetnošću, jer se zaista možete približiti. Značajke poništavanja i povijesti također su vrlo korisne: Afinitet vam omogućuje povratak preko 8000 koraka! '

'Što se tiče dizajniranja, korisničko sučelje osjeća se poznato. Čini se da svi prilikom prelaska iz Photoshopa žele početi ispočetka, što može predstavljati pravi izazov. Ono što je Affinity učinio jest da drži raspored poznatim, istovremeno pooštravajući sve i skrivajući smetnje. Lako sam uspio uskočiti ravno i početi dizajnirati. '

Dostupan je i Affinity Designer za iPad . Imajte na umu da ovo nije smanjena verzija mobilne aplikacije koju biste mogli očekivati: ista je puna verzija koju imate na radnoj površini.

Ne propustite naše vodiče za korištenje Pixel osoba , Izvezite osobu i Alat za olovku u Affinity Designer-u. Također imajte na umu da Serif također donosi Photoshop alternativu, Fotografija afiniteta i InDesign alternativa, Izdavač afiniteta ; sve se to lijepo igra zajedno.

Makete i prototipovi

07. UXPin

UXPin: alati za web dizajn

UXPin vam omogućuje prototip interaktivnih stanja i logike(Slika pripisana: UXPin)

Sljedeći alat za web dizajn na našem popisu je UXPin. Ova namjenska aplikacija za izradu prototipova dostupna je za Mac, Windows ili u pregledniku. S većinom ostalih alata za dizajn možete oponašati interakcije povezivanjem različitih elemenata na ploči, UXPin se približava kodu i omogućuje vam rad s interaktivnim stanjima, logikom i komponentama koda.

Postoje integrirane biblioteke elemenata za iOS, Material Design i Bootstrap, plus stotine besplatni setovi ikona , koji će vam pomoći na putu. UXPin je također nedavno predstavio značajke pristupačnosti kako bi osigurao da vaši dizajni ostanu u skladu sa WCAG standardima, što mi pozdravljamo.

API zahtjev najnoviji je dodatak UXPin-ovim mogućnostima interakcija. Značajka vam omogućuje prototip aplikacije koja 'razgovara' s vašim proizvodima izravno iz vašeg alata za dizajn - bez potrebe za kodom. Djeluje tako što vam omogućuje slanje HTTP zahtjeva na vanjski API.

Možete stvoriti svoj prvi prototip u UXPin besplatno, a ako vam odgovara, prebacite se na mjesečnu pretplatu (dostupno je članstvo u timu). UXPin je nedavno poboljšao svoju integraciju sa Sketchom, pa bi ga mogao uvesti u svoj tijek rada ako ste ljubitelj Sketcha kojem su mogućnosti prototipiranja ograničene.

08. Proto.io

Ovaj vam alat pomaže u stvaranju realističnih prototipova

Ovaj vam alat pomaže u stvaranju realističnih prototipova(Slika zaslužna za proto.io)

Proto.io je vrhunska aplikacija koja omogućuje stvaranje realističnih prototipova koji započinju grubim idejama, a završavaju potpuno razvijenim dizajnom. Alat vam također pruža niz mogućnosti za vaše projekte, uključujući detaljne i prilagođene vektorske animacije.

Možete započeti razvijanjem početnih ideja ručno crtanim stilom, prerađivanjem u žičane okvire i dovršavanjem prototipa visoke vjernosti. Dodaci Sketch i Photoshop pomažu ako želite dizajnirati pomoću drugih alata, ali Proto.io dobro rješava postupak dizajniranja od kraja do kraja. Ostale značajke - na primjer, korisničko testiranje - pomoći će u provjeri valjanosti vašeg dizajna. Ovo je cjelovito rješenje s velikim brojem pouzdanih marki koje ga već koriste.

Postoji hrpa sjajnih demonstracija s kojima se možete početi igrati i zaista možete vidjeti koliko bi lako ovo end-to-end rješenje moglo zamijeniti brojne alate koji su trenutno na snazi. Relativno nedavni dodaci, Proto.io je nedavno uključio prostranstvo novih značajki - uključujući upravitelje imovinom, vodiče za programere i mogućnost snimanja vašeg prototipa - koji ovaj alat usklađuje s mnogim boljim alatima za izradu prototipova.

09. Balsamiq

Balsamiq sučelje

Balsamiq je izvrstan za brzo postavljanje žica(Slika zaslužna za: Balsamiq)

Ako je onda ono što tražite brzo, učinkovito žičano kadriranje Balsamiq snažan je prijedlog. S lakoćom možete brzo razviti strukturu i izglede za svoje projekte. Povuci i ispusti elementi olakšavaju život, a gumbe možete povezati s drugim stranicama. Ožičavanjem možete brzo početi planirati svoja sučelja i dijeliti ih sa svojim timom ili klijentima. Balsamiq posluje od 2008. godine i ponosi se svojim brzim, fokusiranim pristupom bez gluposti male vjernosti.

10. ProtoPie

Počnite se igrati s izvornim senzorima pomoću ovog alata

Počnite se igrati s izvornim senzorima pomoću ovog alata(Slika zaslužna za protoPie)

Alat za web dizajn Protopić omogućuje vam stvaranje složenih interakcija i približavanje idealnoj završnoj funkciji vašeg dizajna. Možda je istaknuta značajka sposobnost upravljanja senzorima pametnih uređaja u vašem prototipu, poput senzora nagiba, zvuka, kompasa i 3D dodira. Ovisno o vašem projektu, ovo je izvrstan alat za one koji žele obuhvatiti značajke izvornih aplikacija. Lako je jer pita i nije potreban kod.

Nedavno objavljena verzija 4.2 sadrži dvije nove vrlo tražene značajke: sada možete dodati SVG-ove za uređivanje u svoje scene i odmah nakon odabira pronaći udaljenost između dva sloja.

11. MockFlow

MockFlow

Ovaj je alat izvrstan za ismijavanje grubih ideja(Slika pripisana: MockFlow)

MockFlow je paket aplikacija za izradu žičanih okvira i planiranje web stranica. WireframePro vam pomaže da iznesete svoju početnu ideju, a zatim ponovite dok ne bude baš kako treba - postoji alat za praćenje revizija korisničkog sučelja koji će vam pomoći u tome. Dolazi s tisućama unaprijed izrađenih komponenata i rasporeda koje možete prilagoditi u skladu sa svojim zahtjevima, a tu je i način pregleda za predstavljanje svog rada kolegama i klijentima.

Nakon što napravite žičane okvire, ostatak paketa može vam pomoći u drugim aspektima planiranja web mjesta, uključujući informacijsku arhitekturu, izradu vodiča za stil (ovo se može generirati automatski) i rad kroz postupak odjave.

Ako želite vidjeti neke druge mogućnosti, pogledajte naš pregled vrha žičani alati .

12. Adobe Comp

Adobe Comp je fantastičan alat za web dizajn za iPad koji pomaže u stvaranju žičanih okvira, prototipova i koncepata izgleda web stranica. Ako želite, inteligentna crtaća ploča s kreativnim oblakom. Ima osnovne predloške za brojne izglede za mobilne uređaje i web, pa čak i za ispis ako je to vaša stvar, a brze rezervirane mjesta možete stvoriti crtanjem intuitivnih oblika koji predstavljaju slike, tekst i još mnogo toga. Comp pretvara grube obrise u ravne linije, krugove i pravokutnike.

Začudo, Adobe nije smatrao za shodno uključiti izravan izvoz u XD - ludo! - bez obzira na dugogodišnji zahtjev to se preispituje zbog onoga što se čini zauvijek. Međutim, izvoz u Photoshop je ugrađen (zajedno s Illustratorom i InDesignom), a nakon što se u svom sveprisutnom uređivaču slika izvrše podešavanja vaše makete, odatle možete izvesti u XD. Unatoč ovom nepoželjnom dodatnom koraku u korisničkom putovanju Adobe poklonika žičanog okvira, Comp u potpunosti zaslužuje uvrštavanje na ovaj popis svojim mogućnostima za odlazak bilo gdje, lakoćom upotrebe i impresivnim korisničkim sučeljem.

13. Flinto

Flinto sučelje

finska olovka za ipad
Dizajnirajte prije i poslije stanja, a Flinto će razraditi razliku i animirati vas(Slika zaslužna: Flinto)

Flinto je alat za dizajn koji vam omogućuje stvaranje jedinstvenih interakcija unutar vašeg dizajna. Možete koristiti brojne geste i olakšati prijelaze dizajniranjem stanja prije i poslije. Flinto jednostavno razrađuje razlike i animira umjesto vas - super korisno.

Imajte na umu da je ovo samo iOS, ali osjećat će se poznato kad ga počnete koristiti. Na mreži postoji dokumentacija koja će vam pomoći na putu, a uvoz iz Sketcha i Figme također je jednostavan.

14. Osovina

Axure sučelje

Složena sučelja s dinamičkim podacima(Slika pripisana: Axure)

Axure je uvijek bio jedan od najboljih alata za izradu žičanih okvira na tržištu, sjajan za složene projekte koji zahtijevaju dinamičke podatke. S Axureom se stvarno možete usredotočiti na ruganje projektima koji su i tehnički i zahtijevaju ključnu pažnju na strukturi i podacima.

Axureov postupak predaje uključuje stvaranje temeljnih specifikacija koje pomažu programerima u stvaranju konačnog proizvoda koji odgovara vašem dizajnu.

15. Justinmind

Justinmind

Justinmind se integrira s alatima kao što su Sketch i Photoshop(Slika pripisana: JustInMind)

Justinmind pomoći će u prototipiranju i integrirat će se s drugim alatima kao što su Sketch i Photoshop. Možete odabrati interakcije i geste koje će vam pomoći da sastavite svoj prototip. Sadrži i korisničke sučelja, tako da možete brzo sastaviti zaslone, a i on reagira.

16. Tekućina

Tekuće sučelje

Fluid je izvrstan za brzi dizajn korisničkog sučelja(Slika zasluga: Fluid)

Tekućina je jednostavan i intuitivan alat za izgradnju brzih prototipova i izradu dizajna. Sadrži nekoliko lijepih gotovih materijala za brze prototipove. Nakon nadogradnje, zaista je lako sastaviti vlastite simbole s vlastitim preferiranim sredstvima korisničkog sučelja. Ovaj alat nudi vrlo brz dizajn korisničkog sučelja, s raspoloživim materijalima za prototipe visoke i niske vjernosti.

17. Međuigra

Interplay pomaže da svi ostanu na istoj stranici [Slika: Interplay]

primjeri gestalt principa u oglašavanju
Interplay pomaže da svi ostanu na istoj stranici [Slika: Interplay](Slika pripisana: Interplay)

Međuigra je prototipski sustav koji poboljšava komunikaciju i suradnju u vašem timu, posebno između dizajnera i programera. Izgrađen je s obzirom na sustave dizajna i integrira se s vašim kodom kako bi generirao dokumentaciju koju je lako pratiti i automatski se ažurira. Održavanje svih ljudi na istoj stranici i najnovije je glavna funkcija - pa kad se vaš kôd ažurira, mijenja se i vaš dizajn. Interplay je još uvijek u beta verziji, ali već radi s nizom velikih alata za dizajn i razvoj.

Dizajn okvira i knjižnica

18. Bootstrap

Alati za web dizajn: Bootstrap screengrab

Stari omiljeni Bootstrap ima neka snažna nova ažuriranja

Bootstrap zasigurno nije novi alat, ali je revolucionirao razvoj i nastavlja oblikovati način na koji gradimo stvari na webu.

U vrijeme pisanja ovog članka, najnovija verzija (4.4.1, pokrenuta u studenom 2019.) uvela je nove responzivne spremnike koji su fluidni do određene točke prekida i nove klase responzivnih .row-cols za učinkovito određivanje broja stupaca na točkama prekida.

Bootstrap je također nedavno pokrenuo vlastitu biblioteku ikona otvorenog koda, Bootstrap ikone , koji je dizajniran za rad s komponentama Bootstrapa.

Naći najbolje besplatne teme Bootstrapa u našem vodiču .

19. Pokretanje 3

Napravite Bootstrap web mjesto bez pisanja koda [Slika: Designmodo]

Napravite Bootstrap web mjesto bez pisanja koda [Slika: Designmodo](Slika pripisana: Designmodo)

Ako volite Bootstrap, ali ne želite zaroniti u sirovu stvar, Startup 3 je jednostavan način; to je internetska aplikacija s ugrađenim predlošcima i temama za izradu web stranica temeljenih na Bootstrapu 4 s rešetkom od 12 stupaca. Možete izraditi svoju web stranicu bez pisanja koda pomoću sučelja povuci i ispusti, ali trebat će vam određeno znanje HTML-a i CSS-a da biste dovršili stvari.

20. Vue.js

Alati za web dizajn: vue.js screengrab

Ne koristi se za složene JavaScript knjižnice? Vue.js je savršen za vas [Slika: Vue.js]

Vue.js je okvir za izgradnju korisničkih sučelja i koristi virtualni DOM. Kao što i samo ime govori, Vueova osnovna knjižnica usredotočena je na sloj prikaza.

Pogledajte primjer koda preuzet iz Vue-ovih dokumenata koji koristi korisničke podatke i pokazuje eleganciju knjižnice. Započet ćemo s HTML-om:

{{ message }}

Reverse Message

Primijetite prilagođeni v-on rukovatelj koji poziva reverseMessage metoda. Evo JavaScript-a:

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

Ovaj je primjer napunio odlomak podacima i definira reverseMessage metoda. Vue je izvrstan za one manje iskusne sa složenim knjižnicama, ali ima i niz dodataka koji pomažu u razvoju složenih web stranica s jednom stranicom.

21. Laboratorij uzorka

alati za web dizajn: Pattern Lab screengrab

Pattern Lab temelji se na atomskom dizajnu [Slika: Pattern Lab]

Pattern Lab je prekrasan dizajnerski alat vođen uzorcima koji su stvorili Dave OIsen i Brad Frost. Temelji se na konceptu Atomski dizajn , koji kaže da biste trebali rastaviti svoj dizajn na njegove najmanje dijelove - atome - i kombinirati ih da biste stvorili veće, višekratne komponente - molekule i organizme - koji se potom mogu pretvoriti u korisne predloške.

Iako je u svojoj osnovi statički generator web mjesta koji spaja komponente korisničkog sučelja, postoji još mnogo toga Laboratorij uzoraka od toga. To je agnostika jezika i alata; omogućuje vam međusobno ugniježđenje UI uzoraka i dizajn s dinamičkim podacima; sadrži uređaje za agnostičku promjenu veličine vidnog polja koji vam pomažu da osigurate da vaš sustav dizajna u potpunosti reagira; i potpuno je proširiv, tako da možete biti sigurni da će se proširiti u skladu s vašim potrebama.

22. Dizajn materijala

Dizajn materijala skup je Googleovih principa [Slika: Google]

Dizajn materijala skup je Googleovih principa [Slika: Google](Zasluga za sliku: Google)

Dizajn materijala je Googleov vizualni jezik kojem je cilj kombinirati klasična načela dobrog dizajna s inovacijama u tehnologiji i znanosti kako bi se stvorila kohezivna i fleksibilna osnova vašeg web mjesta.

Web stranice i aplikacije stvorene pomoću okvira Material Design izgledat će moderno i korisniku će biti poznate, tako da će ljudima biti lako odmah koristiti vaš proizvod. Dostupni su mnogi alati za pomoć u ovom sustavu dizajna; kliknite Resursi na navigacijskoj traci da biste ih pronašli.

Generiraj JS natpis

(Slika pripisana: Future / Toa Heftiba, Unsplash)

Pridružite nam se u travnju 2020. s našom postavom JavaScript superzvijezda na GenerateJS - konferenciji koja vam pomaže da izgradite bolji JavaScript. Rezervirajte odmah na generiraticonf.com

Sljedeća stranica: Specijalizirani alati za web dizajn za rješavanje bilo kojeg problema

  • 1
  • dva

Trenutna stranica: Stranica 1

Sljedeća stranica Stranica 2