Wireframes und dynamische Prototypen mit Weblication® CMS extrem schnell erstellen

20. Mär 2015

Wireframes werden in der Web-Entwicklung in der frühen Konzeptionsphase einer Website verwendet, um beispielsweise Navigation und Inhaltsbereiche grob zu skizzieren.

Weblication® dient Ihnen als fertiges Tool zur Erstellung von Wireframes und Prototypen per Drag&Drop!

Zahlreiche Agenturen nutzen inzwischen die Vorteile von Weblication® zur Erstellung von Wireframes: Die in Weblication® erstellten Wireframes und Prototypen können nach Freigabe des Layouts und der Konzeption weiter genutzt werden, um die Web-Präsenz nach dem Styleguide zu gestalten und fertigzustellen. Hierzu muss oft nur noch CSS angepasst werden. Bereits im Prototyp eingepflegte Strukturen, Inhalte, Anwendungen und Seiten können ohne nochmalige Pflegearbeit weiterverwendet werden.

Durch dieses Vorgehen sparen Website-Betreiber und Agenturen viel Zeit und Geld, das zur Erstellung anderer Funktionen der Website genutzt werden kann.

Und so gehen Sie vor in Weblication®, um Wireframes zu erstellen:

Panel-Funktion: Layout anpassen
Panel-Funktion: Layout anpassen

Rufen Sie hierzu im Admin-Panel der Web-Präsenz den Menüpunkt "Layout anpassen" auf.

Grund-Layouts der Wireframes festlegen

Nun wählen Sie per Knopfdruck Grund-Layout, Kopfbereich, Navigationsdarstellung und Grundstruktur der Inhaltsbereiche aus, konfigurieren Sprachwahl, Breadcrumb-Navigation und Breiten.

Wireframes mit Weblication erstellen
Wireframes mit Weblication erstellen

Seitenlayout definieren

Seitenlayout je Seite definieren
Seitenlayout je Seite definieren

Darüber hinaus können Sie in jeder Inhaltsseite - abhängig von der ausgewählten Inhaltsstruktur - ein eigenes Seitenlayout definieren.

Mehrspaltige Gestaltungscontainer und Boxen verwenden

Innerhalb von Inhaltsseiten ziehen Sie per Drag&Drop mehrspaltige Inhaltscontainer in die Seite. Die Inhaltscontainer können Sie dabei auch ineinander verschachteln, d.h., Sie können z.B. einen 2-spaltigen Container in einer Spalte eines 3-fachen Containers einfügen.

Mehrspaltige Seitenlayouts per Drag&Drop definieren
Mehrspaltige Seitenlayouts per Drag&Drop definieren

Auch können Sie hier bereits verschiedene Darstellungsformen für Boxen definieren.

Verschiedene Darstellungsformen für Boxen
Verschiedene Darstellungsformen für Boxen

Navigationsbaum hinterlegen per Drag&Drop

Navigationsstruktur erstellen
Navigationsstruktur erstellen

Danach erstellen Sie in der Navigationsbearbeitung den geplanten Navigationsbaum. Dabei können Sie komplette Äste des Navigationsbaumes per Drag&Drop verschieben.

Fertiger Prototyp - Bereit zur Integration des Designs

Ergebnis ist ein perfekter Prototyp, mit dem Sie die Website sehr gut weiter planen können.

Das Besondere: Alle bisher integrierten Inhalte und Strukturen können weiterverwendet werden. Nach Freigabe des Layouts ändern Sie im bestehenden Prototypen die CSS-Dateien und ggf. die HTML-Templates, damit die Seite dem freigegebenen Design entspricht.

Das bedeutet, dass Sie nahtlos ohne Medienbruch von der Erstellung der Wireframes bzw. Prototypen die Website aufbauen können.

Prototyp einer neu zu gestaltenden Website
Prototyp einer neu zu gestaltenden Website