Wie erstelle ich eigentlich ein Layout in Sketch? Diese Frage hatte ich in meinem Post Raster, Breakpoints und Frameworks für Web-Designer schon aufgegriffen, möchte dies aber in folgendem Video noch visualisiert zeigen. Sketch macht es dem Designer einfach, ein Layout zu erstellen. Ich möchte mein Vorgehen anhand von Bootstrap-Grössen zeigen, die Technik kann aber auch für andere Frameworks oder Grössen angewendet werden.
Bootstrap Layout in Sketch erstellen
Zum Erstellen der Artboards wird die gewünschte Screen-Grösse benötigt. Hier nehme ich gängige Grössen wie
- Full-HD 1920 px für Desktop
- 1024 px für iPad landscape
- 768 px für iPad portrait
- 320 px für ein kleines Smartphone.
Gerade bei Smartphones ist es wichtig, dass das Design auf den kleinsten Grössen funktioniert, Grösser geht dann immer. Danach muss man beim Layout in Sketch nur noch folgendes wissen:
- Die Breite des Inhalts
- Anzahl Raster
- Leerraum zwischen der Raster
Der Rest rechnet Sketch für uns aus. Ist die Layout-Vorlage erst einmal erstellt, lässt sich diese einfach als Template speichern. Einfach unter «File/Save as Template» den gewünschten Namen eingeben, fertig. Danach kann die Vorlage jederzeit unter «File/New From Template/definierter-namen» aufgerufen werden.
