Prototípusok tervezése 5 alkalmazás, ami jobb, mint a Photoshop

A Photoshop egy népszerű eszköz a tervezőkkel, és kiterjesztései, mint például a CSS3Ps és a FontAwesomePS, jó eszköz a webdesign prototípusok létrehozásához is. ennek ellenére, nem igazán jött létre erre a célra és mivel a jelenlegi trendek érzékeny tervezéssel, a CSS előfeldolgozókkal, a CSS keretrendszerekkel és a felbontástól független grafikával (SVG) előrehaladnak, a Photoshop egyre kevésbé releváns a webes tervezéshez.

Nem kell aggódnia, mivel a független fejlesztők rengeteg alternatív alkalmazást építettek be a hiányosságok pótlására. Ebben a hozzászólásban megnézzük ezeket az alkalmazásokat, és megtudjuk mennyire kiválóak a jellemzőik a Photoshophoz képest, a web design prototípusok létrehozásához.

1. Webflow

A Webflow lehetővé teszi, hogy a webhelyeket húzza át. A Webflow létrehozza a Bootstrap rácson alapuló elrendezést, így a webhely kialakítása készen áll. A Webflow egy szabványos webkomponensek, például blokkok, listák és szövegformázás is, amely hozzáadható a webflow munkaterülethez.

A stílusok könnyen hozzáadhatók egy oldalfüggönyhöz, és tovább módosíthatók az elemek tulajdonságai is. Miután a tervezés befejeződött, exportálhatja a design eredményeit a HTML és a CSS kódba. Ön is megoszthatja munkáját egy csapattal.

2. Avokód

Az Avocode támogatja a PSD fájlokat, és lehetővé teszi, hogy azonnal szerkeszthesse és átalakíthassa azokat egy működőképes webhelyre HTML és CSS segítségével. Az Avocode kivonja a projekt összes eszközt, beleértve a CSS-t, a képeket és az SVG-t (ha van ilyen). Könnyedén kiválaszthatja a CSS-t, egy kevésbé, SASS vagy Stylus formában bármely kiválasztott réteghez, mivel integrálva lett a CSSHat-hoz.

Továbbá, az Avocode rendelkezik egy ellenőrző vezérléssel, amely lehetővé teszi, hogy visszatérjen a korábbi tervekhez, csak abban az esetben, ha valami rosszul megy.

3. Macaw

A Macaw lehetővé teszi, hogy webes elrendezéseket és webes elemeket tervezzen, ha olyan képszerkesztővel dolgozik, mint az Adobe Photoshop. Létrehozhat oszlopokat vagy blokkterületeket, beállíthatja pozícióját, és szükség szerint beállíthatja a tipográfiát. A Macaw lehetővé teszi a több elem stílusainak megváltoztatását egy helyen. Használhatja a könyvtárat, hogy tárolja az összes elemet későbbi használatra.

Az érzékeny kialakítás érdekében a Macaw lehetővé teszi a töréspontok beállítását és az összes eszköz optimalizálását. Amikor a tervezési folyamat befejeződött, a Macaw megfelelő HTML-t és CSS-t generálhat Önnek.

4. Vázlat

A vázlat ideális interfészek és weboldalak tervezéséhez. A bittérkép helyett vektor alapú objektumokat hoz létre. Így, amikor átméretezi a vászon méretét, a design nem veszíti el a minőséget. Az olyan funkciók, mint a „beépített rács”, segítenek jobban elrendezni az objektumot vagy a webes elrendezést.

Ezenkívül a Sketch a betűtípusokat hasonlóvá teszi a Webkittel megjelenített betűtípusokhoz (hisz a Chrome, az Opera és a Safari). Tehát nem kell aggódnia, hogy a kép szövegének eredménye nem olyan éles és pontos, mint a böngészőben megjelenő eredeti szöveg. A vázlat is exportálhatja a CSS-t a réteg minden egyes eleméhez.

5. Antettípus

Az Antetype egy olyan vektor alapú alkalmazás, amely a vizuális tervezésre összpontosít, nagyszerű felületelemek létrehozására, mint például a gradiens, árnyék, belső árnyék, szöveg árnyék, szegélystílus és lekerekített sarkok. Az Antetype több száz widgetet is tartalmaz, amelyeket közvetlenül a projektben használhat.

Az érzékeny kialakításhoz beállíthatja a töréspontokat, amelyek módosítják a képernyő méretét. Minden elemet képként vagy CSS formában is exportálhat.