• Thema

  • Technologie

Layout erstellen in Sketch – Desktop, Tablet, Smartphone

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.

Was denkst du dazu?
yeah!
0
wooow
0
what?
0
meh.
0
hahaha
0
joel.weiss@weloveyou.ch
Das könnte dich auch interessieren:
Beitrag teilen
Was denkst du dazu?
Was denkst du dazu?
yeah!
0
wooow
0
what?
0
meh.
0
hahaha
0
Diskussion

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

 

Hinweis: Es kann bis zu zwei Stunden gehen, bis dein Kommentar auf der Website erscheint. Bitte poste deinen Kommentar nur einmal 😉

Aktuelle Jobangebote
  • Grafik / Prepress / Druck / Verpackung / Werbetechnik | Medienjobs und Stellen für Profis

    Neue Beiträge als E-Mail
    jeden Dienstag die neusten Blogposts in deiner Inbox
    Unsere Partner:

    Dein Gerät ist aktuell offline.