UX Design mit Axure 8 Grundkurs

Wireframes in Axure erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Lassen Sie sich vom Trainer erklären, was Wireframes sind und wie man sie in Axure einfach erstellen kann.
04:11

Transkript

Genug der Theorie, jetzt können Sie bereits anfangen, in Axure Wireframes zu erstellen. Was sind Wireframes? Wireframes beschreiben Inhalte, das heißt, die Struktur und die grundlegenden Funktionen einer Webseite oder eines Screens. Sie sind in der Regel frei von visueller Gestaltung, sondern verwenden Blöcke, um Inhalte darzustellen. Da man ausschließlich Blöcke und Basisform verwendet, reichen die Elemente der "Common"-Library aus. Im Folgenden werde ich einen Wireframe für einen Webblog erstellen. Diese Seitenstruktur passt schon, die wir vorher angelegt haben. Sie sollten Ihr Wireframes immer in den korrekten Größenverhältnissen anlegen. Blenden Sie daher die Hilfslinien, die wir zuvor angelegt haben, via Cmd+.+1 und ziehen Sie eine erste Box auf Ihre Arbeitsfläche. In der Regel passe ich die Schriftgröße etwas an und ändere die Textfarbe und mache die Hintergrundfarbe etwas transparent, damit übereinander liegende Boxen leichter erkannt werden können. Als Erstes lege ich den "Header" an. Mittels Cmd+L gehe ich oben in die Positionierungsfelder und trage dort die Startposition ein. Dann zoome ich einmal heraus und ziehe das Element über die gesamte Breite. Ausgewählte Elemente können direkt beschriftet werden, in diesem Fall "Header", und ich benenne auch das Element hier oben rechts. Die Beschriftung und die Benamung können unterschiedlich sein. Der Name des Elementes sollte eindeutig sein, damit wir später damit weiterarbeiten können. In der Regel besitzt ein Webblog neben einem "Header" einen Inhaltsbereich und eine Sidebar. Da unser angelegtes Raster zwölf Spalten besitzt, wähle ich für die Sidebar vier Spalten und für den Inhaltsbereich acht. Ich kontrolliere kurz die Position, dass die Abstände hier 20 Pixel und hier gleich sind. Dann selektiere ich beide Elemente, zoome mit der Maus einmal kurz heraus und der Command-Taste und ziehe die Elemente auf die gewünschte Größe, in diesem Fall 600 Pixel. Anschließend beschrifte ich beide Elemente und vergebe eindeutige Namen. Abschließend füge ich noch einen Footer hinzu und positioniere den passend. Hier noch einmal zur Erinnerung. Wenn Sie wie ich gerade ein Element kopiert haben, denken Sie daran, den Namen des Elementes anzupassen, da auch dieser kopiert wird. Überprüfen Sie noch einmal die Position des Elementes. Mit Shift und gedrückter Cursor-Taste bewege ich das Element um 10 Pixel, um zu sehen, ob es passend positioniert ist. So sieht der erste Wireframe-Entwurf unseres Webblogs aus. Alle Elemente sind jetzt passend positioniert, haben die richtigen Größenverhältnisse und sind bereits korrekt benannt, wie Sie auch hier unten in dem "Outline"-Panel sehen können.

UX Design mit Axure 8 Grundkurs

Lernen Sie mit Axure 8 Apps und Webseiten zu konzipieren und prototypisch umzusetzen, ganz ohne Programmiervorkenntnisse.

3 Std. 32 min (53 Videos)
Derzeit sind keine Feedbacks vorhanden...
Software:
Axure RP Pro Axure RP Pro 8
Exklusiv für Abo-Kunden
Erscheinungsdatum:04.11.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!