• Haupt / Merkmal

20 Möglichkeiten, um in Sketch besser zu gestalten

Sketch wurde zuerst als Rivale von Adobe Photoshop, dann als Rivale von Adobe XD und jetzt auch als Rivale von InVision Studio gefeiert. Es ist überraschend belastbar für eine App, die noch nie eine Windows-Version veröffentlicht hat - obwohl dies nicht so überraschend erscheint, wenn Sie beide lernen, was es kann, aber wie es funktioniert.

Sketch ist eine App zum Entwerfen von Benutzeroberflächen, aber ihre leistungsstarken, intuitiven Tools machen den Entwurfsprozess so kunstvoll reibungslos, dass Sie schnell verstehen, warum und wie er den Weg für eine neue Generation von Entwurfs-Apps ebnete.

Hier sind 20 Tipps, die Sie in wenigen Minuten zum Power-User machen.

• 23 Top Sketch Plugins

01. Lassen Sie Ihr Design mit Bibliotheken zusammenarbeiten

Können auch andere Designer Ihre Symbole verwenden? Absolut! Skizzenbibliotheken sind unglaublich einfach zu bedienen. Alles, was Sie tun müssen, ist, die Symbole in einer separaten .sketch-Datei zu erstellen und diese .sketch-Datei dann an einem zugänglichen Ort zu belassen, z. B. auf Box, Dropbox oder Google Drive.

Andere Designer können die Skizzenbibliothek dann in ihre Skizzendokumente importieren, indem sie zu Datei> Bibliothek hinzufügen navigieren. Danach können Sie auf Symbole aus dieser Skizzenbibliothek über die übliche Methode Einfügen> Symbol zugreifen.

Skizzenbibliotheken sind eine hervorragende Möglichkeit, die Zusammenarbeit im Design in Teams zu ermöglichen. Wenn die Skizzenbibliothek aktualisiert wird, erhält jede .sketch-Datei, die diese Bibliothek verwendet, eine Benachrichtigung, in der Sie gefragt werden, ob Sie das Dokument aktualisieren möchten.

Ziemlich cool, oder?

02. Testen Sie ein responsives Design mithilfe der Größenänderung

Sie haben einen Container, der entweder eine Gruppe oder eine Zeichenfläche sein kann, und verschiedene Ebenen in diesem Container. Angenommen, dieser Container ist ein Website-Header mit einem schwebenden Logo und einer schwebenden Navigation - das Logo schwebte links und die Navigation schwebte rechts.

Wenn Sie die Größe des Containers ändern, soll das Logo weiterhin nach links und die Navigation nach rechts verschoben werden. Geben Sie die Größenänderung ein, bei der enthaltene Elemente an eine Containerkante verschoben werden können, um reaktionsschnelle Designs zu testen.

Dies alles geschieht erneut über den Inspektor auf der Registerkarte Größenänderung. Es gibt vier mögliche Positionen, an denen Sie festnageln können:

• Links : Objekt wird auf der linken Seite fixiert
• Richtig : Objekt wird auf der rechten Seite fixiert
• Rechts und oben : Objekt wird oben und rechts fixiert

Eigentlich ziemlich einfach, aber es gibt einen Haken. Wenn Sie die Größe von Containern normalerweise ändern, wird die Größe der enthaltenen Elemente entsprechend geändert. Sie können dies beheben, indem Sie die Optionen Breite und Höhe korrigieren aktivieren, um dies zu verhindern. Zentralisierte Objekte bleiben ebenfalls zentralisiert. Magie.

03. Trennen Sie Ihre Projekte nach Seite

Nach einer Weile fühlt sich Ihre Leinwand unübersichtlich an, obwohl sie im Wesentlichen unbegrenzt ist. Große Designs erfordern Organisation, weshalb wir Zeichenflächen logisch in verschiedene Seiten unterteilen können.

Die beste Möglichkeit, Zeichenflächen in Seiten zu organisieren, ist die Plattform. Wenn Sie beispielsweise eine Android- und iOS-Version einer mobilen App entwerfen, können Sie für jede eine eigene Seite haben.

Der Grund dafür ist, dass Sie bei Verwendung von Prototyping- und Design-Handoff-Tools die richtigen Zeichenflächen in das richtige Projekt exportieren möchten. Daher ist es logisch, sie auf diese Weise zu trennen. Bei Webdesigns erstelle ich normalerweise Symbole und Logos auf einer eigenen Seite.

04. Automatisieren Sie Ihre Asset-Exporte

Sobald Sie Ihre Exportoptionen definiert haben, müssen Sie dies nicht erneut tun. Dies gilt unabhängig davon, ob Sie tatsächlich Bildelemente aus Sketch exportieren oder in eine App für die Designzusammenarbeit wie InVision, Marvel, Sympli oder Zeplin exportieren.

Folgendes müssen Sie wissen: Das Dateiformat ist wichtig. SVG ist besser für das Web, da es sich um ein Vektorformat handelt. Dies bedeutet, dass Sie es ohne Qualitätsverlust vergrößern und verkleinern können. SVG-Formate sind normalerweise auch kleiner als die Dateigröße, wodurch Webseiten schneller geladen werden.

Wir verwenden PNG für mobile Apps. Um jedoch Retina / HDPI-Bildschirme zu bedienen, exportieren wir Bilder @ 2x und @ 3x, je nachdem, für welches Gerät wir uns interessieren. Sie können so viele Optionen wie nötig gleichzeitig definieren.

Klicken Sie einfach ganz unten im Inspektor auf die Schaltfläche Exportierbar machen und listen Sie die verschiedenen Exportoptionen auf. Und dann, wann immer Sie erneut exportieren müssen, drücken Sie cmd + Verschiebung + IS . Ihre Exporteinstellungen werden jetzt gespeichert, Sie haben jedoch auch die Möglichkeit, nur eine oder einige oder alle von Ihnen ausgewählten Ebenen zu exportieren.

05. Organisieren Sie den Export von Image-Assets in Ordner

Entwickler möchten nicht einen ganzen Ordner mit exportierten Bildelementen sortieren, insbesondere bei großen Designs. Das Aufteilen in Ordner ist besser organisiert, und wir können dies über Sketch tun. Benennen Sie den Layer einfach in folgendem Format um: 'subfolder / asset.png', um Ordner in Ihrem Export automatisch zu erstellen.

Tipp: Wussten Sie, dass Sie eine Ebene aus der Ebenenliste auf Ihren Desktop ziehen können, um sie zu exportieren? Standardmäßig handelt es sich um eine @ 1x PNG-Datei.

06. Analysieren Sie den Farbkontrast mit dem Stark-Plugin

Obwohl es nicht so trendy ist wie Konzepte wie Prototyping und Animation, ist der Farbkontrast eine große Sache. Ein schlechter Farbkontrast führt zu einer eingeschränkten Zugänglichkeit, insbesondere für Benutzer mit eingeschränktem Sehvermögen (von denen 1,3 Milliarden von uns weltweit betroffen sind).

Die WCAG (Web Content Accessibility Guidelines) setzt weltweite Standards für den Farbkontrast, die für jemanden, der noch nie davon gehört hat, etwas schwer zu verstehen sein können.

Das Stark plugin Sie können nicht nur zwei Farben mit diesen WCAG 2.0-Standards vergleichen, um sicherzustellen, dass Ihr Kontrast ausreichend ist, sondern Sie können Ihr Design auch anhand der acht verschiedenen Arten von Farbenblindheit testen.

Die wichtigsten Dinge, die überprüft werden müssen, sind, wenn zwei Hintergründe nebeneinander liegen. Knöpfe vor dem Hintergrund; und vor allem Text vor dem Hintergrund. Auch hier spielt die Schriftgröße eine Rolle, da kleinerer Text schwerer zu lesen ist. Angesichts der Tatsache, dass hier so viel zu überlegen ist, ist Stark praktisch, um ihn in Ihrer Toolbox zu haben.

Stark öffnet sich in einem neuen Fenster (Plugins> Stark> Show Stark). Drücken Sie & uarr; und & darr; um durch die Arten der Farbenblindheit zu radeln, & larr; und →, um durch die Zeichenflächen in Ihrem Dokument zu blättern, oder wählen Sie zwei Farben aus, um den Farbkontrast zu analysieren. Der Farbkontrast wird durch zwei verschiedene Stufen / Verhältnisse (AA und AAA) definiert, und Ihr Farbkontrast sollte mindestens den AA-Anforderungen entsprechen.

07. Design Handoff mit den Zeplin oder Sympli Plugins

Die Entwurfsübergabe ist normalerweise in Prototyping-Apps wie InVision und Marvel integriert, steht jedoch nur Teams mit Abonnements auf Unternehmensebene zur Verfügung. Kleinere Designteams (oder Solo-Designer) benötigen keine Design-Zusammenarbeit in dieser Größenordnung, daher dedizierte Design-Handoff-Tools wie z Zeplin und Sympli könnte besser geeignet sein.

Sie müssen das Design übergeben und zusammenarbeiten, jedoch auf Kosten der Prototyping-Funktionen, die je nach Art und Weise, wie Sie oder Ihr Team Prototyping durchführen, in Ordnung sein können (da es auch Papier-Prototyping und kostenlose Tools wie z Kunst ).

Wie die meisten Tools dieses Kalibers können Sie Bildschirme mithilfe des Sketch Plugins von Sketch nach Zeplin oder Sympli exportieren. Beide Werkzeuge arbeiten weitgehend gleich. Verwenden Sie mit Zeplin cmd + Strg + IS in Skizze zum Exportieren von Bildschirmen; Verwenden Sie mit Sympli cmd + Y. .

Mit beiden Apps können Sie Bildschirme für zusätzliche Suchbarkeit markieren (nützlich zum Eingrenzen von Bildschirmen in der Übergabeschnittstelle) und automatisch Bildelemente erfassen, die Sie in Sketch als exportierbar markiert haben, damit der Entwickler sie implementieren kann.

Verwenden Sie wie bei allen konkurrierenden Tools die kostenlosen Testversionen und entscheiden Sie selbst.

08. Kombinieren Sie Formen mit booleschen Operationen

Mit booleschen Operationen können wir Formen kombinieren, um neue Formen zu erstellen.

Schritt 01: Erstellen von zwei Formen
Verwenden wir hier einen Kreis als Beispiel. Sie können so viele Formen wie nötig mit booleschen Operationen kombinieren, aber im Moment werden nur zwei verwendet. Erstellen Sie einen Kreis und duplizieren Sie ihn dann ( cmd + D. ), um einen weiteren Kreis zu erstellen. Stellen Sie sicher, dass sie sich überlappen, damit wir eine davon als Maske verwenden und die Auswirkungen sehen können.

Schritt 02: Wählen Sie eine boolesche Operation aus der Menüleiste
Wie Sie in der Menüleiste Skizze sehen können, stehen vier boolesche Operationen zur Auswahl: Vereinigung, Subtrahieren, Schneiden und Differenzieren. Union ist die einfachste aller booleschen Operationen, bei denen die beiden Formen kombiniert werden, um eine neue Form zu erstellen.

Mit Subtrahieren frisst sich eine der Formen in die andere Form oder Formen und subtrahiert von ihnen. Bei Intersect wird nur der Abschnitt angezeigt, in dem sich die Formen überlappen. Bei Difference ist das Gegenteil der Fall. Es werden nur die Abschnitte angezeigt, in denen sich die Formen nicht überlappen. Bei einfachen Formen ist dies häufig schneller als das Freihand erstellen mit dem Vektorwerkzeug.

Schritt 03: Stellen Sie klar, welche Ebene die Maske ist
Wie ich bereits sagte, können Sie mehr als eine Form mit booleschen Operationen kombinieren. Eine davon muss die Maske sein, und diese wird unten angezeigt, wie in der Ebenenliste angegeben. Kombinierte Formen wirken wie eine Gruppe, wenn sie einmal kombiniert wurden. Die Maske ist also die niedrigste in der Hierarchie. Sie können diese Ebenen neu anordnen, um zu ändern, welche die Maske ist.

Hinweis: Boolesche Operationen bestehen technisch gesehen aus Pfaden und Unterpfaden, aber das Konzept der Maskierung kann dazu führen, dass sich boolesche Operationen vertrauter anfühlen.

Schritt 04: Lernen Sie die Tastaturkürzel für den Schnellzugriff
Natürlich gibt es wie alles andere in Sketch Tastaturkürzel, mit denen Sie schneller auf diese booleschen Operationen zugreifen können:

• Union : cmd + Strg + U.
• Subtrahieren : cmd + Strg + S.
• Schneiden : cmd + Strg + I.
• Unterschied : cmd + Strg + X.

Wenn Sie eine der neuesten habenMacBook Pros mit Touch BarÜber der Tastatur stehen diese Tools auch für den schnellen Zugriff per Touch zur Verfügung.

09. Erstellen Sie Ihre eigenen Skizzenverknüpfungen

Sie können Ihre eigenen Skizzenverknüpfungen erstellen. Um Ihre eigenen Skizzenverknüpfungen festzulegen, gehen Sie zu macOS-Einstellungen> Tastatur> Verknüpfungen> App-Verknüpfungen> +, wählen Sie dann Skizze als Anwendung und geben Sie den Menübefehl ein, für den Sie eine Verknüpfung definieren möchten. Beispiel: 'Alle Gruppen reduzieren' ( cmd + Strg + C. ) ist ein nützlicher Weg, um Ihre Ebenenliste schnell zu bereinigen! Fügen Sie so viele Verknüpfungen hinzu, wie Sie benötigen.

10. Definieren Sie Messungen mit mathematischen Funktionen

Wenn Sie Messungen mit dem Inspektor festlegen, können Sie mathematische Funktionen verwenden, um zu vermeiden, dass Sie die Berechnungen in Ihrem Kopf durchführen müssen. Angenommen, Sie möchten, dass ein Rechteck die gesamte Breite einer Zeichenfläche minus 20 Pixel auf jeder Seite (d. H. Einen Rand von 20 Pixel) abdeckt. Sie können die Breite als '100% -40 Pixel' definieren. Bei einer Zeichenfläche mit 320 Pixel würde die Breite des Rechtecks ​​dann 280 Pixel betragen.

11. Imitieren Sie CSS-Frameworks

Webentwickler verwenden häufig CSS-Frameworks wie Bootstrap und Foundation, die mit ihren eigenen responsiven Grid-Systemen geliefert werden. Um Entwürfe haltbarer und flexibler zu machen (und Entwicklungskosten zu schützen), möchten Designer, die Sketch verwenden, diese Rastersysteme möglicherweise mithilfe von Layout-Gittern replizieren.

Navigieren Sie zu Ansicht> Leinwand> Layouteinstellungen…, um das Layout-Raster-Modal aufzurufen, und geben Sie dann die Anzahl der Zeilen und Spalten sowie die Gesamtbreite des Website-Containers und alle Spalten- / Rinnenbreiten an. Layoutraster werden auf der Leinwand hellgrau angezeigt, obwohl Sie diese Farbe ändern können. Schalten Sie sie mit ein und aus cmd + alles + L. Ihr Entwickler wird es Ihnen später danken!

12. Halten Sie Ihre gemeinsamen Farben bereit

Farben werden im gesamten Design für visuelle Konsistenz wiederverwendet. Bei korrekter Verwendung bedeuten Farben etwas für den Benutzer, sodass die Benutzeroberfläche verbessert wird. Es ist typisch, eine bestimmte Farbe für die Marke, den Textkörper, die Überschriften usw. zu haben, und wir können diese Farben zur schnellen Verwendung in Sketch speichern, damit wir keine Hex / RGBA-Werte aus dem Speicher abrufen müssen.

Wenn Sie sich im Farbauswahl-Widget befinden und die gewünschte Farbe ausgewählt haben, klicken Sie auf das Symbol '+' unter 'Dokumentfarben', um es im Dokumentfeld zu speichern. Wenn Sie dem Farbfeld 'Globale Farben' Farben hinzufügen, werden diese in allen Skizzendokumenten angezeigt. Ziehen Sie die Farben aus dem Farbauswahl-Widget, um sie zu entfernen.

Weitere Informationen zum effektiven Einsatz von Farben finden Sie in unserem Beitrag unter Farbtheorie .

13. Prototyp wie ein Profi

Prototyping und Design-Zusammenarbeit liegen derzeit voll im Trend. Die Möglichkeit, Ihre Designs mit interaktiven Hotspots, dynamischen Komponenten und Animationen zum Leben zu erwecken, bevor die Entwicklung überhaupt begonnen hat, macht nicht nur Spaß, sondern ermöglicht es Teams und Stakeholdern, Benutzererfahrungen zu testen und frühzeitig Feedback zu hinterlassen.

Die Möglichkeit, die meisten Falten auszubügeln, bevor der Benutzer die App oder Website überhaupt erlebt, stellt sicher, dass Ihre Conversions höher sind, Ihre Kundenbeschwerden geringer sind und Ihre Produkteinführungen mehr Auswirkungen haben.

Eine der besten Möglichkeiten, Prototypen direkt in Sketch zu erstellen, ist wohl die Craft Plugin von InVision, das Ihren Designprozess auf verschiedene Weise beschleunigt. Hier ist der Überblick:

• Stellen Sie Ihrem Design realistische Dummy-Daten zur Verfügung.
• Quell-Stock-Bilder für Ihren Inhalt.
• Duplizieren Sie den Inhalt vertikal und horizontal.
• Erstellen Sie gemeinsam genutzte Designbibliotheken, die in der Cloud gespeichert sind.
• Aktivieren Sie den Freihandmodus für Diskussion und Zusammenarbeit.
• Machen Sie Ihre Designs dynamisch und interaktiv.
• Synchronisieren Sie all dies mit der InVision-Kern-App.
• Aktivieren Sie die Übergabe, damit Entwickler Entwurfsstile überprüfen können.

Craft existiert als vertikale Seitenleiste neben dem Inspector in Sketch. Trotz der vielen Funktionen ist die Benutzeroberfläche recht einfach zu bedienen.

Wunder ist eine weitere Prototyping-App mit einem Sketch-Plugin. Obwohl es nur zum Exportieren von Designs in die Marvel-Kern-App dient, bietet die Verwendung von Marvel gegenüber InVision einige Vorteile. Obwohl es nicht so flexibel ist wie InVision - das beispielsweise mehr Prototyping-Funktionen bietet - ist die Lernkurve kleiner und die Marvel-Oberfläche fühlt sich einfacher an als die von InVision.

Probieren Sie beide aus, sie sind fantastisch!

14. Verwenden Sie zeitsparende Verknüpfungen

Sie werden überrascht sein, was Sie mit Sketch nur über die Tastatur tun können. Viele der Tools sind Verknüpfungen aus einzelnen Buchstaben, und sich wiederholende, alltägliche Aufgaben sind heute so etwas wie ein urbaner Mythos. Hier sind noch einmal die Verknüpfungen, die Sie lieben werden:

• Rechteck : R.
• Oval : Ö
• Linie : L.
• Text : T.
• Zeichenfläche : TO
• Bearbeitungsmodus : Rückkehr
• In der Hierarchie nach oben gehen : Esc
• Ändern Sie die Deckkraft des Objekts : 0-9
• Umbenennen : cmd + R.
• Export : cmd + Umschalt + E.
• Rein / rauszoomen : cmd und +/-

Cmd / Alt / Shift-Combos

• Gruppe : cmd + G.
• Gruppierung aufheben : cmd + Umschalt + G.
• Objekt verschieben : & uarr; → & darr; & larr;
• Ändern Sie die Größe des Objekts : cmd + & uarr; → & darr; & larr;
• Objekt um 10px verschieben : Shift + & uarr; → & darr; & larr;
• Ändern Sie die Größe des Objekts um 10 Pixel : cmd + Umschalt + & uarr; → & darr; & larr;
• Klicken Sie sich durch, um Objekt in Gruppe zu erstellen : cmd + Linksklick
• Aktivieren Sie Smart Guides : alles
• Smart Guides mit Click-through : cmd + alt + Linksklick
• Verschieben Sie das Objekt in der Hierarchie nach oben / unten : cmd + alt + & uarr; & darr;
• Erhöhen / Verringern der Schriftgröße : cmd + alt und +/-
• Linksbündig : cmd + Umschalt +
• Rechts ausrichten : cmd + Umschalt +

Minimieren Sie Ihren Arbeitsbereich
Was mich an Adobe Photoshop immer frustriert hat, war, wie aufgebläht und überladen es sich anfühlte. Es war ein multidisziplinäres Werkzeug, das sowohl für Design als auch für Kunst verwendet wurde. Kein Wunder.

Im Gegensatz dazu konzentriert sich Sketch auf das UI-Design, ist also nicht nur standardmäßig minimal, sondern Sie können die Symbolleisten auch mit einer schnellen Verknüpfung ein- und ausschalten. Dies ist nützlich, um bei Bedarf mehr Platz auf der Leinwand zu schaffen oder wenn Sie in den Modus 'Zeigen Sie mir nur das Design' wechseln müssen.

Dies sind die Verknüpfungen in der Skizzensymbolleiste, die Sie kennen müssen:

• Symbolleiste ein- / ausblenden (oben) : cmd + alt + T
• Ebenenliste ein- / ausblenden (links) : cmd + alt + 1
• Inspektor ein- / ausblenden (rechts) : cmd + alt + 2
• Präsentationsmodus (alles verstecken) : cmd +.

Sie sollten diese Verknüpfungen auch nicht vergessen:

Scheibe : S.
Erstellt eine rechteckige Auswahl, die dann exportiert werden kann. Dies ist nützlich, um wichtige Abschnitte hervorzuheben oder Screenshots zu erstellen. Stellen Sie sicher, dass Sie im Inspektor die Option Transparente Pixel zuschneiden aktivieren, um Leerzeichen aus Ihren Slices zu entfernen.

Vektor : V.
Mit Vektorwerkzeugen können Sie freihändig völlig einzigartige Formen zeichnen - zum Beispiel Symbole oder Illustrationen. Sie können 1, 2, 3 und 4 auf der Tastatur verwenden, sobald Sie sich auf einen Vektorpunkt konzentriert haben, um den Punktstil vom Standardstil 'Gerade' in 'Gespiegelt', 'Asymmetrisch' oder 'Nicht verbunden' zu ändern.

Maske : cmd + Strg + M.
Wenn eine Form als Maske verwendet wird, werden alle Inhalte neu definiert, die über diese Form hinausgehen. Ein Beispiel hierfür könnte sein, wenn Sie ein quadratisches Bild benötigen, um in einen Kreis zu passen - die kreisförmige Maske verbirgt die 90-Grad-Winkel des quadratischen Bildes. Praktisch.

15. Komponenten mit Symbolen wiederverwenden

Farben sind nicht das einzige, was wir wiederverwenden können. Tatsächlich können wir ganze Komponenten wiederverwenden. Nehmen Sie zum Beispiel eine Hauptnavigation - Sie werden diese auf den meisten (wenn nicht allen) Bildschirmen verwenden, oder? Wenn Sie eine Änderung daran vorgenommen haben, möchten Sie, dass diese Änderung universell ist, oder?

Hier kommen Symbole ins Spiel.

Wählen Sie die Komponente aus, die Sie wiederverwendbar machen möchten, und klicken Sie dann in der Symbolleiste oben auf Symbol erstellen. Navigieren Sie danach zu Einfügen → Symbol und klicken Sie auf eine beliebige Stelle auf der Leinwand, um sie einzufügen.

Sie können die Hauptinstanz des Symbols auf einer separaten Seite außerhalb des Hauptdesigns speichern. Dies ist die Instanz des Symbols, das Sie bearbeiten, wenn Sie eine universelle Änderung daran vornehmen möchten. Durch Doppelklicken auf eine andere Instanz im Hauptdesign werden Sie trotzdem zur Master-Instanz weitergeleitet.

16. Verschachtelte Symbole und Symbolüberschreibungen

Sie können auch ein SVG-Bild in die Seite in CSS einbetten, indem Sie dieselbe Methode anwenden, mit der Sie einem Element jede andere Art von Bild hinzufügen würden.

Wenn Sie das SVG auf diese Weise verwenden, können Sie die anderen CSS-Hintergrundeigenschaften nutzen, um unser Bild als Hintergrund eines Elements zu dimensionieren, zu positionieren und zu wiederholen.

Um Unterstützung zu bieten, können wir einen Trick in der Art und Weise verwenden, wie CSS vom Browser analysiert wird, und ein Fallback-PNG bereitstellen, bevor wir unser SVG einschließen.

17. Behalten Sie die Designkonsistenz mit freigegebenen Stilen bei

Und schließlich gibt es gemeinsame Stile, die wie Symbole sind, jedoch nur für Ebenen. Berücksichtigen Sie Ihre Überschriftenstile, Schaltflächentextstile, Textkörperstile usw. - die Stile, die Sie immer wieder verwenden werden. Freigegebene Stile werden im Inspektor erstellt.

Um freigegebene Stile zu erstellen, wählen Sie die betreffende Ebene aus und klicken Sie im Inspektor auf die Dropdown-Liste 'Kein freigegebener Stil' (oder auf 'Kein Textstil', wenn es sich um eine Textebene handelt). Wählen Sie dann 'Neuen Text / freigegebenen Stil erstellen' aus der Liste der Dropdown-Optionen und geben Sie ihm einen aussagekräftigen Namen (z. B. 'Größte Überschrift').

Flexibilität ist bei freigegebenen Stilen natürlicher als bei Symbolen, bei denen Sie einfach ändern können, was Sie in einer Instanz eines freigegebenen Stils ändern müssen, und diese Änderungen nicht automatisch mit den anderen Instanzen synchronisiert werden. Es handelt sich um eine manuelle Änderung, bei der Sie das Synchronisierungssymbol in demselben Dropdown-Menü drücken müssen.

Wenn Sie hier nicht auf das Synchronisierungssymbol klicken, ändern Sie einen ansonsten visuell konsistenten gemeinsamen Stil.

18. Live-Vorschau Ihrer Designs mit Sketch Mirror

Wenn mobile Apps und Websites für die Verwendung durch Daumen konzipiert sind, ist es sinnvoll, sie mit Daumen zu testen. Genau hier bietet sich Sketch Mirror an. Wir brauchen dies, um unsere Designs von der großen Leinwand auf die kleine Leinwand zu bringen.

Mit Sketch Mirror für iOS können Sie eine Vorschau Ihrer Sketch-Zeichenflächen auf Ihrem iOS-Gerät anzeigen. Klicken Sie in der Symbolleiste auf 'Spiegeln' und wählen Sie Ihr Gerät aus der Liste der Optionen aus. Wenn Sie Ihr Gerät nicht sehen können, stellen Sie sicher, dass Sketch Mirror auf Ihrem Gerät geöffnet ist und beide sich im selben drahtlosen Netzwerk befinden.

Tipp: Wischen Sie im iOS Control Center nach rechts und tippen Sie auf das Aufzeichnungssymbol, um einen Benutzertest aufzuzeichnen oder eine Videodemonstration zu erstellen, die Sie dann in einer kurzen Nachricht an Ihre Teamkollegen oder andere senden können.

19. Erstellen Sie diese rauchige iOS-Unschärfe

Beim Entwerfen mobiler Apps für iOS werden häufig viele native UI-Elemente und visuelle Konzepte verwendet. Eines davon ist die rauchige Unschärfe, die als Hintergrund angezeigt wird, um die visuelle Ablenkung von Hintergrundelementen zu verringern. Dieser Effekt verwischt den Hintergrund, wenn beispielsweise das Control Center geöffnet ist.

Sie können diesen Effekt erstellen, indem Sie im Inspektor die Option 'Hintergrundunschärfe' auswählen. Es ist zu beachten, dass dies nicht funktioniert, wenn die Deckkraft der Füllung 100% beträgt. Je geringer die Deckkraft ist, desto größer ist der Unschärfeeffekt.

Hintergrundunschärfe unterscheidet sich von Gaußscher Unschärfe darin, dass bei Gaußscher Unschärfe auch die Ränder des unscharfen Hintergrunds unscharf sind.

20. Verwenden Sie Sketch Cache Cleaner

Sketch-Benutzer beschweren sich häufig darüber, dass .sketch-Dateien viel Platz auf ihren Computern beanspruchen. Hier ist, was Sie tun können, um dieses Problem zu umgehen.

Löschen Sie den Sketch-Cache, um Platz zu sparen
Wenn eine .sketch-Datei automatisch als Backup gespeichert wird, überschreibt die neue zwischengespeicherte Version nicht die alte zwischengespeicherte Version. Jede zwischengespeicherte Version wird an einem sicheren Ort gespeichert, wodurch die nativen Versionskontrollfunktionen von Sketch aktiviert werden. Während dies für diejenigen nützlich ist, die manchmal auf eine frühere Version ihres Designs zurückgreifen müssen, stehlen diese Versionen letztendlich alle Ihre Megabyte (oder Gigabyte). Sketch Cache Cleaner ist eine unabhängige App, die alle diese Versionen löscht, wenn dieser Cache zu groß wird. Natürlich können Sie die Versionskontrolle in den Sketch-Einstellungen deaktivieren, aber manchmal ist es nützlich.

Bereinigen Sie den Cache stattdessen nur, wenn Sie sicher sind, dass Sie nichts davon benötigen. Wenn Sie eine Versionskontroll-App wie z Abstrakt oder Pflanze In diesem Fall ist es hilfreich, die native Versionskontrolle von Sketch zu deaktivieren.

Reduzieren Sie die Größe von Skizzendateien
Sogar Skizzendateien selbst können sehr groß werden, aber Sketch verfügt jetzt über eine integrierte Funktion, die die Dateigröße reduziert. Diese finden Sie unter Datei> Dateigröße reduzieren. Einige Designer sagen, dass Reduzieren von der Makellose App Das Team ist dabei allerdings etwas effizienter, da die Farbqualität besser erhalten bleibt. Reduce kann kostenlos heruntergeladen werden und befindet sich in der macOS-Menüleiste, sodass Sie jederzeit schnell und einfach darauf zugreifen können.

Halten Sie die Dinge organisiert
Wenn Sie sich angewöhnen, Ihre .sketch-Dokumente während des Entwurfs (oder in regelmäßigen Abständen) zu bereinigen, wird im Allgemeinen die Dateigröße verringert. Damit meine ich das Entfernen redundanter Ebenen, Gruppierung aufheben ( cmd + Verschiebung + G ) alle redundanten Gruppen und machen Ihre Dokumente im Grunde sauber und einfach zu lesen.

Dies kommt nicht nur Ihren Dateigrößen zugute, sondern macht Ihre Arbeit auch für jeden lesbar, der sie nach Ihnen anzeigt. Dies können Entwickler sein, die Ihre Arbeit überprüfen, damit sie in Code konvertiert werden kann, oder sogar ein anderer Designer, mit dem Sie möglicherweise zusammenarbeiten auf einem großen Design.

Dieser Artikel wurde ursprünglich in einer Ausgabe 2017 des kreativen Webdesign-Magazins Web Designer veröffentlicht und seitdem aktualisiert. Abonnieren Sie hier den Web Designer .

Zum Thema passende Artikel:

• Top-Tipps zur Verwendung von Sketch
• Wählen Sie einen Website-Builder: 17 Tools
• 27 Schritte zum perfekten Website-Layout