Archiv der Kategorie: Webdesign

Matheon

Das Matheon ist ein Zentrum für anwendungsorientierte Mathematikforschung. Mit meiner Erfahrung im Webdesign im wissenschaftlichen Bereich habe ich mich gefreut, für das Matheon ein Redesign entwickeln zu dürfen.

Zentrale Herausforderung wurde die Entwicklung eines Designs und Layouts, das die Hunderte von Unterseiten des Matheon-Webauftritts gleichwertig repräsentiert. Die Website sollte vor allem in der Usability verbessert werden, daher bietet das neue Layout neben der Primär- und Sekundärmenü-Leiste auch meist ein weiteres Kontextmenü mit Unterthemen an.

Das Farbschema wurde rund um das Matheon-Logo mit seinen drei Blaustufen angelegt. In der Zusammenarbeit entstand mit diesen drei Blautönen und Weiß als Kontrastfarbe ein Layout, das die Usability unterstützt und gleichzeitig zeitgemäß wirkt.

Website des Matheon Forschungszentrums

Das Redesign gibt allen Objekten ihren benötigten Freiraum. Ein großzügiges „Hero Image“ fungiert als Eyecatcher, während die Oberkategorien und kontextbezogenen Links stets ihren determinierten Platz und Farbcode besitzen.

Christine Lambrecht

Wie stellt man sich den Web-Auftritt einer Bundestagsabgeordneten vor? Er sollte ansprechend und ehrlich, aber dennoch seriös und mit Herz gestaltet sein. Vor diese Herausforderung wurde ich vom Team der Bundestagsabgeordneten Christine Lambrecht (SPD) gestellt.

Aufgeräumte Details im Stil einer Visitenkarte

Das Design wurde nach Wünschen der zuständigen Beauftragten aus Frau Lambrechts Büro übersichtlich und freundlich gehalten, das Farbschema basiert auf Weiß und hellen, warmen Grautönen mit Akzenten aus dem Rot-Spektrum des SPD-Logos. Besonderen Wert legte ich auf die Schriftsätze: die »Nunito« bietet einerseits einen sehr pragmatischen, lesefreundlichen Normal-Schriftschnitt, der als Laufschrift in beträchtlicher Schriftgröße und Zeilenabstand Lust aufs Lesen machen soll. Auf der anderen Seite besitzen die Medium- und Bold-Varianten mit ihrer Rundlichkeit Emotionalität und Charakter.

Das finale Design wurde in die bestehende Drupal-Installation integriert und angepasst. Dass das Design und Layout wirklich jeder künftiger Unterseite gleichmäßig gut funktioniert, ist eine große Herausforderung beim Web Design für ein CMS. Ich freue mich sehr, dass das Team um Christine Lambrecht so erfolgreich mit dem Redesign zurecht kommt.

Web-Auftritt von Christine Lambrecht

 

 

3D-Adventskalender

Ein Auftrag mit viel Spaß, Anstrengung und arbeitsamen Nächten für meinen Rechner: das Team um die Digitalen Mathe-Adventskalender waren mit dem Design ihrer Website zufrieden und dachten über neue Kalenderblätter nach – also zwei Bilder mit 24 Türchen (oder Söckchen o.ä.). Schnell einigten wir uns auf eine Umsetzung in 3D – spannend!

Hier sind die beiden fertigen Kalender in Aktion zu sehen: mathe-im-advent.de

Der erste Entwurf zeigte schonmal die technischen Möglichkeiten, erinnerte aber zu sehr an einen tristen Kasernenhof…
Der erste Entwurf zeigte schonmal die technischen Möglichkeiten, erinnerte aber zu sehr an einen tristen Kasernenhof…

Also ging es kurzerhand in Blender los. Der Stil stand fest, es sollte alles Low poly aussehen gemäß den Trends im Design- und Games-Bereich. Zunächst dachten wir über eine HTML-Umsetzung mit Straßenblock-Kacheln nach, die dann später ein Dorf bzw. eine Stadt ergeben sollten.

Diese Kachel enthält schon die wesentlichen Models der fertigen Komposition
Diese Kachel enthält schon die wesentlichen Models der fertigen Komposition

Es zeigte sich jedoch, dass zwei große einzelne Bilder, die jeweils das ganze Dorf bzw. Stadt enthalten, technisch besser umzusetzen sind und Abwechslung bieten. Die 24 Links zu den Mathe-Aufgaben wurden mittels Javascript gesetzt. Mein erster Ansatz für die Zahlen im Bild war, 24 abstrakte Kreise mit den Ziffern zu platzieren, doch dann zeigte sich, dass der Stil der Häuser besser nicht aufzubrechen sei, daher bekamen die Hausdächer eigene, selbstleuchtende Schrift-Meshes mit den Zahlen.

Das Dorf ist fertig

xmas_village_v5_web_tag
Das fertige Dorf für die Mathe-Aufgaben der 4. bis 6. Klassen
Die Nachtansicht wird ab dem späten Nachmittag bis morgens eingeblendet und ist – da in 3D gebaut – relativ einfach umzusetzen
Die Nachtansicht wird ab dem späten Nachmittag bis morgens auf der Website eingeblendet und ist – da in 3D gebaut – relativ einfach umzusetzen

Die Stadt

Für die Stadt (Kalender für die Matheaufgaben für die 7. bis 9. Klassen) ließ ich mich von den wunderbaren typischen Häusern der Hansekaufleute inspirieren. Die echten Exemplare, die ich bisher in den Hansestädten Wismar, Rostock, Stralsund und Visby sehen konnte, haben mich oftmals wegen ihres eigensinnigen Formats beeindruckt. Da für die Website auf wenig Platz eine sympatische kleine Stadt dargestellt werden sollte, erschien es mir sinnvoll, die Häuser an Hansehäuser anzulehnen, um durch deren „putzig-knuffigen“ Maße ein Gefühl von Gemütlichkeit zu erzeugen. Der Hafen mit Booten, Schiffen und Meeresspiegelung kam für das Hansestadt-Feelung dazu und sollte das Stadtbild interessant aufbrechen.

XmasCity_v6_web_tag
Häuser wie aus Zucker
XmasCity_v6_web_abend
Die Nachtansicht der Stadt

Das größte Problem beim 3D Modeling sind – auch im 21. Jahrhundert – die Wartezeiten. Jede Lichtquelle im Bild (also jede Kugel in der Lichterkette) erfordert wieder etwas mehr Rechenleistung. Ein 2,3GHz-i7-Laptop ist vermutlich auch mit 16 GB Arbeitsspeicher nicht der optimalste „Renderknecht“, aber dass er eine ganze Nacht für ein sauberes FullHD-Bild braucht, muss man erstmal in den Arbeitsprozess einkalkulieren.

Andere Ansichten

Selfie vom Schneemann
Selfie vom Schneemann
Im Test mit Skydome, Perpektivwechsel und anderen Shadern
Im Test mit Skydome, Perpektivwechsel und anderen Shadern

Günter Berg Agency

Günter Berg hat mit seiner fünfundzwanzigjährigen Erfahrung im Verlagswesen eine tolle Literaturagentur aufbauen können, mit der er so namhafte Persönlichkeiten wie Siegfried Lenz und Michail Gorbatschow vertritt. Ich habe mich gefreut, dass ich mit dem Design seiner Webpräsenz beauftragt wurde.
Im Vordergrund einer Literaturagentur stehen natürlich die Bücher – Belletristik und Sachbücher – die sich wiederum über ihr Cover präsentieren. Von Anfang an sollten so die Buchcover der von Herrn Berg vertretenen Autoren auch den Großteil des Weblayouts tragen.

Die Website ist online erreichbar unter www.guenterbergagency.com

guenterberg-screen

EC Math Website

Das Einstein Center for Mathematics Berlin (ECMath) wurde 2014 gegründet. Es wird neben der Einstein Foundation Berlin von den drei Universitäten Berlins, der Freien Universität Berlin, der Humboldt-Universität Berlin und der Technischen Universität Berlin und weiteren Instituten gefördert und hat sich zum Ziel genommen, mathematische Forschung in ausgewählten Innovationsbereichen zu unterstützen und ein Netzwerk von Exzellenzinitiativen zu stärken.

Die Entwicklung einer Web-Identität für ECMath habe ich gerne übernommen. Mir wurden sehr schön großflächige Fotos und Grafiken zur Verfügung gestellt, die ich gern ohne starke Größeneinbußen in das Layout einsetzen wollte. Das Resultat sagte zu: die professionellen Textinhalte werden interessanten Bildelemente entgegengestellt, und das Rot des Logos trennt als „roter Faden“ die Seitenbereiche.

Im Auftrag war auch Responsive Design für Tablets und Smartphones vorgesehen, welches komplett „frei Hand“ in CSS umgesetzt wurde.

Die Website ist online erreichbar unter www.ecmath.de

ecmath-screen

Mathe im Advent

mia-medaillen»Mathe statt Schokolade« – unter diesem Motto rüttelt die Deutsche Mathematiker-Vereinigung mit ihren Partnern seit einigen Jahren jeden jungen Mathe-Fan zur Vorweihnachtszeit wach. Einzelne Schüler und ganze Klassen können auf mathe-im-advent.de täglich eine der 24 lustig illustrierten Text-Mathematikrätsel lösen und Gewinne abstauben.

Mit den Jahren kamen mit einer stetig wachsenden Fangemeinde auch neue Anforderungen hinsichtlich Usability, User Experience und der allgemeinen grafischen Präsentation. Ich wurde damit beauftragt, ein neues Corporate Design zu entwickeln, welches sich für Print-Erzeugnisse und den Web-Auftritt eignet und insbesondere für letzteres die Methoden des Responsive Design beachtet, da die Zielgruppe äußerst affin für mobile Endgeräte ist.

Die Arbeit begann mit der Farbgebung und Logo. Während das Hellblau des Hintergrunds gleichsam die Kühle der Vorweihnachtszeit und das Farbschema des Wissenschaftsjahrs 2014 wiederspiegeln soll, kehrten wir bei der Mütze auf die klassische Farbkombination rot-weiss zurück, um nun mit der Form der Mütze spielen zu können. Die Kopfbedeckung des Weihnachtsmanns als sehr „eckiges“, technisches Gebilde aus Polygonen schien mir ein schöner Kontrast zwischen der „besinnlichen Zeit“ und dem Oberthema Mathematik zu sein und wirkte gleich modern auf mich.

mia-screen-cut
Die fertige Website.
Das Mathe im Advent Plakat, das im Zuge der Kampagne in sämtlichen Schulen ausgehängt wurde.
Das »Mathe im Advent«-Plakat, das im Zuge der Kampagne in sämtlichen Schulen ausgehängt wurde.

toonpool.com

Im Jahre 2007 entstand die Idee, ein youtube für Karikaturisten aus aller Welt zu schaffen. Da der Name toonpool schon existierte und dem ganzen Team gefiel, wurde die URL toonpool.com gesichert und die Arbeit begann.

Der Arbeitsprozess in den ersten Monaten gefiel mir außerordentlich, denn außer der frischgegründeten GmbH und einer vagen Vorstellung von der fertigen Website gab es nichts, vor allem kein Budget. Somit arbeiteten wir alle von zuhause aus und online in unseren freien Stunden. Ich lebte zu der Zeit von Making Ofs zu Musikvideos: Interviews, Kamera, Ton und Schnitt aus einer Hand. Ein paar dieser Making Ofs wie zu Blooddrunk von Children Of Bodom sind zum Glück im tiefen Schlund von youtube für immer (hoffentlich) erreichbar. Dass es am Anfang kein Budget gab, war zumindest in der Hinsicht eine Erleichterung, als dass es für alle bis dahin ein rein kreatives, nichtkommerzielles Projekt war.

tpcom Entwurf 2007
Ein erster – zugegebenermaßen dürftiger – Entwurf von mir (ca. April 2007)

Ich saß an Freitagabenden in meiner nicht als Küche genutzten Küche, setzte meine Kenntnisse in HTML, CSS und PHP so gut wie möglich ein, um die beschlossenen Layouts umzusetzen, schob Dateien hoch und telefonierte mit Frank, der das Backend gestaltete. Und so kamen nach und nach die Unterseiten zustande: Startseite, Galerie, Profilseite, Detailseite und der Rest. Im Verlauf des Jahres kamen neue, anspruchsvollere Ideen hinzu und das Team vergrößerte sich mit Lars.

Plötzlich kam aus einer Ecke des Teams das „Farbkonzept“ mit der lila Grundfarbe und den Lamellen genannten Querstreifen.

Ein weiterer Vorteil des Teams war, dass wir auf sämtliche der als üblich erachteten Rituale bei einem solchen Projekt verzichteten: aufwändige Mockups, Interfaces, Zielgruppenanalysen, User Experience Design und dergleichen. Diese Methoden sind wichtig, aber nur dann durchführbar, wenn es nicht an Zeit und Geld mangelt. Plötzlich kam aus einer Ecke des Teams das „Farbkonzept“ mit der lila Grundfarbe und den Lamellen genannten Querstreifen. Viele Besucher beschwerten sich über den düsteren Look der Seite, und die runden Ecken und Schlagschatten der Thumbs zwangen die Programmierer dazu, Methoden in HTML und CSS anzuwenden, über die man heutzutage lacht.

tpcom before_jan_21_2009
Ein Jahr und 30.000 Cartoons später hatten sich fast alle Besucher an das Look & Feel gewöhnt.

Mit den Jahren wurde toonpool erwachsener (ein bisschen) und erlebte einige neue Funktionen und zwei komplette Redesigns. Wir lösten uns ein wenig von Lila und Lamellen und gingen einen Schritt Richtung skeuomorphischem Design, wie es dem Trend der Zeit entsprach.

Heute präsentieren 2.800 Künstler aus 120 Ländern ihre über 180.000 Cartoons und Karikaturen auf toonpool.com. In Zukunft würde ich gerne ein paar Designanpassungen vornehmen und vor allem den Schritt zum Responsive Design angehen.

« toonpool.com besuchen

tpcom today
toonpool.com heute

motomax – der Anfang

Es ist schon ein Weilchen her: als ich sechzehn Jahre alt war, schloß sich der Wilmersdorfer Dunstkreis unserer Peripheriegeräte, namentlich Scanner, Drucker, Grafiktablett und externer Festplatte. Das Internet hielt tutend Einzug in meine Welt.

Das war 1997. Sofort ließ ich unser Photoshop 3.0 links liegen und machte mich an die Arbeit, eine erste Website zu produzieren. Das Problem war nicht unbedingt, dass die technischen Voraussetzungen noch sehr dürftig waren; ich hatte schlicht keine Inhalte bis auf einige seltsame Photoshop-Collagen und ein paar krude Kurzgeschichten, die ich lieber nicht der ganzen Welt zeigen wollte. Zuvor hatte ich noch ab und zu Testberichte über neue Mac-Spiele geschrieben, die das MacMagazin auf ihren beiligenden CD-ROMs veröffentlichte, damals in einer Art Pre-PDF-Format. Mir wurden sogar irgendwann neue Spiele zugeschickt und ein paar andere pickelige Teenager wollten in meinem Magazin mitarbeiten und riefen mich unaufgefordert an, aber auf Testberichte hatte ich keine Lust mehr. Zudem waren die Preise für eigene URLs noch recht hoch für einen Sechzehnjährigen; es gab kostenlose Angebote, die jedoch mit Werbung vollgestopft waren.

„Das Internet hielt tutend Einzug in meine Welt.“

Es sollte noch sechs weitere Jahre, ein Abitur und fünfzig Musikvideodrehs dauern, bis ich meine richtig eigene Website haben sollte. motomax erschien mir damals griffig und ich glaube mich zu erinnern, dass ich mich nicht lange entscheiden musste. Plötzlich entstand auch viel Content im Rahmen meiner Ausbildung zum Kommunikationsdesigner an der Berliner Technischen Kunstschule (BTK), so dass ich mich darum nicht mehr sorgen musste. Meinem persönlichen Svensei Larsen habe ich es aber zu verdanken, dass ich schnell einige Fortschritte in Flash 4 mit ActionScript 1.0 machte. motomax wurde zu meiner Spielwiese und Schrottplatz für Filmchen, Spielchen und mehr. Und die schrägen Streifen im Hintergrund machten beim längeren Betrachten irgendwann richtig schön aggressiv…

moto1 screenshot
Die letzte Version vom 2004’er motomax, aktualisiert im Winter 2012

toonpool.de

2006 plante Bernd eine einfache Website mit dem Ziel, hochwertige Kunstdrucke mit Motiven aus seinem Œuvre und dem befreudeter Künstler zu vertreiben. Die Grundidee und der Name von toonpool waren geboren.

Ich begann mit der Umsetzung. Es entstanden erste Mockups in Photoshop und bald darauf eine erste Website. Zu diesem Zeitpunkt gab es nur sehr wenige funktionelle Open Source CMS, geschweige denn einfach zu bedienende Shop-Systeme, PayPal war kaum verbreitet, aber allem voran hatte ich bis dato kaum Erfahrungen abseits von HTML, CSS und Flash ActionScript gesammelt. Wir starteten also mit einer Seite, in die jedes „Produkt“ von Hand eingetragen und den Künstlern zugeordnet werden musste: eine echte Herausforderung in Sachen Zeitaufwand, Planung und Chaosvermeidung. Die komplette Zahlungsabwicklung erfolgte nur per e-Mail und PDF-Rechung. Es war jedoch egal, wie professionell die Seite umgesetzt war – der Verkauf verlief recht erfolgreich. 2007 ging die Seite in toonpool.com über.

tpde_screenshot
Die letzte Version der Website toonpool.de

Mit einigen Jahren Abstand muss ich natürlich sagen, dass ich als Webdesigner und Webentwickler heute einiges anders gemacht hätte. Der Spiegelungseffekt des Logos und der Verlauf darunter sind der damaligen Zeit geschuldet. Allerdings hat die Seite – vielleicht durch ihre „bauhausige“ Struktur – eine gewisse zeitlose Frische. Und auch hier ist der tolle Cartoon von Bernd ein dankbarer Blickfang, der von manchen Layoutschwächen ablenkt…

Büchergilde

Für die Berliner Büchergilde am Wittenbergplatz entstand eine eine neue Website, die insbesondere die Funktion haben sollte, von den Mitarbeitern selbständig und schnell aktualisierbar zu sein.

Die Wahl fiel schnell auf ein CMS auf Grundlage von wordpress. Die Büchergilde-Website basiert auf dem Standard-wordpress-Theme „twenty-twelve“ aus dem Jahre 2012, wie der Name schon sagt. „twenty-twelve“ ist ein äußerst reduziert gestaltetes Theme, welches das grundlegende Konzept und die Philosophie von Responsive Design bereits enthält. Trotzdem waren zahlreiche Anpassungen notwendig, um das gewünschte Layout für alle Plattformen gleichermaßen benutzbar zu machen.

buechergilde screenshotEyecatcher der Seite ist die sehr querformatige Slideshow im oberen Teil der Startseite. Ich war sehr dankbar, dass mir Frau Binger sehr stimmungsvolle Fotografien von Jürgen Blume und lustige Portraits der Mitarbeiter für die Slideshow zur Verfügung stellen konnte. Die Portraits waren das Ergebnis eines Pitchs, den Frau Binger auf toonpool.com in Auftrag gegeben hatte.

Kernstück meiner Programmierarbeit in PHP ist das selbsterstellte Widget, welches die vier neuesten Bucherscheinungen aus dem Verlag vorstellt. Die Mitarbeiter der Büchergilde können Zusatzinformationen über die Bücher in benutzerdefinierten Feldern eintragen und die Reihenfolge der Bücher auf der Startseite selbständig ändern.

Die Büchergilde Gutenberg ist eine traditionelle unabhängige Buchhändlergemeinschaft mit ausgewählten Geschäften in Deutschland. Der Verlag stellt kleine Auflagen von Büchern her, die allesamt originell und fantasievoll gestaltet sind.

« Zur Website der Büchergilde Wittenbergplatz