Mit dem Wireframe-Toolkit für Keynote kann jeder, der grundlegende Kenntnisse über die Verwendung von Präsentationssoftware zur schnellen Erstellung von Benutzeroberflächen-Mockups für iOS und das Internet hat, nahezu alle Benutzer kennen. Wenn Sie Keynote nicht haben, machen Sie sich keine Sorgen, es gibt auch eine Powerpoint-Version!
Heute erhalten Sie einen schnellen Überblick über die Verwendung des Wireframe Toolkit for Keynote zum Erstellen eines grundlegenden Layouts für Web-Apps. Wenn Sie kopieren und einfügen können, können Sie dies tun!
Was Sie erhalten
Ihr Wireframe Toolkit-Download enthält eine umfangreiche Liste mit Keynote- und Powerpoint-Vorlagen. Wie Sie in der Abbildung unten sehen können, erhalten Sie vier verschiedene Versionen der Vorlagen: Keynote '08, Keynote '09, Keynote für iPad und Powerpoint.
Zu jedem Ordner gehören verschiedene Toolkits, mit denen Sie die Benutzeroberflächenelemente bereitstellen können, die Sie für das Design von iPhone, iPad und natürlich dem einfachen alten Web benötigen. Es gibt auch einige fertige Beispiele, die Sie öffnen können, um ein Gefühl dafür zu bekommen, wie alles funktioniert.
Folien vs. Folienvorlagen
Suchen Sie zum Starten das Toolkit, mit dem Sie arbeiten möchten, und duplizieren Sie es im Finder. Wenn Sie mit einem Duplikat arbeiten, können Sie alles ernsthaft durcheinander bringen, ohne das Original zu beeinträchtigen.
Ich öffne das? Web? Vorlage für unser Projekt. Wenn Sie nicht mit der Funktionsweise von Keynote vertraut sind, ist dies Powerpoint sehr ähnlich, aber es ist in der Regel noch intuitiver. Gleich darauf sollten Sie einen Streifen von Dias auf der linken Seite des Bildschirms sehen. Dieser Streifen ist in zwei Bereiche unterteilt: Slides (unten) und Master-Slides (oben).
Die Master-Folien im Toolkit enthalten alle vorgefertigten Elemente. Dies bedeutet im Wesentlichen, wofür Sie bezahlen. Für jede der mitgelieferten Vorlagenfolien gibt es eine bestimmte Kategorie, in der die Elemente der Benutzeroberfläche beschrieben werden: Formulare, Navigation, Daten, Textstile usw.
Meistens lassen Sie die Master-Folien in Ruhe und ändern sie nicht direkt. Stattdessen kopieren und fügen Sie Elemente aus den Master-Folien in die normalen Folien ein. Dadurch bleiben Ihre ursprünglichen Vorlagenelemente unverändert, sodass Sie sie immer wieder verwenden können.
Wenn Sie eine globale Änderung vornehmen möchten, die sich auf alles auswirkt, würden Sie natürlich eine vorhandene Vorlagenfolie bearbeiten oder sogar eine neue erstellen. Wenn Sie beispielsweise eine wiederverwendbare blaue Version einer Schaltfläche wünschen, können Sie die vorhandene Schaltfläche in der Master-Folie duplizieren und ihre Farbe in Blau ändern.
Eine neue Folie erstellen
Um zu beginnen, klicken Sie auf die aktuelle Unterrichtshilfe unter "Folien". und drücken Sie dann Befehlstaste + Umschalttaste + N, um eine neue Folie zu erstellen. Als Nächstes verwenden wir einen der mitgelieferten 960.gs-Führungsstile, um eine allgemeine Breite für unseren Inhalt zu erhalten. Ziehen Sie dazu eine 960-Master-Folie auf Ihre normale Folie. Die Master-Folie wird dann als Hintergrund angewendet.
Fügen Sie einige Navigation hinzu
Wir fangen mit etwas an, das fast jede Webseite benötigt: Navigation. Wenn Sie sich die Master-Navigation der Navigation ansehen, finden Sie einige Optionen. Finden Sie das, das Sie mögen, und kopieren Sie es einfach in Ihre Folie. Bam, jetzt haben wir Navigation! Sehen Sie, wie einfach das war?
Wie Sie sehen, ist die Navigationsbreite bereits so eingestellt, dass sie der von uns ausgewählten Hilfslinien entspricht. Nachdem Sie nun das Element in Ihrer Folie haben, können Sie es mit dem umfangreichen Toolset von Keynote beliebig anpassen. Tauschen Sie die Farben aus, ändern Sie den Text, es liegt an Ihnen!
Verwenden Sie die Keynote-Tools, um einen Container hinzuzufügen
Denken Sie daran, dass Sie nicht auf Elemente beschränkt sind, die im Toolkit enthalten sind. Sowohl Keynote als auch Powerpoint verfügen über grundlegende Zeichenwerkzeuge, die Sie bei der Erstellung Ihrer allgemeinen Struktur unterstützen können. Als ein Beispiel habe ich meine Seite etwas verfeinert, indem ich eine Hintergrundfüllung hinzugefügt und ein einfaches Feld unter der Navigation als Container für den Rest des Inhalts gezeichnet habe.
Größe der Objekte ändern
Was ich an diesem Toolkit wirklich schätze, ist, wie gut die Objekte für die Anpassung erstellt werden. Nehmen wir zum Beispiel an, ich wollte meinem Modell ein paar Widgets hinzufügen, also füge ich einen Kalender und ein Akkordeon-Menü hinzu. Das Problem ist, dass sie nicht die gleiche Breite haben, und für visuelle Konsistenz möchte ich, dass sie so sind.
Wenn Sie das Akkordeon-Menü betrachten, können Sie sehen, dass es sich um ein komplexes Objekt handelt, und instinktiv denken, dass das Dehnen in horizontaler Richtung einen Schmerz darstellt. Sicher wird es alle diese verschachtelten Elemente vermasseln, richtig? Falsch! Alles, was Sie tun müssen, ist es so zu dehnen, wie Sie möchten, und alles bleibt proportional und schön.
Das Mockup beenden
Inzwischen sollten Sie den grundlegenden Prozess heruntergefahren haben. Jetzt müssen Sie nur noch die Elemente aus dem Toolkit kopieren und einfügen. In kürzester Zeit haben wir ein großartig aussehendes Modell, das leicht für die Entwicklung einer CMS- oder Blogging-Plattform verwendet werden könnte.
Um ehrlich zu sein, als ich das Toolkit zum ersten Mal öffnete, konnte ich den Prozess in zehn Minuten herausfinden und das Layout oben erstellen! Jetzt, wo ich weiß, was ich mache, könnte ich in ungefähr drei Minuten etwas Ähnliches tun. Und ich bin kein richtiger Keynote-Benutzer.
Dies ist wirklich ein fantastisches Werkzeug zum Erstellen schneller Wireframes und Modelle. Ich könnte das obige Bild definitiv in Photoshop erstellen, aber ich hätte sicherlich viel länger gebraucht, um diese Elemente von Grund auf zu bauen!
Mehr Beispiele
Die obige Demo kratzt kaum an der Oberfläche nicht nur davon, was Sie mit diesem Toolkit machen können, sondern auch, was enthalten ist. Schauen Sie sich diese Modelle von iPad- und iPhone-Apps an, die vollständig mit dem Wireframe-Toolkit für Keynote erstellt wurden.
Zu beachten ist, dass die Schaltflächen dieser Versionen in Links zu anderen Folien umgewandelt wurden. Das bedeutet, dass Sie einen groben Prototyp der Navigation durchlaufen können, indem Sie die Diashow anzeigen und auf die Schaltflächen klicken. Wie cool ist das?
Für wen ist das?
Das Wireframe-Toolkit für Keynote ist praktisch für alle Personen geeignet, die auf jeder Ebene mit Web- oder Anwendungsentwicklung befasst sind. Wenn Sie kein Designer sind, ist dies eine großartige Möglichkeit, Ihrem Designer eine allgemeine Vorstellung davon zu vermitteln, wonach Sie suchen, ohne dass Sie dazu gezwungen werden, auf Ihre MS Paint-Fähigkeiten zurückzugreifen.
Wenn Sie ein Designer sind, ist dies eine fantastische und unglaublich schnelle Möglichkeit, die Mechanik eines Layouts zu durchdenken. Sie denken vielleicht, dass das Toolkit Sie einschränken würde, aber eigentlich ist es ziemlich frei, ein Drahtgitter so schnell aus dem Weg zu räumen, bevor Sie Photoshop oder CSS verwenden und die Elemente mit dem spezifischen Stil erstellen, den Sie suchen. In der Tat, wenn Sie den Stil eines der Elemente nicht mögen, wie oben gesagt, sind sie leicht zu ändern!
Toll, wo kann ich es bekommen?
Das Wireframe-Toolkit für Keynote ist jederzeit auf Keynotekungfu.com für $ 12 erhältlich. Vertrauen Sie mir, das ist wirklich billig für den Wert, den Sie daraus ziehen werden.
Auf der Website finden Sie außerdem eine Reihe weiterer Informationen zu den Inhalten und deren Verwendung. Es gibt sogar ein paar wirklich großartige Lehrvideos mit nützlichen Tipps, wie Sie Keynote für das Wireframing optimal nutzen können.