muppetti AppDesign

Tipps & Tools für AppDesigner

Sketch 3 und Sketch Mirror für live App-Design

sketch3-iconSketch 3 ist für mich DAS Grafikprogramm für Screen Designs. Bisher arbeitete ich gern mit FireWorks CS6. Mir gefielen die übersichtliche Menge an Tools, die das Wichtigste aus Fotobearbeitung und Vektorgrafik anboten, und die auf das Web fokussierten Bildexporte. Leider wird FireWorks abgeschafft und Adobe bleibt mit seinen Titanen stehen. Klar, ich kann mir Photoshop für 30 Euro im Monat mieten, aber reicht Photoshop? Vielleicht würde ich doch lieber mit Illustrator Apps designen? Ich überlegte hin und her, suchte nach Alternativen im Netz, las Rezensionen und Bewertungen und fand… Sketch 3.

Sketch scheint in den USA bereits mehr Anhänger zu haben, sieht sehr vielverprechend und nach einer echten Alternative aus – von dem, was die Community behauptet und bereits anbietet. Besonders angesprochen hatte mich die Aussicht auf die Verbindung zwischen Sketch auf dem Mac und der Echtzeit-Spiegelung des Gestalteten auf der Sketch Mirror App. Damit ist es möglich, das Design sofort auf dem mobilen Endgerät zu sehen. In meinem Fall ein iPad.

Daher entschied ich mich für einen Kaltstart, kaufte es mir für $99 und entwarf mir-nichts-dir-nichts ein App Design für einen Kunden. Pures learning by doing, das ich hier an einem Mini-Beispiel beschreiben möchte.

Pages und Artboards

Ich wählte also unter FILE NEW. Sketch öffnet eine Arbeitsoberfläche mit einer leeren Seite in der Mitte – PAGE 1. Simpel, reduziert. Hmm, und nun?
Ich erinnerte mich an das ARTBOARD aus einem Community Beitrag und wählte unter INSERT ARTBOARD den Punkt ARTBOARD. Dann wird rechts in der Seitenleiste eine Auswahl an verschiedenen Größen von Vorlagen angezeigt. Zum Beispiel iPHONE SCREENS, iPAD SCREENS etc. Dort kann man noch einmal eine Unterauswahl treffen. Ich entschied mich zunächst für PORTRAIT 5/5S/5C. Sketch legte mir daraufhin eine Art Canvas in dieser Größe auf meine erste Seite.

App Design mit Sketch 3 und Sketch Mirror

App Design mit Sketch 3 und Sketch Mirror

Sketch 3

Alles, was im Screenshot zu sehen ist, habe ich über INSERT und SHAPE eingefügt. Rechtecke, Kreise, Sterne, Text. Für eine iPhone App lege ich zuerst die Flächen an, die ich brauchen werde: ganz oben die Status Bar mit 40px höhe, dann die Navigation Bar mit 88 px Höhe, unten die Tab Bar (vielleicht nehme ich sie auch wieder weg, wer weiß…) mit 96 px Höhe. Icons symbolisiere ich erst einmal mit einfachen Formen. Was ich innerhalb weniger Minuten erstelle, ist ein einfacher Screen. Je besser ich hier vorgearbeitet habe und weiß, welche Elemente zu sehen sind, desto schneller geht es, einen ersten Prototypen zu erstellen.

Sketch Mirror

sketchmirror-iconUnd schon jetzt bekomme ich über Sketch Mirror eine erste Idee meines Screens. Ein Gefühl für die Farben, Flächengrößen und Schriftgrößen. Denn selbst als Profi bekomme ich kein 100%iges Gefühl für die Größen in der App, wenn ich nur auf dem Computerbildschirm arbeite. Ich muss mir den Screen auf Fingergröße ansehen. Und das kann ich hier live tun: ich gestalte in Sketch und sehe die Live-Vorschau in Sketch Mirror auf meinem iPad. Sogleich wirken die Elemente anders und ich kann sehen, was noch nicht optimal ist, kann Größen korrigieren und Abstände ausprobieren. Sehr zu empfehlen!

Tolle Live-Vorschau mit Sketch 3 und Sketch Mirror auf dem iPad.

Tolle Live-Vorschau mit Sketch 3 und Sketch Mirror auf dem iPad.

Sketch Mirror App im Apple App Store

Arbeiten mit Sketch 3 Vorlagen

Zur Freude eines jeden App Designers, der dazu gezwungen ist, mal eben schnell etwas Klickbares zusammenzubauen, bietet die Sketch-Community auch eine Webseite mit Ressourcen speziell für mobile Design an – ein Paradies! Ich empfehle, Vorlagen erst dann zu nutzen, wenn man sich mit dem Programm vertraut gemacht hat und in der Lage ist, selbst etwas von 0 aufzubauen. Damit wäre der benötigte Grundstein für die freudige Nutzung des Tools gesetzt. Im anderen Falle könnte es sein, dass man schnell seine Geduld verliert und mehr stolpert als genießt.

Die Sketch Vorlagen gibt es für iOS und Android. Da in meiner Wahrnehmung diese beiden Oberflächen-Konzepte sich immer mehr annähern, kann man sich die Vorlagen natürlich an das spezifische OS anpassen. So nutze ich jetzt das Flat-Material-Design für eine iOS App und es geht uns beiden gut dabei.

Sketch App Sources

Im nächste Artikel werde ich den Import der in Sketch erstellten Screens nach InVision beschreiben und zeigen, wie man recht fix einen klickbaren Prototypen erstellen kann. Und im übernächsten Artikel beschreibe ich, wie man mit Sketch-Plugins sein Leben beim Export spezifischer Grafiken für iOS und Android erleichtert. Wir leben im Zeitalter toller Tools – yeaj!

Leave a Reply