Wireframe
Aus ShopleiterWiki
3.3 Hilfsmittel zur Layout-Bearbeitung
Am Anfang jedes Layout-Projektes steht die grobe Konzeption (Konzeptpapier). In dieser Phase entwickelt ein Webdesigner die ersten Ideen und Elemente, die künftig im Shop erscheinen sollen. Ein modernes Hilfsmittel hierfür sind so genannte Wireframes, mit dessen Hilfe Sie gegenüber allen Beteiligten komplexe Sachverhalte einfach veranschaulichen. Ein Wireframe ist gewissermaßen der konzeptionelle Prototyp einer Seite, er beinhaltet alle relevanten Container und Elemente, wie Navigation, Main-Content, Boxen, etc. Viele Designer entwerfen heute noch die Entwürfe mit Grafikprogrammen. Wesentlich schneller geht die Gestaltung dank der stark abstrahierten Darstellung mit den Wireframes (Mockups). Sie kümmern sich nicht so sehr um die einzelnen Details, sondern konzentrieren sich auf den vereinfachten Bau eines Modells. Steht einmal das Modell, geht es daran, dieses erarbeitete Modell als Design zu übernehmen. Mit Hilfe von YAML bekommen Sie zwar kein fertiges Thema, es ist jedoch ein Layout, mit dem Sie sofort loslegen können und an Ihr erarbeitetes Design anpassen. Das CSS-Framework stellt die technische Grundlage in Form von sauberen CSS-Dateien für ein Layout zur Verfügung, dadurch bleibt Ihnen mehr Zeit für die kreative Shop-Gestaltung. Daneben empfehlen wir den Einsatz von Eclipse, denn dieses Versionierungstool bietet die grundlegenden Funktionen zur Code-Bearbeitung Ihrer Shop-Installation und unterstützt Sie bei Ihrem Shop-Update.
3.3.1 Layout-Entwurf mit Wireframes
Der Entwurf einer Website ist ein mehrstufiger Ablauf: Ideensammlung, Planung, Konzeption und Umsetzung. Für die inhaltliche, technische und visuelle Darstellung dieser Phasen gibt es verschiedene Möglichkeiten.
Im Allgemeinen unterscheidet man statische und dynamische Wireframes. Bei den statischen handelt es sich um schematische Darstellungen einer Website, während die dynamischen aus mehreren Einzelseiten bestehen, die miteinander zu einem interaktiven Prototyp verbunden werden. Durch die Verknüpfung mehrerer Einzelseiten entstehen Klick-Dummys, also interaktive Prototypen, die Sie als Grundlage für Usabilty-Tests oder für interne Präsentationszwecke einsetzen können. Ohne eine einzige Zeile zu programmieren, sind Sie im Idealfall in der Lage, das Zusammenspiel der Navigation und des Inhaltsbereiches bereits vorab kennenzulernen und zu testen.
Der sicherlich wesentlichste Vorteil der Wireframes ist die Zeitersparnis (Rapid Prototyping). Erste Layout-Vorschläge bauen Sie extrem schnell, sogar mit allen wichtigen Klickpfaden und den miteinander verlinkten Inhalten. Die Prototypen helfen nicht nur beim Design-Entwurf, sondern auch später in der technischen Umsetzung durch Programmierer. Ein weiterer Vorteil ist die Kommunikation untereinander, denn das gesamte Projektteam kann sich die geplanten Ideen viel besser vorstellen. Die Abstimmung miteinander funktioniert leichter und die Gefahr zeitraubender, teurer Fehlentwicklungen minimiert sich. Zum besseren Verständnis und gleichzeitig als Dokumentation eignen sich Flussdiagramme, Organigramme, Sitemaps und sonstige beschreibende Informationen.
Zunächst startet man mit einer ganz groben Aufteilung einer Website. Nach und nach verfeinert man den Layout-Entwurf und arbeitet weitere Einzelheiten ein. Professionelle und kostenpflichtige Lösungen gibt es unter anderem von Axure für Windows oder OmniGraffle für Mac OS X. Nachdem wir ausführlich den Einsatz von Eclipse erläutern, möchten wir Ihnen im folgenden Abschnitt das Addon-Tool WireframeSketcher von Peter Severin vorstellen.
Wireframes mit Eclipse bearbeiten
Für Ihre Eclipse Entwicklungsumgebung gibt es ein Plugin, mit dem Sie Ihr grundlegendes Shop-Layout entwerfen. Basis dafür ist das Addon WireframeSketcher. Die Installation dieses Plugins funktioniert genauso wie bei allen anderen Plugins. Auf der beigefügten CD finden Sie zu Testzwecken einen vorgefertigten Wireframe. Beachten Sie bei der Installation, dass Sie die Muster-Datei in die root-Ebene Ihres Magento-Verzeichnisses legen. Das fertige Ergebnis sehen Sie in Abbildung 3.34.
Eine mögliche Fehlermeldung beim Einfügen ist: „Error opening the editor. ... Unable to create resource URLImageDescriptor“. Das liegt an den eingebundenen Bildern im Wireframe, die bei Ihnen nicht vorhanden sind. Die verwendeten Bilder liegen alle im skin-Verzeichnis, daher erstellen Sie die Screen-Datei eine Ebene höher als den skin-Ordner. Die zweithäufigste Fehlermeldung lautet: „Error opening the editor. ... Invalid byte 1 of 1-byte UTF-8 sequence“. Erscheint diese Meldung, dann haben Sie die screen-Datei im falschen Format abgespeichert, d. h. sie ist nicht richtig UTF-8 kodiert.
Das Muster-Wireframe einer Magento Startseite bringen Sie in Ihre Eclipse Oberfläche, indem Sie eine leere Screen-Datei erstellen. Nach einem Rechts-Klick auf den Namen Ihres PHP-Projektes wählen Sie „New › Other › WireframeSketcher › Screen“. Im Verzeichnis \htdocs\[Projektname] liegt danach die noch leere Datei. Öffnen Sie diese Datei, kopieren bspw. mit Notepad++ den Inhalt von der CD-Vorlage hinein und konvertieren Sie die Datei in das Format UTF-8 ohne BOM (Byte-Order-Mark). Danach können sie den Wireframe öffnen und begutachten.
