Die besten Mockup Templates/Kits für Designer

von Andreas Braun | 0 | 20798 Aufrufe

Anzeige Hier werben

Wireframe, Prototyp, Mockup - Ein kleiner Exkurs

Diese drei Begriffe werden fälschlicherweise meistens in einem Atemzug genannt. Dabei repräsentieren sie doch drei völlig unterschiedliche Techniken der Visualisierung. Daher zunächst eine knappe Zusammenfassung.

Wireframe

Ein Wireframe ist zu vergleichen mit einer Blaupause. Man verzichtet bewusst auf Farbgebung und Details um die Elemente der Seite (Was?), deren Position (Wo?) und die Benutzerführung (Wie?) darzustellen.

Prototyp

Ein Prototyp ist eine bereits funktionierende Seite. Alle Elemente sind vorhanden und der User kann mit ihnen interagieren. Die Funktionalität ist nur rudimentär und das Design entspricht noch nicht bis ins Detail den Designvorlagen.

Mockup

Ein Mockup wird traditionell in Photoshop entwickelt. Dabei legt man Augenmerk auf Farbgebung, Styling, Größe, Schriftart usw. einzelner Elemente wie Buttons oder Eingabefelder. Dem Kunden werden zahlreiche Momentaufnahmen der Seite oder der App präsentiert, und man diskutiert über das Aussehen. Da man zu diesem Zeitpunkt versucht, den Kunden vom eigenen Design zu überzeugen, sollte das präsentierte Material auf Hochglanz getrimmt werden.

Mockup - So wird's dann mal aussehen

Die präsentierten Screens dienen unter anderem als Vertragsgegenstand, auf den sich der Kunde berufen wird. Es sollten daher keine Versprechungen gemacht werden, die man später nicht einhalten kann.(Warum sieht das jetzt nicht so aus wie auf den Fotos damals ?) Aber das ist ein anderes Thema.

Der Kunde möchte das Endprodukt "fühlen", obwohl man ihm an dieser Stelle nur etwas auf dem Papier überreicht, oder gar nur per Beamer an die Wand projeziert. Wie schafft man es also, dem Kunden den Look-and-Feel zu vermitteln ? Nun am einfachsten ist es, die Umgebung in der die Software letztendlich laufen wird mit darzustellen.

Um sich an dieser Stelle nicht unnötig stundenlang mit der Gestaltung eines möglichst realistischen iPhones in Photoshop aufzuhalten, sollte man auf die im Web erhältlichen Templates zurückgreifen.

Mock-up Templates gibt es für die verschiedensten Bereiche. Sei es für Mobile Apps, Webseiten, Visitenkarten, Logos o.ä.

1. Psd iPad Retina Mockup Template

Das ipad Mock-up Template von Pixden kann kostenlos geladen werden. Die Photoshop Dateien sind sehr hochauflösend und ermöglichen die Darstellung der eigenen App im Retina Format.

Bild zu Die besten Mockup Templates/Kits für Designer

2. iPhone/iPad PSD mockup

Dieses Template bringt noch einmal eine Ebene mehr hinzu, indem eine Frauenhand mit abgebildet wird, die ein Iphone hält. Das Template kommt mit Vorlagen für Iphone und Ipad Layouts.

Bild zu Die besten Mockup Templates/Kits für Designer

3. Website & iPhone 5 3D Display Mockup

Mit diesem Template kann man die Präsentation einer Webseite richtig aufbohren.

Bild zu Die besten Mockup Templates/Kits für Designer

4. A4 PSD Flyer Mock-up

Ein Template für Poster- oder Flyerdesigns im Din-A4 Format.

Bild zu Die besten Mockup Templates/Kits für Designer

5. Psd Tri Fold Mockup Template

Klasse gestaltetes Template für Broschüren

Bild zu Die besten Mockup Templates/Kits für Designer

6. PSD Book Cover Mockup Template

Bild zu Die besten Mockup Templates/Kits für Designer

Ich hoffe ich konnte euch mit dieser kleinen Auswahl einen Einblick in das Thema Mockup Templates geben, und ein wenig Licht in die Begrifflichkeiten bringen.

Linksammlung Mock-up Templates

Über den Autor: Andreas Braun
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten