Projektiranje prototipova 5 aplikacija koje to bolje rade od Photoshopa

Photoshop je popularan alat s dizajnerima i njegovim nastavcima kao što su CSS3P i FontAwesomePS čine ga dobrim alatom za izradu prototipova web dizajna. Ipak, zapravo nije stvorena za tu svrhu te kako se trenutni trendovi kreću naprijed s prilagodljivim dizajnom, CSS pred-procesorima, CSS okvirima i grafičkom podrškom neovisnom o razlučivosti (SVG), Photoshop postaje sve manje relevantan za web-dizajn.

Ne brinite iako postoji mnogo alternativnih aplikacija koje su izgradili neovisni programeri kako bi popunili praznine. U ovom postu ćemo pogledati ove aplikacije i saznati koliko daleko njihove značajke excel u odnosu na Photoshop za stvaranje web dizajn prototipova.

1. Webflow

Webflow vam omogućuje dizajniranje web stranica povlačenjem i ispuštanjem. Webflow stvara raspored temeljen na Bootstrap mreži tako da je dizajn vaše web-lokacije spreman za reagiranje. Webflow također sadrži skup standardnih web-komponenti, kao što su blokovi, popisi i oblikovanje teksta koje možete dodati u radni prostor Webflow.

Stilovi se mogu lako dodati iz sidepanela i možete dodatno prilagoditi svojstva elemenata. Nakon što je dizajn gotov, možete izvesti rezultate dizajna u kod HTML i CSS. Također možete podijeliti svoj rad s timom.

2. Avokod

Avocode podržava PSD datoteke i omogućuje vam da ih odmah uredite i pretvorite u funkcionalnu web-lokaciju s HTML-om i CSS-om. Avocode će izdvojiti svu imovinu u vašem projektu, uključujući CSS, Images i SVG (ako ih ima). Možete jednostavno izdvojiti CSS, u obliku Less, SASS ili Stylus za bilo koji odabrani sloj, jer je integriran s CSSHat.

Nadalje, Avocode je opremljen kontrolom revizije koja vam omogućuje da se vratite na prethodni dizajn, samo u slučaju da nešto pođe po zlu.

3. Ara

Maca vam omogućuje da dizajnirate web-izgled i web elemente ako radite na uređivaču slika kao što je Adobe Photoshop. Možete stvoriti stupce ili blokirati područja, prilagoditi njihovo pozicioniranje i po potrebi postaviti tipografiju. Ara vam omogućuje da promijenite stilove više elemenata na jednom mjestu. Također možete koristiti knjižnicu za pohranjivanje svih elemenata za kasniju upotrebu.

Da biste stvorili odgovarajući dizajn, Macaw vam omogućuje postavljanje točaka prekida i optimiziranje web-lokacije za sve uređaje. Kada je proces izrade završen, makao može generirati odgovarajući HTML i CSS za vas.

4. Skica

Skica je idealna za izradu sučelja i web-mjesta. On stvara vektorske objekte umjesto u bitmapu. Stoga, kada mijenjate veličinu platna, vaš dizajn neće izgubiti kvalitetu. Značajke kao što je 'ugrađena rešetka' pomoći će vam da bolje uredite objekt ili položaj web izgleda.

Osim toga, Sketch daje fontove slične onima prikazanim na Webkit-u (mislim Chrome, Opera i Safari). Dakle, ne morate brinuti o tome da rezultati teksta na slici nisu toliko oštri i točni kao izvorni tekst prikazan u pregledniku. Skica također može izvesti CSS za svaki element u sloju.

5. Antetype

Antetype je vektorska aplikacija koja je usmjerena na vizualni dizajn, izvrsna za stvaranje elemenata sučelja kao što su gradijent, pad sjene, unutarnja sjena, tekstualna sjena, stil obruba i zaobljeni kutovi. Antetype također nudi stotine widgeta koje možete koristiti izravno u projektu.

Da biste stvorili odgovarajući dizajn, možete postaviti točke prekida koje će prilagoditi veličinu zaslona. Također možete izvesti svaki element u obliku slike ili CSS-a.