Projektbericht PSD-Tutorials, Planung | Weblog | Philip Fuchslocher Portfolio

Projektbericht PSD-Tutorials, Planung

Geschrieben unter Neues aus dem Fuchsbau
Kommentar schreiben

Seit dem 13.1.2011 ist PSD-Tutorials.de nach etwa einem Jahr Schaffenszeit in neuer Pracht online zu sehen. Hinter dem bislang größten Projekt, das ich gestalterisch betreut habe, verbergen sich viele viele Arbeitsstunden, Diskussionen und kreative Momente. In diesem Beitrag möchte ich das gerne aus der Sicht des Gestalters beleuchten. Da sich zu dem Kunden, den Petri-Brüdern, neben der Arbeit eine Art Freundschaftsverhältnis entwickelt hat, ist der Bericht entsprechend locker verfasst. Potentielle Neukunden sollten sich bitte nicht abschrecken lassen. :)

Phase 1: Planung

Dieser Artikel teilt sich in zwei Abschnitte. Dieser erste Teil dreht sich um die Planung und Konzeption der Seite. Weitere Einblicke in die gestalterische Umsetzung und den Feinschliff wie das Icondesign erhaltet Ihr in der Fortsetzung des Projektberichts.

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. 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.

Erster Mockup zum Redesign von PSD-Tutorials.de

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…