52 verkkosuunnittelutyökalua, jotka auttavat sinua työskentelemään älykkäämmin vuonna 2021

Parhaat verkkosivujen suunnittelutyökalut: Kuva John Kappa Unsplashista
(Kuvan luotto: Kuva John Kappa Unsplashista)
Sivu 1/2: Sivu 1 HYPÄTÄ:

Näinä päivinä on niin paljon upeita web-suunnittelutyökaluja. Riippumatta siitä, minkä ongelman yrität ratkaista verkkosuunnittelun työnkulussa, on todennäköistä, että joku on tehnyt siihen työkalun, olipa kyseessä sitten erillinen apuohjelma tai ominaisuus suuremmassa sovelluksessa. Ja vaikka web-suunnitteluyhteisö on muuttunut paljon alkuaikoista lähtien, työn jakamisen henki on edelleen olemassa, joten monet näistä upeista työkaluista ovat ilmaisia.

Työkalujen lisääntyminen on hieno siunaus, mutta se voi myös jättää sinut pilaantuneeksi valinnalle, koska on olemassa monia tapoja tehdä sama asia. Tässä artikkelissa olemme pyöristäneet mielestämme parhaita työkaluja tällä hetkellä. Tietenkään se ei ole tyhjentävä luettelo, mutta toivottavasti kaventamalla sitä ja tuomalla esiin joitain parhaista, teemme helpomman koota oikea työnkulkumallisto.

Koska tämä on melko pitkä luettelo, olemme järjestäneet työkalut osiin artikkelin helpottamiseksi. Tältä sivulta löydät täydellisen verkkosuunnitteluohjelmiston, jota seuraavat perustavoitetut kiinteämmät kehystystyökalut, verkkosivustokehykset ja kirjastot. Sivulla kaksi on joukko pienempiä, erikoistuneempia työkaluja kaikkeen kuvien käsittelystä AR: n ja VR: n hämmentämiseen.



Kun olet täällä, saatat haluta tarkistaa parhaat web-hosting-palvelut ja parhaat verkkosivustojen rakentajat vuodelle 2020

miksi kromikuvakkeellani on 1

Luo JS-banneri

Napsauta kuvaa saadaksesi lisätietoja ja osta lippusi(Kuvan luotto: Future / Toa Heftiba, Unsplash)

Täydelliset suunnittelutyökalut

01. InVision Studio

InVision pyrkii olemaan ainoa käyttöliittymätyökalu

InVisionin tavoitteena on olla ainoa käyttöliittymätyökalu, jota tarvitset(Kuvan luotto: InVision)

InVision Studio tavoitteena on kattaa kaikki perusteet ja olla ainoa tarvitsemasi käyttöliittymätyökalu. Siinä on joukko ominaisuuksia, jotka auttavat sinua luomaan kauniita interaktiivisia käyttöliittymiä, mukaan lukien työkalut nopeaan prototyyppiin, reagoivaan ja yhteistyöhön perustuvaan suunnitteluun ja työskentelyyn suunnittelujärjestelmien kanssa.

Jos käytät jo InVision-sovellusta Sketchin kaltaisten työkalujen kanssa, ominaisuuksissa on melko paljon ristiriitoja. Studion voima on kuitenkin prototyyppiosastolla, varsinkin jos suunnitteluusi liittyy animaatiota. Nopea prototyyppien luominen antaa sinun luoda monimutkaisia ​​ja mielikuvituksellisia siirtymiä, joiden avulla voit todella saavuttaa haluamasi animaation tason. Yksinkertaisesti selvittää, miten haluat käyttöliittymän tarkastella siirtymän alkua, ja suunnitella sitten lopputulos. InVision Studio hoitaa loput sinulle.

Tämän lisäksi voit luoda nämä mukautetut animaatiot ja siirtymät useista eleistä ja vuorovaikutuksista, kuten pyyhkäisemällä, napsauttamalla ja leijuttamalla.

Kun olet valmis, vie prototyypit InVisionin kautta ja kutsu ihmisiä tekemään yhteistyötä. Voit tarkastella projektiasi suunnitellulla alustalla - erinomainen tapa tutkia ja testata suunnittelua. Asiakkaat voivat sitten kommentoida suoraan suunnittelua.

Tämän lisäksi voit lopettaa ajattelemisen useiden piirtoalustojen luomisesta useille laitteille - Studion asetteluohjelma säätää suunnittelusi mihin tahansa näyttöön automaattisesti. Tämä ajansäästäjä antaa sinulle tilaa ajatella paljon enemmän suunnittelustasi.

02. Luonnos

Sketch on korvannut Photoshopin useiden verkkosuunnittelijoiden valitsemana käyttöliittymän suunnittelutyökaluna [Kuva: Bohemian Coding]

Sketch on korvannut Photoshopin useiden verkkosuunnittelijoiden valitsemana käyttöliittymän suunnittelutyökaluna [Kuva: Bohemian Coding](Kuvan luotto: Bohemian Coding)

Boheemi koodaus Luonnos on yksi yleisimmin käytetyistä web-suunnittelualustoista; se on erittäin tehokas vektoripohjainen työkalu rajapintojen ja prototyyppien rakentamiseen yhteistyössä. Sketch on rakennettu erityisesti verkkosivustojen ja sovellusten tekemiseen, joten käyttöliittymässä ei ole tarpeettomia ominaisuuksia, ja se on nopeampi ja tehokkaampi kuin laajemman ohjelmiston.

Rory Berry, luova johtaja osoitteessa Superrb , siirtyi Sketchiin vuonna 2017 ja suosittelee sitä voimakkaasti. 'Verrattuna Photoshopiin kaikkien asiakirjojen lajitteleminen ja Sketchin tarkistaminen on paljon helpompaa', hän aloittaa. 'Sketchillä on pieniä asiakirjoja, kun taas Photoshopilla on suuria. Koska se on vektoripohjainen sovellus, tiedostokoot ovat dramaattisesti pienempiä kuin Photoshop. '

Eikä siinä vielä kaikki. ”Sketchin sisäänrakennettu ruudukkojärjestelmä on hieno ja helpottaa käyttöliittymäsuunnittelua. Mielestäni yleinen käyttöliittymä ja minimaalinen tunnelma tekevät siitä paljon puhtaamman suunnitella ja käyttäjäystävällinen. Photoshop näyttää erittäin monimutkaiselta. '

Yhteisö tarjoaa satoja Luonnoslaajennukset tehdä suunnittelun työnkulusta helpompaa ja sujuvampaa.

Sketchin haittapuoli on, että se on saatavana vain Macissa, eikä muita käyttöjärjestelmiä ole tarkoitus tukea. Tämä on ollut ongelma, koska suunnittelijat haluavat usein jakaa .sketch-tiedostoja Windowsia käyttävien kehittäjien kanssa. Onneksi on nyt olemassa Sketch for Windows -sovellus Hulluus joka avaa ja muokkaa .sketch-tiedostoja ja eliminoi suurimman osan tästä kivusta - lue siitä Vienti ja muuntaminen tämän artikkelin osio.

Älä missaa meidän tärkeimmät vinkit Sketchin käyttämiseen .

03. Adobe XD

Adobe XD: ssä on kevyt käyttöliittymä, jonka avulla voit helposti prototyyppiä

Adobe XD: ssä on kevyt käyttöliittymä, jonka avulla voit helposti prototyyppiä(Kuvan luotto: Adobe)

Adobe XD tarjoaa parhaan ympäristön digitaalisille projekteille Adobe Creative Cloud -sarjan alla. Jos olet innokas Adobe-käyttäjä ja uusi XD-käyttöliittymä, käyttöliittymä ei ehkä ole kovin alun perin Adobe-tyyppinen. Se kuitenkin pinotaan muihin johtaviin työkaluihin. Se on harppaus, jos olet suunnitellut myös Photoshopissa jonkin aikaa, mutta se on sen arvoinen käyttöliittymäsuunnittelussa.

Tämä vektorisuunnittelutyökalu ja langanmuodostustyökalu paranevat jatkuvasti, ja siihen sisältyy lisäyksiä, kuten tuki äänen prototyyppien luominen varmistaa, että työkalu pystyy pysymään ajan tasalla UX: n uusimmista trendeistä. XD sisältää piirustustyökalut, työkalut, joiden avulla voit määrittää ei-staattiset vuorovaikutukset, mobiili- ja työpöydän esikatselut sekä jakamistyökalut palautteen antamiseksi malleista. Sen avulla voit valita laitekohtaisen piirtoalustan koon projektin aloittamista varten ja voit jopa tuoda suositun käyttöliittymäsarjan, esimerkiksi Googlen materiaalisuunnittelun.

Tärkeää on, että Adobe XD integroituu muuhun Creative Cloudiin, mikä tarkoittaa, että voit tuoda ja työskennellä helposti Photoshopista tai Illustratorista. Jos käytät jo muita Adobe-sovelluksia, käyttöliittymä tuntuu mukavalta ja tutulta, eikä sen pitäisi antaa liikaa oppimiskäyrää.

Andrei Robu , suunnittelupäällikkö Robu Studiossa Barcelonassa, on sen faneja. 'Se on nopeaa mallien tekemistä varten', hän sanoo. 'Se on erittäin kevyt käyttöliittymä, johon on ladattu paljon valokuvia, ja se sopii erinomaisesti mielilevyihin. Prototyyppien luominen on erittäin hyödyllistä näyttää asiakkaille, miten tavarat toimivat, varsinkin kun voit työntää sisältöä heti verkkoon. '

Ellis Rogers, graafinen suunnittelija Vastaanotto Oy suosittelee myös sitä. 'Kun suunnittelu / prototyyppi tai lankakehys on valmis, Adobe XD antaa sinun valita elementit nopeasti ja luoda sivunsiirtoja toimivalle prototyypille, joka voidaan jakaa linkin kautta', hän selittää. 'Linkin avulla voit myös kerätä palautetta sivua kohden pitäen kaiken järjestyksessä. Linkki voidaan päivittää Adobe XD: ssä, jotta asiakas voi aina nähdä uusimman version huolimatta virheellisistä versioista. On ehdottoman ilo työskennellä. '

04. Ihme

Ihme

Marvelissa on integroitu käyttäjän testaustyökalu(Kuvan luotto: Marvel)

Marvel on toinen verkkosuunnittelutyökalu, joka on hyvä tuottamaan nopeita ideoita, parantamaan käyttöliittymää sen ulkoasuun ja rakentamaan prototyyppejä. Ihme tarjoaa todella siistin tavan rakentaa sivuja, jolloin voit simuloida suunnittelua prototyypin avulla. On upeita integraatioita suunnitelmien lisäämiseksi projektisi työnkulkuun. Mielenkiintoista on, että siellä on integroitu käyttäjien testausominaisuus, joka on edelleen melko epätavallinen verkkosuunnittelutyökalussa. Kaikki on myös verkossa, joten sinun ei tarvitse ladata mitään.

05. Figma

verkkosuunnittelutyökalut: Figma screengrab

Figman avulla voit suunnitella, prototyyppiä ja kerätä palautetta muiden suunnittelijoiden kanssa reaaliajassa [Kuva: Figma]

Figma on käyttöliittymäsuunnittelutyökalu, jonka avulla useat suunnittelijat voivat tehdä yhteistyötä reaaliajassa. Tämä on erittäin tehokasta, kun projektissa on useita sidosryhmiä, jotka ovat mukana tuloksen muokkaamisessa. Se on saatavana selaimessa tai Windowsissa, Macissa tai Linuxissa, ja siellä on sekä ilmaisia ​​että maksettuja versioita sen mukaan, mihin sitä käytät.

Tässä on joitain sen erinomaisista ominaisuuksista:

'Figmalla on samanlainen USP kuin Sketchillä, lukuun ottamatta sitä, että se on monitasoinen', selittää käyttöliittymäsuunnittelija Benjamin Lue . 'Kun käytin sitä parin kuvakkeen luomiseen, työnkulku oli uskomattoman sujuva. Minulla ei ollut aikaa oppia, ja sillä oli lisäetuna yhteistyöhön osallistuminen: voit jakaa grafiikkaa muiden kanssa sovelluksessa. ''

'Olen yrittänyt siirtyä Linuxiin työhöni ja joskus käytämme Windowsia, joten Figma on järkevää minulle käytännön näkökulmasta', hän lisää.

Freelance-sisällönkirjoittaja ja kuvataiteilija David Eastwood on myös hyviä sanottavia Figmasta. 'Se on myös ollut todella hyödyllinen työkalu, kun meidän on pitänyt pilkata MVT: itä nopeasti; joskus pieniä lisäyksiä olemassa olevaan asetteluun. Rakastamme, että voit luoda nopeasti malleja työpöydälle, tabletille ja mobiililaitteille. ''

kuinka kehittää omaa taidetyyliäsi

06. Affinity-suunnittelija

Affinity Designer on yhtä tehokas iPadissa kuin työpöydällä [Affinity Designer]

Affinity Designer on yhtä tehokas iPadissa kuin työpöydällä [Affinity Designer](Kuvan luotto: Serif)

'Serif Affinity-suunnittelija jotkut ovat kutsuneet sitä 'Photoshop-tappajaksi', ja on helppo ymmärtää miksi ', tuotesuunnittelija sanoo Ja Edwards . 'Oli joitain ominaisuuksia, joista todella nautin, mukaan lukien säädettävät, tuhoamattomat kerrokset. Tämä tarkoittaa käytännössä sitä, että voit säätää kuvia tai vektoreita vahingoittamatta niitä.

'1 000 000 prosentin zoomaus oli vain autuus; se on erityisen hyödyllinen, kun työskentelet vektoritaiteen kanssa, koska voit todella päästä lähelle. Kumonnut ja historiaominaisuudet ovat myös todella käteviä: Affiniteetin avulla voit palata yli 8000 askelta taaksepäin! '

'Suunnittelussa käyttöliittymä tuntuu tutulta. Siirtyessään Photoshopista kaikki näyttävät haluavan aloittaa alusta, mikä voi olla todellinen haaste. Affiniteetti on pitänyt asettelua tutuksi samalla, kun tiukentaa kaikkea ja piilottaa häiriötekijät. Pystyin helposti hyppäämään suoraan sisään ja saamaan suunnittelua. '

Affinity Designer on myös saatavilla iPadille . Huomaa, että tämä ei ole pienennetty mobiilisovelluksen versio, jota voit odottaa: se on sama täysversio, jonka saat työpöydälle.

Älä missaa oppaita Pixel-henkilö , Vie henkilö ja Kynä työkalu julkaisussa Affinity Designer. Huomaa myös, että Serif tekee myös Photoshop-vaihtoehdon, Affinity-valokuva ja InDesign-vaihtoehto, Affinity Publisher ; jotka kaikki pelaavat yhdessä hienosti.

Maketit ja prototyypit

07. UXPin

UXPin: verkkosuunnittelutyökalut

UXPin tarjoaa prototyypin interaktiivisilla tiloilla ja logiikalla(Kuvan luotto: UXPin)

Seuraava luettelosivumme on UXPin. Tämä erillinen prototyyppisovellus on saatavana Macille, Windowsille tai selaimessa. Useimpien muiden suunnittelutyökalujen avulla voit jäljitellä vuorovaikutusta vain linkittämällä piirrostaulun eri elementit, UXPin lähestyy koodia ja antaa sinun työskennellä interaktiivisten tilojen, logiikan ja koodikomponenttien kanssa.

Siellä on integroituja elementtikirjastoja iOS: lle, materiaalisuunnittelulle ja Bootstrapille sekä satoja ilmaiset kuvakkeet , auttaa sinua matkallasi. UXPin on myös äskettäin ottanut käyttöön esteettömyysominaisuudet varmistaakseen, että suunnittelusi ovat WCAG-standardien mukaisia, ja me kiitämme sitä.

API-pyyntö on viimeisin lisäys UXPinin vuorovaikutusominaisuuksiin. Tämän ominaisuuden avulla voit prototyypittää sovelluksen, joka 'puhuu' tuotteisiisi suoraan suunnittelutyökalustasi - ilman koodia. Se toimii sallimalla HTTP-pyyntöjen lähettämisen ulkoiselle sovellusliittymälle.

Voit luoda ensimmäisen prototyypin UXPin ilmaiseksi, ja jos se sopii sinulle, vaihda maksettuun kuukausitilaukseen (tiimijäsenyyksiä on saatavana). UXPin on äskettäin parantanut integrointiaan Sketchiin, joten se voi olla yksi käyttöönotosta työnkulkuun, jos olet Sketch-fani, jonka prototyyppien ominaisuudet rajoittavat.

08. Proto.io

Tämän työkalun avulla voit luoda todenmukaisia ​​prototyyppejä

Tämän työkalun avulla voit luoda todenmukaisia ​​prototyyppejä(Kuvan luotto: Proto.io)

Proto.io on huippusovellus, jonka avulla voidaan luoda todenmukaisia ​​prototyyppejä, jotka alkavat karkeilla ideoilla ja päättyvät täysimittaisilla malleilla. Työkalu tarjoaa myös erilaisia ​​mahdollisuuksia projekteihisi, mukaan lukien yksityiskohtaiset ja mukautetut vektorianimaatiot.

Voit aloittaa kehittämällä alkuperäisiä ideoita käsin piirretyllä tyylillä, työstää ne lankakehyksiksi ja viimeistellä ne huipputarkalla prototyypillä. Sketch- ja Photoshop-laajennukset auttavat, jos haluat suunnitella muita työkaluja, mutta Proto.io hoitaa end-to-end-suunnitteluprosessin hyvin. Muut ominaisuudet - esimerkiksi käyttäjän testaus - auttavat vahvistamaan suunnittelusi. Tämä on all-in-one-ratkaisu, jossa sitä käyttää jo suuri määrä luotettavia tuotemerkkejä.

On joukko upeita demoja, joiden avulla voit aloittaa pelaamisen, ja voit todella nähdä, kuinka helposti tämä end-to-end-ratkaisu voi korvata useita tällä hetkellä käytössä olevia työkaluja. Suhteellisen viimeisimmät lisäykset, Proto.io on viime aikoina sisältänyt laajan valikoiman uusia ominaisuuksia - mukaan lukien varainhoitajat, kehittäjän oppaat ja kyky tallentaa prototyyppisi - tuovat tämän työkalun monien parempien prototyyppityökalujen mukaiseksi.

09. Balsamiq

Balsamiq-käyttöliittymä

Balsamiq soveltuu erinomaisesti nopeaan lankakehykseen(Kuvan luotto: Balsamiq)

Jos etsit sitten nopeaa, tehokasta langankehystä Balsamiq on vahva ehdotus. Voit nopeasti kehittää rakenteen ja ulkoasun projekteillesi helposti. Vedä ja pudota -elementit helpottavat elämää, ja voit linkittää painikkeita muille sivuille. Langoittamalla kehys, voit nopeasti alkaa suunnitella käyttöliittymiäsi ja jakaa ne tiimillesi tai asiakkaillesi. Balsamiq on jatkanut toimintaansa vuodesta 2008 ja ylpeilee matala-uskollisesta, nopeasta ja kohdennetusta ei-hölynpölystä.

10. ProtoPie

Aloita leikkiä natiivisensoreilla tämän työkalun avulla

Aloita leikkiä natiivisensoreilla tämän työkalun avulla(Kuvan luotto: ProtoPie)

Web-suunnittelutyökalu Protopic avulla voit luoda monimutkaisia ​​vuorovaikutuksia ja päästä lähelle suunnittelusi ihanteellista lopputoimintoa. Ehkä erottuva ominaisuus on kyky hallita prototyyppisi älylaitteiden antureita, kuten kallistus-, ääni-, kompassi- ja 3D Touch -antureita. Projektistasi riippuen tämä on loistava työkalu niille, jotka haluavat sisällyttää natiivisovelluksen ominaisuudet. Se on helppoa kuin piirakka eikä koodia tarvita.

Äskettäin julkaistu versio 4.2 sisältää kaksi uutta erittäin kysyttyä ominaisuutta: nyt voit lisätä muokattavia SVG: itä kohtauksiisi ja löytää kahden kerroksen välisen etäisyyden heti valinnan jälkeen.

11. MockFlow

MockFlow

Tämä työkalu on hyvä pilkata karkeita ideoita(Kuvan luotto: MockFlow)

MockFlow on sovellussarja langankehyksen luomiseen ja verkkosivustojen suunnitteluun. WireframePro auttaa sinua asettamaan alkuperäisen ideasi ja sitten iteroimaan, kunnes se on oikein - tässä on käyttöliittymän versioseurain. Siinä on tuhansia valmiita komponentteja ja asetteluja, joita voit säätää vastaamaan tarpeitasi, ja on esikatselutila työn esittelemiseen kollegoille ja asiakkaille.

Kun olet tehnyt lankakehykset, loput sarjasta voivat auttaa sinua verkkosivustosi suunnittelussa, mukaan lukien tietoarkkitehtuuri, tyylioppaan tekeminen (tämä voidaan luoda automaattisesti) ja kirjautumisprosessin suorittaminen.

Jos haluat nähdä muita vaihtoehtoja, tutustu alkuun lankakehystyökalut .

12. Adobe Comp

Adobe Comp on fantastinen verkkosuunnittelutyökalu iPadille, joka auttaa luomaan lankakehyksiä, prototyyppejä ja ulkoasukonsepteja verkkosivuille. Luova pilvipohjainen älykäs luonnoslevy, jos haluat. Siinä on perusmallit useille mobiililaitteiden ja verkon asetteluille, ja jopa tulostaa, jos se on sinun juttusi, ja voit luoda nopeita paikkamerkkejä piirtämällä intuitiivisia muotoja edustamaan kuvia, tekstiä ja muuta. Comp muuntaa karkeat ääriviivat suoriksi, ympyröiksi ja suorakulmioiksi.

Hämmästyttävällä tavalla Adobe ei ole nähnyt sopivaksi sisällyttää suoraa vientiä XD: lle - hullu! - huolimatta pitkäaikainen pyyntö jota on tarkasteltu ikuisesti. Vienti Photoshopiin on kuitenkin sisäänrakennettu (yhdessä Illustratorin ja InDesignin kanssa), ja kun mallin muokkaukset tehdään kaikkialla olevassa kuvaeditorissa, voit viedä sieltä XD: lle. Huolimatta tästä ei-toivotusta ylimääräisestä askeleesta Adobe-devotee wireframerin käyttäjämatkalla, Comp ansaitsee täysin sisällyttämisen tähän luetteloon kaikkialla kulkevien ominaisuuksiensa, helppokäyttöisyytensä ja vaikuttavan käyttöliittymänsä avulla.

13. Flinto

Flinto-käyttöliittymä

Suunnittele ennen ja jälkeen-tilat, ja Flinto selvittää eron ja animoi sinulle(Kuvan luotto: Flinto)

Flinto on suunnittelutyökalu, jonka avulla voit luoda ainutlaatuisia vuorovaikutuksia suunnittelusi sisällä. Voit hyödyntää useita eleitä ja tehdä helpot siirtymät suunnittelemalla ennen ja jälkeen -tilat. Flinto yksinkertaisesti selvittää erot ja animoi sinulle - erittäin hyödyllinen.

Muista, että tämä on vain iOS, mutta se tuntuu tutulta, kun aloitat sen käytön. Verkossa on asiakirjoja, jotka auttavat sinua matkallasi, ja tuonti Sketchistä ja Figmasta on myös suoraviivaista.

14. Axure

Axure-liitäntä

Lankakehyksen monimutkaiset rajapinnat dynaamisen datan kanssa(Kuvan luotto: Axure)

Axure on aina ollut yksi markkinoiden parhaista lankakehystyökaluista, joka sopii hyvin monimutkaisiin projekteihin, jotka edellyttävät dynaamista dataa. Axuren avulla voit todella keskittyä pilkkaamaan projekteja, jotka ovat sekä teknisiä että vaativat huomiota rakenteeseen ja tietoihin.

Axuren luovutusprosessi sisältää perusteellisten eritelmien luomisen, jotka auttavat kehittäjiä luomaan lopputuotteen, joka vastaa suunnittelua.

15. Justinmind

Justinmind

Justinmind integroituu työkaluihin, kuten Sketch ja Photoshop(Kuvan luotto: JustInMind)

Justinmind auttaa prototyyppien tekemisessä ja integroituu muihin työkaluihin, kuten Sketch ja Photoshop. Voit valita vuorovaikutuksen ja eleet prototyypin kokoamiseksi. Se sisältää myös käyttöliittymäpaketteja, joten voit koota näytöt nopeasti, ja se on myös reagoiva.

16. Neste

Nestemäinen käyttöliittymä

Fluid sopii erinomaisesti nopeaan käyttöliittymäsuunnitteluun(Kuvan luotto: Fluid)

Nestettä on yksinkertainen ja intuitiivinen työkalu nopeiden prototyyppien rakentamiseen ja mallien työstämiseen. Se pakkaa hienoja valmiita tuotteita, jotta pääset nopeasti prototyyppien avulla. Kun olet päivittänyt, on todella helppo koota omat symbolisi haluamallasi käyttöliittymän sisällöllä. Tämä työkalu tarjoaa erittäin nopean käyttöliittymäsuunnittelun, ja resursseja on saatavilla sekä korkean että matalan tarkkuuden prototyyppeihin.

17. Keskustelu

Interplay auttaa pitämään kaikki samalla sivulla [Kuva: Interplay]

Interplay auttaa pitämään kaikki samalla sivulla [Kuva: Interplay](Kuvan luotto: Interplay)

Vuorovaikutus on prototyyppijärjestelmä, joka parantaa viestintää ja yhteistyötä tiimissäsi, erityisesti suunnittelijoiden ja kehittäjien välillä. Se on rakennettu suunnittelujärjestelmiä silmällä pitäen ja integroituu koodisi kanssa luomaan helposti seurattavaa ja päivitettävää dokumentaatiota. Kaikkien pitäminen samalla sivulla ja ajan tasalla on ydintoiminto - joten kun koodisi päivittyy, niin myös muotoilusi. Interplay on edelleen beetaversiossa, mutta se toimii jo useiden suurten suunnittelu- ja kehitystyökalujen kanssa.

Suunnittele kehykset ja kirjastot

18. Bootstrap

verkkosuunnittelutyökalut: Bootstrap screengrab

kuinka käyttää magneettista lasso-työkalua Photoshopissa
Vanha suosikki Bootstrap sisältää uusia tehokkaita päivityksiä

Bootstrap ei todellakaan ole uusi työkalu, mutta se on mullistanut kehityksen ja muokkaa edelleen sitä, miten rakennamme tavaraa verkkoon.

Kirjoitushetkellä uusin versio (4.4.1, julkaistu marraskuussa 2019) esitteli uudet reagoivat säiliöt, jotka ovat juoksevia tiettyyn raja-arvoon saakka, ja uudet reagoivat .row-cols-luokat, joiden avulla voidaan määrittää tehokkaasti sarakkeiden lukumäärä katkaisupisteiden välillä.

Bootstrap on myös hiljattain lanseerannut oman avoimen lähdekoodin kuvakekirjaston, Bootstrap-kuvakkeet , joka on suunniteltu toimimaan Bootstrap-komponenttien kanssa.

Etsi parhaat ilmaiset Bootstrap-teemat oppaassamme .

19. Käynnistys 3

Luo Bootstrap-sivusto kirjoittamatta koodia [Kuva: Designmodo]

Luo Bootstrap-sivusto kirjoittamatta koodia [Kuva: Designmodo](Kuvan luotto: Designmodo)

Jos pidät Bootstrapista, mutta et halua sukeltaa raaka-aineeseen, Startup 3 on helppo tapa; se on online-sovellus, jossa on sisäänrakennetut mallit ja teemat Bootstrap 4: een perustuvien verkkosivustojen luomiseksi 12 sarakkeen ruudukolla. Voit rakentaa sivustosi kirjoittamatta koodia vedä ja pudota -käyttöliittymällä, mutta tarvitset jonkin verran tietoa HTML: stä ja CSS: stä.

20. Vue.js

verkkosuunnittelutyökalut: vue.js screengrab

Etkö ole käyttänyt monimutkaisia ​​JavaScript-kirjastoja? Vue.js on täydellinen sinulle [Kuva: Vue.js]

Vue.js on kehys käyttöliittymien rakentamiseen ja käyttää virtuaalista DOM: ää. Kuten nimestä voi päätellä, Vuen ydinkirjasto on keskittynyt näkymäkerrokseen.

Katsokaa Vue-asiakirjoista otettua koodiesimerkkiä, joka käyttää käyttäjän syötteitä ja osoittaa kirjaston tyylikkyyttä. Aloitetaan HTML: llä:

{{ message }}

Reverse Message

Huomaa mukautettu v-on-käsittelijä, joka kutsuu reverseMessage menetelmä. Tässä on JavaScript:

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

Tämä esimerkki täytti kappaleen tiedoilla ja määrittelee reverseMessage menetelmä. Vue on hieno niille, jotka eivät ole yhtä kokeneita monimutkaisten kirjastojen kanssa, mutta sillä on myös useita laajennuksia, jotka auttavat monimutkaisten yksisivuisten verkkosovellusten kehittämisessä.

21. Kuviolaboratorio

verkkosuunnittelutyökalut: Pattern Lab -näyttö

Pattern Lab perustuu Atomic Designiin [Kuva: Pattern Lab]

Pattern Lab on kaunis kuviopohjainen suunnittelutyökalu, jonka ovat luoneet Dave OIsen ja Brad Frost. Se perustuu Atomic Design , jossa sanotaan, että sinun tulisi jakaa malli pienimpiin osiinsa - atomiin - ja yhdistää ne muodostaen suurempia, uudelleenkäytettäviä komponentteja - molekyylejä ja organismeja -, jotka voidaan sitten muuttaa käyttökelpoisiksi malleiksi.

Vaikka ytimessä se on staattinen sivustogeneraattori, joka yhdistää käyttöliittymäkomponentit, siinä on paljon muuta Kuviolaboratorio kuin se. Se on kieli- ja työkalu-agnostinen; sen avulla voit sijoittaa käyttöliittymäkuvioita toisiinsa ja suunnitella dynaamisilla tiedoilla; siinä on laite-agnostisia näkymän koon muokkaustyökaluja, joiden avulla voit varmistaa, että suunnittelujärjestelmäsi on täysin reagoiva; ja se on täysin laajennettavissa, joten voit olla varma, että se laajenee vastaamaan tarpeitasi.

22. Materiaalisuunnittelu

Materiaalisuunnittelu on joukko Googlen periaatteita [Kuva: Google]

Materiaalisuunnittelu on joukko Googlen periaatteita [Kuva: Google](Kuvahyvitys: Google)

Materiaalisuunnittelu on Googlen visuaalinen kieli, jonka tarkoituksena on yhdistää hyvän suunnittelun klassiset periaatteet tekniikan ja tieteen innovaatioihin luodaksesi yhtenäisen ja joustavan perustan verkkosivustollesi.

Materiaalisuunnittelukehyksen avulla luodut verkkosivustot ja sovellukset näyttävät moderneilta ja ovat tuttuja käyttäjälle, joten ihmisten on helppo käyttää tuotetta heti. Tämän suunnittelujärjestelmän apuna on monia työkaluja; Napsauta navigointipalkin Resurssit löytääksesi ne.

Luo JS-banneri

(Kuvan luotto: Future / Toa Heftiba, Unsplash)

Liity joukkoomme huhtikuussa 2020 JavaScript-supertähtien kanssa GenerateJS: ssä - konferenssi, joka auttaa sinua rakentamaan paremman JavaScriptin. Varaa nyt osoitteessa generateconf.com

Seuraava sivu: Erikoistuneet verkkosuunnittelutyökalut ongelmien ratkaisemiseksi

  • 1
  • kaksi

Tämänhetkinen sivu: Sivu 1

Seuraava sivu Sivu 2