Drücke die Tasten ◄ ► für weitere Artikel  

6 Druckvorlagen zum Entwerfen von Responsive Designs

Responsive Design 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

142 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
7 Antworten
  1. von Birger Allais via facebook am 12.04.2013 (10:09Uhr)

    Schön. ich glaub ich kauf ein paar von diesen "A 4 Blättern".

  2. von smoking.gnus am 12.04.2013 (11:14Uhr)

    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

  3. von Lutz Beyer via facebook am 12.04.2013 (11:14Uhr)

    Ich hab mir auch mal zwei Pakete bestellt. Einmal portrait und einmal landscape.

  4. von Christiane am 12.04.2013 (12:10Uhr)

    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

  5. von Lesenswert: Rewe, Inkubator, SimilarWeb,… am 15.04.2013 (10:32Uhr)

    [...] Responsive Design 6 Druckvorlagen zum Entwerfen von Responsive Designs Responsive Design 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. t3n [...]

  6. von Website-Mockups mit Wired 1.0 einfach er… am 18.04.2013 (14:42Uhr)

    [...] sind die ersten festgehaltenen Design-Ideen richtungsweisend für ein neues Projekt. Alternative zu Entwürfen auf Papier können Webdesigner ihre initialen Ideen auch digital festhalten und ihrem Auftraggebern auf diese [...]

  7. von Design-Hilfe, 90er Jahre Flashback, Retr… am 28.06.2013 (09:12Uhr)

    [...] t3n.de werden 6 Quellen aufgelistet, auf denen man Vorlagen für Desponsive Design Entwürfe finden [...]

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Webdesign
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

SVGMagic: Automatischer SVG-Fallback für deine Webseite
SVGMagic: Automatischer SVG-Fallback für deine Webseite

SVG-Grafiken sind seit Responsive Webdesign und Retina-Display kaum hoch wegzudenken. Fall-Back-Lösungen sind jedoch ein hartes Stück Arbeit. Mit SVGMagic soll sich das ändern – wir zeigen euch w ... » weiterlesen

Responsive Webdesign: Dieser Browser stellt Mobil- und Desktop-Ansicht nebeneinander
Responsive Webdesign: Dieser Browser stellt Mobil- und Desktop-Ansicht nebeneinander

Duo ist ein Browser, der dabei helfen soll, Responsive Webdesign zu testen. Dazu stellt er eine mobile Ansicht neben einer Desktop- oder Tablet-Ansicht dar. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen