Vorlagen für Wireframes sind hilfreich, um auf die echten Größen und Proportionen der jeweiligen Displayanzeigen einzugehen. Hierbei helfen Vorlagen mit Smartphone-Rahmen, Tablet-Rahmen oder Vorlagen für ein Browserfenster, um die annähernd echten Ausmaße einer Applikation oder Webseite zu erfassen.
Vorlagen von Sneakpeekit
Übersichtlich aufbereitete Papier-Vorlagen für unterschiedliche Anzeigegeräte finden sich auf der Webseite Sneakpeekit. Ich nutze diese regelmäßig für die Erstellung von Wireframes.
Ihr findet auf Sneakpeekit folgende Vorlagen zum kostenlosen Download:
- PRECISION GRID:
Eine generische A4-Gittervorlage mit Spaltenmarkierungen, ideal für Website-Wireframes sowie für das Design von Symbolen, Schriftarten und Logos. - BROWSER + GRID:
Ein einzelner Webbrowser-Rahmen, in dem du die Seiten deiner Website skizzieren kannst. Diese ist mit und ohne Punkte verfügbar. - 4-UP BROWSERS + GRID:
Mehrere Browser-Rahmen auf einer Seite. Erhältlich mit und ohne Punkte. - 2-UP MOBILES + GRID:
Ideal für inhaltsreiche Seiten. Drucke es auf A4-Papier aus, um die reale Dimension eines 4,7“ Smartphones zu erhalten. - 4-UP MOBILES + GRID:
Diese Vorlage ist ideal für das Design von Applikationen und ist wie alle anderen Vorlagen mit und ohne Punkte erhältlich. - TABLET + GRID:
Diese Vorlage wurde für das Wireframing von Applikationen in Tablet-Auflösung entworfen. Drucke die Vorlage auf A4 aus, um die tatsächlichen Abmessungen eines 9,7“ Tablets zu erhalten. - 4-UP TABLETS + GRID:
Vier Tablet-Geräte-Mockups, um beim Entwurf von Apps oder Websites Papier zu sparen. Natürlich auch erhältlich mit und ohne Punkte.
Wobei helfen Wireframes?
Wireframes dienen dazu, einen sehr frühen konzeptionellen Entwurf einer Webseite oder eines Software-Frontends darzustellen. Dabei spielt die Gestaltung und Funktion noch keine Rolle. Das Augenmerk liegt auf der Anordnung von Elementen und der Benutzerführung. Grafische Komponenten werden nur sehr rudimentär abgebildet, da es bei einem Wireframe in erster Linie um die Konzeption und nicht um das Design geht.
Für mich ist das Zeichnen von Wireframes immer hilfreich, um eine Idee davon zu bekommen, wieviel auf ein Bildschirm passt und dabei noch angenehm für die Wahrnehmung der Nutzer ist. Zusätzlich erlauben Papier-Prototypen eine Priorisierung im Layout:
- Wo werden welche Elemente angeordnet und wie schnell sind diese vom Nutzer zu erfassen?
- Welche Elemente sind nicht so wichtig und können weiter unten angeordnet werden?
- Können wir ganz auf bestimmte Elemente verzichten, um so auf das eigentliche Ziel der Applikation oder Webseite zu fokussieren?
Durch die Nutzung von Papier-Vorlagen arbeite ich bei der Erstellung von Wireframes automatisch detailgetreuer. Wer sich das Zeichnen von Wireframes nicht zutraut, der kann auch Schablonen* für Applikationen oder Webseiten zum Einhalten der Größen von Icons und Buttons verwenden. Diese müssen in der Regel nur einmal angeschafft bzw. erstellt werden.
Druckertinte und Papier sparen
Druckertinte und Papier einzusparen ist einfach. Mit diesen Tipps im weiterführenden Blogartikel von mir hilfst du der Umwelt und schonst gleichzeitig deinen Geldbeutel. Drucker können im Laufe der Zeit wahre Geldvernichter sein, gerade wenn du wie ich auch gerne im HomeOffice arbeitest. Doch mit ein paar Tipps und Tricks kannst Du Abhilfe schaffen und einiges an Geld einsparen. Zusätzlich trägst du damit auch zum Umweltschutz bei!
Hier im Blog gibt es weitere Tools und Tipps von mir, stöbere doch mal rein!
… zurück zu Papiervorlagen – Hilfreiche Vorlagen zum Ausdrucken