Wieder mal ein paar Artikel, die mir in dieser Woche auf gefallen sind:

• What Is User Experience Design?
  Schöner und ausführlicher Artikel im Smashing Magazine mit Erklärungen, Ressourcen und Tools zum Thema User Experience Design.
• Advice for design students
  Wer gerade in einem Design-Studium steckt, kurz davor steht oder es bereits abgeschlossen hat, findet bei David Airey ein paar nützliche Tipps.
• The discipline to write daily
  Ich bewundere Blogger, die es schaffen, täglich neue Artikel zu schreiben. Chris Brogan schreibt über die Disziplin, genau das zu schaffen.
• 35 Excellent Wireframing Resources
  Auf Noupe.com wurde eine große Liste mit Ressoucen zu Wireframes zusammen gestellt.

Habt ihr Vorschläge für die nächste Wochenend-Lektüre? Sagt mir einfach bescheid. Ich freue ich mich auf eure Artikel, Tipps oder Videos.

Wireframe – function & layout

Zum Thema Wireframes habe ich bei der Vorstellung einiger webbasierter Tools schon ein bisschen was geschrieben. Es gibt keine vorgeschrieben Richtlinien, was ein Wireframe beinhalten muss oder nicht darf, über die meisten Punkte herrscht allerdings weitgehend Einigkeit.
Ein Wireframe fällt in das Aufgabenfeld eines User Experience Designer und beinhaltet im Gegensatz zu einem Mockup noch keine Farben, Typography, Bilder oder Grafiken. Es handelt sich um skizzenähnliche Beschreibung und Darstellung (Gittermodell) von Funktionen und Layout und setzt den Rahmen für die spätere Ausarbeitung des Designs. Wireframes dienen zudem auch zu einer ersten Überprüfung der Machbarkeit, des Navigationskonzepts und der Usability.
Der Detailgrad kann sich dabei von Projekt zu Projekt stark unterscheiden. Es sollte nur das Nötigste dargestellt werden, um oben genannten Punkte zu erfüllen.

Variation: Ab und zu findet man Wireframes in Verbindung mit so genannten Mood Boards. Ein Mood Board soll mit Farben und Fotos den Stil und das “Gefühl” des fertigen Endprodukts vermitteln. In Kombination mit einem Wireframe kann man so in einigen Fällen das Erstellen von Mockups überspringen.
Wer mehr über Mood Boards lesen will, dem empfehle ich den Artikel von Jakub Linowski über Wireframe Mood Boards.

Tools für Wireframes: Diagramm-Software, z.B. OmniGraffle oder verschiedene Online Tools

MockUp – form, design & visual

Ein Mockup ist in der Webentwicklung im Prinzip der nächste Schritt nach dem Wireframing und baut auf dessen Struktur auf. Hier ist nun der Designer an der Reihe und darf mit Farben, Typography, Bildern und Grafikelementen arbeiten und so ein vorläufiges Design mit einzelnen visualisierten Elementen entwickeln. Der Detailgrad ist um einiges höher als in Wireframes und das Mockup sollte im besten Fall schon das look and feel der fertigen Website vermitteln, stellt aber noch nicht das finale Design dar.

Ein MockUp bietet sich außerdem meist besser für eine Kundenpräsentation an, da ein Wireframe über das Look and Feel (meist das wichtigste für den Kunden) so gut wie nichts aussagt. Trotzdem sollte man sich in Acht nehmen und gut kommunizieren in welcher Entwicklungsphase man sich befindet, da ein Mockup vom Kunden leicht als fast fertiges Produkt interpretiert wird und dann die Diskussionen über kleine Details und Formulierungen beginnen.

Tools für Mockups: Grafikprogramme, z.B. Photoshop oder Fireworks

Häufig wird bei kleineren Projekten nur ein Instrument genutzt. Auch bei 37signals hat man sich dazu entschieden, die Erstellung eines Mockups in Photoshop einfach zu überspringen und gleich einen HTML/CSS-Prototypen zu bauen.
Die Erstellung eines Prototypen (auch Click-Dummy genannt) wäre der nächste Schritt im Entwicklungsprozess. Er ermöglicht bereits Interaktion und macht die Entwürfe so navigierbar. Viele Tools bieten mittlerweile auch die automatische Generierung eines Prototypen aus den Wireframes oder Mockups an.

• Why Sketching And Wireframing Ideas Strengthens Designs
  Ein Artikel über den Nutzen von Skizzen und Wireframes.
• Archiv mit Video-Voträgen des World Usability Day 2009 in Hamburg
  Am 11. November ist wieder World Usability Day und es wird vorraussichtlich auch wieder Veranstaltungen in Hamburg geben. Bis dahin kann man sich noch mit Beiträgen aus dem letztem Jahr die Zeit vertreiben.
• How To Minimize Errors And Create More Usable Websites: Part I
  Eine sehr interessante dreiteilige Artikelreihe über den Umgang mit Fehlern und Fehlermeldungen im Web. (Teil 2 und Teil 3)
• Clientseitig generierte Vektorgrafiken für bessere Frontend-Performance?
  Peter Kröner über Performance-Optimierung mit generierten Vektor-Grafiken und die Javascript-Bibliothek Raphaël, die eine Nutzung in allen Browsern ermöglicht.
• Imperfect Perfection: The Golden Ratio

Außerdem heute noch eine Präsentation über persuasives Webdesign (motivierendes oder “überzeugendes” Webdesign). Eine Erklärung aus der Präsentation:

- Nehmen wir an, der Weg von A nach B ist eine Rutschbahn.
- Dann ist es die Aufgabe von Usability, diese Rutschbahn so einfach, glatt und angenehm wie möglich zu machen.
- Aber auch die glatteste Rutschbahn nützt nichts, wenn der Nutzer sich nicht entscheidet, zu rutschen, weil er gar nicht will.
- Genau das tut persuasives Webdesign: Dem Nutzer den Impuls, die Motivation geben, zu rutschen.

Habt ihr Vorschläge für die nächste Wochenend-Lektüre? Sagt mir einfach bescheid. Ich freue ich mich auf eure Artikel, Tipps oder Videos.

Beim Thema Website-Konzeption taucht immer wieder eine Frage auf: Wireframes? Sinnvoll oder Zeitfresser?

Ich sage: “Definitiv sinnvoll!” Wireframes sind nützliche Hilfsmittel um komplexe Strukturen und Sachverhalte zu veranschaulichen und anderen zu erläutern. Das kann hilfreich sein für Präsentationen beim Kunden, um in der Konzeptionsphase den Überblick zu behalten oder um in der Entwicklungsphase genaue Vorgaben und Ideen zu visualisieren und festzuhalten. Wireframes bilden eine Schnittstelle zwischen Konzeption und Design/Umsetzung. Genaue Aufgaben und Funktionen können definiert und im Nachhinein überprüft werden.

Im Gegensatz zu einem Mock-Up, das schon Farben, Look&Feel und Design-Elemente enthalten kann, wird bei einem Wireframe in der Regel nur die Struktur, das “Drahtgitter”, einzelner Seiten definiert. Das heißt, die Anordnung, die Positionierung im “Raum”, Reihenfolgen werden skizziert und diskutiert. Eine genaue Definition, wie ein Wireframe auszusehen hat, gibt es allerdings nicht, so können Wireframes sich im Detailgrad teilweise stark unterscheiden.

Ich habe mich in lezter Zeit verstärkt mit Wireframes und dem Erstellen solcher beschäftigt. Dabei habe ich einige hilfreiche Tools und Quellen gefunden, die ich euch nicht vorenthalten möchte:

• Auf t3n.de gibt es einen guten Artikel zum Thema Wireframes, der Generelles, Vor- und Nachteile erläutert.
• Eine wirklich große und hilfreiche Sammlung von Wireframe-Ressourcen gibt es bei speckyboy.
• Inspirationen findet man im coolen Ilovewireframes-Pool auf Flickr, der eine Menge unterschiedlicher Wireframes enthält.
• Mashable stellt 10 freie Wireframing Tools für Designer vor

Wie für fast alle Aufgaben gibt es mittlerweile auch einige Tools, um Wireframes online zu erstellen. Ich habe acht interessante davon rausgesucht.

hotgloo

Pidoco

Mockingbird

iPlotz

Gliffy

MockFlow

ProtoShare

Lumzy (kostenlos)