8 veebikujunduse tööriista, mida 2018. aastal kasutada

Kaasaegses veebikogukonnas on veebidisaini jaoks palju tööriistu. Seal on klassikud - graafikatoimetajad, nagu Photoshop ja Sketch - ning programmid, mis ühendavad nii kujunduse kui ka paigutuse.

Lisaks põhitööriista kasutamisele kasutab disainer reeglina mitmeid abiteenuseid ja tööriistu, mis tööd lihtsustavad.

Outline2Design-i meeskond valis nimekirja kõige huvitavamatest ja kasulikumatest ressurssidest, mille külge me haakusime.

Kiire kasutajaliides

RapidUI on veebidisaini platvorm, mis võimaldab disaineritel muuta oma PSD- ja Sketch-failid täielikult funktsionaalseteks veebisaitideks, kirjutamata ühte koodirida.

Eelised: automatiseeritud liidese arendamine.

Iga kujunduselement võib toimingu sooritada. Näiteks saate kaarte hõlpsalt teisendada interaktiivseteks kaartideks, ruudud nuppudeks ja taustapilte parallaksiks.

Puudused: vananenud liidesekujundus. See pole aga kõige olulisem asi.

Suur puudus on see, et tööriist ei loe kihte ja ülekatte efektid on head. Kui olete selle juba valinud, peaksite kulutama aega kvaliteetsete allikate ettevalmistamisele.

Veebivoog

Webflow on veebisaitide arendamise tööriist, mille tugev külg on visuaalne toimetaja koos elemendihaldusega pukseerimisliidese kaudu, aga ka piiramatu tasuta piletihind, millel on võimalus ühte saiti majutada.

Veebisaidi loomine ei vaja eriteadmisi ja programmeerimisoskusi, seega sobib teenus nii saidi loomise valdkonnas tegutsevatele algajatele kui ka kogenud kasutajatele.

Eelised: esiteks on see tasuta tööriist. Peamine erinevus selle teenuse ja teiste vahel seisneb selles, et disainer saab intuitiivselt funktsionaalse kujunduse teha ilma programmeerija abita.

Boonusena on Webflow pakkunud ka valikut tippdisainereid ja võimaluse näha erinevaid töid.

Puudused: selle tööriistaga töötamiseks vajate minimaalseid teadmisi HTML / CSS-ist. Teisest küljest pole see nii hull.

Aatom ja proto

Me arvame, et need tööriistad on identsed. Peamine suund on arvukate seadmete prototüüpimine.

Eelised: täiendavate funktsioonide lisamiseks ei pea te programmeerimist õppima. Veebipõhised platvormid võimaldavad igal kasutajal neid elemente korraga lisada.

Aatom on tasuta. Sellel on piiramatu arv prototüüpe ja kõik on tasuta.

Proto.io suur eelis on selle integreerimine kolme kasutajatestimisplatvormiga: Lookback, UserTesting ja Validally, mis muudab selle kasutajatestimise jaoks palju mugavamaks.

Puudused: Proto.io-l on nii Sketchi kui ka Photoshopi jaoks oma pistikprogrammid, kuid kahjuks eksporditakse kõik kihid staatilisse graafikasse, nii et neid Proto.io-s ei redigeerita. Veel üks puudus on see, et Proto.io jaoks peate ühe inimese ja kuni viie projekti eest maksma iga kuu 24 dollarit.

Figma

Figma on platvormideülene tööriist disaineritele ja võimaldab mitmel inimesel reaalajas sama projekti kallal töötada. Figmat eelistavad eriti veebiarendajad. Hea meel on teha mobiilirakenduse jaoks graafiline kasutajaliides.

Lisaks on siin, nagu ka Google Docsis, võimalik kommentaare jätta otse tööväljale, mis on meeskonnatööks väga mugav.

UX / UI vanemdisainer Viacheslav usub, et:

„Figma üks olulisemaid eeliseid on koostöörežiim, kui mitmed disainerid saavad töötada ühe kujundusega korraga. Usun, et see tööriist on kasulik algajatele noorematele disaineritele. Samuti tahan märkida, et Figma on veebipõhine tööriist ja saan seda kasutada paljudest platvormidest. Mul on selleks vaja ainult Internetti. ”

Eelised:

  • Selle tööriista värskendused ilmuvad üsna sageli. Viimane ilmus 25. jaanuaril 2018. Arendusmeeskond on teinud palju muudatusi, millest üks on võimalus Sketch-failide lohistamine avatud dokumenti.
  • Ei vaja erinevalt Webflow-st teadmiste kodeerimist.
  • Kujundus teisendatakse automaatselt CSS-koodiks.

Prototüüpimine paberil

“Enamik UX-i disainereid alustab disainiprotsessi paberil visanditega, alles nüüd saate interaktiivse prototüübi loomisel põhimõtteliselt katsetada mõnda hüpoteesi. POP võimaldab visandite väljatöötamisel disaineritel luua töötavaid prototüüpe ja jagab neid meeskonnaga, et katsetada ja tuvastada ekslikke lahendusi algfaasis. Usun, et see rakendus hõlbustab ja kiirendab mobiilsete liideste kujundamise protsessi ning viib standardprotsessi uuele kaasaegsele tasemele. ”
Roman, Outline2Design UX / UI vanemdisainer

Kui eelistate vana kooli meetodeid, kui prototüübid joonistati käsitsi mitmesuguste kaasaegsete tööriistade puudumise tõttu, saab POP teie jaoks tõeliseks sõbraks.

Kõik on mingil määral lihtsustatud: visandite visandirakenduse rakenduse ideed, pildistate ja lisate lingid nuppude ja paigutuste vahele. Pärast seda sünkroonige prototüübid Dropboxiga ja saate valmis prototüübi.

Eelised: minimaalsed aja- ja ressursikulud. See on mobiilirakenduste radade testimiseks väga mugav.

Puudused: me ei leidnud globaalseid vigu. Üks asi, mida tahaksime märkida, on rakenduse sees olev ebamugav joonistusfunktsioon. Kuid see ei kehti peamise POP-funktsiooni kohta. Tõenäoliselt on see lisafunktsioon.

VR-i veebitööriistad

A-raam

Virtuaalne reaalsus areneb valguse kiirusel. Ja me ei saanud mööda tööriistadest, mis aitavad seda luua. Oleme üle vaadanud mõned avatud lähtekoodiga tööriistad.

A-Frame on Mozilla veebiserver, mis loodi VR-sisu hõlpsaks ja võimsaks loomiseks. See on iseseisev avatud lähtekoodiga projekt, millel on suur VR-kogukond. A-Frameist on olemas isegi Web VR-i interaktiivne kursus. Tööriista tuuma on manustatud HTML-põhine võimas olemi-komponendi raamistik.

Eelised:

  • Tõesti võimas tööriist, mis toetab enamikku VR-peakomplekte nagu Vive, Rift, Daydream jne.
  • Platvormidevaheline VR: looge VR-rakendused Vive, Rift, Daydream, GearVR ja Cardboard jaoks koos kõigi vastavate kontrollerite toega.
  • Ühildub enamiku teekide, raamistike ja tööriistadega, sealhulgas React, Preact, Vue.js, d3.js, Ember.js ja jQuery.

Puudused: selle tööriistaga töötamiseks on vaja HTML-i teadmisi.

Hologramm

Loojad esitavad selle rakenduse kui kõik-ühes veebi VR-i loomise tööriista. See on tegelikult töölauarakendus VR-i loomiseks ja prototüüpimiseks kõigile. See tööriist sisaldab mitut eesmärki hõlmavaid liideseid:

Stseen

3D-visuaalse liidese tööriist, mis on mõeldud neile, kes ei tea 3D-st ja VR-ist midagi. Seda on lihtne kasutada ja väga intuitiivne. See liides aitab enne kodeerimise alustamist ja 3D-stseeni muutmist VR-iks esimese etapina 3D-keskkonda.

Kodeerimine

See on peamine liides, kus maagia juhtub. Hologrammi loojad tõestavad, et enne alustamist pole vaja teada, kuidas koodi kodeerida. Keelt osutub tõesti üsna hõlpsasti mõistetavaks.

Varad

See liides võimaldab teil projekti vara kiiresti sirvida ja see on integreeritud Google Blocksiga, nii et selle kogukonna loodud 3D-objekte on lihtne kasutada.

Eelised: lihtne kasutada, nauditav tööriist VR-i loomiseks. Alustamine ei vaja palju teadmisi.

Puudused: animatsiooni eelvaade võtab kaua aega.

Nagu näete, on neid tööriistu rohkem kui piisavalt. Iga meie meeskond valib ühe või teise. Meie nõuanne - sõltuvalt ülesannetest vali endale sobiv.