8 Web-suunnittelutyökalua käytettäväksi vuonna 2018

Nykyaikaisessa verkkoyhteisössä on monia työkaluja verkkosivujen suunnitteluun. Siellä on klassikoita - grafiikkaeditoijia, kuten Photoshop ja Sketch - sekä ohjelmia, joissa yhdistyvät sekä muotoilu että ulkoasu.

Päätyökalun käytön lisäksi suunnittelija käyttää yleensä pääsääntöisesti joukkoa työtä yksinkertaistavia apupalveluita ja työkaluja.

Outline2Design-tiimi valitsi luettelon mielenkiintoisimmista ja hyödyllisimmistä resursseista, joihin olemme kiinnittyneet.

Nopea käyttöliittymä

RapidUI on verkkosuunnittelualusta, jonka avulla suunnittelijat voivat muuttaa PSD- ja Sketch-tiedostot täysin toimiviksi verkkosivustoiksi kirjoittamatta yhtä koodiriviä.

Edut: automaattinen käyttöliittymäkehitys.

Jokainen suunnittelun elementti voi suorittaa toiminnon. Voit esimerkiksi muuntaa kartat helposti interaktiivisiksi karttoiksi, neliöt painikkeiksi ja taustakuvat parallaksiksi.

Haitat: vanhentunut käyttöliittymäsuunnittelu. Tämä ei kuitenkaan ole tärkein asia.

Suuri haittapuoli on, että työkalu ei lue kerroksia ja peittokuvatehosteita hyvin. Jos olet jo valinnut sen, sinun pitäisi viettää aikaa laadulähteiden valmisteluun.

Webflow

Webflow on verkkosivustojen kehittämistyökalu, jonka vahva puoli on visuaalinen editori, jossa elementtien hallinta tapahtuu vetämällä ja pudottamalla -rajapinnan kautta, sekä rajoittamaton ilmainen hinta, jolla on mahdollisuus isännöidä yhtä sivustoa.

Verkkosivun luominen ei vaadi erityistä tietämystä ja ohjelmointitaitoja, joten palvelu sopii sivuston rakentamisen aloittelijoille ja kokeneille käyttäjille.

Edut: ensinnäkin se on ilmainen työkalu. Suurin ero tämän palvelun ja muiden välillä on siinä, että suunnittelija voi tehdä intuitiivisesti toimivan suunnittelun ilman ohjelmoijan apua.

Bonuksena Webflow on tarjonnut myös valikoiman parhaita suunnittelijoita ja mahdollisuuden nähdä erilaisia ​​töitä.

Haitat: Tarvitset vain vähän HTML / CSS-tietämystä työskennelläksesi tämän työkalun kanssa. Toisaalta, se ei ole niin paha.

Atomi ja Proto

Mielestämme nämä työkalut ovat identtisiä toiminnallisuudessa. Pääsuunta on prototyyppien lukeminen monille laitteille.

Edut: Sinun ei tarvitse oppia ohjelmointia lisätoimintojen lisäämiseksi. Verkkopohjaisten käyttöympäristöjen avulla kaikki käyttäjät voivat lisätä nämä elementit kerralla.

Atomic on ilmainen. Siinä on rajaton määrä prototyyppejä ja kaikki ovat ilmaisia.

Proto.io: n suuri etu on sen integrointi kolmeen käyttäjän testausympäristöön: Lookback, UserTesting ja Validally, mikä tekee siitä paljon mukavamman käyttäjän testaustarkoituksiin.

Haitat: Proto.io: lla on omat laajennukset sekä Sketchille että Photoshopille, mutta valitettavasti kaikki tasot viedään staattiseen grafiikkaan, joten niitä ei muokata Proto.io: ssa. Toinen haitta on se, että Proto.io: lle joudut maksamaan 24 dollaria kuukaudessa yhdelle henkilölle ja korkeintaan viidelle projektille.

Figma

Figma on monialustainen työkalu suunnittelijoille ja antaa useiden ihmisten työskennellä samassa projektissa reaaliajassa. Figma on erityisen suosittu web-kehittäjien toimesta. On ilo tehdä graafinen käyttöliittymä mobiilisovellukselle.

Lisäksi täällä, kuten Google-dokumenteissa, on mahdollista jättää kommentteja suoraan työkenttään, mikä on erittäin kätevää ryhmätyöhön.

Viacheslav, vanhempi UX / UI-suunnittelija uskoo, että:

”Yksi Figman tärkeimmistä eduista on yhteistyömuoto, kun useat suunnittelijat voivat työskennellä yhdellä asettelulla kerrallaan. Uskon, että tämä työkalu on hyödyllinen aloittelijoille nuorille suunnittelijoille. Haluan myös huomata, että Figma on online-työkalu ja voin käyttää sitä monilta alustoilta. Tarvitsen vain Internetin. "

edut:

  • Tämän työkalun päivitykset ilmestyvät melko usein. Viimeinen julkaistiin 25. tammikuuta 2018. Kehitysryhmä on tehnyt monia muutoksia, joista yksi on kyky vetää Sketch-tiedostot avoimeen asiakirjaan.
  • Ei vaadi koodaustietoa, toisin kuin Webflow.
  • Suunnittelu muunnetaan automaattisesti CSS-koodiksi.

Prototyyppien laatiminen paperille

”Useimmat UX-suunnittelijat aloittavat suunnitteluprosessin paperilla, mutta nyt voit testata joitain hypoteeseja pohjimmiltaan luodessasi interaktiivista prototyyppiä. POP antaa suunnittelijoille luonnoksen vaiheessa luoda toimivia prototyyppejä ja jakaa ne ryhmän kanssa alkuperäisten vaiheiden virheellisten ratkaisujen testaamiseksi ja tunnistamiseksi. Uskon, että tämä sovellus helpottaa ja nopeuttaa mobiilirajapintojen suunnitteluprosessia ja tuottaa standardiprosessin uudelle nykytasolle. "
Roman, vanhempi UX / UI-suunnittelija Outline2Designissa

Jos pidät mieluummin vanhan koulun menetelmistä, kun prototyypit piirrettiin käsin monien nykyaikaisten työkalujen puutteen takia, POP: sta tulee sinulle todellinen ystävä.

Kaikki yksinkertaistuu jossain määrin: piirrät piirrosluettelosi sovelluksen ideat, otat kuvia ja lisäät linkkejä painikkeiden ja asettelujen välille. Sen jälkeen synkronoi prototyypit Dropboxin kanssa ja hanki valmis prototyyppi.

Edut: minimikulut ajallaan ja resursseilla. Se on erittäin kätevä testata polkuja mobiilisovelluksille.

Haitat: Emme löytäneet globaaleja puutteita. Yksi asia, jonka haluaisimme huomata, on sovelluksen epämukava piirtotoiminto. Mutta tämä ei koske POP-päätoimintoa. Todennäköisesti tämä on lisäominaisuus.

Verkkotyökalut VR: lle

Kehys

Virtuaalitodellisuus kehittyy valon nopeudella. Emme voineet ohittaa työkaluja, jotka auttavat luomaan sitä. Olemme tarkistaneet joitain avoimen lähdekoodin työkaluja.

A-Frame on Mozillan verkkokehys, joka luotiin VR-sisällön luomiseen helposti ja tehokkaasti. Se on riippumaton avoimen lähdekoodin projekti, jolla on iso VR-yhteisö. A-Frameistä on jopa interaktiivinen kurssi Web VR: lle. Työkalun ytimeen on upotettu HTML-pohjainen tehokas entiteettikomponenttikehys.

edut:

  • Todella tehokas työkalu, joka tukee useimpia VR-kuulokkeita, kuten Vive, Rift, Daydream jne.
  • Cross-Platform VR: Rakenna VR-sovelluksia Vive-, Rift-, Daydream-, GearVR- ja Cardboard-laitteille tuella kaikille vastaaville ohjaimille.
  • Yhteensopiva useimpien kirjastojen, kehysten ja työkalujen, kuten React, Preact, Vue.js, d3.js, Ember.js ja jQuery kanssa.

Haitat: Tarvitset HTML-taitoa työskennelläksesi tämän työkalun kanssa.

Hologrammi

Luojat esittelevät tämän sovelluksen all-in-one-web-VR-luontityökaluna. Se on itse asiassa työpöytäsovellus VR: n luomiseen ja prototyyppien laatimiseen kenelle tahansa. Tämä työkalu sisältää useita käyttöliittymiä useita tavoitteita varten:

Näkymä

3D-visuaalinen käyttöliittymätyökalu, joka on suunniteltu niille, jotka eivät tiedä 3D: stä ja VR: stä. Se on helppo käyttää ja erittäin intuitiivinen. Tämä käyttöliittymä auttaa luomaan 3D-ympäristön ensimmäisessä vaiheessa ennen koodaamista ja 3D-näkymän muuttamista VR: ksi.

Coding

Tämä on päärajapinta, jossa taikuus tapahtuu. Hologrammin luojat todistavat, että ennen lähtöä ei tarvitse tietää, kuinka koodata. Kieli osoittautuu todella helpoksi ymmärrettäväksi.

varat

Tämän käyttöliittymän avulla voit selata projektin omaisuutta nopeasti ja se on integroitu Google Blocksiin, joten tämän yhteisön luomien 3D-objektien käyttö on helppoa.

Edut: helppo käyttää, nautinnollinen työkalu VR-luomiseen. Se ei vaadi paljon tietoa aloittamiseksi.

Haitat: animaation esikatselu kestää kauan.

Kuten huomaat, nämä työkalut ovat enemmän kuin tarpeeksi. Jokainen joukkueemme valitsee yhden tai toisen. Neuvomme - valitse sinulle sopivin tehtävästä riippuen.