Mock-up Interface. Kostenlose Wireframing Kits für Photoshop

Website oder Interface Wireframe (auch Wireframing genannt) ist eigentlich eine schematische Darstellung von Inhaltsblöcken oder Teilen eines Web-Interface oder App. Wireframe macht das Skeleton einer Webseite/ eines Interface optisch sichtbar.
Mit dem Wireframe kann man leicht das Seitenlayout, die Anordnung der Inhaltsteile, Seitennavigation zeigen. In Wireframes werden Bilder und Texten häufig weggelassen, denn der Schwerpunkt liegt in der Funktionalität, Verhalten und die Priorität des Inhalts.
Das heißt, es konzentriert sich was ein Bildschirm tut und nicht wie es aussieht. Wireframes können Bleistiftzeichnungen oder Skizzen auf einem Whiteboard sein. Wireframes konzentrieren sich hauptsächlich auf:

  • Art der dargestellten Information.
  • Funktionsumfang.
  • Darstellungsregeln von bestimmter Art der Information.
  • Der Effekt von verschiedene Szenarien auf dem Display.

Hier ist eine metaphorische Verwendung von Wireframing. Die Website heißt Webwithoutwords.

free photoshop wireframe kits

Auf dem ersten Blick scheint es so, dass es kein anderer Inhalt außer der Quadrate mit Kreuzen gibt, aber beim Hover erscheint es der Inhalt.

Wahrscheinlich fragst Du dich jetzt: “Warum brauche ich ein Wireframing Kit für Photoshop, wenn es dafür viele spezielle Programme und Anwendungen gibt?”

  • Wenn Du Photoshop jeden Tag verwendest, musst Du keine neue Anwendungen lernen. Du ziehst einfach eine von diese PSDs in das PS Fenster und startest das Mock-Up.
  • In Photoshop beschränkst Du dich mit keinen Einschränkung oder Begrenzung von anderen App-Funktionalitäten. In PS kannst Du fast alles mit dem Mock-Up tun, z.B. es speichern und später nutzen.
  • Wenn Du mehr als eine Wireframe Seite hast, kannst Du die in separaten Layern liegen und danach “Layer Comps” (Ebenenkompositionen) und “Smart Objects” (intelligenten Objekten) verwenden, um Zeit zu speichern.
  • Dein Wireframe kannst Du leicht anpassen und die originale Aussehen oder Design geben.
  • Photoshop, im Vergleich zu anderen Anwendungen, gewinnt alle Parameter.

Also, jetzt weißt Du warum Wireframing in Photoshop viel besser als die andere Anwendungen ist. Es ist jetzt die Zeit für die gratis Wireframe PSDs! Wir haben die Quellen gesammelt, wo sich die kostenlose Photoshop Wireframe Kits befinden. Du kannst die gerne im Design Mock-Ups nutzen.

In allen diesen Kits gibt es die gleiche Design Elemente (wie Buttons, Navigation, Inhaltsblöcke) aber die alle sehen anders aus. Es gibt auch verschiedene Kits für Mobile Interfaces. Da findest Du auch die deringsten Elemente von iPad, iPhone Interfaces.

iPad Sketch Elements AI

free photoshop wireframe kits

* * *
Gratis Sketching Wireframing Kit

free photoshop wireframe kits

* * *
Gratis Photoshop Wireframe Kit

free photoshop wireframe kits

* * *
Ultimate Wireframe UI Kit

free photoshop wireframe kits

* * *
Web Design Wireframe Kit

free photoshop wireframe kits

* * *
Mini Wireframing Kit

free photoshop wireframe kits

* * *
Web Design Wireframe Kit PSD

free photoshop wireframe kits

* * *
iPhone App Wireframe PSD

free photoshop wireframe kits

* * *
Flat Wireframe

free photoshop wireframe kits

* * *
Apple Device Wireframes

free photoshop wireframe kits

* * *
Wirekit

free photoshop wireframe kits

* * *
Flat UI Kit Free

free photoshop wireframe kits

* * *
Webpage Wireframe Stencil

free photoshop wireframe kits

* * *
Wireframe Blueprint

free photoshop wireframe kits

* * *
iOS7 Wireframe Kit

free photoshop wireframe kits

* * *

Also, das war`s. Falls Du Wireframes in deiner Arbeit verwendest, teile deine Erfahrung mit! Wenn Du die andere tolle Wireframe Kits gesehen hast, lasse bitte den Link im Kommentar-Bereich hinter.