Designe prototyper 5 Apps, der gør det bedre end Photoshop

Photoshop er et populært værktøj med designere, og dets udvidelser som CSS3Ps og FontAwesomePS gør det til et godt værktøj til at skabe webdesignprototyper. Ikke desto mindre, det blev ikke rigtig skabt til dette formål og som de nuværende tendenser skubber frem med lydhørt design, CSS-forprocessorer, CSS-rammer og resolution-uafhængig grafik (SVG), bliver Photoshop mindre relevant for webdesign.

Ikke bekymre dig, da der er masser af alternative apps bygget af uafhængige udviklere for at hjælpe med at udfylde hullerne. I dette indlæg vil vi se på disse apps og finde ud af hvor langt deres funktioner udmærker sig i forhold til Photoshop for at skabe webdesign prototyper.

1. Webflow

Webflow giver dig mulighed for at designe websites ved at trække og slippe. Webflow skaber layoutet baseret på et Bootstrap-net, så dit website design er lydhør. Webflow leveres også med et sæt standardwebkomponenter som blokke, lister og tekstformatering, som du kan tilføje til Webflow-arbejdsområdet.

Stil kan nemt tilføjes fra en sidepanel, og du kan også tilpasse egenskaberne af elementerne yderligere. Når designet er færdigt, kan du eksportere resultaterne af designet til kode HTML og CSS. Du kan også dele dit arbejde med et hold.

2. Avokode

Avocode understøtter PSD-filer og giver dig mulighed for straks at redigere og omdanne det til en brugbar hjemmeside med HTML og CSS. Avocode vil uddrage alle aktiver i dit projekt, herunder CSS, Billeder og SVG (hvis nogen). Du kan nemt udtrække CSS, i form af Mindre, SASS eller Stylus til ethvert valgt lag, da det er integreret med CSSHat.

Desuden er Avocode udstyret med revisionskontrol, som lader dig vende tilbage til dine tidligere designs, bare hvis noget går galt.

3. Macaw

Macaw lader dig designe weblayouter og webelementer aas, hvis du arbejder på et billedredaktør som Adobe Photoshop. Du kan oprette en kolonne eller blokere områder, justere deres positionering og indstille typografi efter behov. Macaw giver dig mulighed for at ændre stilarterne for flere elementer på ét sted. Du kan også bruge biblioteket til at gemme alle elementerne til senere brug.

For at skabe et lydhørt design giver Macaw dig mulighed for at angive breakpoints og optimere dit websted for alle enheder. Når designprocessen er afsluttet, kan Macaw generere ordentlig HTML og CSS for dig.

4. Skitse

Sketch er ideel til design af grænseflader og websites. Det skaber vektorbaserede objekter i stedet for i bitmappe. Således når du ændrer størrelsen på lærredet, taber dit design ikke kvaliteten. Funktioner som det 'indbyggede net' hjælper dig med bedre at arrangere objektet eller en webplacering.

Derudover giver Sketch skrifttyper, der ligner det, der vises på Webkit (tænk Chrome, Opera og Safari). Så du behøver ikke bekymre dig om, at resultaterne af teksten i billedet ikke er så skarpe og nøjagtige, som den oprindelige tekst vises i browseren. Skitse kan også eksportere CSS for hvert element i laget.

5. Antetype

Antetype er en vektorbaseret applikation, der er fokuseret på visuelt design, der er fantastisk til at skabe grænsefladeelementer som f.eks. Gradient, dropskygge, indre skygge, tekstskygge, grænsestil og afrundede hjørner. Antetype giver også hundredvis af widgets, som du kan bruge direkte i dit projekt.

For at skabe et responsivt design kan du indstille breakpoints, der justerer skærmstørrelsen. Du kan også eksportere hvert element i form af et billede eller CSS.