Vorheriger Artikel Nächster Artikel

6 Druckvorlagen zum Entwerfen von Responsive Designs

wird immer beliebter. Viele Webdesigner und -programmierer richten ihr Fachgebiet darauf aus. Doch bis zur Fertigstellung eines responsiven Designs müssen viele Arbeitsschritte durchlaufen werden. Erste Design-Entwürfe werden auch heute noch gern mit Stift und Zettel realisiert. Dafür gibt es Druckvorlagen, sogenannte Sketch-Sheets, von denen wir euch hier sechs vorstellen.

6 Druckvorlagen zum Entwerfen von Responsive Designs

Sketch-Sheets von ZURB

(Bildquelle: ZURB)

Wer seine Skizzen gern ausführlich macht und auch Desktop-Entwürfe zeichnen möchte, sollte sich die responsiven Sketch-Sheets von ZURB ansehen. Angeboten werden viele verschiedene Layout-Größen, vom Desktop bis zum Smartphone.

Sneakpeekit

(Bildquelle: Sneakpeakit)

Ähnlich ausführlich ist auch die Zusammenstellung von Sneakpeekit. Unter anderem sind hier Vorlagen enthalten, die einen Browser abbilden, in den hineingezeichnet werden kann. Auch dabei ist eine Unterstützung für verschiedene Frameworks beziehungsweise Grid-Systeme. Und wenn es noch ausführlicher werden soll, sind auch PSD-Dateien herunterladbar, mit denen man in Photoshop weiterarbeiten kann.

Interface Sketch

(Bildquelle: Interface Sketch)

Wer es gern bunt mag, ist bei Interface Sketch auf der richtigen Seite. Auch hier sind viele verschiedene Geräte mit an Bord, sei es das iPad, das Nexus 10 oder auch Smartphones wie das iPhone 5 und verschiedenste Android-Geräte. Für alle, die es lieber schlicht mögen, bietet sich die in Graustufen gehaltene Version an.

Sketch-Sheets von Jeremy Palford

(Bildquelle: Screenshot Sketch-Sheets von Jeremy Palford)

Diese Vorlagen sind nach einem Workshop über CSS3 entstanden. Der Macher ließ sich von der Vortragenden inspirieren und erstellte viele verschiedene Größen und Formate und bietet diese auf seiner Webseite zum Herunterladen an.

Responsive Design Scatchbook

(Bildquelle: Screenshot appsketchbook.com)

Zuletzt geht es um ein ganzes gedrucktes Buch mit verschiedenen Vorlagen – alle sind mehrfach in dem Band enthalten, in den direkt hineingezeichnet werden kann. Wer gern ein Buch in der Hand hält oder seine Entwürfe einem Kunden präsentieren möchte, kann sich das Responsive-Design-Scratchbook kostenpflichtig online bestellen. Zwar ist es momentan vergriffen, eine Benachrichtigungsfunktion bei Verfügbarkeit ist aber vorhanden.

Es geht auch einfach – mit einem A4-Blatt

(Bildquelle: nocturnalmonkey.com)

Für alle Freunde des Minimalismus hat nocturnalmonkey.com einen einfachen Tipp zum Selbstmachen parat. Das Einzige, was man dafür benötigt: ein Blatt im A4-Format. Um eine Desktop-Version zu zeichnen, nutzt man das gesamte Blatt. Knickt man dieses einmal in der Mitte, hat man zwei verschiedene Tablet-Layouts und noch einen Knick später ein Smartphone. Für erste Ideen reicht das auf jeden Fall aus, für mehr muss man dann auf eine der oben genannten Alternativen ausweichen.

Weiterführende Links

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
2 Antworten
  1. von smoking.gnus am 12.04.2013 (11:14 Uhr)

    eigentlich ist es ja ganz einfach sich ein sketchsheet anzulegen, selbst ohne vorlagen. selbst ohne jegliche druckvorlage. insbesondere im bereich responsive webdesign.

    aber andererseits: ich arbeite auch ständig mit sketchsheets für die unterschiedlichsten, wildesten objekte. und ich finde, es einfach ein anderes gefühl statt mit 'nem karierten blatt oder rückseite von meeting mitschrift... :-)

    daher danke für die links

    Antworten Teilen
  2. von Christiane am 12.04.2013 (12:10 Uhr)

    Zu empfehlen ist in dem Zusammenhang auch UIStencils. Auf der Webseite gibt es (neben käuflichen Sketchpads) in der Box "Downloads" für Desktop und Mobile ein pdf mit Sketchsheets, z.B. hier http://www.uistencils.com/products/android-stencil-kit

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Webdesign
Die Basics des Responsive Webdesign [Infografik]
Die Basics des Responsive Webdesign [Infografik]

Je schneller die Zahl der mobilen Internetnutzer steigt, desto dringender wird die Frage, wie sich Website-Inhalte auf verschiedenen Endgeräten optimal darstellen lassen. Ein möglicher … » weiterlesen

Responsive Webdesign für lau: Diese Website bündelt mehr als 500 Templates
Responsive Webdesign für lau: Diese Website bündelt mehr als 500 Templates

Du willst deine Website mit einem Responsive Webdesign versehen oder eine neue damit launchen? Dann solltest du einen Blick auf W3Layouts werfen. Die Website bündelt über 500 kostenlose … » weiterlesen

Die Basics des Responsive Webdesign in 9 schicken GIFs
Die Basics des Responsive Webdesign in 9 schicken GIFs

Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen