Kategorien

Kategorie wählen

Twitter follow me

Kreative #musik Ideen von OK Go: http://t.co/nGF8lFqY #experimentell 6 Tage, 19 Stunden, 17 Minuten
#moom Fensterverwaltung. Seit ein paar Tagen im Einsatz und für nützlich befunden: http://t.co/kHxWU16C #osx 1 Woche, 18 Stunden, 43 Minuten
@kopfbunt http://t.co/Hcf6l8Hm wäre eine solcher Seiten 1 Woche, 1 Tag, 15 Stunden, 8 Minuten

Kategorie Neues aus dem Fuchsbau

2011 24.10. Montag

Beruflicher Kurswechsel

Geschrieben unter Neues aus dem Fuchsbau
Kommentare (8)

Es ist nun gut drei Monate her, dass ich meine Selbständigkeit, die immerhin knapp vier Jahre währte, an den Nagel gehängt habe, um mich wieder als Angestellter zu verdingen.

Die Entscheidung ist damals bewusst, wenn auch sicherlich nicht leicht gefallen. Das ewige Pro und Contra: Freie Zeitbestimmung, komplette Eigenverantwortung und mehr oder weniger freie Projektwahl gegenüber festen Arbeitszeiten, regelmäßiger Bezahlung und dem einfachen Wissens- und Gedankenaustausch im Team.

Nach dieser noch frischen Zeit als Angestellter hier mein bisheriges Resumée zu den beiden Status und wie ich sie im direkten, noch frischen Vergleich für mich einordne.

Die (Frei)Zeit

Ohne Frage, die freie Zeiteinteilung als Selbständiger ist das Nonplusultra. Nicht nur, weil man mal Frühs, mal Nachts arbeiten kann, bei schönem Wetter einfach mal die Sonne auf einer Wiese geniesst, sondern auch weil organisatorische Dinge, Behördengänge, Einkäufe und all das wirklich funktionieren. Im Laufe der Selbständigkeit habe ich das nie so bewusst wahrgenommen, es war selbstverständlich. Nun, bei 8,4 Arbeitsstunden am Tag, Fahrt zur Arbeit und zurück bleibt nicht mehr viel über. Während der Woche passiert nicht viel produktives, zumindest in meinem bisherigen Rhythmus. Auf der anderen Seite erfährt das Wochenende eine neue Wertschätzung. Ich kann mich nicht entsinnen, wann ich, abgesehen von der stressigen Phase am Ende der Schulzeit vor 12 Jahren die zwei freien Tage derart ausgekostet habe. So schräg das klingt, aber das ordne ich „pro Angestelltenverhältnis“ ein.

Das Arbeitsumfeld

Hier prallen für mich zwei Welten aufeinander. Was ich definitiv genieße und was auch ein Hauptgrund für meinen Wechsel weg von der Selbständigkeit war, ist die Möglichkeit, täglich mit vielen Leuten zu interagieren, sich auszutauschen und sowohl über Arbeit als auch private und gesellschaftliche Dinge zu diskutieren. Das Team in dem ich bei der Messe Basel arbeite ist phantastisch und meine Teamchefin/Abteilungsleiterin ist einfach nur großartig. Vielleicht ist es aber auch nur Ablenkung und nach der Probezeit wird dann die Peitsche rausgeholt… Bald weiß ich mehr. ☺

Auf der anderen Seite schmerzt es nach wie vor, wenn man sein vertrautes, über die Jahre hinweg aufgebautes und optimiertes Bürosetting gegen ein recht unattraktives Großraumbüro austauscht, dessen blassgelbe Tische, schwammigen Bürostühle und zwischenzeitlich enorme Lärmpegel das Wohlfühlen auf eine harte Probe stellen. Und nur weil Vitra auf den Möbeln steht, muss das nicht gleich ansprechend gestaltet sein…

Ebenfalls leichter war die Essensbeschaffung zu Hause. Schnell an den Kühlschrank, ein Brot geschmiert oder aber zur Entspannung einfach mal was Leckeres gekocht. Davor eine Runde Sport gemacht, auf dem Radl oder im Fitness Studio… nun wird in erster Linie das Bäuchlein kultiviert. Meine zwischenzeitlichen Ambitionen, zu gekochtes auf Arbeit mitzunehmen hat sich nie in die Tat umsetzen können. Vermutlich auch, weil ein Mittagessen mit Blick auf den Arbeitsplatz nur beschränkt den Appetit anregt.

Die Arbeit

Die Messe ist keine Kreativagentur. Von daher fällt es schwer, die Jobs hier direkt mit denen aus einer rein gestalterischen und redaktionellen Selbständigkeit zu vergleichen. Allerdings ist meine Entscheidung bewusst gegen eine Kreativbutze gefallen. Zumindest wäre ich nie im Leben zu 100% in einem Grafikbüro eingestiegen. Bei der Messe waren vor allem die recht geregelten Arbeitszeiten und der Umstand, dass alle Überstunden ausgeglichen werden ein entscheidendes Kriterium. Zudem hat mich der organisatorische Aspekt gereizt, den ich mit meinem Amt als Art Director fürs Web nun innehabe.

Das Online-Team in dem ich arbeite und das gerade massiv ausgebaut wird, soll eine stark beratende, konzeptionelle und aufklärende Funktion im Bereich Neue Medien innerhalb der Firma einnehmen. Das ist genau die Schiene, die mir bei den vielen kleinen Projekten als Selbständiger immer wieder gefehlt hat. Dieser Aufbau und damit das Einreißen von Altbewährtem, ist sicherlich ein holpriger Weg, aber gerade diese Auseinandersetzung, der Umgang mit den verschiedensten Charakteren und Meinungen ist für mich eine spannende Erfahrung, die mich auch persönlich enorm weiterbringen wird.

Daneben fallen dennoch einige gestalterische Arbeiten an, bei denen ich mir, trotz vieler (noch) vorhandener recht starrer Einschränkungen die ein oder andere kreative Idee aus den Fingern saugen kann. Zudem bemerke ich, wie viele Dinge, die ich als Selbständiger komplett vernachlässigt habe, allmählich wieder beginnen unter den Nägeln zu brennen: Das Weiterschreiben an meiner neuen Grundlagenschulung zu Photoshop, das Zeichnen in meinem Blackbook etc. So gesehen also ein Vorteil, auf Arbeit nicht zu kreativ sein zu können.

Mein Fazit

Zugegeben, nach so einer kurzen Zeit kann ein Fazit vielleicht nicht ernst genommen werden. Zu sehr hängt man noch an dem Vertrauten, aber einige Dinge zeichnen sich für mich dennoch bereits jetzt klar ab:

Der Weg aus der Selbständigkeit war eine sehr gute Entscheidung. Alleine die Möglichkeit, mit anderen Personen jeden Tag zusammen zu arbeiten und sich auszutauschen ist in meinen Augen der viel schnellere Weg, sich zu entwickeln. Ich lerne mit Widerständen verschiedenster Art umzugehen, bekomme den souveränen Umgang einiger Kollegen mit anderen Menschen mit und nehme all diese Eindrücke, sowohl negative als auch die vielen Positiven mit Freude auf und merke bereits jetzt, wie ich daran reife.

Auf der anderen Seite zeigt mir die 100%-Anstellung auch deutlich, dass dies kein Status ist, den ich mir über viele Jahre hinweg beibehalten möchte. Zu sehr hänge ich dafür am Entwickeln eigener Projekte und Ideen, frei von dem Willen Anderer. Hier sind vor Allem meine Bemühungen im Bildungsbereich durch Schulungen und Lerndokumente zu nennen. Mein ehemaliges Portal Photozauber ist entstanden, weil ich die Zeit und die Leidenschaft dazu hatte, dem nachzugehen. Zeit, die nun einfach fehlt. Ebenso die Zeit, sich intensiv mit neuen Trends auseinanderzusetzen, zu Experimentieren und Testen. Das ist für mich vielleicht das gefährlichste an einer Festanstellung, in der für solcherlei Dinge keine Ressourcen verfügbar sind. Es fällt schwer sich Abends noch im Privaten aufzuraffen, nochmals ein paar Stunden am Computer zu sitzen.

Wie es mittelfristig genau weitergeht will ich gar nicht orakeln. Bis auf eine Reduzierung meiner Stelle um ein paar Prozent im kommenden Jahr lasse ich alles einfach passieren. Dinge passieren sowieso wie sie wollen- und das ist auch gut so. Damit bleibt das Leben dann doch kreativ. ☺
2011 18.01. Dienstag
Projektbericht PSD-Tutorials, Gestaltung

Geschrieben unter Neues aus dem Fuchsbau
Kommentare (2)

Dieser Artikel ist die Fortsetzung meines Projektberichts zum Relaunch von PSD-Tutorials.de. Hier geht es zum den ersten Teil zur Planung.

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.
Ausschnitt der normalen Farbvariante von PSD-Tutorials.de. Für eine große Ansicht auf das Bild klicken.

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.
Farbcodierung auf PSD-Tutorials.de. Orange steht für “Weitere Inhalte/Funktionen.

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.
Ausschnitt der Darkart-Farbvariante von PSD-Tutorials.de. Für eine große Ansicht auf das Bild klicken.

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.

Ausschnitt der Haupt-und Sekundärnavigation.

Aufgeklappte Tertiärnavigation.

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.

Ansicht der Multifunktionsleiste zum Filtern und Durchsuchen von Artikeln

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.

Aufgeklapptes MyPSD-Menü mit weiteren Konfigurationsmöglichkeiten.

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.

Auszug aus der PSD Tutorials.de-Iconserie. Von Links nach Rechts: Silvester, Ostern, Contests.

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. (Siehe auch mein Artikel über gängige Viewports im Webdesign) 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.
Die Website PSD-Tutorials.de ist natürlich auch live im Internet zu erleben. ;)
2011 13.01. Donnerstag

Projektbericht PSD-Tutorials, Planung

Geschrieben unter Neues aus dem Fuchsbau
Kommentare (0)

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…
2010 11.11. Donnerstag

Ich schreibe, also bin ich…

Geschrieben unter Neues aus dem Fuchsbau
Kommentare (0)

Heute früh lag in meinem Büro die aktuelle Ausgabe der WEAVE. Damit habe ich ein kleines Fachartikel-Jubiläum erreicht: Der 10. gedruckte Artikel, seit ich vor ca. einem Jahr begonnen habe für Zeitschriften zu schreiben. Der jüngste Artikel beschäftigt sich mit dem Thema Gestaltungsraster im Webdesign. Zeit für mich, ein kleines Résumé zu meiner “Schreiber-Karriere” zu fassen.

Was schreibe ich?

Die von mir beschriebenen Themen siedeln sich bislang in zwei großen Bereichen an: “Grundlagen Photoshop”, die vor allem in der DigitalPHOTO (Photoshop) veröffentlicht wurden, und Fachartikel zum Thema Webdesign, die Ihre Heimat in der bereits genannten WEAVE gefunden haben. Hinzu gesellen sich einige Artikel und Video-Tutorials die ich für die Online-Plattform PSD-Tutorials.de geschriebe und gefilmt habe. Bereits geschrieben, und demnächst erscheinen werden weitere Artikel zu Ebenenstilen in Photoshop, den 3D-Funktionen der CS5-Extended und ein Fachbeitrag zum Thema Hintergrundgestaltung im Webdesign. Eine komplette Auflistung aller Erschienenen Publikationen befinden sich auf meiner Übersichtseite . //UPDATE: Kaum aus der Mittagspause zurück, liegt die neue DigitalPHOTO mit einem Artikel über die neuen Misch- und Borstenpinsel auf dem Tisch. Damit habe ich am 11.11 meinen 11. Artikel gedruckt vor mir liegen. Auch nett. :)

Daneben muss ich, aus Eigenwerbung, natürlich auch die knapp 100 Tutorials und vielen Fachartikel erwähnen, die ich in den letzten Jahren für meine einstige Lernplattform Photozauber.de verfasst habe. Seit kurzer Zeit ist dieses Portal zwar verkauft, aber die Artikel sind weiterhin vorhanden und können kostenlos abgerufen werden. Ebenfalls aus Photozauber entsprungen, oder andersherum, Photozauber ist aus Ihr entsprungen, ist meine Grundlagenschulung zu Photoshop. Dabei handelt es sich um ein 60-seitiges PDF Dokument, das dem Einsteiger die erten Schritte, Konzepte und Funktionsweise von Photoshop näher bringen soll. Dieser Web-Klassiker ist nach wie vor in meiner Hand und zusammen mit weiteren Schulungs-PDFs auf meiner Seite kostenlos abzurufen. Aktuell sitze ich an einer Neuauflage der Schulung, die geplante Veröffentlichung ist im Frühling 2011.

Zwei meiner Großwerke dürfen an dieser Stelle natürlich auch nicht fehlen. Zum einen ist das mein Fachbuch “Webdesign mit Photoshop”, welches Mitte 2009 bei Galileo Press erschienen ist, zum anderen meine Lern-DVD “Powerworkshops Webdesign mit Photoshop”, produziert von video2brain. Beide Projekte waren spannende Erfahrungen die eine Menge neue Erkenntnisse gebracht haben, die ich im Nachhinein nicht missen möchte. Interessierte finden auf der Website zum Buch einen Artikel über dessen Entstehungsgeschichte. Zur DVD-Produktion gibt es hier in meinem Blog einen 3-teiligen Artikel, der die Woche der Aufnahme im Tonstudio in Graz beschreibt. (Teil 1, Teil 2, Teil 3)

Fachbuch und Lern-DVD zum Thema Webdesign

Das Sahnehäubchen meiner lehrenden Tätigkeiten für 2010 wird nun kommende Woche die Photoshop-Convention in München sein, auf der ich selber zwei Vorträge halten werde. Nachdem ich die letzten Jahren nur als Konsument vor Ort war ein spannender Perspektiven-Wechsel. :)

Die Türöffner

Oftmals werde ich gefragt, wie man denn “da ran kommt”, wie man Artikel für Verlage schreiben kann. In meinem persönlichen Fall war meine Plattform Photozauber.de der erste Schlüssel. Ich hatte hier über Jahre hinweg konsequent Inhalte eingefügt und sie (halbwegs) bekannt im Netz gemacht. Irgendwann bekam ich dann eine eMail von Galileo Press mit der Frage, ob ich denn Interesse hätte, ein Buch zum Thema Webdesign zu veröffentlichen. Mit der Veröffentlichung des Buches hat sich das nächste Schloss geöffnet und der Weg zu den Fachzeitschriften war deutlich geebneter. Wenn man zudem noch mit der Chefredakteurin der DigitalPHOTO Photoshop zusammen studiert hat und sie während der Studienzeit sogar als Photoshop-Schüler in einem seiner Kurse begrüßen durfte, macht es die Sache nicht unbedingt schlimmer. :) Aber generell an dieser Stelle: Verlage suchen in der Regel immer engagierte Autoren. Ein Anschreiben mit einem Themenvorschlag für einen Artikel oder einem Konzept für ein Buch/DVD stößt selten auf taube Ohren, da die Verlage natürlich selbst darum bemüht sind, ein umfang- und abwechslungsreiches Portfolio zu präsentieren.

Auf der Photoshop-Convention 2009 kam ich zudem mit Cornelia und Gerhard von video2brain ins Gespräch, woraus sich dann letztlich schnell und unkompliziert die DVD-Produktion ergab. Den letzten Schritt, als Referent zur Photoshop Convention zu kommen, habe ich vor allem Ralf Kaulisch von Galileo Press zu verdanken, der mich bei dem Veranstalter Torsten Blach ins Gespräch brachte. Nun liegt es nächste Woche an mir, auf der Bühne zu überzeugen und das nächste Schloss auf dem Weg zur Weltherrschaft zu öffnen…
2010 19.10. Dienstag

Relaunch PSD-Tutorials - Betaphase

Geschrieben unter Neues aus dem Fuchsbau
Kommentare (1)

Heute geht mein bislang größtes Webprojekt, der Relaunch von PSD-Tutorials.de in die Betaphase.
Bereits Anfang 2010 habe ich hieran viele Wochen gesessen, um die unzählige Seiten des bisherigen Webauftritts komplett zu überarbeiten, Strukturen zu optimieren, Icons zu entwerfen und ein frische, moderne und übersichtlichere Plattform für den Kunden 4eck Media zu schaffen. Nicht nur gestalterisch und konzeptionell ein für mich äußerst forderndes Riesenprojekt bei dem ich jede Menge neue Erfahrungen sammeln konnte. Die vergangenen Monate waren mehrere Webentwickler daran, meine Vorlagen umzusetzen, nun endlich kann in der Beta-Phase getestet werden, bevor die Seite voraussichtlich Mitte November öffentlich live gestellt wird.

Im aktuellen Commag, dem monatlich erscheinenden Design-Magazin von PSD-Tutorials gibt es seit heute eine ausführliche Vorab-Berichterstattung mit vielen Einblicken in das alte und das neue Design mit Anmerkungen der Seitenbetreiber Stefan und Matthias Petri. Meinerseits wird mit dem offiziellen Relaunch ebenfalls eine umfangreiche Vorstellung des Projekts aus Designer-Sicht hier auf meinem Blog und in meiner Referenzgalerie zu sehen sein.

Nachstehend einige Impressionen, ausführliche Bilder im genannten kostenlosen Commag, Ausgabe Oktober 2010.

Exemplarischer Auszug der für PSD-Tutorials entworfenen Iconserie.
Von Links: Mein PSD, Punktekonto, Videotrainings, Contests

Designvorlage für die Homepage des neuen PSD-Tutorials.de

Mockup der Homepage mit altem Seitenleisten-Konzept in reduzierter Icondarstellung.