Design

Style Guides, Wireframes und Personas & Scenarios

Wie wichtig Stylerichtlinien in einem größeren Projekt sind, zeigt Ben Henick in seinem neuesten Artikel Avoid Edge Cases by Designing Up Front in ALA-Ausgabe 228.

Besonders wichtig wird ein durchdachter Projektablauf für diese Typen von Webseiten:

  • Broad/large audiences:

    ubiquitous brands, sites with national or international (instead of regional) focus, entertainment products, public service sites

  • Amplified flaws:

    online-only commerce projects, advertisement link destinations, event promotion sites

  • Demanding timelines:

    projects in which stakeholder expectations don’t relate to project challenges

  • Complex or mission critical applications:

    financial transaction applications, time-management, supply-chain, or customer-management applications, custom content management systems, systems that include user-generated content or extensive personalization

  • Large infosystems:

    sites intended to publish thousands of documents

  • Expectations of big numbers:

    projects whose stakeholders believe they will be the Next Big Thing

Für den Entwicklungsprozess schlägt Henick die Einbeziehung folgender Punkte vor:

  • Assessment:

    A formal and detailed assessment of the project allows its scope to be properly defined.

  • Personas and scenarios:

    Executed with care, scenario roleplaying identifies likely obstacles to positive user experience, which can then be removed from the design prior to signoff.

  • Wireframes:

    The guidelines established by wireframes enforce layout consistency, discouraging the designer from composing everything as if it’s intended for print.

  • Style guide:

    Adoption of a style guide allows collaboration between all team members to the end of finalizing the site’s design. Even clumsy execution of a style guide requires the graphic designer to “think out loud,” allowing needless edge cases to be caught and stopped before work begins on the prototypes of the work that will actually be put into production.

Die von Henick genannten Schritte erleichtern die Arbeit in einem solchen Projekt und dürften vor allem größeren Teams und IA-Spezialisten vertraut sein. Für alle anderen gilt daher: Lesebefehl!

Links:

D. Keith Robinson hat einen umfangreichen Kommentar zu Ben Henicks Artikel verfasst, der ebenfalls sehr lesenswert ist: On Web Design Process.

Wissenswertes zu Wireframes gibt es zu außerdem für den schnellen Überblick in der Wikipedia und für genauere Lektüre im Information Architects wiki (IAwiki) „Wire Frames“, bei SitePoint „Wire Frame Your Site“, boxesandarrows „Real Wireframes Get Real Results“ und mojofat „Wireframes & Mockups“.

Ein umfangreiches Tutorial gibt es bei Nam-ho Park/strange systems: „Using Wireframes (Revised)“. Eine Vielzahl von Links bietet blue flavor in „Recyclable Information Architecture“ zum Thema HTML-Wireframes.
Jeff Gothelf diskutiert die Vor- und Nachteile von Visio- und HTML-Wireframes und ihrer Nutzung in verschiedenen Situationen: „Practical Applications: Visio or HTML for Wireframes“.

Die Erstellung eines Style Guides ist vor allem dann schwierig, wenn man noch nie einen erstellt hat. Maish Nichani/PebbleRoad gibt eine detaillierte Anleitung zur Erzeugung und Pflege eines solchen Guides: „Creating & Maintaining a Web Style Guide“. Alle Quellen, die bei für dieses Tutorial genutzt wurden, findet man außerdem bei del.icio.us: http://del.icio.us/maish/styleguide.
Eine sehr einfache Einleitung in die Erstellung von Styleguides gibt es bei Will Jessup/Drinking Rockstars and Programming: „Creating a Style-Guide for your siteW.

Eine annotierte Literaturübersicht zum Thema Personas findet man im PDF-Dokument „Personas – eine annotierte Literatur-Übersicht mit Online-Links“ von Dipl.-Inform. Peter v. Savigny. Auch das IAwiki bietet eine Linksammlung zum Thema „PersonaDesign“.

Vorlagen:

Wireframes

Templates für Visio und OmniGraffle bieten Michael Angeles als eine OmniGraffle-Palette und ein OmniGraffle-Template sowie Garrett Dimon, der vor allem Visio nutzt, seine Vorlage auch für Omnigraffle anbietet.

Style Guides

Ein gutes Beispiel für einen Styleguide für HTML, CSS und Inhalte bietet silverorange: Example Style Guide. Als Basislektüre für die Erstellung von Webseiten kann man den Yale Style Guide sehen, der auch in Deutsch verfügbar ist.

Eine Sache, die mich an manchen Projekten stört, ist wohl vor allem die Planlosigkeit, bei der der Designer schlicht und einfach gebeten wird, „mal was schönes zu entwerfen“. Selbst mit genügend Kenntnis über Ziel/-gruppe, die Eigenheiten des Webs, etc. stimmt die Idee des Einzelnen wohl nie mit dem Ergebnis überein. Daher sollte man diese Energie gleich in eine andere und effektivere Herangehensweise stecken.

Kategorie: Design

von

Hallo, ich bin Nadja und arbeite als freie Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.

4 Kommentare

  1. Jetzt fehlt uns nur noch ein vernünftiges Tool zum Erstellen von Wireframes. Visio habe ich an der Arbeit, finde ich auch ganz nett. Aber gibt es nicht auch ein vernünftiges OpenSource-Tool? Eine Mindmap will ich nicht unbedingt erstellen. Und am liebsten die Visio-Symbole nutzen, die es ja massenweise gibt.

  2. Ich erstelle sie wie normale Layouts im Photoshop, etwas umständlich, da nicht automatisch. Als Alternative zum Office-Paket mit Visio kann man doch auch Draw von OpenOffice.org nehmen, oder?

    Für Mac-Nutzer gibt es ja OmniGraffle, das wohl von vielen für Wireframes benutzt wird (z.B. von Michael Angeles und Garrett Dimon, der auch Visio nutzt).

    Ich habe meinem Beitrag noch einige Links zu weiteren Informationen hinzugefügt.

  3. Pingback: » Jonathan Snook über den Designprozess — cne _LOG Archiv

Kommentare sind geschlossen.