Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Sketch Grundkurs

Leinwand, Seiten und Artboards

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
In diesem Video beschäftigt sich der Trainer mit der Leinwand (Canvas) und zeigt unterschiedliche Strategien, um Ihr Projekt in Seiten und Artboards zu untergliedern.

Transkript

Wir wollen uns nun anschauen, wie ein Sketch-Dokument aufgebaut ist. In diesem Fall geht es nun um die Canvas, also die Leinwand. Um zu verstehen, wie man mit der Canvas arbeitet, werde ich uns jetzt mal hier die Lineale, also die "Rulers" einblenden. Das können wir jetzt hier oben über die Schaltfläche tun, oder über "Ctrl+R" können wir ebenfalls die Rulers ein- und ausblenden. Wenn ich jetzt mal über die Leinwand scrolle, dann werden wir sehen, dass wir sowohl in den positiven, als auch hier in den negativen Bereich scrollen können. Die Frage ist: Wie weit kann man hier scrollen? Und die Antwort ist: Unendlich. Die Canvas ist unendlich groß, wir können hier unendlich viele Artboards auf der Canvas verwenden. Artboards finden wir hier über diese Schaltfläche. Ansonsten, wenn man die Leiste hier oben nicht angepasst hat, dann über das "Plus" und dann "Artboard", oder über die Taste "A". Und wenn ich Artboard selektiert habe, dann sehen wir auf der rechten Seite verschiedene Vorgaben. Das heißt, wenn ich jetzt hier z. B. für das iPhone 7 etwas haben möchte, dann sehe ich auch hier die Größe dafür. Alternativ kann ich auch einfach klicken, und aufziehen, und müsste jetzt darauf achten, dass wir hier die entsprechende Größe selektieren, wir sehen hier am Mauszeiger bereits die Angabe der Größe. So, ich mache den Schritt wieder rückgängig, über "Cmd+Z". Und stattdessen klicke ich jetzt hier direkt auf "iPhone 7", und wir sehen dann hier den Screen für's "iPhone 7", mit einer Breite von 375 und einer Höhe von 667. Ja, und ich kann jetzt mit der Maus, oder mit den Gesten, rein- und herauszoomen. So, als nächstes möchte ich den Screen benennen, der heißt momentan noch "iPhone 7", wir können aber hier an diese Stelle klicken, und jetzt zum Beispiel sagen, das wird unser Homescreen werden, also nenne ich das Ganze hier "Home". Wenn wir jetzt mit Ebenen arbeiten, dann landen diese Ebenen automatisch hier in unserem Artboard "Home". Wir können über den Ebenen, und oberhalb des Artboards hier an dieser Stelle sagen, "show page lists". Denn wir können auch hier mit Seiten arbeiten. Das heißt, wir haben einmal hier Seiten, und darauf wiederum beliebig viele Artboards. Aktuell haben wir jetzt "Page 1", ich kann hier auf das "Plus" klicken, um noch eine weitere Seite hinzuzufügen, der ich auch einen Namen geben kann. Und noch weitere Seiten, und dann kann ich hier zwischen den Seiten wechseln. Ich kann auch hingehen, und im Prinzip die Seite "Artboard Home" auf Seite 2 ziehen. Wenn ich jetzt hier zu Seite 2 wechsle, und hier mal rauszoome, dann sehen wir hier unser Artboard, jetzt auf der Seite 2 und Seite 1 ist in dem Fall leer. Man hat also verschiedene Möglichkeiten. Wir könnten hingehen und alle Seiten, die man so anlegt, sagen wir die "Home", die Produktübersichtsseite, die Produktdetailseite, die Kontaktseite, alles auf einer Seite anlegen. Das heißt, wir würden das hier gar nicht erst aufklappen, sondern wir arbeiten die ganze Zeit hier in dem Fall auf "Page 1" dann zum Beispiel. Und somit brauchen wir keine weiteren Seiten. Oder wir fahren eine andere Strategie. Wir sagen, wir brauchen jetzt für die "Home" einmal die Ansicht auf dem Desktop, einmal auf dem Tablet, im Querformat, also "Landscape". Einmal am Tablet im Hochformat, also "Portrait", und einmal für's Smartphone. Dann hätten wir jetzt unsere Artboards quasi nur für die "Home". So, und dann würden wir hier an der Stelle sagen, das ist jetzt unsere "Home", ich mach das jetzt hier, "Home". Dann sagen wir hier, das ist unsere Produktseite, und hier ist unsere Kontaktseite. So, und auf jeder Seite erzeugt man sich jetzt Artboards für die verschiedenen Ansichten, wenn man responsiv hier die ganzen Designs durcharbeitet. Also für Desktop, Tablet und Smartphone. Und somit kann man dann hier die einzelnen Seiten wechseln, und die verschiedenen Ansichten auf den verschiedenen Endgeräten sehen. Wenn man also wirklich für jede Auflösung das Design genau vorgeben möchte, dann empfiehlt es sich hier mit den Seiten zu arbeiten. Wenn man aber nur, sag ich jetzt mal, die Desktop-Varianten, oder nur die Smartphone-Varianten zeigt, weil es jetzt gerade für eine App ist, und gar nicht für Desktop interessant ist, dann reicht es auch, wenn man nur auf einer Seite arbeitet, und alle Artboards, also jetzt "Home", dann zusätzlich noch hier durch "Alt" und Ziehen können wir es duplizieren, hier an dieser Stelle sagen, das ist jetzt die Produkteseite. Und das ist jetzt die Kontaktseite. Also diese beiden Herangehensweisen gibt es. Ja, es kommt halt immer darauf an, ob man jetzt verschiedene responsive Ansichten macht, dann würde man mit Seiten arbeiten. Wenn man sich für eine Ansicht entscheidet, und die ganzen Seiten durchspielt, dann kann man auch mit einer Seite arbeiten, und vielen Artboards. Das Schöne ist am Ende, dass wir nur an einem Dokument arbeiten, und nicht ganz viele gleichzeitig offen haben müssen, und dass das Ganze extrem performant ist, das heißt, wir können hier super schnell zwischen den Seiten wechseln, zwischen den Artboards wechseln, rein- und rauszoomen, und so weiter.

Sketch Grundkurs

Lernen Sie die grundlegende Bedienung von Sketch am Beispiel des UX-Designs einer App.

4 Std. 45 min (54 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:25.04.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!