So erstellen Sie mit Photoshop ein Web-Drahtgittermodell

Dieser Beitrag stellt eine Reihe kostenloser Photoshop- Wireframe-Kits vor, die Benachrichtigungen, Bilder und Videos, Formularfelder, Titel, Absätze, Aufzählungslisten, Navigation, Werbebanner und allgemeine Website-Elemente wie Suchfelder, E-Mail-Registrierungsformulare usw. enthalten.

Die Verwendung dieses Kits ist sehr einfach. Erstellen Sie ein neues leeres Photoshop- Dokument und öffnen Sie die PSD- Datei des Wireframe-Kits. Ziehen Sie dann die benötigten Elemente aus dem Kit per Drag & Drop in Ihr eigenes leeres Photoshop-Dokument, um Ihr Design zu gestalten.

Dies kann sehr hilfreich sein, wenn Sie zwei Monitore oder einen großen Bildschirm haben. Normalerweise habe ich auf einem Bildschirm ein leeres Photoshop- Dokument und auf einem anderen Bildschirm ein Wireframe-Kit geöffnet. Wie Sie sehen, sind alle Elemente im Kit schwarz. Sie können den Hintergrund einfach ändern, indem Sie die Transparenz des Elements steuern.

Wireframe Kit Anwendungsfälle

Hier sind einige Beispiele, die mit diesem einfachen Wireframing-Kit erstellt wurden:

Website: jaybaer.com

Website: phoenixrealestateguy.com

Warum Photoshop für Wireframing verwenden?

Ja, viele Leute stellen mir diese Frage: Warum verwende ich Photoshop zum Erstellen von Wireframes? Ich weiß, dass es viele professionelle Softwareprogramme zum Erstellen von Wireframes gibt, und ich habe viele davon verwendet. Ich sage jedoch nicht, dass sie schlecht sind. Aus irgendeinem Grund erledige ich als Designer meine gesamte Arbeit lieber in Photoshop.

Wenn Sie bereits über gute Kenntnisse in Photoshop verfügen, geht dies viel schneller, als wenn Sie eine neue Wireframing-Software erlernen. Sie sind nicht auf die von der Wireframing-Software bereitgestellten Designelemente beschränkt und können beliebige Elemente erstellen. Sie können die tatsächliche Größe verwenden und sie später entsprechend Ihren tatsächlichen Designanforderungen in ein Hi-Fi-Design umwandeln. Wenn Sie mehrere Wireframe-Seiten haben, können Sie diese in verschiedene Ebenen legen und dann „Ebenen zusammenführen“ und „Smart Objects“ verwenden, um Zeit zu sparen. Sie können es problemlos in fast jedes Dateiformat exportieren. Wenn Sie schnelles Feedback von Ihrem Kunden erhalten möchten, exportieren Sie es als PDF. Ihr Kunde kann der Datei dann seine Kommentare hinzufügen und sie an Sie zurücksenden. Sie können Ihren eigenen Drahtrahmen personalisieren, um ihm ein einzigartiges Aussehen zu verleihen.

Laden Sie Photoshop Wireframing Kit kostenlos herunter