uxzentrisch erörtert:
12 Tipps für produktiveres Arbeiten mit Axure 7

Tobias Artikel über 18 Tipps für schöne, lesbare Axure-Konzepte (inkl. Word-Makros) ist einer der meist gelesenen Artikel auf uxzentrisch, aber ist auch mittlerweile nunmehr fast 5 Jahre alt.

In der Zwischenzeit hat sich in Axure einiges getan. Aber auch die Arbeitsweise mit dem Tool hat sich geändert.

  • Axure nutze ich um responsive Wireframes zu erstellen.
  • Der Clickdummy wird auf einem FTP-Server abgelegt
  • In Confluence wird dokumentiert und spezifiziert

Dafür habe ich folgende Tipps aufbereitet. Fügt eure eigenen gerne in den Kommentaren ein!

  1. Wireframes: Ob Interne oder Externe bspw. der Kunde können auf den Clickdummy zugreifen, und diesen an Kollegen weiterreichen.
    Das Deckblatt muss daher auch Personen eine Orientierung geben, die den Clickdummy zuvor nicht von mir präsentiert  bekamen. Darauf sind die wesentlichen Informationen  zu finden:

    • Projektname
    • Kundenname
    • URL zur Spezifikation
    • Versionsnummer des Clickdummy
    • Autor des Clickdummy
    • CTA-Button zur ersten Seite des Clickdummy
  2. Wireframes: Ich reduziere mein Grundlinienraster immer auf 5 px. Wireframes müssen bei mir sauber ausgerichtet sein und die Standard-10-px-Abstände von Axure bieten mir nicht genug Gestaltungsspielraum. (Einstellung unter »Arrange« → »Grid and Guides« → »Guide Settings« → »Grid« → In Spacing »5px« eingeben)
  3. Wireframes: Konzipiere ich eine responsive Seite, lege ich in Axure dieselben Breakpoints an, wie sie auch später die Designer und Entwickler anwenden. Auch hier halte ich mich an die  4 Breakpoints, wie sie in bootstrap vorgegeben sind. Das macht es leichter Seiten und Elemente zu konzipieren, die dem späteren Design entsprechen.
    Wie die Breakpoints angelegt werden ist in dieser Galerie zu sehen:
  4. Wireframes: Ich erstelle mir ein 12 Spalten-Raster mittels Hilfslinien, an dem ich meine Content-Elemente ausrichte. Bei der Spaltenbreite richte ich mich an die Angaben von bootstrap, da unsere Entwicklung auf bootstrap setzt. Die Wireframes sehen so direkt sauberer aus. (Rechtsklick unter »Grid and Guides« → »Create Guides«)
    Auf allen Seiten wird darauf hin das Grid eingeblendet. Um nicht ausversehen die Hilfslinien zu verschieben, sollte man diese Sperren (Rechtsklick unter »Grid and Guides« → »Create Guides« → »Lock Guides« auswählen)
    grid
  5. Wireframes: Ich verwende soweit möglich nur leichte Grautöne und nur sehr gezielt Rahmenlinien für meine Wireframes. Diese Empfehlung muss man sicherlich je nach Projekt überprüfen… aber für mich ist es wichtiger, grundlegende Gestaltungsregeln zum Lenken der Aufmerksamkeit zu beachten als das Wireframe wireframehaft aussehen zu lassen. Dunkelgraue Blöcke mit schwarzer Schrift sind einfach meistens hässlich. Sanfte Hintergrundflächen ohne Outlines sind viel besser! Außer man möchte das Wireframe auch ausdrucken, dann sind dunkle Linien empfehlenswert.
  6. Wireframes: Ich habe sehr gute Erfahrungen damit gemacht, konsequent mit Mastern zu arbeiten. Jedes Element, das 2x in den Wireframes vorkommt, ist ein Master. Alles andere ist viel zu fehleranfällig. Für jemand, der schon mal entwickelt hat, ist dieses Vorgehen besonders gewohnt.
  7. Wireframes: Von großem Vorteil ist es, im Widget Style Editor Vorlagen zu erstellen. So ist es komfortabel möglich bspw. Text-Überschriften von H1- H4, Fließtete, Sekundartexte, Zitate zu definieren. Der Vorteil besteht darin, dass beim konsequenten Einsatz, alle Überschriften, Fließtexte, etc. einheitlich sind und ggf. schnell im ganzen Wireframe geändert werden können. Mit dem Widget Style Editor lassen sich aber auch Vorlagen für Rechtecke erstellen, um so einheitlich dieselben Rahmen- und Füllfarben zu verwenden.
  8.  Wireframes: Axure 7 erlaubt es Webfonts einzubinden. So lässt sich bspw. die Hausschrift des Kunden einsetzen. Der Wireframe fühlt sich so nochmals realistischer an. Zudem hat es den Vorteil Textlängen in Elementen besser definieren zu können.
    axure webfont example 
  9. Workflow: Dateiablage: Über den gesamten Projektverlauf  ist der Clickdummy über dieselbe URL abrufbar. Dazu lade ich den Clickdummy auf einen FTP-Server hoch. Alternativ bietet sich axshare.com an So kann der Kunde immer auf den aktuellsten Stand zugreifen. Verwirrungen über gezippte Wireframes bleiben so aus.
  10. Wireframe: Möchte ich mir die den Wireframe auf dem Smartphone ansehen, muss ich diesen auf einem FTP exportieren und unter »mobile Device« folgende Einstellungen setzen. Alternativ kann der Clickdummy auch auf axshare.com exportiert werden.
    axure mobile
  11. Workflow: Die Spezifikation verfasse ich nicht mehr im Wireframe selbst. Stattdessen schreibe ich diese auf einer kollaborativen Plattform wie Confluence. Vorteile gegenüber Word-Export ergeben sich einige:
    • bessere Strukturierung in Seiten und Abschnitten.
    • Es bietet eine Kommentarfunktion.
    • ganzheitliche Dokumentation: Andere Gewerke wie Design, Entwicklung und Redaktion können ebenfalls dort Ihren Teil dokumentieren.
    • Es ist leichter einzelne Elemente mit dem Kunden  zu besprechen und abnehmen zu lassen.
    • Versionierung
    • Personen können sich automatisch  über Änderungen informieren lassen.
  12. Workflow: der letzte Punkt »Sich über Änderungen informieren zu lassen«, hat vor allem für die Änderungshistorie seinen Reiz. Die Änderungshistorie lagere ich auf eine extra Seite in Confluence aus. Diese ist tabellarisch mit den Spalten »Datum«, »Kapitel«, »Kurzbeschreibung der Änderung«, »Neuer Spezifikationstext (optional)« aufgebaut. Die Neuste Änderung steht stets am Anfang der Tabelle. Personen die diese Seite abonnieren, werden so komfortabel über alle Änderungen im Clickdummy informiert.

Bemerkung: Die Tipps zwei, fünf, sechs, sieben und neun stammen aus Tobias Beitrag und sind nach wie vor aktuell.

 

4 Kommentare

Marc vor 8 Monaten

Moin, coole Tipps, danke dafür. Wo ich etwas stolpere ist, dass du sagst das du mit Axure responsive machst. Kann Axure responsive? Ich denke das ist eher adaptive, oder? Axure skaliert doch die Elemente beim verschieben nich mit, oder doch? Dann habe ich es noch nich gefunden.

Tamim Swaid uxzentrisch vor 8 Monaten

Hi Marc, da hast du natürlich recht. Responsive kann Axure nicht. Man versucht nur mit dem Adaptive Ansatz für Responsive zu konzipieren.

Karen vor 7 Monaten

Hallo,
interessanter Beitrag, v.a. die Dokumentation in Confluence auszulagern. Wie kriegt Ihr die Kennzeichnung einzelner Elemente hin? In Axure kann man ja mit Notes oder Callouts am Element arbeiten. Aber erst die Callouts in Axure zu setzen und dann in Confluence die Doku dazu zu schreiben, ist ja nicht besonders elegant. Wie löst Ihr das?

Nikolai Merk Autor vor 7 Monaten

Hallo Karen,

Wir setzen Callouts direkt am Element. Die Notes sind meiner Erfahrung nach zu schnell zu übersehen.
Warum sollte das nicht elegant sein?
In Axure wird konsequent mit Mastern gearbeitet. Falls sich etwas am Callout ändert, muss dies nur an einer zentralen Stelle angepasst werden.
Der Vorteil ist auch noch, dass man den Callout auf die Confluence-Seite verlinken kann.