Wireframes, Mockups und Co.

Die Erstellung von Wireframes als Skizzen ist eine unverkennbare Stärke von Balsamiq Mockups, doch diese Funktionalität finden Sie unter anderem auch in Fireworks.2. Handgescribbelte Wireframes in Fireworworks CS 5.1 erstellenIn Fireworks können Sie die benötigten Elemente mit dem Pinsel scribbeln und diese anschließend in ein Symbol konvertieren.Mit dem Befehl In allgemeiner Bibliothek sichern aus dem Optionen-Menü der Palette Dokumentbibliothek können Sie diese Symbole global für alle Projekte verfügbar machen.Falls es erforderlich ist, können Sie die Elemente dann über die im selben Menü erreichbare Exportfunktion für Symbole auch an anderen Arbeitsplätzen verfügbar machen.3. Zusatzelemente für Balsamiq MockupsBenutzer von Balsamiq Mockups finden unter der Adresse: mockupstogo.net.eine umfassende Sammlung kostenloser Zusatzkomponenten für das Programm. Hier finden Sie neben Passwort- und Recaptcha-Feldern auch Zoom-Regler, ein Wireframe der Facebook-Authentifizierungsseite sowie des Firefox-Downloadfensters.4. <div>-Elemente und CSS aus Fireworworks ausgebenUm wiederverwendbaren HTML-Code zu erhalten, verwenden Sie bei der Ausgabe aus Fireworks CS 5.1 für einen Webeditor wie Dreamweaver die Einstellung CSS und Bilder. Verwechseln Sie diese nicht mit der Einstellung HTML und Bilder, denn diese fügt die Bildsegmente in eine Tabelle ein. Benutzer älterer Versionen von Fireworks kennen eine vergleichbare Funktionalität durch die Installation der in Fireworks CS 5 bereits integrierten Erweiterung SmartCSS v1.6. Diese finden Sie auf der Website des Herstellers unter activata.co.uk/smart-css/. So entsteht eine HTML-Datei mit CSS, editierbarem Text und den benötigten Bildsegmenten.5. Wireframes für iOS-ProjekteWer GUI-Vorlagen für das Wireframing mobiler Websites für iOS-Geräte benötigt, dem sei das iPhone Sketch Elements AI ans Herz gelegt, zu finden unter: www.teehanlax.com/blog/iphone-sketch-elements-ai/. Wer iOS-Designelemente in Mockups nachempfinden möchte, kann kostenlos auf eine Designvorlage von Geoff Teehan zurückgreifen: www.teehanlax.com/blog/iphone-gui-psd-30/.Es handelt sich hier um ein PSD-Bild, das auch das Retina-Display berücksichtigt.6. Code-Qualität optimieren: Fireworworks-Export in mehreren DurchgängenCode-Entwickler, die auf qualitativ hochwertigen, sauberen und schlanken Code Wert legen, sollten einen Export der Daten aus Fireworks in einem Durchgang vermeiden. Um die Qualität des erzeugten Codes zu optimieren, exportieren Sie verschiedene Inhaltsgruppen aus Fireworks lieber in mehreren Durchgängen, denn erst in diesem Szenario kann das Programm seine Stärken ausspielen. Eine geschickte Aufteilung von Designelementen auf Ebenen in Fireworks ist hierzu von großem Vorteil.

Wireframes, Mockups und Co.

Wireframes:Bei Wireframes handelt es sich um die Visualisierung des Grundgerüstes des geplanten Seitenaufbaus und die Ausarbeitung des Konzeptes. Wireframes basieren auf leeren Platzhaltern für Text, Grafiken, Videos und andere Elemente des Seitenlayouts. Es wird zwischen statischen und dynamischen Wireframes unterschieden. Ein statischer Wireframe ist die schematische Darstellung einer einzelnen Webseite mit Platzhaltern für alle relevanten Elemente des Designs.

Dynamische Wireframes bestehen aus mehreren statischen Wireframes, die interaktiv miteinander verknüpft sind und einen funktionellen Prototyp bilden. Dynamischen Wireframes werden häufig Navigationsbäume oder Flussdiagramme beigelegt, welche die verfügbaren Navigationswege leichter verständlich machen (denn der Inhalt von Designelementen lässt sich in Wireframes nicht wirklich erkennen, siehe Mockups).Mockups:Unter Mockups (wörtlich "Attrappen") versteht man die grafische Aufbereitung des anvisierten Seitenlayouts mit bereits erkennbaren visuellen Details. Mockups bilden das geplante Design der Website einschließlich der Schriftarten und Farben zu Zwecken der visuellen Präsentation ab, bieten jedoch noch keine weitere Funktionalität.Storyboards:Mit dem Begriff Storyboard bezeichnet man die Abfolge von (Wire- oder Mockup-)Frames, welche interaktive Vorgänge illustrieren sollen.Prototypen:Bei Prototypen handelt es sich um interaktive Click-Through-Anwendungen zu Demonstrationszwecken. Prototypen beinhalten die aus Wireframes und Mockups gewonnenen Erkenntnisse und dienen unter anderem dem Usability-Testing.Rapid Prototyping (auf Deutsch "schneller Prototypenbau"):Mit diesem Begriff bezeichnet man die verschiedenen Verfahren zur schnellen Herstellung konzeptioneller Website-Prototypen, unter anderem im Webdesign oder auch in der Entwicklung von Anwendungssoftware.