All posts by Max

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

 

 

Drupal 8: manual migration to a different server

The task for me was to migrate a Drupal 8.1 project from one server (where it ran in a subdirectory) to a server where it should run in the root folder on a subdomain (e.g. no Drupal 6/7 upgrade etc., “just” a Drupal 8 copy-paste job). I did this job many times with WordPress projects and it was quick and easy: make a sql-dumb of the database, search & replace the paths, copy the codebase and CMS content and finally import the whole bunch onto the new server.

Needless to say, that’s to easy for Drupal…

It was a drag to find a helpful documentation for such a popular task. After a lot of unsuccessful reasearch, I came across an article about migrating a Drupal 7 installation, and this one helped me a lot. I’d like to share a brief list of how to do it.
Please consider that this how-to is not guaranteed to work for every given occasion, it’s just how it worked for me. And in addition, make backups of everything anytime.

Let’s point out the steps of this article in short and see what we have to apply for Drupal 8:

  1. check if the settings and requirements of the new server (PHP version etc.) at least match or exceed the old server’s requirements
  2. Set the site to maintenance mode
  3. Clear the cache. This is one of the most important steps! The old directory path is stored in the cache data and can be very troublesome on the new server.
  4. Export your Drupal database, e.g. via phpMyAdmin. The simple export will do.
  5. Open the created SQL file and search&replace the base URL (e.g. “http://www.myolddomain.com/subdir/” becomes “http://www.mynewone.com/”). If you previously used a subdirectory like me, replace the string “/subdirectoryname/” with a single “/”.
  6. Download the Drupal code base and any user files, like images etc.
  7. Open the file “sites/default/settings.php” in the downloaded Drupal root folder with a text editor. Scroll to the very bottom. Replace the values in the $databases- and trusted_host_patterns-array and with the the values of the new database resp. domain name
  8. Import the SQL file into your new database and upload the Drupal code base and user files to your new webspace
  9. Like the article says, you may need to alter your new .htaccess file
  10. Visit your new domain. The Drupal site should run now.
  11. Go to the page domainname/user (this seems to be Drupal 8-specific) and log in. Turn off maintenance mode if needed.

If this doesn’t work for you, you may also try the steps in the article which I didn’t include. I guess that turning off clean URLs, renaming table prefixes etc. is not necessary or included in Drupal 8 anymore, but maybe someone makes different experiences since there doesn’t seem to exist “the one and right” way.

Good luck!

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

Edward Snowden Film

Auf dem Höhepunkt der Vorfälle und der Jagd nach NSA-Whistleblower Edward Snowden entschieden Bernd und ich uns, einen knappen Animationsfilm zu produzieren. Im Vordergrund stand dabei Bernds Idee und der Plan, sein jahrzehntelang bewährtes und perfektioniertes Können des Karikierens von Personen und meine Erfahrungen in den Bereichen Animation, Illustration und Bildbearbeitung zu verbinden.

snowden3

the_run_snowden-smallgifDie komplette Umsetzung dauerte etwa vier Arbeitstage. Zu Beginn beschäftigte ich mich mit dem Arbeitsschritt, der mir am schwierigsten erschien: die Erstellung einer Laufanimation für Snowden. Dabei stieß ich auf die Arbeiten einer der Pioniere der Animationskunst, Eadweard Muybridge (1830-1904). Ich legte eines seiner „Sprite Sheets“ in Flash an und begann, die Posen mit Vektoren nachzubilden. Dann vektorisierte ich Bernds Snowden und legte seinen Kopf auf die Animationsphasen.

Im weiteren Verlauf erstellte ich Vektorzeichnungen vom Kreml bzw. der aus Tetris bekannten St. Basilius Kathedrale, dem Blackhawk, dem „Jäger“ Barack Obama im Tarnfarben-Outfit und Putin im „Dr. Evil“-Look.

Und hier der ganze Film:

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.

Contact Form 7: send copy to sender with checkbox in 3.9 Update

Contact Form 7 (CF7) is a popular wordpress plug-in to create powerful contact forms for wordpress websites. To those familiar with the PHP language, it opens a way to customize contact forms to fit their special needs.

I was ordered to make a contact form for a wordpress site with a checkbox which controls whether the sender gets a copy of his sent mail or not. Because I used to be very happy with CF7 in past projects, I decided to use it again, and since CF7 doesn’t provide an optional “send e-mail copy” checkbox out of the box, I did some research and found a lot of forum discussions and documentation like this one.

I started on this topic on July 17th with CF7 version 3.9, and unfortunately it took me about 4 hours to find out that all those past forum posts with code snippets are useless since July 14th when Contact Form 7 version 3.9 was published! I have to say it bold and loud again:

Most of your customized code (if not all) for wordpress Contact Form 7 prior to version 3.9 won’t work anymore in version 3.9+.

According to this article by Contact Form 7 publisher Takayuki Miyoshi, the wpcf7_before_send_mail function works in a different way now.

Your old code

This is how your “send me a copy” checkbox function will probably look like in your code:

You probably have a shortcode like this in your CF7 contact form:

[checkbox contact_sendmail "Send me a copy of this message"]

And you will have something like this in your active theme’s function.php:

add_filter( 'wpcf7_additional_mail', 'my_wpcf7_check_for_mail2', 10, 2 );
function my_wpcf7_check_for_mail2 ( $additional_mail, $cf7 ){
    if ( "Send me a copy of this message" != $cf7->posted_data['send_c'] )
        $additional_mail = array();
    return $additional_mail;
}

This won’t work anymore.

My new code

In my project, I decided to use the Mail (2) function of CF7: instead of setting up the sender’s address as CC, I send a second mail with differing content. My workaround just works with Mail (2) and not with CC/BCC, so you have to do it the same way or change the code to your desires.

My code does the following: we leave the recipient field in Mail (2) blank, and it will be filled with the sender’s e-mail address if the checkbox at the frontend is checked. So either there will be a second mail send or not.

Let’s get to work! Do the following:

1. Open the CF7 contact form which you want to edit in wordpress Admin area. You set up the [checkbox] snippet which produces the checkbox in the contact form on your website:

[checkbox contact_sendmail "Send me a copy of this message"]

2. Activate Mail (2) (the mail copy which will be sent to the sender), fill it out to fit your needs, leave the To: field blank! Don’t put [your-mail] etc. in it.

3. In your active theme’s function.php, delete your old wpcf7_before_send_mail function (if you have one). Add the following code:

function check_mail_send_contactform($cf7) {
    //get CF7's mail and posted_data objects
    $submission = WPCF7_Submission::get_instance();
    if ( $submission ) {
        $posted_data = $submission->get_posted_data();
    }
    $mail = $cf7->prop( 'mail' );

    if($posted_data['contact_sendmail'][0]) { //if Checkbox checked
        $mail2 = $cf7->prop( 'mail_2' ); //get CF7's mail_2 object
        //now set sender's address to mail2's recipient
        $mail2['recipient'] = $mail['sender'];
        $cf7->set_properties( array( 'mail_2' => $mail2 ) );
    }
    return $cf7;
}
add_action('wpcf7_before_send_mail','check_mail_send_contactform');

What does it do?

Firstly, we load CF7’s objects in arrays to make them accessible to us (if you are interested in getting deeper in this topic: Xavi Esteve wrote an excellent post about CF7’s objects). Afterwards we look if the checkbox was checked (we don’t need to know about the content of the checkbox, just if there is anything) and if yes, we set the sender’s address to the recipient of the second mail.

RingPraktikum

Für die Teachcom Edutainment gGmbH entstand ein Imagefilm, der das Konzept des RingPraktikums erläutern soll: die Schülerinnen und Schüler der 9. Klassen besuchen im Rahmen des regulären dreiwöchigen Betriebspraktikums nicht nur eine Firma, sondern wählen sich im Vorfeld einen Ring aus (z.B. Hotel & Gastronomie oder Druck & Medien), werden in einem Workshop darauf vorbereitet, sammeln dann Erfahrungen in mehreren Betrieben und haben danach die Möglichkeit, als Mentees weiterbetreut zu werden.

Die Konzeptionierung entstand in Zusammenarbeit mit Thomas Renzler von Teachcom. Die Characters wurden von der Illustratorin Lucy Overbeck angefertigt, die restlichen Grafiken, Animation, Schnitt und Ton von mir.

Das gesamte Video auf YouTube ansehen »

Piratenpartei

Als Auflockerung in einer Dokumentation über die innerparteilichen Konflikte der Piraten kam die Idee auf, die twitter-Fights der Parteimitglieder in einer Animation zu zeigen. Den ersten Entwurf setzte ich komplett in Illustrator um. Am Ende der Arbeit waren zwei Animationen im Stil von Atari- und C64-Games fertig.
Die wunderbare 80s-Synthie-Musik und Soundeffekte wurden vom guten Svensei produziert.

piraten screenshot

Cuisine Royale & LandGut

Für die zwei kulinarischen TV-Formate “Cuisine Royale” (arte) und “LandGut” (ZDF) entstanden für mehrere Episoden Landkarten-Animationen, die jeweils bei einer Ansicht des Staates anfangen und dann in die Region der entsprechenden Folge  eintauchen und die typischen Produkte darstellen.

Cuisine Royale Pais de la Loire
Nahansicht der Region Pais de la Loire

Für “Cuisine Royale” zeichnete ich diverse Produkte der Pays de le Loire und dem Piemont mit dem Grafiktablett und erstellte eine Landkarte als Vektorgrafik, die in Photoshop verfeinert wurde, während ich für “LandGut” mit einer Vektor-Landkarte arbeitete.

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