Folgende Inhalte lernst du in diesem Video:
- Erstellen eines neuen Projekts
- Auswahl einer Mockup-Vorlage
- Einfügen der Mockup-Zeichnung in der App
- Verlinkungen hinzufügen und löschen
- Animationen zwischen den Verlinkungen auswählen
- Testen des App-Prototyps
Anleitung
Folgende Inhalte findest du in dieser schriftlichen Anleitung:
- Start mit Marvel
- Tipps bei App-Erstellung
- Importieren der eigenen Mockup-Zeichnungen
- Seiten verlinken
- Verlinkungen testen
Start mit Marvel
Die Marvel-App hilft dabei, Ideen für Apps oder Websites zu zeigen, bevor sie wirklich gemacht werden. Du kannst Bilder hochladen und anordnen, wie du möchtest. Dann verbindest du die Bilder, um zu zeigen, wie die App funktioniert. Das hilft, Feedback zu bekommen und zu sehen, ob alles gut aussieht. Du kannst die Entwürfe auf Handys oder Computern ausprobieren, um zu testen, wie sie sich anfühlen. Das ist nützlich, um in der Schule Projekte zu planen oder Ideen zu teilen.
Tipps bei App-Erstellung
Logo: Oft wird auch ein Logo in der Ecke oder im Banner der App angezeigt. Meist dient es dazu, den Nutzer wieder auf die Haupt- oder Startseite der App zu bringen, wenn dieser daraufklickt.
Karussell: Müssen mehrere Informationen dargestellt werden, die auf einer Seite aber nicht Platz haben, greift man oft zum sogenannten «Karussell». Dies bedeutet, wenn der Nutzer mindestens einmal zur Seite wischen muss, um die anderen Beiträge oder Informationen zu sehen. Oftmals wird durch Punkte angezeigt, wie viele Seiten es im Karussell gibt und wo er sich gerade befindet.
Navigation: Die meisten Apps heutzutage haben eine Navigation, mit welcher der Nutzer durch die verschiedenen Seiten der App navigieren kann. Diese kann sich entweder oberhalb oder unterhalb der Hauptbereiches befinden.
Suchfunktion: Um möglichst schnell am gewünschten Ort zu sein, ist eine Suchfunktion für den Benutzer sehr attraktiv. Auch diese befindet sich oftmals in der Navigation entweder oberhalb oder unterhalb der App. Man kann sie aber auch auf der Seite platzieren.
Importieren der eigenen Mockup-Zeichnungen
Wenn du die App öffnest, siehst du als erstes diesen Screen. Hier gehst du einfach auf «Projekt erstellen». Hier hast du eine Auswahl von verschiedenen Formaten. Wähle hier das Format für das iPad aus. Oberhalb kannst du dem Projekt einen Namen geben. Hier könntest du deine Designs auswählen. Da wir aber noch keines erstellt haben, gehen wir auf das Plus-Symbol unten links.
In diesem Abschnitt kannst du nun dein Layout / Design von Grund auf erstellen oder eines, welches du selbst gezeichnet hast fotografieren und anschliessend anpassen. Beim Verwenden des selbstgezeichneten Layouts klickst du auf «Kamera». Nun kannst du deine von Hand gezeichneten Layouts fotografieren und mit dem Häkchen deine Auswahl bestätigen. Um dein Bild zuzuschneiden, musst du die Ränder der Zeichnung anpassen. Mit dem Scheren-Symbol bestätigst du die Auswahl. Mit dem Klick auf das Häkchen werden die Fotos gespeichert. Hier geht es zum Beispiel um eine Einkaufs-App.
Seiten verlinken
Um die Verlinkungen machen zu können, tippst du auf das gewünschte Bild, von welchem aus der Link auf die Zielseite führen soll und wählst «Link hinzufügen». Jetzt kannst du eine Klickfläche definieren. Dafür musst du sie einfach an die gewünschte Position anpassen. Mit der Funktion «Bild verlinken» kannst du das Zielbild auswählen, welches sich danach öffnet. Hier im Beispiel wird ein Produkt verlinkt. Ist das Zielbild ausgewählt, kannst du unten noch eine Animation auswählen, die sich dann abspielt, sobald man auf die Verlinkung klickt. In diesem Beispielfall verlinkt man auf die Produktbeschreibung.
Mit dem nächsten Bild kannst du nun genau das Gleiche machen à wieder eine Verlinkung hinzufügen und dann die Zielseite auswählen. In unserem Fall die Dritte. Hier bedeutet es, dass das Produkt zum Warenkorb hinzugefügt werden soll. Deshalb muss jetzt auf die Seite mit dem Warenkorb verlinkt werden.
Verlinkungen testen
Sind alle Verlinkung gemacht, kannst du unten rechts mit dem Play-Button das Ganze abspielen.
Die Bilder werden nun im Vollbildmodus angezeigt und je nach Verlinkung, die angetippt wird, gelangt man zum nächsten Bild oder zurück. Um den Vollbild-Modus zu beenden, tippst du oben in der Mitte auf die drei Punkte und gehst auf «Schliessen». Die App wird nun beendet.
