Balsamiq Mockups in der Praxis

bal_mock

So angetan wie von Balsamiq Mockups war ich ewig nicht mehr von einem Stück Software. Wie schon in einem früheren Beitrag beschrieben, kann man damit Wireframes skizzieren, die ein bisschen das Look & Feel von auf Papier geskribbelten Wireframes haben. Die hat den Vorteil, dass sie bei der Präsentation nicht aus Versehen oder Unkenntnis für Layout-Entwürfe gehalten werden.

Diese Tatsache finde ich gut und praktisch, aber wirklich begeistert bin ich aus anderen Gründen. Zum einen ist Balsamiq Mockups ein wirklich sehr gut durchdachtes Programm, das das was es tun soll, wirklich sehr gut tut. Hört sich selbstverständlich an, ist es aber leider nicht. Die Bedienung ist so einfach und gut zu handhaben, dass es eine wahre Freude ist, damit seine Wireframes zu entwickeln. Aber das zeig ich jetzt am besten mal an einem kleinen Anwendungsbeispiel:

Horizontales Navigationsmenü

Ein horizontales Navigationsmenü zu skizzieren, ist ein typischer Anwendungsfall in einem Wireframe. Dazu zieht man in Balsamiq Mockups per Drag-and-Drop das Element “Button Bar / Tab Bar” auf die Arbeitsfläche. Diese sieht dann folgendermaßen aus:

bal_menue01

Die Eigenschaften-Box, die hier unter der Menü-Leiste dargestellt ist, zeigt immer die Bearbeitungs- und Einstellungsmöglichkeiten des aktiven Elements an. Wenn man, wie in diesem Beispiel getan, mit der Maus drüber fährt, wird diese Box aktiv dargestellt und man die dort zur Verfügung stehenden Möglichkeiten nutzen. Hier sieht man etwa, dass das Menü-Feld “One” hervorgehoben bzw. aktiv ist.

bal_menue02

Um jetzt die Default-Werte in der Menü-Bar zu ändern, macht doppelklickt man auf das Element und schon kann man die Werte komma-separiert ändern.

bal_menue03

Das sieht dann so aus:

bal_menue05

Natürlich kann man nun auch das aktive Menü-Feld wechselt:

bal_menue04

Was dann, wenn man nun z.B. “Zwei” auswählt, das Folgende zum Ergebnis hat:

bal_menue06

Wie man an diesem einfachen Anwendungsbeispiel vielleicht schon sehen kann, ist Balsamiq Mockups ein sehr durchdachtes und gut zu handhabenden Tool. Doch wie geschrieben, dies ist nur ein ganz, ganz einfaches Beispiel zur Nutzung des Tools. Natürlich ist der Zweck des Tools z.B. eine Webseite zu skizzieren … wie etwa diese:

bal_twitter

Breathing earth – Feine Bevölkerungs- und CO2-Simulation

breathingearth

Auf breathingearth.net wird eine optisch schicke und inhaltlich interessante Simulation dargestellt, die quasi in Echtzeit zeigt, wie viel CO2 gerade emittiert und wie viele Menschen gerade geboren werden bzw. sterben. Das Ganze bezogen auf die einzelnen Länder der Erde wie auch global.

Ich finde die Simulation echt gelungen umgesetzt und auch im Bezug auf das Informationsdesign ein echtes Schmankerl. Neunzehn weitere inspirierende Daten-Visualisierungen findet man auf singlefunction.com.

Via abotis@twitter

Grimme Online Award 2009 – Nominierung für “Von Zeit zu Zeit”

goa_vzzz

Ach! Wie schön! Von Zeit zu Zeit, die Geschichtswerkstatt der Stuttgarter Zeitung ist für den Grimme Online Award 2009 in der Kategorie “Wissen und Bildung” nominiert. Das freut uns nicht nur für die Stuttgarter Zeitung … die die tolle Idee hatte, Stuttgarter Stadt-Geschichte anhand von Fotos, Dokumenten, Erzählungen und Videoaufnahmen im Web zusammenzutragen, dort auch darzustellen und mit Hilfe des Stadtarchivs Stuttgart auch nachhaltig zu bewahren … sondern auch für uns. Wir haben nämlich konzeptionell helfen dürfen, die Idee webfähig zu machen und dann auch grafisch zu gestalten.

Auf der Nominierungsseite heißt es:

“Von Zeit zu Zeit” wurde als Geschichtsportal zum Mitmachen von der Stuttgarter Zeitung initiiert. Kooperationspartner sind das Stadtarchiv und die Volkshochschule Stuttgart. Neben Beiträgen, die von der Redaktion zur Verfügung gestellt werden, sind alle interessierten Nutzer – ob Privatpersonen, Vereine oder Schulklassen – eingeladen, die “Geschichtswerkstatt Stuttgart” mit eigenen Fotos, Filmen und Texten zu bereichern. Nach Themen, Orten oder Zeiten strukturiert soll sich so ein umfassendes und lebendiges lokalhistorisches Portrait entwickeln – vom Beginn des 20. Jahrhunderts bis heute.

Das ist mal wirklich eine schöne Anerkennung für die eigene Arbeit. Ich freu mich :-)

Und nun zum Wetter.

snowy

Wenn das mal kein charmanter Wetterdienst ist, weiß ichs auch nicht. Kurt Riedi und Steffi Gloor haben sich daran gemacht, bekannt langweilige Wettersymbole mit ungewohntem Bildkonzept fotografisch neu zu interpretieren. Auf der Startseite kann man aus einer Anzahl von Städten wählen (Stuttgart ist leider nicht dabei, grmpf) oder von hier aus direkt alle Wetterlagen nacheinander anschauen. “thunder storms” mag ich am liebsten.

via swiss-miss

pixlr, Online-Bildbearbeitung auf Speed

pixlr

Gestern war ich auf der Suche nach einem brauchbaren UND kostenlosen Grafikeditor für OSX. Leider ist das Ergebnis ausgesprochen nüchtern ausgefallen. Mit Ausnahme von GIMP, das mir eigentlich schon zu überladen ist, konnte mich kein Tool wirklich überzeugen.

Da liegt es natürlich nahe, sich mal bei der Webdiensten umzuschauen. Online-Bildbearbeitung gibt es mittlerweile ja haufenweise: Picnik, FotoFlexer, Phixr und wie sie nicht alle heißen waren mir bisher aber immer zu glossy und verspielt, was sicherlich daran liegt, dass Grafikdesigner und deren Arbeitsweise nicht gerade im Fokus dieser Dienste stehen.  Photoshop.com dagegen ist meiner Meinung nach lahm und irgendwie zu “ganzheitlich”. Warum muss Bildbearbeitung immer in Kombination mit einer aufgeblähten Bildverwaltung daherkommen?

Einen anderen Weg beschreitet da pixlr. Der Editor, für dessen Nutzung keine Anmeldung erforderlich ist, besticht durch ein übersichtliches und sauber aufgebautes Interface, das mit seinen schwebenden Paletten an das Bedienkonzept professioneller Grafikprogramme anknüpft. Pixlr unterstützt Ebenentransparenz, einige Ebeneneffekte und -modi, bietet Effekt- und Einstellungsfilter und eine rudimentäre Textfunktion für die ich mir dringend ein besseres Antialiasing wünschen würde. Das alles ist für sich genommen sicher nichts Spektakuläres, funktioniert aber derart flüssig und smooth dass es eine wahre Freude ist -  sogar einige der gewohnten Tastaturkürzel wurden implementiert.

pixlr_ui

Ein absolutes Killerfeature für alle Nutzer des Flash10-Plugins ist jedoch die Möglichkeit Bilddateien zu bearbeiten, ohne diese vorher Uploaden zu müssen. Ein immerhin 5 MB großes Digitalfoto ließ sich ohne erkennbare Verzögerung öffnen und direkt bearbeiten. Sauber. Damit gehört das bisher größte Manko sämtlicher Online-Editoren endlich der Vergangenheit an.

Sicherlich gibt es noch einige Dinge zu verbessern, die Unterstützung der OS-Zwischenablage ist hier besonders wichtig und ein brauchbarer Weichzeichner wäre sicherlich auch nicht verkehrt.

Der erste Eindruck von pixlr ist dennoch durchweg positiv. Gut gemacht und weiter so.

schließen