Weblayout-Skizzen online erstellen

Die Planung einer neuen Website nimmt viel Zeit in Anspruch. Wie viele verschiedene Seitentypen werden benötigt? Welche Inhalte gehören auf die Seiten und wo werden sie am besten platziert? Klären Sie sämtliche Fragen, die die Struktur und das Grundlayout der Website betreffen, bevor Sie mit der Eingabe der ersten HTML und CSS-Befehle beginnen. Eine reine textliche Beschreibung der Anforderungen genügt den meisten Auftraggebern jedoch nicht.Sie benötigen eine visuelle Grundlage, um sich im wahrsten Sinne des Wortes ein Bild von den Seitenentwürfen machen zu können. Da zu Beginn der Planungen noch grundsätzliche Änderungen möglich sind, macht es keinen Sinn, frühzeitig mit der Erstellung des Seitencodes zu beginnen.Setzen Sie in dieser Phase besser auf Skizzen, die den Aufbau der Seiten veranschaulichen, sogenannte Mockups. Dies sind Modelle, die lediglich das Aussehen von Web-Angeboten nachbilden, nicht deren Funktionalität. Optimal eignen sich spezielle Mockup-Werkzeuge für die grafische Darstellung der Seitenentwürfe. Sie erfordern weniger Aufwand als Gra- kprogramme und liefern Ergebnisse, die professioneller wirken als einfache Bleistiftzeichnungen.Einige Anwendungen bieten zudem die Möglichkeit, klickbare Dummies zu erzeugen. Mockup-Lösungen gibt es als Online-Dienste und Tools für den lokalen Einsatz. Wir stellen Ihnen die besten Anwendungen vor und zeigen, wie flexibel sich damit die Planung neuer Web- Angebote unterstützen lässt.

Balsamiq Mockups

Eine populäre Mockup-Lösung ist Balsamiq Mockups (www.balsamiq.com ). Sie überzeugt vor allem durch ihre sehr intuitive Bedienung. Die in Adobe Flex programmierte Software unterstützt die Betriebssysteme Windows, Linux und Mac OS. Statt das Tool herunterzuladen und zu installieren, lässt es sich über den Link Try it now mit Einschränkungen bei den Speichermöglichkeiten auf der Website des Herstellers online testen.Für die Zukunft ist zudem eine Web-Anwendung unter dem Namen My Balsamiq in Arbeit. Sie dürfen die Desktop-Version des Programms sieben Tage kostenlos testen. Danach fällt eine Lizenzgebühr in Höhe von rund 80 Euro für einen Arbeitsplatz an.

Seitenobjekte einfügen

Die Handhabung von Balsamiq Mockups ist denkbar einfach: Über die sogenannte UI-Library im Kopf des Programmfensters haben Sie Zugriff auf 75 Skizzenbausteine für nahezu alle typischen Webseiten- Objekte, vom Button über die Menüleiste bis zum Tab-Register.Ziehen Sie in einem ersten Schritt den Rahmen eines Browserfensters über Containers/Browser Windows in den Skizzenbereich ein. Der karierte Hintergrund hilft bei der genauen Positionierung. Für Präsentationen lässt er sich aber auch über View/Show Graph Paper ausblenden. Passen Sie im Textmodus die Beschriftungen des Fensters an. Die erste Textzeile enthält den Titel der Webseite, die zweite den URL für die Adresszeile.Klicken Sie neben das Element, um den Texteditor zu verlassen. Neben dem markierten Seitenobjekt ist eine Palette mit diversen Gestaltungsoptionen zu sehen. Halten Sie die Maus darüber, wird die Palette aktiviert und die Einstellungen lassen sich ändern. Geben Sie für den Fensterrahmen bei Pos. & Size beispielsweise die Größe in Pixelwerten an.Eine andere komfortable Möglichkeit: Ziehen Sie mit der Maus an den Ecken des Seitenelements. Die Maße erscheinen als große Zahlenwerte mittig über dem Objekt. Ergänzen Sie weitere Objekte wie etwa den Platzhalter für ein Logo, eine Menüleiste und einen Breadcrumb-Pfad. Über die Symbole am oberen Rand des Fensters lassen sich die Objekte zu Gruppen zusammenfassen oder auf der Seite fixieren.Sämtliche angebotene Bausteine sehen wie von Hand gezeichnet aus. So erkennen alle Beteiligten auf einen Blick, dass es sich anders als bei einem realitätsnahen Prototyp nur um eine grobe Skizze handelt. Die Diskussion über die Seitenentwürfe dürfte sich damit weniger auf Geschmacksfragen als vielmehr auf Kriterien wie inhaltliche Vollständigkeit, Funktionalität und Bedienbarkeit konzentrieren.

Ergebnisse übermitteln

Das Grundgerüst, das bei allen Seiten des zukünftigen Angebots gleich sein soll, lässt sich mit File/Save as als Vorlage speichern und als Basis für weitere Entwürfe nutzen. Sie profitieren so von der Arbeit, die Sie in den Grundaufbau investiert haben. Das Programm speichert die Daten in einem XML ähnlichen Format mit der Endung .bmml.Kopien einer geöffneten Skizze erstellen Sie mit File/New Clone of Current Mockup. Zwischenversionen und das Ergebnis können Sie den Auftraggebern als PNG oder PDF-Dateien übermitteln. Mit File/ Export Snapshot to PNG File legen Sie einen Schnappschuss als PNG-Grafik in dem Ordner ab, in dem sich auch die Mockup- Datei selbst befindet. Ein PDF-Dokument erzeugen Sie mit File/Export All to PDF.Nutzen Sie dieses Format beispielsweise für die Diskussion mit dem Auftraggeber. Adobe Acrobat bietet über die integrierten Kommentarfunktionen die Möglichkeit, Anmerkungen zu den Skizzen direkt in die PDF-Dateien einzufügen. Verfügt der Empfänger ebenfalls über Balsamiq Mockups bietet sich eine weitere Möglichkeit an, die Entwürfe zu übermitteln. Kopieren Sie den Quellcode über den Menübefehl File/ Export Mockup und versenden Sie ihn als einfache Textdatei.Ihr Gegenüber kann diese dann mit File/Import Mockup in sein eigenes System laden, ändern und wieder zurücksenden. Steht ihm keine Vollversion des Programms zur Verfügung, kann er für diese Aufgabe auch die Demoversion auf den Seiten des Herstellers nutzen.