Die Zeit jetzt nutze ich als Sabbatical für den Webzeugkoffer – wenn auch nicht für ein ganzes Jahr. Aktuell konzentriere ich mich in der Freizeit lieber auf das Projekt Marathon (Premiere am 31.10. in Frankfurt), über das ich auch an anderer Stelle berichte.

Es war der bisher vierte Trip nach Paris. Dieses Mal auch der kürzeste. Insgesamt 12 Stunden Fahrzeit und 28 Stunden Aufenthalt. Trotzdem hat es wieder für neue Eindrücke gereicht, mit denen ich meine persönliche Galerie erweitern konnte.

Vor knapp einem Jahr habe ich mal etwas zum Redesign der BBC-Website geschrieben: Webdesign & GUI-Konzepte der Zukunft – Beispiel BBC.

Kürzlich erschienen im BBC-Blog ein Artikel, der die Hintergründe auf dem Weg zum neuen und vereinheitlichten Look der Webseite beleuchtet: A new global visual language for the BBC’s digital services.

However due to the organic way in which the website evolved and the old structure of the business, with dozens of small design teams working independently of each other, the site had a fairly schizophrenic nature once you delved into its depths.

Es begann damit, dass man die einzelnen Seiten einfach mal ausgedruckt und an die Wand gepinnt hat. Aus eigener Erfahrung kann ich diese Methode sehr empfehlen. Sehr schnell offenbaren sich die größten Problemfelder, v.a. in Bezug auf die Konsistenz des GUI und der Elemente, die es pflastern. Ein Ansatz, den ich auch mal in Re-Design Retrospektive beschrieben habe.

Neben dem Wall of Shame Ansatz (Ausdrucken der Seiten), liefert der Artikel weitere sehr interessante Einblicke in den Analyse-, Konzeptions und Designprozess einer großen Nachrichtenwebseite.

Es mag auch bei BBC noch nicht alles perfekt sein. Aber vieles passt. Und es ist v.a. auch interessant zu sehen, wie in solchen Großprojekten gearbeitet und gedacht wird, welche Ziele, Grundsätze und Methoden hinter dem Endergebnis stecken. Es zeigt auch, dass ein solch umfangreiches Angebot nur dann konsistent sein kann, wenn ein Styleguide das Oberflächen- und Informationsdesign in geregelten Bahnen lenkt.

Der Ansatz der BBC ist für mich persönlich das, was ich mir von einem Nachrichtenportal vorstelle. Nur so voll wie nötig und im Endeffekt nicht so extrem überladen, wie man es von den meisten Angeboten im Web kennt. Darüber hinaus habe ich als Nutzer dann die Möglichkeit, die Sache an meine eigenen Bedürfnisse und Vorlieben anzupassen.

Die Flut der herkömmlichen Webdesign-Showcases wird mir in letzter Zeit auch etwas zu viel – Masse. Zu wenig elegante Lösungsansätze spezieller Problemstellungen im Webdesign. Deshalb finde ich mittlerweile die Sammlung von Bestpractices, mit dem Fokus auf bestimmte Elemente, besser.

Drei Beispiele für Pattern-Showcases , auf die ich in letzter Zeit aufmerksam wurde.

Am meisten konnte ich mich bisher mit design|snips anfreunden. Trotz dem Blick für’s Detail, wird hier auch sonst besonders Wert auf ein ansprechendes Gesamtbild gelegt.

Webdesign: Ein komplexer und permanenter Prozess soll Ausgangspunkt für weitere Artikel gewesen sein. Die darauf folgenden sollen die einzelnen Phasen und Abschnitte näher beleuchten. Es geht zunächst um ihren Beitrag zum Konzept.

Die Analyse einer bestehenden Website und die Inspiration sowie die Beeinflussung durch aktuelle Trends bilden die Ausgangsbasis. Eine Website muss (neu) ausgerichtet werden. Das Ziel besteht darin, auf der aktuellen Basis bereits möglichst viele konkrete Anforderungen und Ideen für einen Neustart zu finden.

Zur Erinnerung die Hauptphasen im Prozess:

• Projektplanung
• Analyse & Inspiration
• Informationsarchitektur
• Webdesign & Usability
• SEO & Onlinemarketing
• Qualitätssicherung
• Betrieb & Management

Die Projektplanung lasse ich in diesem Zusammenhang mal außen vor. V.a. die Phasen 2 und 3 bedienen das Konzept und liefern die zentralen Anforderungen an Webdesign im engeren Sinne.

Analyse und Ausrichtung

Die Analyse erfolgt meist in zwei Richtungen – da oft bereits eine Website vorhanden ist.

• Blick zurück: Re-Design Retrospektive und Qualitative Analyse vor dem Relaunch haben sich bereits damit beschäftigt
• Ziele, Zielgruppen sowie Kunden- und Nutzeranforderungen

Ein Relaunch dient nicht nur dazu, der Website ein neues Gesicht zu geben. Es steckt noch viel mehr dahinter.

Die Ausrichtung

Warum zurückblicken, wenn man doch jetzt alles neu macht? Ganz einfach: Aus Fehlern lernt man. Außerdem deckt eine gezielte Analyse so einiges an Optimierungspotential auf. Ziele, Strategien, Zielgruppen und definierte Szenarien helfen uns dabei, die Ausrichtung zu finden. Jedes Website-Konzept sollte damit beginnen.

Zunächst gleicht man die Zielsetzung der Website mit ihrer ursprünglichen ab. Ist diese noch die Gleiche? Oder haben sich neue Ziele ergeben und sind alte Ziele nicht mehr relevant? Gleiches gilt für die Zielgruppen und weiterführend für die allgemeinen Nutzeranforderungen.

Die Analyse

Die durch die Fragen nach der Ausrichtung gewonnenen Anforderungen nutzt man dann zur Analyse der bestehenden Website. Wo kann sie diese Anforderungen noch erfüllen und wo gibt es Nachholbedarf? Die Ergebnisse dieser Analyse und die zuvor definierten Anforderungen (Ausrichtung) fließen in das Konzept mit ein. Hier sind Szenarien und konkrete Usecases sehr wichtig. Es bringt wenig, sich ziellos über die Website zu klicken und darauf zu hoffen, möglichst viel Futter zu finden.

Was sind Szenarien und Usecases? Es handelt sich bei Usecases, wörtlich übersetzt, um Anwendungsfälle. Szenarien können selbst wiederum mehrere Usecases beinhalten. Um an dieser Stelle nicht zu ausführlich zu werden, reduziere ich das Ganze auf zwei wesentliche Fragen, die man sich stellen sollte:

Auf welchen Wegen und aus welchen Beweggründen kommen die Besucher zur Website? Welche Ziele verfolgen sie, welche Aufgaben werden sie auf der Website zu lösen haben (oder wollen) und welche besonderen Merkmale besitzen sie?

Mit den Antworten darauf im Hinterkopf, ergibt sich ein klareres Bild von der bereits existierenden Website und den konkreten Anforderungen an die neue. An Hand der Szenarien und Usecases lässt sich besser einschätzen, was eine Website leistet und weiter leisten muss.

Inspiration

Ohne den Blick auf aktuelle Trends und Best Practice, geht’s auch nicht. Der Blick über den Tellerrand.

Was ist Inspiration und kann man sie erzwingen? Zum zweiten Teil der Frage: Nein. Verkrampfung blockiert.

Unter Inspiration (von lat.: inspiratio = Beseelung, Einhauchen von „spiritus“ = Leben, Seele, Geist) versteht man allgemeinsprachlich jene mentale Kraft, die neue Ideen hervorbringt.Definition bei Wikipedia

Besser trifft es, sich inspirieren lassen. Die Mentale Kraft schöpfen, die neue Ideen hervorbringt. Und wenn möglich nicht zum Kopieren verleitet! Inspiration beeinflusst ganz stark die Phase, in der Design sichtbar wird und in ästhetischer Hinsicht entsteht.

Hierbei ist man bei weitem nicht auf branchenübliche Webdesigns oder Webdesign Showcases begrenzt. Inspiration liefern auch andere Quellen. Wobei das die Webdevigner unter uns wohl am besten beurteilen können, auf was es hier ganz speziell ankommt.

Weitere Quellen sind z.B.

• Printmagazine
• Fotografie
• Natur
• Architektur
• Inneneinrichtungen
• u.v.a.

Die wirklich kreativen Geister wissen, wo sie sich die nötige Inspiration verschaffen. Vielleicht geschieht vieles aber auch ganz einfach unterbewusst. Manch einer sieht sogar in Visitenkarten eine Art Inspirationsquelle.

Abschließend noch ein paar Worte zu aktuellen Trends. Sie sind wichtig und werden im Regelfall nicht von uns selbst gesetzt. Aber wir müssen hier und da aufsetzen. Zum einen, weil sie neue und verbesserte Methoden hervorbringen, zum anderen, weil man es von uns erwartet, bei gewissen Dingen dabei zu sein. Die Erwartungen setzen dabei nicht nur die Auftraggeber, sondern auch und v.a. die Nutzer und Kunden des Angebots.

Weiterer Lesestoff

Hier verweise ich auf die Links zum Artikel Webdesign: Ein komplexer und permanenter Prozess (im Text und eine Liste am Ende des Artikels).

Ausblick

Analyse und Inspiration bilden das Fundament des Konzepts. Der nächste Teil wird sich dann näher mit der Informationsarchitektur beschäftigen.

Beim Schreiben dieses Artikels haben sich außerdem wieder einige Ansatzpunkte für weiterführende Betrachtungen ergeben. Auch dazu mehr im Rahmen des weiteren Programms.

Foto: Floor concept

Wenn schon, dann nicht billig mit animierten Baustellen-GIFs. Die Website clarkdols.com befndet sich nach einem Angriff im Wiederaufbau.

(…) invaded my peaceful site, bombed my html tags, killed my cheerful gifs and jpegs…

Via @ratterobert

Den Dienst ScrnShots habe ich bereits vorgestellt: Scr(ee)nshots archivieren und teilen.

Dort sammle ich Screenshots von Websites, die mir aus verschiedenen Gründen besonders gefallen. Kriterien sind z.B. Farbschema, Whitespace, Typo etc. Nicht immer sind die Websites unter der Haube sauber umgesetzt. Das ist aber auch nicht der alleinige Zweck meiner Sammlung. Besonders bequem lassen sich die Screenshots mit ScrnShots Desktop erfassen und bei ScrnShots ablegen.

Scrennshot-Methode wählen

Das Kontextmenü ist, bei gestarteter Anwendung, direkt über die Menüleiste (Mac) erreichbar. Bei Windows-Systemen über die Taskbar.

Scrennshot aufnehmen

Hier ein Auswahl-Screenshot.

Scrennshot mit Informationen versehen

Beschreibung, URL und Tags hinzufügen. Dann direkt von hier den Screenshot abschicken.

Der Reiz von ScrnShots für mich

Liegt darin, dass man die gesammelten Werke online mit anderen besprechen und teilen kann. Außerdem bietet ScrnShots selbst eine optisch ansprechende Umgebung. Zur eigenen Galerie muss man nicht gleich das eigene Blog erweitern oder gar ein neues Blog aufsetzen.

Integration ins eigene Blog (Wordpress)

Für Wordpress gibt es bisher nur ein Plugin. scrnshotsRSS, das grundlegende Einstellungsmöglichkeiten bietet: Anzahl, Größe und Wrapper für Screenshots, die dann beispielsweise, wie hier rechts zu sehen, in der Sidebar eingefügt werden können.

Das fehlt mir bei ScrnShots

Es fehlt zum einen die Möglichkeit, die eigenen Screenshots im Paket herunterzuladen. Das ist bei vielen solcher Dienste der Fall. Aber vielleicht kommt das noch.

Es wäre auch ganz schön, wenn man mehrere verschiedene Galerien anlegen und verwalten könnte.

Man kann für die Screenshots keinen Titel angeben. Nutzt man die Feeds des Dienstes, wird als Titel z.B. “Screenshot: Thu, 29 Jan 2009″ gesetzt. Etwas unschön und ohne wirklichen Informationsgehalt.

ScrnShots ist mehr oder weniger noch Beta – zumindest die API. Das ein oder andere dürfte sich dann zukünftig noch verbessern. Wie bei vielen solcher Dienste besteht natürlich die “Gefahr”, dass ScrnShots irgendwann mal kostenpflichtig wird. Oder bestimmte Erweiterungen bedingen den Erwerb eines erweiterten, kostenpflichtigen Accounts.

Intro zur neuen Website

Kaum im Amt und schon eine neue Website. Kurz nach der Amtseinführung wartet der Präsident mit einer neuen Website auf. Auf den ersten Blick ein Schmuckstückchen, meiner Meinung nach.

Der Online-Auftritt entspricht auch inhaltlich quasi dem, was man erwarten durfte. Modern, stylisch und offen für zeitgemäße Mittel der Onlinekommunikation. Trotzdem schafft es das moderne Webdesign, die Tradition angemessen zu transportieren.

Zeitgleich startete auch das neue Blog unter dem Titel Change has come to WhiteHouse.gov, wo man mehr zum Relaunch erfährt. Kommentieren kann man im Blog (noch) nicht.

One of the first changes is the White House’s new website, which will serve as a place for the President and his administration to connect with the rest of the nation and the world.

Optisch ist es schon mal sehr gelungen. Sogar gibt der Validator grünes Licht (zumindest für die Startseite). Eine solide Basis. Ein erster genauerer Blick in den Quellcode, offenbart allerdings noch ziemlich viele ein paar Schwächen. So z.B.

  <div class="dateln">TUE, JANUARY 20, 12:01 PM EST</div>
  <h3 class="modhdgblue">
    <a href="/blog/change_has_come_to_whitehouse-gov/">
      Change has come to WhiteHouse.gov
    </a>
  </h3>

In Sachen Zugänglichkeit dürfte auch die ein oder andere Hürde auftauchen. Schon auf der Startseite bei deaktiviertem Javascript. So z.B. findet man unter dem Punkt “More Features” keine Links mehr.

Das lassen wir zur Feier des Tages mal durchgehen und verbleiben mit der Hoffnung auf Besserung ;-) Nach dem Relaunch ist vor dem Relaunch ist nach dem Relaunch.

Das war der erste schnelle und zumindest auf den ersten Blick gute Eindruck vom neuen Weißen Haus online. Meinerseits Daumen hoch für die Optik, Daumen quer für die Webdesign-Technik.

Update zum Thema Barrierefreiheit des Auftritts: Contacting the White House with a Screen Reader via @sprungmarker

Die Twitter Background Gallery präsentiert besonders gelungene Exemplare personalisierter Twitter-Hintergründe. Ein weiterer Pool der Inspiration, zumindest für alle, die das Twitter-Fieber nicht loslässt.

Zu diesem Anlass habe ich meinen Hintergrund auch mal wieder angepasst.

In voller Größe auf meiner Twitter-Profilseite zu sehen.

Header und Navigation vom neuen Duoh!

Veerle Pieters beschreibt in “New Duoh! dot com has launched” die Entstehungsgeschichte zum neuen Webdesign ihrer Unternehmenswebsite “Duoh!“.

Ein schönes Beispiel aus der Praxis, das den Designprozess zum neuen Webdesign beschreibt. Dabei geht sie auch auf die verworfenen Entwürfe ausführlich ein, beschreibt die Inspiration dahinter und wie sich das Ganze bis zum fertigen Webdesign entwickelt hat. Ein sehr spannender Einblick in die Praxis.