Prototyyppien suunnittelu 5 sovellusta, jotka tekevät sen paremmin kuin Photoshop
Photoshop on suosittu työkalu suunnittelijoiden kanssa ja sen laajennukset, kuten CSS3Ps ja FontAwesomePS, tekevät siitä hyvän työkalun myös web-suunnittelun prototyyppien luomiseen. Kuitenkin, sitä ei todellakaan luotu tähän tarkoitukseen ja koska nykyiset suuntaukset etenevät reagoivalla suunnittelulla, CSS-esiprosessoreilla, CSS-kehyksillä ja resoluutiosta riippumattomalla grafiikalla (SVG), Photoshop on yhä vähemmän merkityksellinen web-suunnittelun kannalta.
Ei huolta, koska riippumattomien kehittäjien rakentamat vaihtoehtoiset sovellukset auttavat täyttämään aukot. Tässä viestissä tarkastelemme näitä sovelluksia ja selvitämme kuinka pitkälle niiden ominaisuudet ovat erinomaisia verrattuna Photoshopiin web-suunnitteluprototyyppien luomiseen.
1. Webflow
Webflow avulla voit suunnitella verkkosivustoja vetämällä ja pudottamalla. Webflow luo pohjaratkaisun, joka perustuu Bootstrap-verkkoon, jotta sivustosi suunnittelu on valmiina. Webflow sisältää myös joukon tavallisia Web-komponentteja, kuten lohkoja, luetteloita ja tekstin muotoilua, jonka voit lisätä Webflow-työtilaan.
Tyylit voidaan lisätä helposti sivuseinästä ja voit myös säätää myös elementtien ominaisuuksia. Kun suunnittelu on valmis, voit viedä mallin tulokset koodiin HTML ja CSS. Voit myös jakaa työsi tiimin kanssa.
2. Avokoodi
Avocode tukee PSD-tiedostoja ja mahdollistaa sen muokkaamisen ja muuntamisen toimivaksi verkkosivustoksi HTML: n ja CSS: n kanssa. Avocode poimii kaikki projektin varat, kuten CSS, Kuvat ja SVG (jos sellainen on). Voit poistaa CSS: n helposti valitun kerroksen muodossa vähemmän, SASS tai Stylus, koska se on integroitu CSSHatiin.
Lisäksi Avocode on varustettu tarkistusohjauksella, jonka avulla voit palata aiempiin malleihisi, mikäli jokin menee väärin.
3. Macaw
Macaw avulla voit suunnitella web-asetteluita ja web-elementtejä, jos työskentelet Adobe Editorin kaltaisessa kuvankäsittelyohjelmassa. Voit luoda sarakkeita tai lohkoalueita, säätää niiden sijaintia ja määrittää tarpeen mukaan typografian. Macaw avulla voit muuttaa useiden elementtien tyylejä yhdessä paikassa. Voit myös käyttää kirjastoa kaikkien elementtien tallentamiseen myöhempää käyttöä varten.
Jotta voit luoda herkän muotoilun, Macaw voit asettaa katkaisupisteet ja optimoida sivustosi kaikille laitteille. Kun suunnitteluprosessi on valmis, Macaw voi luoda sinulle sopivan HTML- ja CSS-koodin.
4. Piirros
Sketch on ihanteellinen rajapintojen ja verkkosivujen suunnitteluun. Se luo vektoripohjaisia objekteja bittikartan sijasta. Niinpä, kun muutat kankaan kokoa, muotoilu ei menetä laatua. Ominaisuudet, kuten sisäänrakennettu verkko, auttavat sinua järjestämään objektin tai verkkosivuston sijoittelun paremmin.
Lisäksi Sketch tekee fontit samankaltaisia kuin Webkitissä (ajattele Chrome, Opera ja Safari). Joten sinun ei tarvitse huolehtia siitä, että kuvan tekstin tulokset eivät ole yhtä teräviä ja tarkkoja kuin selaimessa näkyvä alkuperäinen teksti. Sketch voi myös viedä CSS: n jokaiselle kerroksen elementille.
5. Antyyppi
Antetype on vektoripohjainen sovellus, joka keskittyy visuaaliseen suunnitteluun, joka on hyvä luomaan rajapintaelementtejä, kuten kaltevuutta, varjosta, sisäistä varjoa, tekstin varjoa, reunustyyliä ja pyöristettyjä kulmia. Antetype tarjoaa myös satoja widgetejä, joita voit käyttää suoraan projektissasi.
Voit luoda reagoivan suunnittelun asettamalla katkoviivoja, jotka säätävät näytön kokoa. Voit myös viedä jokaisen elementin kuvan tai CSS: n muodossa.
