Aus dem Kurs: Sketch Grundkurs

Was ist Sketch? – Tutorial zu Sketch

Aus dem Kurs: Sketch Grundkurs

Gratismonat starten

Was ist Sketch?

“

Bevor wir uns Sketch genauer anschauen, stellen wir uns doch erst mal die Frage, was ist denn Sketch überhaupt? Sketch ist ein Layout-Programm für User-Interface-Design. Es ist optimiert auf sämtliche Arbeitsschritte, die man im Screen-Design benötigt. Ich habe damals 1999 Fireworks für mich entdeckt, als ultimatives Layout-Werkzeug für Screendesigns, allerdings hat Adobe den Support eingestellt, und somit musste ich mich nach einem neuen Werkzeug umsehen. Und nachdem ich mir unzählige Werkzeuge angeschaut habe, kam für mich eigentlich nur noch Sketch in Frage. In vielerlei Hinsicht funktioniert Sketch nämlich genau so wie Fireworks. Es ist ein hybrides Layout-Werkzeug, das heißt, eine quasi Kombination aus Photoshop und Illustrator, wobei mehr Illustrator-Funktionen natürlich enthalten sind, weil es vor allem um das Layouten geht, allerdings so optimiert, dass das Programm extremst einfach zu bedienen ist und eine sehr effiziente Arbeitsweise mit sich bringt. Mir ist es besonders wichtig, dass ein Werkzeug unkompliziert ist und intuitiv zu bedienen ist. Viele Screen-Designer benutzen Photoshop fürs Webdesign, allerdings ist Photoshop, meiner Meinung nach, viel zu überladen und nicht auf Screen-Design ausgelegt. Alle Anwender, die damals Fireworks verwendet haben, sind garantiert, nachdem Adobe Fireworks nicht mehr weiterentwickelt haben, nicht zu Photoshop gewechselt, sondern alle haben sich nach einem anderen Programm umgesehen, und dort kam nun für die meisten Sketch in Frage. Das Einzige, was mich abgeschreckt hat anfangs, ist das Interface von Sketch. Das Interface nutzt das Standardinterface von macOS, das heißt, es sieht im Prinzip aus wie der Finder, nur mit vielen Funktionen drum herum, und das hat mich anfangs abgeschreckt, weil ich es hässlich fand und weil man es gewohnt ist als Designer, mit schönen Benutzeroberflächen zu arbeiten. Aber da Sketch so effizient ist, blendet man eigentlich beim Arbeiten diese ganzen Werkzeuge aus und konzentriert sich viel mehr auf das Design als bei jedem anderen Programm, das ich so kenne. Vor allem die Tastenkürzel sind sehr intuitiv und das Arbeiten im Allgemeinen, dass man gar nicht großartig zwischen den Werkzeugen hin und her wechseln muss, da sich der Mauszeiger automatisch an die Werkzeuge anpasst, die man gerade benötigt. Sketch ist extremst präzise, wir können pixelgenau arbeiten, vektorbasiert, aber man kann zwischendurch in die Pixelansicht wechseln, um zu sehen, wie sieht das nachher beim Export im Browser aus. Wir können natürlich mit einer Ebenenpalette arbeiten, ähnlich wie man das aus anderen Programmen her kennt, aber das Ganze ist so intuitiv, dass man eigentlich so gut wie nie in die Ebenenpalette reinschauen muss, man kann ganz intuitiv im Designprozess arbeiten, ohne von den Ebenen abgelenkt zu werden. Der Inspektor ist sehr hilfreich, wir haben auf der rechten Seite einen Inspektor, der uns die ganzen Eigenschaften anzeigt, die man von einem Element beeinflussen kann. Und diese Eigenschaften lassen sich auch Eins-zu-eins in CSS übertragen. Das heißt, wenn hier ein Radius angegeben wurde, dann ist dieser Radius auch in CSS der gleiche Radius, das Gleiche gilt natürlich für die Breite, für die Höhe, für die Deckkraft und für z. B. Schatten, die man sich hinzufügt. Alles ist sehr einfach exportierbar, wie gesagt, die Tools finden wir hier, allerdings lässt sich die Benutzeroberfläche ins Detail anpassen, das heißt, man kann nur die Werkzeuge hier oben hinzufügen, die man tatsächlich braucht, die anderen blendet man einfach aus. Somit ist das Interface auch nicht überladen. Ich behaupte, wenn man wirklich fit ist mit Sketch, kann man alles ausblenden, man arbeitet nur noch auf der Canvas, auf der Leinwand und wird nicht durch irgendwelche Palettenwerkzeuge und so weiter abgelenkt, sondern man hat Tastenkürzel, und wie gesagt, die Werkzeuge arbeiten alle extremst intuitiv. Wir können Symbole verwenden. Mit Symbolen ist man in der Lage, Elemente, die sich wiederholen, wie z. B. Navigationselemente oder der Footer einer Seite, der überall gleich ist, auf mehreren Seiten zu verteilen, und dann muss man nachher bei Änderungen nur noch ein Symbol ändern und es ändern sich automatisch alle Instanzen dieses Symbols auf einem Screen. Das Gleiche gilt für Stile. Man kann Stile für Ebene und für Texte definieren, wenn man den Stil ändert, an einem Text, dann kann man diesen auf allen anderen Texten auch automatisch ändern. Man kann mit vielen Seiten und Artboards arbeiten. Es gibt ein Gridsystem, man kann auch Pixel bearbeiten, wobei da würde ich immer Photoshop vorziehen. Beim Export hat man viele Möglichkeiten, um für verschiedene Auflösungen zu exportieren. Für diverse Endgeräte und so weiter. Das Werkzeug ist wirklich bis aufs letzte Detail für Screen-Design optimiert, man kann sogar von allen Elementen, die man gestaltet hat, die CSS-Eigenschaften auslesen. Das heißt, man wählt einfach ein Objekt an, exportiert CSS und kann dieses direkt in der Entwicklung, in der Umsetzung der Seite weiter verwenden. Sketch ist extremst schnell, wenn man mit Sketch arbeitet, man hat keine großartigen Wartezeiten, rein und rauszoomen, all das geht wirklich wahnsinnig schnell, und man hat eine Live-Vorschau direkt auf sein Endgerät, was will man mehr.

Inhalt