Egal ob für das Windows, Android oder iOS – für eine erfolgreiche App Entwicklung oder ein App- oder Website Design ist ein detailliertes App-Mockup unverzichtbar.

Ein gute grafische Repräsentation ist ein einfacher Weg, um das spätere Design Deiner Windows App zu visualisieren, Farben und Schriftarten anzupassen und eine erste Vorstellung davon zu bekommen wie das fertige Produkt später auf dem Smartphone aussehen könnte.

Es gibt jedoch einige Tools, die Dir dabei helfen ein passendes App-Mockup zu erstellen. Selbst als blutiger Anfänger ist es heutzutage kinderleicht einen maßgeschneiderten, digitalen Entwurf für Deine Applikation im Web zu erstellen.

Ich zeige Dir worauf es beim App-Mockup erstellen ankommt und welche Tools Du am besten dafür verwenden solltest.

Inhaltsverzeichnis

Was ist ein App-Mockup?

Bevor du überhaupt mit der Erstellung beginnst, solltest Du Dir zuerst darüber im Klaren sein, worum es sich bei einem sogenannten App-Mockup überhaupt handelt.

Ein Mockup ist in Abgrenzung zum Prototyping und zu Wireframes eine digitale Nachbildung Deiner Applikation. Das Wort wurde aus dem englischen übernommen und stellt eine Attrappe dar, in der alle Details – von Schriftarten, über Farben, bis hin zum Aufbau und Navigation zusammengefasst werden. Es soll Dir und anderen helfen die User-Experience besser nachzuvollziehen. Für Interessenten werden somit Features und Funktionen auf dem mobilen Gerät veranschaulicht. Gerade deswegen spielen App-Mockups und auch das Webdesign eine wichtige Rolle!

Wozu dient ein Design-Vorführmodell?

Gestaltung und Programmierung Deiner Applikation erhalten durch das Mockup eine übersichtliche, realistische Darstellung. Dein Produkt wirkt somit lebendiger, greifbarer und Nutzer bekommen eine Vorstellung davon wie einzelne Features funktionieren. Sie können somit ein besseres Urteil fällen. Feedback von anderen Nutzern oder Kunden kann hilfreich sein, um Deine Applikation stetig zu verbessern, bevor Du sie öffentlich auf dem Markt präsentierst.

Auch für Usability Tests sind App-Mockups von Bedeutung, denn durch die detailreiche Darstellung lassen sich Fehler und Probleme auf mobilen Geräten besser identifizieren und ausmerzen.

Wie wird ein App-Mockup erstellt?

Meist basieren grafische Repräsentationen auf der Grundlage von Skizzen oder Wireframes, quasi groben Entwürfen, die später detaillierter umgewandelt werden. Was anderen Vorabversionen fehlt, wird im App-Mockup in Form von einer Navigationsstruktur, Seiten und Designelementen visualisiert.

Es gibt verschiedene App-Mockup Tools, die die Erstellung solcher Entwürfe vereinfachen. Das bekannteste Beispiel ist das Bearbeitungsprogramm Photoshop, wobei bei diesem Tool vor allem die Visualisierung im Fokus steht.

Einige Aspekte können Deinen Design-Entwurf aber auch schnell in ein „No-Go“ verwandeln, daher solltest Du folgende Regeln bei der Erstellung beachten:

1. Deine Kreationen dürfen nicht zu ausgefallen sein. Bleibe so realitätsnah wie möglich und veranschauliche die Umsetzung dementsprechend.

2. Arbeite sauber. Es gibt nichts Schlimmeres als eine verzerrte Vorabversion oder eine perspektivisch falsche Darstellung Deines Produkts. Das lässt Deine Applikation unprofessionell wirken.

Befolgst Du diese „Richtlinien“, kann bei Deiner grafischen Repräsentation eigentlich nichts mehr schiefgehen.

Welche App-Mockup Tools gibt es?

Um eine professionelle Vorabversion Deiner Applikation, Website etc. zu erstellen, wirst Du um die Verwendung von App-Mockup Tools nicht drum herumkommen.

Heutzutage gibt es im Web ein vielfältiges Angebot an solchen Tools. Manche davon eignen sich eher für eine grobe grafische Repräsentation, andere ermöglichen sogar die Darstellung von technischen Funktionen. In diesem Artikel möchte ich Dir einige davon ein wenig genauer vorstellen. Vielleicht ist ja das passende für Dich dabei!

App-Mockup – Mockerie & Mockupsjar

Mockerie verfügt über ein breit gefächertes Angebot von über 100 verschiedenen Motiven, egal ob für Smartphones, Laptops oder Tablets. Mit dieser Software lassen sich sogar professionelle Videos erstellen. Filter verleihen Deinem Design dabei einen brandneuen Glanz.

Vielfältige Angebote enthält auch dieses Mockupsjar. Aus über 700 Entwürfen kannst Du Dein passendes Design wählen und das Ganze ist auch noch kostenlos. Klingt doch nach einer guten Alternative, oder?

Adobe Photoshop & XD

Adobe bietet viele kreative und international anerkannte Möglichkeiten Prototypen und Design zu erstellen. Photoshop oder XD sind  einfache Tool, mit denen Du einen Entwurf Deiner Applikation grafisch visualisieren kannst. Die Vorteile von Adobe XD sind, dass es sogar eine gratis Version gibt und dass Du die Daten aus XD anschließen auch extrahieren kannst und die nächsten Schritte in der Applikationsentwicklung auf Basis Deines Prototyps somit unkompliziert begonnen werden können.

Mockplus & Magic Mockups

Mockplus ist ein Prototyping-Tool für mobile Applikationen. Das Tool stellt Android, iPad und iPhone Vorlagen in verschiedenen Größen zur Verfügung und punktet mit einer einfachen Bedienung, sodass Entwickler kein spezifisches Fachwissen benötigen.

Wenn Du ein kleines Budget hast, solltest Du Dir Magic Mockups einmal genauer ansehen. Es eignet sich besonders für grafische Repräsentationen auf dem Mac, iPad oder iPhone und selbst höhere Auflösungen. Im Falle, dass Du Dein Design herunterladen möchtest, zahlst Du eine einmalige Gebühr.

Shotsnapp

Zum Ausprobieren und Testen gut geeignet:  Shotsnapp ermöglicht Dir eine qualitativ hochwertige Präsentation Deines App-Entwurfs und erlaubt Dir auch mit Farben und Schriftarten zu experimentieren.

Gestaltung ist individuell, jeder Designer hat andere Vorlieben und Abläufe. Für Einsteiger sind alle Programme gut geeignet und mit dieser Auswahl findest Du vielleicht ja auch das für Dich am besten passendste Tool. Viel Spaß beim Ausprobieren!

Fazit

Egal ob Wireframing, Prototyping oder App-Mockups – die grafische Repräsentation ist von höchster Bedeutung, wenn es darum geht, einzelne Features und Funktionen Deiner Applikation zu testen, Fehler auszumerzen, sowie Schriftarten, Farben und Designelemente anzupassen. Verschiedene App-Mockup Tools helfen Dein digitales Projekt zu veranschaulichen und den Aufbau zu visualisieren. Die Darstellung sollte dabei möglichst realitätsnah und professionell bleiben, dann steht einer erfolgreichen Repräsentation Deiner Applikation nichts mehr im Wege.