Prototypen entwickeln 5 Apps, die besser sind als Photoshop

Photoshop ist ein beliebtes Werkzeug bei Designern. Durch seine Erweiterungen wie CSS3Ps und FontAwesomePS ist es auch ein gutes Werkzeug für die Erstellung von Prototypen für Webdesign. dennoch, es wurde nicht wirklich für diesen Zweck geschaffen Und da die aktuellen Trends mit responsivem Design, CSS-Vorprozessoren, CSS-Frameworks und auflösungsunabhängigen Grafiken (SVG) voranschreiten, wird Photoshop für das Webdesign weniger relevant.

Keine Sorge, denn es gibt viele alternative Apps, die von unabhängigen Entwicklern entwickelt wurden, um die Lücken zu schließen. In diesem Beitrag werden wir uns diese Apps ansehen und herausfinden Wie weit sind ihre Funktionen im Vergleich zu Photoshop für die Erstellung von Webdesign-Prototypen herausragend.

1. Webflow

Mit Webflow können Sie Websites per Drag & Drop erstellen. Webflow erstellt das Layout basierend auf einem Bootstrap-Grid, sodass Ihr Website-Design reaktionsfähig ist. Webflow enthält außerdem eine Reihe von Standard-Webkomponenten wie Blöcke, Listen und Textformatierungen, die Sie dem Webflow-Arbeitsbereich hinzufügen können.

Stile können einfach über ein Sidepanel hinzugefügt werden. Außerdem können Sie die Eigenschaften der Elemente weiter anpassen. Sobald der Entwurf abgeschlossen ist, können Sie die Ergebnisse des Entwurfs in Code-HTML und CSS exportieren. Sie können Ihre Arbeit auch mit einem Team teilen.

2. Avocode

Avocode unterstützt PSD-Dateien und ermöglicht Ihnen die sofortige Bearbeitung und Umwandlung in eine funktionsfähige Website mit HTML und CSS. Avocode extrahiert alle Assets in Ihrem Projekt, einschließlich CSS, Images und SVG (sofern vorhanden). Sie können CSS auf einfache Weise in einer Form von Less, SASS oder Stylus für jede ausgewählte Ebene extrahieren, da diese in CSSHat integriert wurde.

Darüber hinaus ist Avocode mit einer Revisionskontrolle ausgestattet, mit der Sie zu Ihren vorherigen Entwürfen zurückkehren können, für den Fall, dass irgendetwas schief geht.

3. Macaw

Mit Macaw können Sie Weblayouts und Webelemente entwerfen, wenn Sie mit einem Bildeditor wie Adobe Photoshop arbeiten. Sie können Spalten oder Blockbereiche erstellen, ihre Position anpassen und die Typografie nach Bedarf festlegen. Mit Macaw können Sie die Stile mehrerer Elemente an einem Ort ändern. Sie können die Bibliothek auch verwenden, um alle Elemente für die spätere Verwendung zu speichern.

Um ein responsives Design zu erstellen, können Sie mit Macaw Haltepunkte festlegen und Ihren Standort für alle Geräte optimieren. Wenn der Entwurfsprozess abgeschlossen ist, kann Macaw für Sie das richtige HTML und CSS erstellen.

4. Skizze

Sketch ist ideal für die Gestaltung von Schnittstellen und Websites. Es erstellt vektorbasierte Objekte anstatt in Bitmap. Wenn Sie also die Leinwandgröße ändern, geht Ihr Design nicht an Qualität verloren. Funktionen wie das integrierte Raster helfen Ihnen, das Objekt oder die Platzierung eines Weblayouts besser zu arrangieren.

Darüber hinaus stellt Sketch Schriftarten dar, die denen von Webkit ähneln (Chrome, Opera und Safari). Sie müssen sich also keine Sorgen machen, dass die Ergebnisse des Texts im Bild nicht so scharf und genau wie der im Browser angezeigte Originaltext sind. Sketch kann auch das CSS für jedes Element in der Ebene exportieren.

5. Antetyp

Antetype ist eine vektorbasierte Anwendung, die sich auf visuelle Gestaltung konzentriert. Sie eignet sich hervorragend zum Erstellen von Oberflächenelementen wie Farbverlauf, Schattenwurf, innerem Schatten, Textschatten, Randstil und abgerundeten Ecken. Antetype bietet auch Hunderte von Widgets, die Sie direkt in Ihrem Projekt verwenden können.

Um ein responsives Design zu erstellen, können Sie Haltepunkte festlegen, um die Bildschirmgröße anzupassen. Sie können jedes Element auch in Form eines Bildes oder eines CSS exportieren.