Wireframes zur Mockuperstellung von Webseiten

Egal in welche kleinen Brutzelbude oder auch gern Grosskonzern man arbeitet, die Frontdeveloper und Designer von heute erstellen zum Teil mit aufwendigen Programmen oder auch gern mal der Bleistiftskizze das Grundgerüst einer Webseite. Es gibt auch Agenturen, wo Chef seine bestimmte Vorstellung mit dem rohen Kuli skizziert mit einem Verweise “… das sieht schick aus … das habe ich da schon mal gesehen …”. Für solche UI Konzepte oder auch Mockups genannt, arbeiten die meisten von uns aber gern mit Wireframes.

Was sind Wireframes?

Wiki bezeichnet Wireframes gern als Drahtgerüst, welches zur grundsätzlichen Konzipierung dient. Beim konzeptionellen Prototyping wird ein Layout erstellt, wie welche Module wo platziert werden. Das hat zum einen den Vorteil, dass losgelöst vom Layout man einen statischen Aufbauplan für die Programmierung hat, als auch einen Bauplan für den Frontdeveloper, die ehe schon im Frame arbeiten möchten. Es liest sich quasi wie ein Drehbuch für ne Webseite. Grundsätzlich eigenen sich natürlich Indesign, CorelDraw oder unser Lieblingsprogramm Photoshop dazu, aber durch diese Wireframes, gibt es schon vorgefertigte Elemente, die ich nicht erst basteln muss sondern die schon fertig zum Einsatz auf mich warten, ergo kann ich anfangen zu Scribbeln oder mir Elemente zu erstellen. Für alle Bereiche gibt es Elemente, egal ob Inputs, Graphen oder gar mobile Elemente von Iphones.

Vielzahl an Wireframes?

Es gibt eine Vielzahl an Wireframes, aber drei unterschiedlich gute und hervorstechende Beispiele, die wir auch bei uns benutzten sind zum einen Balsamiq, LayoutIt und webydo! Je nach Schwierigkeitsgrad und Anwendungsgebiet lässt sich hier das passende Wireframe auswählen. Gleich vorneweg, wer die einfache wysiwyg-Variante bevorzugt, bei dem layouten und am Ende sofort ein Ergebnis zur Webverwendung rausspringen soll, der wird sich bei webydo sehr wohl fühlen.

webydo

Zunächsteinmal musst du dich anmelden, kostenlos natürlich. In der FreeVariante kannst du bis zu 15 Seiten erstellen, die als Webydo’s Sub-Domain angelegt werden und hast einen Speicherplatz von bis zu 1Gbyte zur Verfügung. In der PremiumVariante entfällt das natürlich und deine Speicher beträgt knapp 2 Gbyte! Es ist komfortabel und instinktiv, du kannst dein Protyp gestalten, Elemente auswählen und entwerfen, danach kannst du Ihn als Projekt ausspucken und hast somit Konzept und Endprodukt in einem! Das PremiumPaket kostet 7,90 Dollar im Monat bei webydo.com

LayoutIt

Screenshot LayoutIt!

LayoutIt richtet sich an alle die mit dem bekannten Bootstrap arbeiten, LayoutIt! ist ein Interface Builder für Bootstrap, du kannst erstmal ohne Anmeldung im Bootstrap Framework arbeiten und auf alle bekannten Elemente zugreifen. Via Drag n Drop positionierst du im Raster alle Elemente und kannst dann das fertige Projekt sogar downloaden, dazu bedarf es aber nun wirklich der Anmeldung, die übrigens keine Gebühren kostet, zumindest nicht bei der Anmeldung!

Balsamiq

Balsamiq Mockup Demo

Balsamiq Mockup Demo

Mein Favorite ist Balsamiq, da es sich hier um eine reine Oberfläche handelt fürs Scribbeln und entwickeln von UI – Konzepten. In einer kostenlosen Demo ohne Einschränkungen kannst du zeigen was du kannst. Balsamiq zeichnet sich durch eine Vielzahl von Einsatzmöglichkeiten aus, wähle frei aus einer Vielzahl von Elemente, darunter auch Iphone und Mobileelemente. Die Demo kommt auf http://builds.balsamiq.com/b/mockups-web-demo/ als Flashvariante zum Tragen. Fantastische Weise kann man hier das Ergebniss als PDF, PNG und XML exportieren. Die ersten beiden Varianten können nicht mehr im Nachhinein editiert werden. Die XML hingegen besteht aus strukturierten Daten und kann einfach weitergereicht werden, der Anwender kann mit den Daten weiterarbeiten, kopieren und verändern im Browser via drag n drop! Hier macht es einfach Spaß, Layouts zu entwickeln ohne auf große Zauberei zu achten. Balsamiq ist wirklich für die Konzeption gedacht und kommt ohne jegliche Hilfsmittel aus. Entsprechend ist leider auch der Preis von $79 für eine User License. Nichts desto trotz verspricht die online Demo wirklich sehr viel mehr und ist deshalb mein absoluter Favourit!

http://builds.balsamiq.com/b/mockups-web-demo/

Tags

, , , , , , , , , , , , , , ,

Comments are closed.