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.
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.
* * *Gratis Sketching Wireframing Kit
* * *Gratis Photoshop Wireframe Kit
* * * Ultimate Wireframe UI Kit
* * *Mini Wireframing Kit
* * *Web Design Wireframe Kit PSD
* * *Flat Wireframe
* * *Wirekit
* * *Flat UI Kit Free
* * *Webpage Wireframe Stencil
* * *Wireframe Blueprint
* * *iOS7 Wireframe Kit
* * *
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.