Mit den Prototyping-Funktionen von Sketch ist es möglich Artboards scrollbar zu gestalten, Verlinkungen einzufügen und Objekte beim Scrollen im Vordergrund zu fixieren. Somit ist es möglich den User-Flow – die Bewegung des Benutzers durch die Website oder App – zu visualisieren und zu testen.
Die mächtige Funktion der Symbole mit Overrides kann durch verschachtelte Symbole perfektioniert werden. Sobald Symbole verschachtelt werden, stehen die untergeordneten Symbole in den Overrides zur Verfügung. Verschachtelte Symbole können getauscht oder deaktiviert werden. Somit sind hochkomplexe Design-Systeme mit zahlreichen Varianten in Symbolen kein Problem mehr.
Gestaltungseffekt für Texte oder Ebenen lassen sich in Sketch in Form sog. Text- und Layer-Styles an zentraler Stelle ablegen und verwalten. Änderungen an einem bestehenden Stil sind kein Problem, da Anpassungen – wenn gewünscht – auf alle bereits bestehenden Stile angewendet werden können.
In Sketch können Objektgruppen so konfiguriert werden, dass sich alle enthaltenen Elemente, Texte und Bilder flexibel ausrichten, wenn die Gruppe in der Höhe oder in der Breite angepasst wird. Die Funktion namens »Resizing Constraints« wird auch oft im Zusammenhang mit Responsive Design in Sketch beschrieben – auch wenn es sich eigtl. nur um fluide Elemente handelt. Mit ein wenig Übung können sehr einfach flexible Komponenten und Layouts gestaltet werden.
Für einige Projekte gibt es die Anforderung, exakt auf Grundlage des Bootstrap-Grids zu layouten. Das Gestaltungsraster von Bootstrap 4+ basiert auf fünf Viewportgrößen/Breakpoints mit jeweils 12 Spalten. Wir haben uns eine Vorlage für Adobe XD erstellt, die den schnellen Einstieg ins Projekt vereinfachen soll.
Die sog. Symbole von Sketch ermöglichen es Objekte oder Objektgruppen an zentraler Stelle abzulegen und beliebig oft im Dokument zu verwenden. Wird später das original Symbol gestalterisch angepasst, aktualisieren sich automatisch alle Instanzen des Symbols.
Mit den sog. Overrides von Sketch können Inhalte wie Bilder oder Texte in Symbolen überschrieben werden. Wir zeigen anhand eines einfachen Beispiels wie Overrides funktionieren.
An welcher Stelle auf meiner Website platziere ich welche Inhalte? Um diese Frage zu klären, hilft es zu wissen, welche …
Beitrag zu Ende lesenTexte, die vor Hintergrundfotos oder Videos platziert werden, sind ein beliebtes Gestaltungsmerkmal auf Websites. Leider ist die Lesbarkeit der Texte …
Beitrag zu Ende lesenDie Begriffe Modal, Dialog, Lightbox, PopUp usw. werden häufig nicht trennscharf verwendet. Doch es gibt klare Unterschiede, wann ein Dialog modal …
Beitrag zu Ende lesenDie Benennung von Komponenten kann zu den schwierigsten Aufgaben bei der Entwicklung von Design Systemen und Component Libraries gehören. Ziel …
Beitrag zu Ende lesenMit der CSS-Eigenschaft »hyphens« wird die Gestaltung von typografisch ansprechenden Texten im Web deutlich vereinfacht. Lange Zeit wurde das Thema …
Beitrag zu Ende lesenDie nativen Formular-Elemente von HTML werden in verschiedenen Browsern und Betriebssystem sehr unterschiedlich dargestellt und bedient. Das widerspricht häufig der …
Beitrag zu Ende lesen