• 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.

Über mich

  • Joel Weiss

    Joel Weiss ist in der Web-Welt zuhause. Themen von der Konzeption über das Design bis zur Umsetzung von digitalen Lösungen faszinieren ihn. Die neue Publishing-Blog Webseite wurde von ihm mit WordPress umgesetzt. In der Freizeit begeistert Joel aber auch seine Canon 70D, welche vor allem zum Filmen herhalten muss.

Was denkst du dazu?
yeah!
0
wooow
0
what?
0
meh.
0
hahaha
0
Das könnte dich auch interessieren:
Ad - SiteGround Webhosting - Einfache Site-Verwaltung. Mehr erfahren.
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.