Formatvorlagen erstellen – Tutorial zu Axure RP Pro

So, die erste Seite, die Startseite, sieht jetzt schon ganz gut aus. Ich habe noch ein bisschen weiter daran gearbeitet, habe das Menü hier noch mal optimiert, habe hier einen kleinen Punkt eingefügt, um zurück auf die Startseite zu kommen, was wir dann auf den Unterseiten brauchen werden, habe den Fußteil der Seite ergänzt und vor allen Dingen habe ich hier den großen Buchen-Button eingebaut. Der Buchen-Button ist einfach nichts anderes als ein Widget, wieder genau wie diese Elemente hier, ein Rechteck mit Text darin mit einer anderen Hintergrundfarbe. Was noch nicht so schön ist, sind jetzt hier diese ganzen Schriften. Die sind alle noch Arial, wir wollten ja hier eine Open Sans haben, auch nicht nur in der Überschrift, sondern in allen weiteren Texten. Wir könnten das alles hier unten in dem Bereich Typographie ändern und da die Schriftarten einstellen, die wir haben möchten, aber wir machen es eleganter, wir gehen hier oben auf diesen Bereich Widget Style, das sind sozusagen die Formatvorlagen, wie man sie aus Word auch kennt, und die stehen uns hier ganz genauso zur Verfügung. Ich kann entweder hier direkt in diesem Bereich hier die Änderungen machen und sagen, okay, hier, diese ganzen Eigenschaften ändere ich direkt für das jeweilige Format. Wir haben jetzt hier das Standard-Paragraphformat, also den Standardabsatz, wo ich was ändern kann. Das kann ich alles hier machen. Ich persönlich finde es aber immer ein bisschen einfacher, wenn ich mir an einer Stelle das hier auf der Seite so hin drehe und die Eigenschaften einstelle, die ich haben möchte, und das dann zuweise. Und das heißt, ich gehe jetzt dann hier hinein, sage, das soll der Open Sans sein. Das passt soweit, aber eigentlich stelle ich gerade fest, es wäre noch eleganter, wenn wir das hier nicht als Paragraph formatieren, sondern als H2, weil eigentlich ist das hier ja eine Heading 1, richtig, korrekt, und das ist unser Heading 2, dann gehen wir mal auf Heading 2, die ist automatisch schon Open Sans, weil sie die Eigenschaft vererbt bekommt von der Heading 1. Bold soll sie nicht mehr sein, wir sagen, das ist einfach eine Regular. Die Größe gefällt mir. Breite sieht noch nicht ganz gut aus, das machen wir noch ein bisschen schmaler auf dreispaltig hier. Kann man natürlich noch mal korrigieren, wenn man dann den endgültigen Text hat, aber jetzt sage ich mal Open Sans, Regular, 24 finde ich super. Ich sehe an den kleinen Sternchen, dass die Heading 2 verändert wurde und dass das nicht mehr die Originalformatvorlage ist, dann kann ich einfach auf Update gehen, das Sternchen verschwindet und das heißt, der Heading 2 ist jetzt definiert mit genau diesen Eigenschaften, die dieses Widget hier hat. Wunderbar. Schauen wir auf den Button. Der Button ist formatiert als Box 2, auch da sehe ich an dem Sternchen, ah, das ist irgendwie anders als der Standardstyle. Ich sehe aber auch hier noch die falsche Textart, gehe auf Open Sans, Bold 30 gefällt mir, alles andere finde ich wunderbar, sage hier auch Update, dann ist das jetzt hier auch schon sauber organisiert. Diese Boxen hier, die haben auch Box 2. Und da sehe ich gleich sozusagen die Formatvorlagen in der Aktion. Wir haben das jetzt eben übertragen auf die anderen Boxen, gefällt mir jetzt in dem Fall natürlich nicht, weil man das kaum noch lesen kann und das alles viel zu fett ist. Wir schauen mal, was es hier auch noch gibt, Box 1, Box 2, nein, die wollen wir alle nicht haben, das heißt, wir machen uns einen eigenen Style für diese Box und sagen, wir machen Create, sagen, dieser New Style soll heißen MenueBox. Fill Color soll er übernehmen, Schrift Open Sans ist korrekt, TypeFace Bold ist nicht korrekt, machen wir Regular. Die Font Size probieren wir mal mit 24. Color ist auch wieder eine andere, wir brauchen nämlich hier einen schwarzen Text. Opacity und diese ganzen Dinge, die wollen wir mal in Frieden lassen, da machen wir keine Häkchen, die können sein, wie sie wollen. Border Thickness 0, das ist wunderbar. Und dann sage ich jetzt mal hier, das passt für mich soweit, ich mache OK. Und sehe jetzt, ja, hier, das ist jetzt wieder schwarz geworden, stelle fest, na ja, das Regular gefällt mir doch nicht, das soll vielleicht eine SemiBold werden. Ja, damit können wir weiterarbeiten. Ich sehe jetzt wieder hier am Sternchen, da hat sich was geändert, das war natürlich hier die SemiBold-Einstellung, ich sage wieder Update und jetzt ist das gespeichert in der Formatvorlage und die verpasse ich jetzt diesen Elementen hier auch, sage, ihr seid jetzt hier bitte auch MenueBox. Dann stelle ich fest, ah, okay, eine Sache hatte ich nicht beachtet, der Abstand der Zeilen ist noch hier ein bisschen zu groß mit 33, da tun es vielleicht 28 oder vielleicht sogar 26. Ja, 26 gefällt mir. Sehe wieder hier Sternchen, heißt geändert, ich will das für die anderen Elemente auch haben. Und wenn ich jetzt hier Preise & Buchen im Blick behalte, dann sehe ich live, was passiert: Dieser Zeilenabstand wird dann für diese Elemente auch übernommen. So, jetzt gibt es noch ein Element, nämlich den ganz normalen Paragraph hier, den sehen wir auch, der hat sich geändert, aber ist noch immer nicht genau das, was wir wollen, wir wollen nämlich hier auch wieder unsere Schriftart Open Sans. Schriftgröße und Abstand, ja doch, das gefällt mir, damit sind wir zufrieden. Und jetzt haben wir die ganze Seite komplett durchformatiert und diese Formatvorlagen haben uns hier beim Gestalten dieser Seite ein bisschen geholfen, haben uns etwas Zeit gespart, aber in Zukunft werden sie uns sehr, sehr viel Zeit sparen, weil wir das dann nicht jedes Mal wieder neu anlegen müssen, und vor allen Dingen sorgt es dafür, dass das dann konsistent im ganzen Prototypen so durchgezogen wird.