App Design Vorlage mit OneNote erstellen

Dieser Artikel ist ein Gastbeitrag von Dino, welcher sonst für Tech-Impact.de Beiträge verfasst und für RefreshButton.net entwickelt. Wer ernsthaft mit seiner App Erfolg haben will, weiß, dass neben der Funktionalität das Design der Anwendung eine große Rolle spielt. Wenn ich mich an ein neues Projekt mache, mache ich mir zunächst Gedanken über mögliche Designs und Layouts der App. Wenn ich „im Kopf“ ein grobes Bild gezeichnet habe, fertige ich mit Hilfe von OneNote 2013 ein Design-Mokup an, um mir das letztendliche Design besser verbildlichen zu können. Wir wollen uns heute kurz anschauen, wie ihr euch selber so eine Vorlage in OneNote basteln könnt.

Zunächst benötigt ihr eine leere Seite für die Vorlage. Erstellt dazu einfach in einem Notizbuch eurer Wahl in einem Abschnitt eine neue Seite.

Screenshot (4)

Neue Seite in einem OneNote-Notizbuch

Wenn ihr das getan habt, wechselt ihr in der Menüleiste in das Register „Ansicht“. Dort wählt ihr unter „Hilfslinien“ das karierte Muster, in meinem Fall habe ich das 5mm Muster gewählt. Natürlich könnt ihr noch weitere Einstellungen vornehmen, wie z.B. die Seitenüberschrift zu entfernen. Den gleichen Effekt erzielt ihr übrigens, indem ihr das Register „Einfügen“ und dort „Seitenvorlagen“ wählt. Hier könnt ihr die karierte Vorlage auswählen. In diesem Menü könnt ihr übrigens auch die von euch jetzt erstellte Vorlage als neue Vorlage abspeichern. Somit steht sie euch für zukünftige App Projekte zur Verfügung.

snipping2

Hilfslinien anzeigen lassen

Wenn wir das karierte Muster gewählt haben, kann es mit dem Zeichnen der Tablet Vorlage losgehen. Wählt unter dem Register „Zeichnen“ im „Formen“ Abschnitt das Rechteck und zieht ein 34 x 19 Kästchen großes Rechteck mit der Maus. Hierbei entspricht ein Kästchen 40 Pixeln. Womit wir in etwa auf eine Design-Auflösung von 1366 x 768 Pixel kommen. Natürlich könnt ihr auch einen anderen Maßstab wählen, damit euch beim Zeichnen mehr Platz zur Verfügung. Der hier gewählte Maßstab ist zugegebenermaßen für stark detaillierte Design Entwürfe nicht geeignet.

snipping3

Formen

Screenshot (5)

Das fertige Tablet

Nun sollten wir noch mit Hilfe der des Linien Werkzeugs, welches sich im gleichen Menü, wie das Rechteck, befindet, zwei wichtige Linien ziehen. Die erste Zeichen wir horizontal in einem Abstand von 3,5 Kästchen vom oberen Rand unseres Rechtecks. Sie entspricht einem Margin von 140 Pixeln vom oberen Rand, der von Microsoft in den Design Richtlinien empfohlen wird. Die zweite Linie zeichnen wir vertikal in einem Abstand von 3 Kästchen vom linken Rand, dies entspricht 120 Pixeln und ist ebenfalls der von Microsoft empfohlene Margin von links. Was jetzt noch übrig bleibt, ist der Platz, den wir für unsere Seiteninhalte nutzen können. Die oberen 140 Pixel dürft ihr natürlich für euren Titel o.ä. verwenden.

snipping4

Korrekte Abstände werde eingezeichnet

Und damit steht auch schon eine mögliche Basisvariante einer Design Vorlage. Ihr könnt diese nun nach Belieben mit Inhalten füllen. Dafür stehen euch diverse Formen-Werkzeuge und natürlich das Frei-Hand-Zeichnen zur Verfügung. Im Optimalfall habt ihr ein Tablet mit Stift und könnt damit zeichnen. Eurer Fantasie sind keine Grenzen gesetzt. Mit ein wenig Mühe könnt ihr euch sogar Windows Phone Design Vorlagen erstellen, z.B. für ein Panorama Design! Die anfängliche Mühe ist es wert, denn die Vorlage könnt ihr immer wieder verwenden! Zum Schluss noch 2 meiner Design Mokups, die ich mit OneNote erstellt habe.

mokup1

mokup2

Wie immer gilt, solltet ihr noch Fragen haben oder weiter Hilfe benötigen, erreicht ihr mich über dino@RefreshButton.net per Mail.

You may also like...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *