Oblikovanje prototipov 5 aplikacij, ki to naredijo bolje kot Photoshop

Photoshop je priljubljeno orodje za oblikovalce in njegove razširitve, kot sta CSS3P in FontAwesomePS, zato je dobro orodje tudi za izdelavo prototipov za spletno oblikovanje. Kljub temu, v resnici ni bil ustvarjen za ta namen in ker trenutni trendi napredujejo s prilagodljivim dizajnom, predprocesorji CSS, ogrodji CSS in grafiko neodvisno od ločljivosti (SVG), Photoshop postaja vse manj pomemben za spletno oblikovanje.

Ne skrbite, čeprav obstaja veliko alternativnih aplikacij, ki so jih zgradili neodvisni razvijalci, da bi pomagali zapolniti vrzeli. V tem prispevku si bomo ogledali te aplikacije in izvedeli kako daleč njihove funkcije excel v primerjavi s Photoshop za ustvarjanje prototipov web design.

1. Spletni tok

Webflow vam omogoča oblikovanje spletnih strani z vlečenjem in spuščanjem. Webflow ustvarja postavitev, ki temelji na mreži Bootstrap, tako da je vaša spletna stran pripravljena na odziv. Webflow ima tudi niz standardnih spletnih komponent, kot so bloki, seznami in oblikovanje besedila, ki jih lahko dodate v delovni prostor Webflow..

Slogi lahko preprosto dodate iz stranskega panela in lahko dodatno prilagodite lastnosti elementov. Ko je zasnova končana, lahko rezultate projekta izvozite v kodo HTML in CSS. Svoje delo lahko delite tudi z ekipo.

2. Avokod

Avocode podpira PSD datoteke in vam omogoča, da jih takoj uredite in pretvorite v uporabno spletno stran s HTML in CSS. Avocode bo izvlekel vsa sredstva v vašem projektu, vključno s CSS, slikami in SVG (če obstajajo). Lahko preprosto ekstrahirate CSS, v obliki Less, SASS ali Stylus za katero koli izbrano plast, ker je bila integrirana s CSSHat.

Poleg tega je Avocode opremljen s kontrolo revizij, ki vam omogoča, da se vrnete na svoje prejšnje modele, samo v primeru, da gre kaj narobe.

3. Maka

Maca vam omogoča oblikovanje spletnih postavitev in spletnih elementov, če delate na urejevalniku slik, kot je Adobe Photoshop. Ustvarite lahko stolpce ali bloka, prilagodite njihovo pozicioniranje in po potrebi nastavite tipografijo. Macaw vam omogoča, da spremenite sloge več elementov na enem mestu. Knjižnico lahko uporabite tudi za shranjevanje vseh elementov za kasnejšo uporabo.

Za ustvarjanje odzivnega dizajna vam Macaw omogoča nastavitev točk prekinitve in optimizacijo vašega spletnega mesta za vse naprave. Ko je proces oblikovanja končan, Macaw lahko ustvari pravi HTML in CSS za vas.

4. Skica

Skica je idealna za oblikovanje vmesnikov in spletnih mest. Ustvari vektorske objekte namesto v bitni sliki. Ko spreminjate velikost velikosti platna, vaša zasnova ne izgubi kakovosti. Funkcije, kot je »vgrajena mreža«, vam bodo pomagale bolje urediti objekt ali postavitev spletne postavitve.

Poleg tega Sketch spremeni pisave, podobne tistim, ki so prikazane na spletnem mestu Webkit (npr. Chrome, Opera in Safari). Torej vam ni treba skrbeti, da rezultati besedila na sliki niso tako ostri in točni kot izvirno besedilo, prikazano v brskalniku. Skica lahko tudi izvozi CSS za vsak element v plasti.

5. Antetype

Antetype je vektorska aplikacija, ki je osredotočena na vizualno oblikovanje, odlična za ustvarjanje vmesniških elementov, kot so gradient, padajoča senca, notranja senca, senca besedila, slog obrobe in zaobljeni koti. Antetype ponuja tudi na stotine pripomočkov, ki jih lahko uporabite neposredno v projektu.

Če želite ustvariti odzivno zasnovo, lahko nastavite prekinitvene točke, ki bodo prilagodile velikost zaslona. Vsak element lahko izvozite tudi v obliki slike ali CSS.