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

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
Grid – Eine einfache Einführung in Responsive Webdesign
Grid – Eine einfache Einführung in Responsive Webdesign

Willst du schnell den Einstieg in Responsive Webdesign finden oder die Basics auffrischen? Mit diesem Tutorial ist beides kein Problem. » weiterlesen

t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch … » weiterlesen

Responsive Webdesign verkaufen: So sieht der optimale Workflow aus
Responsive Webdesign verkaufen: So sieht der optimale Workflow aus

Mit „Responsive Webdesign“ werden oft nur die technischen Komponenten in Verbindung gebracht – wie Breakpoints, Responsive Images und progressive Enhancement. Kein Wunder, dass RWD-Projekte zum … » weiterlesen

Kennst Du schon unser t3n Magazin?

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