Reduziertes Nutzungskonzept beim Künstler Teo Skaffa
I’m Teo Skaffa and I like to draw cats. I also like my beard. So yeah …
Das ist, was man über Teo Skaffa auf seiner Website erfährt. Weiter gibt es darauf aber noch einiges zu entdecken. Neben den Katzenbildern, der extrem pixeligen Textdarstellung, vor allem ein interessantes Website-Nutzungskonzept.
Ich empfinde es als so interessant, da es so reduziert ist. Im Kern sind es folgende Elemente, die auf der Website genutzt werden:
Leider ist die Website komplett in Flash umgesetzt. Aber nachdem was ich am Montag hier gepostet habe, ist es wohl nur noch eine Frage der Zeit, bis solche Website auf Basis von HTML/CSS/JavaScript auftauchen … bzw. entdeckt werden.
von Matthias Zellmer
Mockingbird – Online-Wireframe-Tool
Vor zwei Tagen wurde das kostenfreie Online-Wireframe-Tool Mockingbird gelauncht. Ich hab es heute Morgen ein wenig getestet und muss sagen, dass ich echt schwer beeindruckt bin.
Mockingbird selbst spricht von “Wireframes on the fly”, und genau das macht dieses Tool. Und das sehr überzeugend. Manchmal wundert man sich schon, was so eine Web-Applikation inzwischen alles kann. Drag’n'Drop, Tastaturkürzel wie Strg+C und Strg+V, Elemente aneinander ausrichten und vieles mehr, verleiht dem Nutzer hier ein echte Desktop-Feeling.
Auf die Schnelle habe ich mal den oberen Teil dieses Blog nachgebaut, die man natürlich per URL verbreiten oder per iframe anbinden kann:
Mockingbird stellt die zentralen UI-Elemente einer Website zur Verfügung und lässt den Nutzer mehrere Seiten pro Projekt anlegen. Diese können dann auch untereinander verlinkt werden. Dazu zieht man die Page aus der Box oben links auf den Link. Fertig. Das Ergebnis kann man sich dann im Preview-Modus (siehe oben) ansehen. Weiterhin lassen sich einzelne Elemente gruppieren und in der Größe anpassen. Leider kann man bei Text-Elementen nur die Schriftgröße anpassen und keine Auszeichnungen wie fett oder kursiv vornehmen. Auch wäre es nett, wenn man in einem Text auch mal einen Link setzen könnte. Kann ja noch kommen.
Kleines Detail noch am Rande. Vor ein paar Tagen habe ich auf dem Blog uxzentrisch an einer Diskussion über Anmelde- und Registrierungselemente teilgenommen. Interessanterweise ermöglicht Mockingbird das Anmelden bzw. Registrierungen genau in der dort von mir vorgeschlagenen Art und Weise. Dort bekommt man erst einmal nur ein Formular und wenn die eingegebene Mail-Adresse unbekannt ist, wird das Anmeldemodul um ein Feld zu Passwortbestätigung erweitert und somit zur Registrierung. Sehr innovativ, wie ich finde.
Allgemein macht Mockingbird auf mich schon einen sehr ausgereiften Eindruck und verblüfft durch sein ausgereifte Interface. Respekt!
von Matthias Zellmer
iA nennt es: 100% Easy-2-Read
Die international tätige Web-Agentur iA gehört sicher zu den innovativsten Läden was unsere Branche zu bieten hat. Kürzlich haben die Information Architects den Auftritt der ZEIT neu gestaltet und wenn sie die neuste Version ihrer Web Trends Map präsentieren, geht dies auch regelmäßig durch die Blogs der Welt.
Und schon 2006 haben sie in einem Artikel 100% Easy-2-Read veröffentlicht … abgekürzt: 100e2r. Von seiner Aktualität hat dieser Beitrag aber nichts verloren.
Bei 100e2r handelt es sich um einige Dos and Don’ts im Bezug auf die Darstellung von Inhalten auf einer Website. Die iA kritisieren, dass nur all zu oft auf einer Webseite zu viele Inhalte auf zu engen Raum gepackt werden.
Stichpunktartig ihre Kritikpunkte:
- Don’t tell us to adjust the font size
- Don’t tell us busy pages look better
- Don’t tell us scrolling is bad
- Don’t tell us text is not important
- Don’t tell us to get glasses
Als Folge darauf … Fünf einfache Richtlinien:
- Standard font size for long texts
- Active white space
- Reader friendly line height
- Clear color contrast
- No text in images
Die oben aufgeführten Punkte werden auf der Beitragsseite näher erläutert. Eine kurzweilige und lehrreiche Lektüre für alle, die in irgendeiner Form mit der Gestaltung einer Website zu tun haben … ob visuell oder non-visuell.
von Matthias Zellmer
Balsamiq Mockups in der Praxis
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:
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.
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.
Das sieht dann so aus:
Natürlich kann man nun auch das aktive Menü-Feld wechselt:
Was dann, wenn man nun z.B. “Zwei” auswählt, das Folgende zum Ergebnis hat:
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:
von Matthias Zellmer
Mensch-Maschine
Dieser Wochenende findet in Berlin ja das UXcamp statt und Zellmi ist bereits auf dem Weg in den wilden Westen und sicher schon ganz aufgeregt. In diesem Zusammenhang ist mir vorhin ein schönes Video in die Finger geraten. Den ganzen Beitrag lesen »
von Artur Richter
Die neusten Beiträge
Die neusten Kommentare
