Bilder und Grafiken gehören zu den Schwergewichten, wenn es um die Optimierung der Website-Ladezeiten geht. Im Verhältnis zu anderen Bereichen einer Seite kann mit Bild-Optimierung überdurchschnittlich viel Last eingespart werden. Es lohnt also i.d.R. hier Aufwand zu betreiben. Das Bild-Dateiformat WebP existiert bereits seit geraumer Zeit, und rückt nun dank deutlich verbessertem Browser-Support wieder in den Fokus. Wir zeigen wie und in welchen Programmen WebP-Grafiken exportiert werden können.
Die Informationsarchitektur (IA) organisiert die Inhalte einer Website. Die Navigation macht diese Inhalte für den Besucher bestmöglich zugänglich. Nehmen wir als Beispiel eine Ausstellung, so ist die IA der Katalog, die Navigation die Führung durch die Ausstellung. Beides kann sehr unterschiedliche Herangehensweisen abbilden und unterstützen. Je nach Website-Typ bieten sich verschiedene Ansätze an.
Die mächtige Funktion der Overrides in Sketch-Symbolen kann mit Text- und Layer Styles nochmals erweitert werden. Wenn ein Symbol einen Ebenenstil (Layer Style) beinhaltet, steht dieser in den Overrides zur Verfügung. Der Stil kann dort gegen einen anderen Stil getauscht werden. Komplexe Design-Systeme oder Icons in verschiedenen Farben sind somit kein Hindernis mehr.
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.
Texte, die vor Hintergrundfotos oder Videos platziert werden, sind ein beliebtes Gestaltungsmerkmal auf Websites. Leider ist die Lesbarkeit der Texte …
