Projektbericht PSD-Tutorials

Phase 1: Planung

Vor der Gestaltung die Planung. das trifft insbesondere bei einem so umfangreichen und komplexen Projekt wie PSD-Tutorials zu.

Die Zusammenkunft

Der erste Schritt wurde bereits auf der Photoshop Convention 2009 in München getan. Hier lernte ich Stefan und Matthias Petri, die beiden Betreiber von PSD-Tutorials.de das erste Mal persönlich kennen. Im Nachhinein kann ich nicht einmal mehr sagen, warum gerade ich der Auserwählte wurde. Ich war kein aktives Mitglied der PSD-Tutorials Community, eher im Gegenteil. Ich verspürte nie große Lust, mich auf dieser blähbraunen, werbeüberfluteten Seite durch Unmengen an vollkommen unattraktiv präsentierten Inhalten zu wühlen. Zudem gab es da einen Moderator, der mir einige Male im Forum an den Karren fuhr, weswegen auch dieser Bereich für mich erstmal unten durch war. So viel also zu der Ausgangslage. Dennoch war nach einem kurzen Gespräch direkt geklärt, das wir gemeinsam die Zukunft von PSD-Tutorials.de bestreiten wollen. Mit einigen kernigen Aussagen wie „Das Design muss dann richtig rocken. Das müssend dann alle ganz toll finden. Da verlassen wir uns auf Dich!“ legten wir Thema erst einmal ad acta bis zum Januar 2010. (Meine Meinung hat sich im Laufe des Projekts auch geändert 🙂 )

Konzeption

Am 7.1.2010 begann die Konzeptionsphase. Die Inhalte standen durch die alte Plattform bereits, wirkliche Neuerungen waren nicht vorgesehen. In erster Linie sollte das Design frischer und übersichtlicher sein und eine Verkürzung der Klickwege stattfinden. Ich erhielt eine Skizze der verschiedenen Seiten mit Anmerkungen, welche Inhalte wegfallen, modifiziert oder ergänzt werden sollten, ebenso wie eine Sammlung von verschiedensten jQuery-Spielereien und Eye-Candy-Features anderer Websites, die von den Petris mit dem Prädikat Wertvoll bedacht wurden. Auf den ersten Blick sah das alles toll aus, in der Praxis stellten sich dann dennoch eine ganze Menge Ungereimtheiten, Fehler und Nachlässigkeiten heraus. Aber wer einmal die Möglichkeit hatte, hinter die Kulissen von PSD-Tutorials.de zu sehen wird feststellen, dass es in der Tat schwer ist, den Überblick zu behalten, bei den Mengen an Content, die bereit gestellt werden. Daher ist das nicht als Kritik zu werten. Während des Designprozesses hangelten wir uns dann im Team durch alle Unklarheiten.

Auf der Basis aller Informationen erstellte ich mir eine Sitemap als Baumdiagramm um die Struktur für mich besser zu begreifen, auf Fehler zu prüfen und sie zu straffen und zu optimieren. Das Diagramm bestand letzlich aus 21 DIN A4 Seiten, Schriftgröße 8, quer nebeneinander geklebt die ich durch mein gesamtes Büro gelegt und am Ende zusammen gefaltet habe. Es gab davon auch ein Foto, leider habe ich es versehentlich irgendwann von meinem Handy gelöscht. Nachdem all die strukturellen und grundlegenden Inhalte geklärt und neben meinem Büroboden auch eine ca. 10m2 große Wandfläche mit weiteren Ausdrucken gepflastert war ging es dann mit den ersten Mockups los. Den Inhalt in einfacher Form scribbeln und digitalisieren. Wie baue ich die Seiten formal auf, wo platziere ich Inhalte, stimmen die Verknüpfungen der Elemente und Navigationsebenen untereinander… Bereits hier machten mir die ersten fixen Vorgaben sehr zu schaffen.

Mockup als PDF öffnen

Das große Design

Die neue Seite sollte für eine Auflösung von 1280 Pixel Breite entworfen werden. Hauptausschlaggebend für den Kunden waren hier die ca. 2200 Tutorials, die bereits mit sehr großem Bildmaterial erstellt wurden und in gleicher Form übernommen werden sollten. Hier hätte es durchaus Wege gegeben, eine automatisierte Anpassung vorzunehmen, doch letztlich fiel nach vielen langen Diskussionen, in denen ich die Nachteile dieser hohen Mindestauflösung ausgiebig dargelegt habe, die Entscheidung zu Gunsten des jetzigen großzügigen Layouts.

Zur Information: Der derzeitige Standardwert im Webdesign entspricht einer Breite von 1024 Pixeln. In diesem Bereich lässt sich auf den meisten aktuellen Geräten die komplette Breite darstellen, ohne das gescrollt werden muss. Gerade durch die aufkommenden Netbooks eine Breite, über die auch große Monitore nicht hinwegtäuschen sollten. Ich betone das, weil ich es aus Usability-Sicht sehr schade finde, ein modernes und zeitgemäßes Projekt unnötig solchen Einschränkungen auszusetzen. Durch die hohe Auflösung und geforderte Mindestbreite für den Inhaltsbereich wirkt das gesamte neue Design nun sehr wuchtig. Im Gestaltungsprozess habe ich mich entsprechend darum bemüht, mit viel Freiraum und einer hellen Farbgebung eine gewisse Kompensation zu schaffen.

Nichtsdestotrotz gibt es natürlich auch die positive Seite: Besucher die tatsächlich über eine entsprechende Mindestauflösung verfügen kommen in den Genuss einer großzügigen Seite, die mit dem großen Schriftbild ein angenehmeres Lesevergnügen bietet. Denn Lesen, das kann man auf der Seite mehr als genug.

Technischer Backup

Auch wenn ich mich Webdesigner nenne, ein Berufsbild dessen Definition sowieso sehr verschwommen ist, beherrsche ich all die technischen Aspekte wie HTML und CSS nur vom Grundverständnis (ich lerne stets weiter…), sobald es um Dynamik, Datenbanken und all die komplexen Rädchen geht, die eine aufwändige Seite im Hintergrund antreiben, ziehe ich eine klare Grenze für mich und überlasse dieses Feld den Profis. Jeder sollte das tun, was er wirklich kann.

Das technische Wissen von Stefan Petri ist als ambitioniert zu bezeichnen, aber nicht ausreichend für ein riesiges kommerzielles Projekt mit all seinen Tücken und Fallstricken. Entsprechend nahmen wir direkt einen Webentwickler mit ans Boot. Er unterstützte das Projekt mit seinem Fachwissen parallel zum Gestaltungsprozess: Funktioniert dieser oder jene Gestaltungsansatz, ist jedes Feature technisch sinnvoll und barrierearm realisierbar, etc., bevor die Agentur oomoo die Einbindung und Konfiguration im ZEND-Framework übernahm.

Damit waren letztlich alle Grundlagen gelegt und der eigentliche aufwändige Gestaltungsprozess nahm seinen Lauf. Doch dazu mehr im nächsten Beitrag in den kommenden Tagen…

Phase 2: Gestaltung

Es gab einige Vorgaben bzgl. der Gestaltung, die ich einzuhalten hatte. So war der formale Aufbau mit einer Haupt- und einer Informationsleiste am rechten Rand definiert. Auch die Breite für den Inhaltsbereich stand aufgrund der bereits bestehenden vielen Inhalte fest. Meine Hauptaufgabe war es nun, die neue Seite heller und freundlicher zu gestalten, luftiger und übersichtlicher. Blau und Orange wurden zudem als Wunschfarben angegeben.

Das Farbkonzept

Wie eben schon geschrieben waren die Farben Blau und Orange soweit vorgegeben. Den genauen Farbton und die Abstufungen jedoch wurden in zahlreichen Varianten probiert und getestet. Mir war es wichtig, farblich Differenzen zu den vielen Blau-Orange-Websites zu schaffen, die es gerade im technischen Bereich im Web gibt. Dazu bin ich in erster Linie von stark gesättigten Tönen abgerückt. „Meine“ Blautöne sollten gedeckter und ruhiger anmuten, um nicht zu aggressiv auf den Betrachter zu wirken. Da der Komplementärkontrast Blau-Orange von Haus aus bereits ein sehr lauter Kontrast ist, habe ich die Orange-Anteile zudem stark reduziert.

Natürlich sollten die Farben nicht ausschließlich zur Zierde herhalten, sondern auch eine funktionale Konsistenz besitzen. Folgende Farbcodierung habe ich stringent durch das gesamte Projekt verwendet:

• Blaue Bereiche stehen für Links. Alles was auf PSD-Tutorials.de Blau ist, lässt sich anklicken, egal ob Button oder Textlink. Auch die Navigation ist entsprechend durchgängig Blau hinterlegt.
• Orangefarbene Bereiche stehen für „Weitere Funktionen/Inhalte“. Unterhalb der Tabs in der Seitenleiste oder auch im Contentbereich finden sich Auflistungen von Themenbeiträgen bzw. die Teaser der einzelnen Artikel. Beim Überfahren der Fläche „Mein PSD“ fährt sich das Menü mit erweiterten Funktionen aus etc.
• Links sind entsprechend dem Farbkonzept Blau hinterlegt und wechseln zu einem Orange: Hinter dem Link befinden sich weitere Informationen und Inhalte. Selbst in solchen kleinen Details wurde das Konzept also weiter verfolgt. Zudem wird durch diese deutliche Hintergrundmarkierung mit wechselnder Farbe ein hohes Maß an Barrierearmut erzeugt. Ein Umstand der im modernen Webdesign eine hohe Rolle spielen muss.

Um ein zu schnelles Ermüden der Augen zu vermeiden präsentiert sich der Hintergrund in keinem reinen Weiß, sondern einem schwachen Grau. Somit „überstrahlt“ der Hintergrund die Buchstaben nicht und macht das Lesen angenehmer. An dieser Stelle ist es stets eine Gratwanderung. Sehr günstige Monitore können schwache Abstufungen aufgrund des geringen Farbraums nicht differenzieren und der Hintergrund erscheint subjektiv als Weiß. Senkt man die Helligkeit zu sehr, verschlechtert sich der Kontrast für jene Besitzer mit den guten Monitoren… die Wahrheit liegt wie so oft irgendwo dazwischen. 🙂

Als weitere Alternative zu der Blau-Orange Darstellung wurde zudem noch eine „DarkArt“-Variante entwickelt. Aus sechs verschiedenen Vorschlägen wählte der Kunde eine in dunklem Grau, Blau und Rostbraun gehaltene Variante, für die User, die es lieber dunkler haben.

Das Schriftbild

Der aktuelle Monitortrend mit hohen Auflösungen erlaubt es bereits seit geraumer Zeit, für Fließtext Serifenschriften zu verwenden, also Schriften mit den kleinen Häkchen am Ende der Striche. Diese führen das Auge beim Lesen. Unter einer Schriftgröße von 14 Pixel verschwimmen diese Serifen am Monitor jedoch und wirken sich kontraproduktiv aus. Das jedoch war kein Problem auf PSD-Tutorials.de. Platz und Raum war genug, also Bühne frei für die Georgia in einer lesefreundlichen Schriftgröße. Überschriften bleiben zur visuellen Kontraststeigerung, bzw. kleinere Texte, wie z.B. in der Seitenleiste, zwecks der besseren Lesbarkeit weiterhin serifenlos.

Die Navigation

Eines der großen Probleme der alten Seite waren die langen und mitunter unübersichtlichen Navigationswege. Hier hielt ich es für einen großen Vorteil, nicht bereits intensiv auf PSD-Tutorials unterwegs gewesen zu sein. So konnte ich mir die bestehenden Strukturen aus den Augen eines Neulings betrachten, der versucht sich zu orientieren. Und das gelang mir, trotz einer hohen Internet-Affinität, wirklich nur sehr moderat.

Die neue Navigation sollte die Möglichkeit bieten, schnell bis tief in die Inhalte hinein zu navigieren, ohne zu viele Klicks tätigen zu müssen. Bei sechs Navigationsebenen (z.B. Startseite -> Tutorials -> 2D -> Photoshop ->  Fotobearbeitung -> Haare freistellen mit Kanälen) ist das kein zu einfaches Unterfangen. Um sowohl platzsparend als auch weitestgehend flexibel zu arbeiten, entschied ich mich für ein horizontales Menü, dessen erste zwei Ebenen immer sichtbar direkt untereinander angezeigt werden. Die dritte Ebene erscheint als Dropdown aus der zweiten Ebene heraus. Anders als diese vertikale Ausrichtung hätte es aufgrund der vielen (sich erweiternden) Kategorien auch nicht realisieren lassen.

Ab der vierten Ebene wurde es wichtig, weitere Optionen zur Filterung einzubauen. Eine Liste mit teils 1000 Artikeln lässt sich nicht mehr sinnvoll erfassen, ohne die Kriterien einzugrenzen. Dementsprechend entstand als weiteres Navigationselement die Multifunktionsleiste, in der nach Kategorien gesucht, nach verschiedenen Parametern sortiert oder auch über eine Freitextsuche explizit nach Themen innerhalb des aktuellen Bereichs (z.B. Photoshop) gestöbert werden kann. Ergänzend zu dieser gezielten Suche ergänzte ich noch die Highlights und die Tags für das explorative Navigieren, also das ziellose Durchstöbern und Erkunden der Inhalte.

Mein PSD

Eine weitere Besonderheit auf PSD-Tutorials ist das persönliche Menü. Neben den Standardeinstellungen zum Profil sollten hier die Punkte (Bezahleinheit für Artikel) der User verwaltet werden können. Um diesen wichtigen Bereich optisch hervorzuheben und ihm zeitgleich einen funktionalen Mehrwert zu geben, entwickelte ich den optisch exponierten Punktezähler im rechten oberen Navigationsbereich, in dem sich alle Funktionen zur Userverwaltung, dem Ein- und Ausloggen und dem Registrieren versammeln. Beim Überfahren des Punktestands blendet sich temporär ein mit Icons geschmücktes Menü ein, in dem weitere Einstellungen vorgenommen werden können.

Icongestaltung

Besonders zu erwähnen ist die (bislang) 21-teilige Iconserie, die ich im Zuge des Redesigns entwickelt habe. Neben dem Kontrollmenü ergänzt je ein individuelles Icon die Navigation und ermöglicht dem User das schnelle Erfassen der Kategorie in der er sich befindet. Neben den Kategorieicons wurde in einem gesonderten Designjob noch eine weitere Reihe an Spezialicons gezeichnet, die an Tagen wie Silvester, Neujahr, Muttertag etc. zum Einsatz kommen werden. Hinzu kommen etwa 30 weitere einfache Icons die Artikeloptionen wie PDF-Ansicht, Video, etc. symbolisieren und weiterhin zur Auflockerung des Designs dienen.

Eine kritische Betrachtung

Es ist ein ungeschriebenes Gesetz, dass es bei Kundenprojekten immer Dinge gibt, die man selber anders angehen würde. An dieser Stelle möchte ich gerne die Punkte ansprechen, die mich aus gestalterischer Sicht ein Dorn im Auge sind. Im Grunde genommen gibt es nur einen Punkt, den ich bereits beim Konzept angesprochen habe, der aber einen ganzen Rattenschwanz mit sich zieht: Die Größe der Seite.

Die Standardgröße für die zu gestaltende Fläche liegt in der Breite bei 968 Pixel.  Damit deckt man einen größtmöglichen gemeinsamen Nenner an verbreiteten Endgeräten ab. Für PSD-Tutorials fiel die Entscheidung des Kunden auf eine höhere Auflösung, deren Gestaltungsbreite bei ca. 1240 Pixeln lag/liegt. Ich möchte an dieser Stelle nicht über das Pro/Contra zu dieser Entscheidung reden, sondern über die Folgen für mich als Gestalter. Auf der einen Seite ist man als Gestalter immer froh über mehr Platz. Mehr Weißraum, gestalterische Freiheit etc. Problematisch war jedoch der Umstand, dass die Breite der beiden Inhaltsspalten bereits vorgegeben war. Die breitere der beiden Inhaltsspalten musste gut 800 Pixel breit sein, um die bereits bestehenden Inhalte 1:1 übernehmen zu können. Das ist eine ganze Menge und zieht folgende Konsequenzen mit sich:

• Breite Bilder sind auch hohe Bilder: Ein oder zwei höhere Bilder sind unproblematisch, bei Artikeln mit 20+ Abbildungen ergeben sich jedoch ellenlange Seiten die außerordentlich lange Scrollwege verursachen.
• Langer und großer Text: Die optimale Zeichenanzahl je Zeile beträgt etwa 70. Das Auge verliert sich nicht in einer zu lange Zeile, springt nicht ungewollt und der angenehme Lesefluss ist garantiert. Auf eine Breite von 800 Pixel passen bei einer großzügigen Schriftgröße von 14 Pixel allerdings 120 Zeichen. Selbst bei, für einen Fließtext, sehr großen 16 Pixel beträgt die Zeilenlänge noch gut 90 Zeichen. Die Textblöcke einfach zu kürzen führt zu einem unruhigen Gesamtbild, wenn die Abbildungen darunter und darüber deutlich breiter sind und nicht bündig abschließen. In der Umsetzung ist es letztlich ein Kompromiss aus Kürzung und Schriftgröße geworden.
• Große Inhalte verlangen mehr Luft: Je höher der gewählte Schriftgrad, desto größer muss auch der Zeilenabstand sein. Auch der Abstand von Absätzen, Überschriften etc. erhöht sich deutlich. Bilder benötigen nach oben und unten mehr Freiraum etc… Das führt insgesamt zu einem angenehm luftigen Design, wenn man es auf großer Fläche betrachtet. Auf kleineren Monitoren (und damit meine ich alles unter 24“) rutschen aufgrund der gewaltigen Dimensionen Folgeinhalte sehr schnell aus dem sichtbaren Bereich, worunter die Übersicht leidet und dem User viel scrollen abverlangt wird.