Tagebuch | graphicore.de The Graphicore News Tue, 28 Jul 2015 18:03:27 +0000 Zend_Feed_Writer 1.10.8 (http://framework.zend.com) http://graphicore.de/de/diary commander@graphicore.de (Lasse Fister) Lasse Fister Hello Metapolator Tue, 28 Jul 2015 12:45:00 +0000 http://graphicore.de/de/archive/2015-07-28_hello_metapolator http://graphicore.de/diary/tag:graphicore.de,2015-07-28:/diary/2015072812483855b77a264cda6

Hello Metapolator

Learn more about Metapolator and visit the project homepage and the github repository.

A Short Personal Project History

The reason for me not updating my blog for a long while is that I was very busy. I'm still busy now, but yet writing. Something must have changed.
Metapolator is a next generation font creation tool. I started working on it roughly more than one year ago. We can consider the Libre Graphics Meeting 2014 in Leipzig in April 2-5 as my initiation into the project and the start of the current phase. More about the project history can be found at metapolator.com. Our Team gathered later that year again at the Automatic Type Design conference at the ANRT in Nancy in May 6-7 2014. In the meantime I was working on the previous prototype of Metapolator and shaped my mind about what it did then and what I thought it should be. It was in Nancy where we laid the foundation for the current incarnation of Metapolator technology.
Many people contributed to the project, but at Nancy I met Paul Sladen, whose kind help, being a good listener, and giving valuable advice, helped me to form concepts strong enough to get my hands dirty and start working. I left Nancy with a keen excitement in the project.

Things keep changing

After more than one year later the Metapolator Project entered an interesting new phase. Some of the old concepts got replaced by better ones but the general direction has proven right. We have a great product vision and a well conceived ux-design through the work of Peter Sikking. Soon we will present a minimal viable product that supports designers with designing font families. To implement all of our plans and to reach version 1.0 will take some more time however.

My role in the project is less about the creation of the “Metapolator” interface; instead I am the inventor of the underlying “Metapolator Technology”. There are a couple of modules that I realized will be useful in a vastly broader range of applications and tools than just Metapolator. This led to my decision to take parts out of the repositories of Metapolator, and also ufoJS, a library I began developing some years ago that is a key component of Metapolator.

The Plan

I hope I can use parts of Metapolator, especially CPS, to teach people how to make exciting new tools for font and graphic design.

Taking modules out of Metapolator to create stand-alone projects has primarily didactical reasons. It will be easier to show and explain the technology of Metapolator by looking at one part at a the time, instead of everything at once. It will also be easier to write specific documentation for these projects without having to consider the highly specialized nature of Metapolator. Lastly and most exciting for me: we will be able to create cool little projects with our technology to attract, inspire and teach the community. These projects will form an ecosystem around Metapolator: The developer tool for CPS that I'm working on right now will be available for all CPS based projects as an ad-hoc interface.

In the long run we will establish Metapolator technology as a platform to build the next generation of type design tools, or any other domain as well. Metapolator will be positioned as a highly sophisticated application that spawned new core technologies and on the way stimulates and enables new tools.

I want to see more people participating in Metapolator technology in the future; particularly because we offer interesting and genuinely new approaches for parametric design applications, and can enable everything between professional type design/engineering tools to ultra creative graphic design tools that are fun both to make and to use.

For a FLOSS project like ours it is crucial to gain a diverse community. Each part of the project will profit from discussing and solving issues raised by users from any background. We have topics ranging from computer language design to user interaction. The more people use our tools the more ideas and feedback will be available to further advance our mission.

Coming up next

Metapolator’s minimal viable product and the CPS Developer Tool are being developed in parallel at the moment. When I have finished the developer tool I will start to decouple some modules, namely: CPS plus the object model basics, MOM (maybe), our IO modules, the pen APIs and a collection of pens, and the CPS Developer Tool itself. I am also planning a series of blog posts to document the workings of these modules on a fairly high level and finally one about Metapolator that builds upon that knowledge. These articles will become part of the Metapolator documentation as well. I also have ideas for up to three fun projects that will prove the claims I made above and attract new people to this ecosystem; I expect one of these will be created soon after the isolation of CPS.


I have no comments feature on my blog for several reasons. You can discuss this post at the Metapolator g+ community, write me an email or chat to me on twitter.

Firewall-Konfigurationsserver für einen internationalen Handelskonzern Thu, 27 Feb 2014 14:22:48 +0000 http://graphicore.de/de/archive/2014-02-27_firewall-service http://graphicore.de/diary/tag:graphicore.de,2014-02-27:/diary/20140227142708530f4b3c7eae4

Firewall-Konfigurationsserver für einen internationalen Handelskonzern


Der Server ist nur Konzern-intern verfügbar und soll für drei unterschiedliche Szenarien verwendet werden:

  1. Initial werden alle neuen Firewalls mit der generierten Konfiguration bespielt und dann an die Standorte ausgeliefert.
  2. Im Servicefall kann ein Techniker die Konfiguration für das Ersatzgerät ermitteln.
  3. Sollten Änderungen an den Konfigurationen nötig werden, ist dies der zentrale Ort, an dem die Änderungen eingepflegt werden.


Der Server stellt verschiedene Schnittstellen bereit, über die die Konfigurationsdateien und Metadaten ermittelt werden können:

  • Die Webseite eines Standortes mit Konfigurationen und Zusatzinformation wie Öffnungszeiten und Adresse.
  • Der Download vieler Konfigurationen auf einmal als ZIP-Archiv, wobei die Eingabe mittels Upload einer simplen CSV-Datei stattfindet.
  • Eine HTTP-GET API, über die Konfigurationen und Metadaten direkt ermittelt werden können.
  • Ein Maintenance-/Debugging-Interface, das via AJAX und JavaScript eine SNMP-Abfrage stellt und das Ergebnis filterbar darstellt.

Das richtige Werkzeug

Der Server ist in Python geschrieben. Als Webframework habe ich das leichtgewichtige Flask verwendet. Die benötigten Daten werden aus verschiedenen Quellen ermittelt: DNS, LDAP, SNMP, ein HTTP-PUSH basiertes System – über das Daten als XML empfangen, mit XSD validiert und aktualisiert werden – sowie weitere, lokal vorliegende Daten.


Auch die Serverkonfiguration kommt von mir. Der Apache2 Webserver liefert die Seite mit mod_wsgi, mod_authz_ldap und mod_ssl aus. Dabei ist der Zugriff beschränkt via LDAP-Gruppen und stets verschlüsselt mit HTTPS.


die Gestaltung ist auf das Wesentliche beschränkt und erklärt die bestehenden Möglichkeiten.

Screenshot der Homepage des Servers

Kleine Geschäftsausstattung für Sibylle Frank Thu, 27 Feb 2014 11:47:59 +0000 http://graphicore.de/de/archive/2014-02-27_sibylle_frank http://graphicore.de/diary/tag:graphicore.de,2014-02-27:/diary/20140227115040530f26907c1a8

Kleine Geschäftsausstattung für Sibylle Frank

Link zur Website: Sibylle Frank

Die Website

ist in der Form eines Steckbriefes gehalten und informiert sachlich und schlicht. Die Website ist responsive umgesetzt, dadurch passt sich die Seite an verschiedenen Bildschirmgrößen optimal an.

Breite Ansicht der Website von Sibylle Frank

Die Gestaltung

basiert auf einer spannenden Schriftmischung. Zum einen wird die moderne und sehr schlichte Webfont »Source Sans Pro« von Adobe verwendet. Sie stellt die Wortmarke in ihrer ExtraLight Variante dar und liefert die Texte mit ihrer Light Variante aus. Besondere Betonungen und Zwischenüberschriften werden von der »Magenta Open Cosmetica Bold« dargestellt – eine freie Version der »Optima« von Hermann Zapf und dadurch ein richtiger Klassiker. Die fette »Cosmetica« kontrastiert die feine »Source Sans« auch durch ihre Formensprache. Es wird ein schöner graphischer Bogen zwischen den Themen von Sibylle Frank – Architektur und Denkmalpflege – geschlagen.

Die richtige Technik

Das statische HTML der Website wurde mit Hyde – ein in Python geschriebener, statischer Websitegenerator – umgesetzt. Das optimiert Entwicklungszeiten und macht vor allem das Hosting sehr einfach und kostengünstig.

Schmale Ansicht der Website von Sibylle Frank

Das Briefpapier

Das Briefpapier ist passend zur Website umgesetzt. Die nach DIN gestalteten Seiten bestechen durch ihre aufgeräumte Erscheinung und die gleiche spannende Schriftmischung wie auf der Website. Das Briefpapier ist als »Open Office«/»Libre Office« Vorlage verfügbar.

Briefkopf von Sibylle Frank

Der Multitoner ist da Wed, 13 Nov 2013 16:59:11 +0000 http://graphicore.de/de/archive/2013-11-13_it-is-a-multitoner http://graphicore.de/diary/tag:graphicore.de,2013-11-13:/diary/201311131703405283b0ecf2532

Der Multitoner ist da

logo des Multitoners


Ihr findet den Multitoner auf Github. Lest euch unbedingt die README.md unten auf der Landing-Page durch.


Silber & Blei benötigt eine FLOS-Software, um Multiplexbilder herzustellen. Mehr Information über das Projekt und seine Geschichte gibt es hier.

Hilferuf: Farbmanagement

Ich möchte die bestmögliche Druckvorschau mit dem Multitoner erreichen. Ich denke, Ghostscript kann alles, was dazu nötig ist. Über Hilfe von Leuten mit Erfahrung/Interesse in dem Bereich würde ich mich sehr freuen. Mehr Info dazu gibts in der README.md im Repository und in der Roadmap auf der rechten Seite.


Hier eine aktualisierte Version der Roadmap.

  • Die Kernfunktionen sind hergestellt
  • Laden und Speichern von Projekten
  • Erstellung von Multitone-EPS-Bildern aus Schwarzweiß-Bildern mit Commandline Tool und über die GUI
  • Aufräumen, mehr Code-Kommentare, Lizenzvermerke, README
  • Veröffentlichung des Repositories
  • aktueller Stand: Öffentliches Testen und erste Produktiveinsätze
  • Farbmanagement: (Recherche und Implementierung) Um eine optimale Vorschau zu erhalten, sollen zukünftig ICC-Profile verwendet werden. Siehe auch die Option ‑sDeviceNProfile im Ghostscript Handbuch und GS9_Color_Management.pdf.
  • Bessere Stapelverarbeitung und Ausnahmeverwaltung: unterschiedliche Kurven für das gleiche Set an Farben


Screenshot des aktuellen Multitoner

silber-und-blei.com Tue, 12 Nov 2013 17:50:43 +0000 http://graphicore.de/de/archive/2013-11-12_silber-und-blei http://graphicore.de/diary/tag:graphicore.de,2013-11-12:/diary/2013111217533652826b2018ca8


Link zur Seite: Silber & Blei

Screenshot silber-und-blei.com 2 Responsive-Stufen


Das Webdesign ist von uns, genau wie die Umsetzung. Wir haben dabei auf aktuelle Technologie gesetzt und eine gediegene Seite gestaltet. Es sind schöne Webfonts im Einsatz und die Seite ist responsive. Sie passt sich an die Größe des Browserfensters an, sodass sie mit auf dem Smartphone sowie auf dem Desktop optimal lesbar bleibt.

Statisch generiert mit Hyde/Python

Auf dem Server liegt eine komplett statische Seite, nur HTML-Dateien. Der Trick: die Seite wird mit dem statischen Websitegenerator Hyde generiert und dann hochgeladen. Das hat enorme Vorteile: die Seite ist schnell, sicher, wartungsarm und trotzdem noch komfortabel bedienbar. Auf einen Newsfeed wollten wir nicht verzichten, der wird von Hyde im ATOM-Format generiert. Hyde haben wir mit einem Plugin für unsere Bildergalerien erweitert, dazu aber gleich mehr.

Die Bildergalerie

Da wir unsere Bilder besonders schön präsentieren wollen, haben wir uns mit der Bildergalerie große Mühe gegeben. Das Kernstück der Galerie ist der Albumbetrachter. Ich habe hier ein paar beachtlichen Eigenschaften des Sliders zusammengefasst.

Hier eingebettet das Album »Neuste Bilder« von Silber und Blei:


Der Albumbetrachter ist komplett responsive und stellt sich voll auf die Bildschirmgröße ein. Das könnt ihr auf einer Albumseite gerne ausprobieren. Einfach an der Größe des Browserfensters spielen und sehen, was passiert.


Es gibt verschiedene Fälle, in denen ein Album eingebunden werden kann. Einerseits die Seite des Albums selbst, andererseits kann ein Album auch immer auf anderen Seiten eingebunden werden. Zusätzlich haben die Alben eine eigene Adresse um sie als Iframe auf anderen Websites einzubetten. Sofern es der Browser unterstützt kann bei uns ein Album sogar in den Vollbildmodus versetzt werden.


Wie hier auf der Seite zu sehen ist, kann ein Album auf einer anderen Website einebettet werden. Dafür werden spezielle html Seiten generiert. Ein Album kennt die Adresse seiner Embed-Version und bietet einen kleinen Code-Generator an. Dank der großen Anpassungsfähigkeit des Sliders in Sachen Format haben wir darauf verzichtet, feste Größen vorzuschreiben. Der Autor der fremden Seite hat dadurch die Möglichkeit, das Album genau richtig einzupassen. Wir hoffen natürlich, mit dieser Funktion eine größere Reichweite zu erzielen, und würden uns sehr über Sichtungen unserer Alben in der freien Wildbahn freuen.


Jede Instanz eines Albums verwendet den gleichen Code, sei es nun im Iframe oder auf der Albumwebsite. Er ist eine Weiterentwicklung des Codes von das Auto. Magazine. Die Thumbnails und die große Ansicht der Bilder werden von der gleichen Basis betrieben. Durch Erweiterung der Objekte und unterschiedliche Konfiguration kommen die verschiedenen Erscheinungsformen zustande. Für den Wechsel in den Vollbild-Modus muss nicht einmal das Album neu initialisiert werden.


Für die Bildverwaltung haben wir ein Plugin für Hyde in Python geschrieben. Das Plugin generiert Thumbnails und die großen Bilder eines Albums beim Erstellen der Seite. Bei einem Album handelt es sich um eine Konfigurationsdatei, in der die Liste der Bilder zu finden ist. Um ein Album einzubetten reicht es, den internen Namen zu kennen: {{make_album( 'Neueste_Bilder', ['autoplay', 'no-thumbs']) }}. Das Beispiel ist dierekt von unserer Startseite entnommen.

Kurationsmodul für The ICONIST Tue, 12 Nov 2013 15:53:17 +0000 http://graphicore.de/de/archive/2013-11-12_iconic_imports http://graphicore.de/diary/tag:graphicore.de,2013-11-12:/diary/2013111216002052825094cba29

Kurationsmodul für The ICONIST

Link zur Seite: The ICONIST, obwohl was ich gemacht habe nicht direkt online gesehen werden kann.

Import und Synchronisierung

Das Programm sammelt Produktdaten von vielen verschiedenen Anbietern. Dabei kommt ein Adapter-Konzept zum Einsatz, welches aus den unterschiedlichen Anbieterformaten eine einheitliche Repräsentation in der Datenbank ablegt. Es werden hunderttausende verschiedene Produkte importiert und aktuell gehalten. Der Import wird via Cron-Job automatisch angestoßen, kann aber auch über das Webinterface gestartet werden.

Durch einen Locking-Mechanismus wird verhindert, dass die gleiche Quelle zur selben Zeit mehrfach importiert werden kann. Der Importstatus lässt sich jederzeit, auch während des laufenden Imports, ermitteln. Er kann über das Webinterface und für den Administrator mit dem Terminal abgefragt werden. Der Importer erkennt Änderungen an den einzelnen Produkten, sowie die Löschung von Produkten durch den Anbieter.

Kuration Webinterface

Screenshot Kurationsinterface

Die Redakteure wählen Produkte zur weiteren Auswahl und zur Anreicherung der Daten aus. Das Webinterface bietet zahlreiche Filter, um der großen Datenmenge Herr zu werden. Neben sehr einfachen Filteroptionen wie »Shop« oder »Preisspanne« steht eine Stichwortsuche und ein Filter für Kategorien zur Verfügung. Die von Anbieter zu Anbieter verschiedenen Kategorien können auf einem einheitlichen Kategoriebaum im Kurationsmodul abgebildet werden. Der Kategoriebaum kann im Webinterface erstellt werden, die Zuordnung von fremden Kategorien auf eigene Kategorien wird von einem Redakteur durchgeführt.

In der Datenbank kommen zwei Konzepte zum Darstellen des Kategoriebaums gleichzeitig zum Einsatz: eine Adjazenzliste, das heisst jede Kategorie kennt ihre Elternkategorie. Damit ist die Verwaltung des Baumes recht einfach umsetzbar. Ausserdem werden auch die Informationen des Nested-Set Models mit den Kategorien abgelegt. Damit ist die Abfrage des Baumes sehr performant und einfach möglich.

Für den Kurationsprozess habe ich eine kleine JavaScript Anwendung geschrieben, die, durch die Verwendung von AJAX, Ladezeiten deutlich verkürzt und die Serverprogrammierung stark vereinfacht hat. Beispielsweise erfolgt die Verwaltung des Anwendungsstatus im Client und musste daher nicht mit serverseitigen Sessions umgesetzt werden.


Der Servercode ist mit PHP 5 geschrieben. Ich habe Composer mit Symphony 2 als Framework verwendet und habe einiges selbst geschrieben. Im Webinterface kommen RequireJS und jQuery zum Einsatz, und auch eine ganze Hand voll eigener Module.

In Entwicklung: Multitoner Tool Thu, 13 Jun 2013 09:03:43 +0000 http://graphicore.de/de/archive/2013-06-13_it-is-a-multitoner http://graphicore.de/diary/tag:graphicore.de,2013-06-12:/diary/2013061209052451b839d4ca32b

In Entwicklung: Multitoner Tool


Silber & Blei wird ausschließlich mit FLOS-Software produzieren, denn es ist uns wichtig die Kontrolle über unsere Werkzeuge zu haben. Wir werden erstklassige Print-Erzeugnisse mit Freier Software herstellen. Die Konsequenz dieser Entscheidung ist, dass wir fehlende Software selbst schreiben. Ein Programm für die Herstellung von Multiplex-Bildern fehlt bislang in der freien Software-Welt. Das Multitoner Tool wird unter der GPLv3 veröffentlicht.

Was ist Multiplex

Druckt man Schwarzweißbilder im Offset mit nur einer Druckfarbe – Schwarz im Normalfall – so erscheinen die Ergebnisse stumpf und ohne Tiefe. Das liegt daran, dass ein Farbkanal im Druck nur ca. 50 verschiedene Töne wiedergeben kann, Stichwort: Gamut. Zum Vergleich: ein Schwarzeißbild am Computermonitor wird mit ca. 256 Tönen dargestellt. Um Schwarzweißbilder hochwertig zu drucken, sodass sie eine Tiefe vergleichbar mit Fotoabzügen zeigen, verwendet man mehrere Druckfarben für ein Bild. Beispielsweise Schwarz für die tiefen Farbtöne und Grau für die mittleren Farbtöne. Der Gamut des Ergebnisses kann je nach Anzahl der verwendeten Farben gesteigert werden.


Wird eine Farbe verwendet, nennt man das »Simplex«, bei zwei Farben »Duplex«, drei Farben ist »Triplex« und vier ist »Quadruplex«. Der ganze Komplex könnte als »Multiplex« zusammengefasst werden. Die analogen englischen Begriffe Monotone, Duotone, Tritone, Quadtone, Multitone sind eindeutiger, da sie nicht mehrfach belegt sind: Duplexeine Seite im Office-Drucker beidseitig bedrucken; MultiplexSperrholz, Kino mit vielen Sälen, Methode zur Signalübertragung.

Das Tool

Screenshot des aktuellen Multitoner Tools

Die Kernfunktion ist das Anlegen der zu verwendenden Druckfarben (bis zu 10), wobei es für jede Druckfarbe eine Steuerkurve gibt. Die Kurve ordnet jedem Eingabewert – von Schwarz bis Weiß – die Menge der zu druckenden Farbe – von voller Farbauftrag bis kein Farbauftrag – zu. Es gibt unterschiedliche Kurvenarten, um zwischen den Kontrollpunkten zu interpolieren: linear, kubische Splines, monoton kubische Splines.

Die Druckfarben erhalten einen Namen, damit man sie später im Prozess eindeutig identifizieren kann. Für die Vorschau am Bildschirm werden CMYK-Werte vergeben. Die Reihenfolge der Druckfarben kann verändert werden, das ist nötig, weil es Auswirkungen auf das Druckergebnis hat.

Für die Vorschau wird je Druckfarbe ein Farbstreifen abgebildet, der die Ausgabewerte nach der Anwendung der Steuerkurve darstellt. Ein weiterer Farbstreifen visualisiert die Kombination aller Farben. Es gibt auch ein Vorschaubild, auf das die Einstellungen angewendet werden.


Das Tool ist in Python geschrieben. Das GUI ist mit GTK+ umgesetzt. Die Steuerkurven werden mit SciPy und NumPy ermittelt. Das Widget zur Darstellung und Manipulation der Steuerkurven ist selbst geschrieben (als GtkDrawingArea). Farbvorschau und Vorschaubild werden mit Ghostscript gerendert. Farbmanagement soll in Zukunft durch Ghostscript erreicht werden.


Hier eine grobe Skizze, wie ich mir den weiteren Projektverlauf vorstelle:

  • aktueller Stand: Die Kernfunktionen sind hergestellt
  • Laden und Speichern von Projekten
  • Erstellung von Multitone-EPS-Bildern aus Schwarzweiß-Bildern mit Commandline Tool und über die GUI
  • Aufräumen, mehr Code-Kommentare, Lizenzvermerke, README
  • Veröffentlichung des Repositories
  • Öffentliches Testen und erste Produktiveinsätze
  • Farbmanagement: (Recherche und Implementierung) Um eine optimale Vorschau zu erhalten, sollen zukünftig ICC-Profile verwendet werden. Siehe auch die Option ‑sDeviceNProfile im Ghostscript Handbuch und GS9_Color_Management.pdf.
  • Bessere Stapelverarbeitung und Ausnahmeverwaltung: unterschiedliche Kurven für das gleiche Set an Farben
Refactoring für WeSC Mon, 10 Jun 2013 13:25:33 +0000 http://graphicore.de/de/archive/2013-06-10_refactoring-the-Superlative-Conspiracy http://graphicore.de/diary/tag:graphicore.de,2013-06-07:/diary/2013060714011251b1e7a8c1407

Refactoring für WeSC

Zusammen mit Uli Schöberl erfuhr die Seite WeSC.com eine Renovierung. Hier ist eine kurze Aufzählung von dem, was ich gemacht habe:

das Logo von WeSC
  • Ein Caching-Mechanismus des verwendeten CakePHP Frameworks wurde durch einen neuen Ansatz ergänzt. Feinere Kontrolle der Cache-Invalidierung konnte damit erreicht werden, das automatische Leeren der Caches ist deutlich verbessert.
  • Einige Funktionen wurden zusammengefasst und zentral implementiert. Ganz im Sinne von DRY.
  • Der Import von Produktdaten wurde erleichtert. Nach dem Upload der Daten wird ein im Hintergund laufender Prozess angestoßen. Der Fortschritt kann via AJAX verfolgt werden.
  • Weitere Instandhaltungsarbeiten wurden durchgeführt und neue Features umgesetzt.
Ankündigung: Silber & Blei Thu, 06 Jun 2013 18:24:39 +0000 http://graphicore.de/de/archive/2013-06-06_silber-und-blei http://graphicore.de/diary/tag:graphicore.de,2013-06-06:/diary/2013060618252451b0d41400bf3

Ankündigung: Silber & Blei

Signet: Silber und Blei.png

Anne ist Silber und ich bin Blei

Anne ist gelernte Fotografin und Diplom-Geografin. Silber ist das Metall der Fotografie. Es wird benötigt, um die lichtempfindliche Schicht der Filme herzustellen. Als Designer habe ich mich der Schrift und der Typografie verschrieben. Blei ist das Metall des Buchdrucks. Schon Johannes Gutenberg hat es verwendet, um seine Lettern zu gießen.

Gemeinsam wollen wir fabelhafte Bücher herstellen. Schöne Werke mit Liebe zum Detail und handwerklichem Anspruch. Die Inhalte wollen wir auch selbst liefern, es geht uns darum, kreativen Themen eine gute Form zu geben. Ideen haben wir schon viele und darum freuen wir uns auf die Reise und sind gespannt, was uns erwartet.

Die Wortmarke

Das Wort Silber ist eine Interpretation der Bodoni Italic. Die Buchstaben wirken edel und verspielt. Der Anstrich von »l« und »b« sowie der Endstrich (Serife) des »r« bereiten auf die kommende Schriftmischung vor.
& Blei ist gesetzt in der Wilhelm Klingspor Gotisch und liefert einen starken Kontrast. Die wunderbar historisierende Schrift macht deutlich, dass es sich hier um das Blei der Setzer dreht.

Das Signet

In unserem Signet verschmelzen die Buchstaben von Ag und Pb, den chemischen Symbolen für die Elemente Silber und Blei, zu einer Einheit. Dies ist das Herzstück unserer Arbeit: Die Verbindung von Fotografie und Buchdruck.

Ich bin wieder selbstständig Thu, 31 Jan 2013 13:58:45 +0000 http://graphicore.de/de/archive/2013-01-31_big-business http://graphicore.de/diary/tag:graphicore.de,2013-01-31:/diary/20130131135955510a78db3e0d6

Ich bin wieder selbstständig

Ich habe in den letzten zwei Jahren bei compuccino viel Erfahrung gesammelt. Unter den Kunden waren: Puma, Volkswagen, WWF, Koelnmesse (gamescom, photokina), Allianz, Die Welt, Heinz Ketchup, die Deutsche Bahn. Für die meisten habe ich kleine bis mittelgroße Projekte umgesetzt. Ich habe mehrere Facebook Anwendungen erstellt, also Anwendungen die mit Facebook interagieren und bei denen sich die Benutzer mit ihrem Facebook-Konto anmelden können. Zwei große Projekte stelle ich hier vor.

Volkswagen – Das Auto.Magazin

Screenshots der Volkswagen Das Auto.Magazin Website in 3 responsive Stufen

Compuccino hat zusammen mit Kircher Burkhardt die online Version des Volkswagen Markenmagazins umgesetzt. Das Internetmagazin ist komplett responsive gestaltet. Es kann vom Smartphone bis zum Desktop-Rechner optimal gelesen werden. Das Magazin wird in 16 Sprachen verfügbar sein.

Meine Verantwortung lag in der Umsetzung des JavaScripts, welches die komplexeren Verhaltensweisen steuert. So passen beispielsweise die Slideshow-Module je nach Bildschirmgröße ihr Aussehen und Verhalten an. Die Seite ist modular, sodass die Redaktion große Freiheit beim Erstellen und Gestalten der Artikel hat.


Das JavaScript wird mit RequireJS geladen und benutzt jQuery für DOM Interaktionen und Eventhandling. Die Module sind gut wartbar, konfigurierbar und objektorientiert umgesetzt – sie können durch Vererbung erweitert werden. So teilen zum Bespiel alle Slideshow-Module dieselbe Basis. Es gibt eine API, die es Iframes erlaubt mit dem Elterndokument reibungslos zu interagieren. Animationen werden entweder mit CSS3 transitions oder jQuery realisiert, je nach Fähigkeit des Endgerätes.

AUSSCHNITT Medienbeobachtung – Social Media Dashboard

Ausschnitt DashboardAusschnitt Dashboard Detail

Die Kunden durchstöbern und analysieren mit dem Dashboard die Daten, die von der »AUSSCHNITT Medienbeobachtung« auf Social Media Websites gesammelt wurden. Dabei formulieren sie über die Benutzeroberfläche individuelle Anfragen an die Datenbank. Meine Aufgaben waren vor allem das korrekte Abfragen und Darstellen der Daten, die Programmierung der interaktiven Benutzeroberfläche und die Entwicklung der Serversoftware.

Die Ergebnisse der Abfragen werden jeweils in einem »Widget« angezeigt. Die Widgets können neu angeordnet werden und bieten eine Detailansicht sowie weitere Filtermöglichkeiten. Einzelne Datenpunkte können auf ihre individuellen Meldungen zurückgeführt werden. Der aktuelle Zustand des Dashboards wird automatisch gespeichert und steht beim nächsten Besuch sofort wieder zur Verfügung. Hier gibts noch mehr Information …


Das JavaScript wird mit RequireJS geladen und benutzt jQuery. Das JavaScript ist objektorientiert geschrieben. Die Diagramme werden durch die Google Chart Tools dargestellt. Die einzelnen Abfragen werden via AJAX an eine REST-API gestellt. Der komplette Zustand des Dashboards wird serialisiert, als JSON auf dem Server gesichert. Serverseitig wurde das CakePHP Framework verwendet.

Die @inpressulum Schrift und ein typografisches Tattoo Sun, 02 Sep 2012 19:04:49 +0000 http://graphicore.de/de/archive/2012-09-02_piece-of-prayer http://graphicore.de/diary/tag:graphicore.de,2012-09-02:/diary/201209021920375043b185ef245

Die @inpressulum Schrift und ein typografisches Tattoo

Bild des Tattoos mit irischem Text: Ní dhoirtfear fuil neamhchiontach choíche. Ach sruthóidh fuil na n-olc mar abhainn. Leathfaidh an triúr a n-eiteoga dubhaithe agus beidh siad ina chasúr buailte Dé.

Die Schrift

Die Schrift heißt @inpressulum nach dem Twitter-Namen von Marc, der sie auf seiner Wade trägt. Sie ist eine freie Interpretation irischer Schrift. Die Schrift enthält nur die in dem Entwurf vorkommenden Zeichen. Einige der Glyphen wurden angepasst, um den horizontalen Balken des Kreuzes zu formen.

Der Inhalt

Das Tattoo zeigt einen Vers des »Familiengebets« aus dem Film Der blutige Pfad Gottes. Es ist eine Übersetzung ins Irische und bedeutet ungefähr folgendes:

»Niemals soll unschuldig Blut vergossen werden, doch das Blut der Gottlosen soll fließen in Strömen. Die Drei sollen ihre schwarzen Flügel spreizen und werden der Hammer sein der Rache Gottes.«

the tattooed calf

Die Beine von Marc nach der Anwendung des Tattoos auf seiner rechten Wade.

Introducing ufoJS Tue, 17 Jan 2012 14:02:59 +0000 http://graphicore.de/de/archive/2012-01-17_ufoJS-is-not-a-bird http://graphicore.de/diary/tag:graphicore.de,2012-01-17:/diary/201201171404524f15800404a4f

Introducing ufoJS

Fork, clone or download: ufoJS on gitHub.

The Project

I was am tired of platform bound font editors, myself using Linux almost exclusively. Thus, beeing a web-developer most of my time, I naturally liked the idea of doing a font editor in the browser. So, last year I started porting parts of the Python libraries FontTools and RoboFab to JavaScript in my spare time. With the first goal of rendering the path data of UFO — Unified Font Object .glif files in a browser. Now, most of the ported code is based around the pen APIs and I can show you something.

Look at it.

On the left side you can see the example application included from the project folder using an iframe object to include it here. It discovers the available glyphs by reading the contents.plist file of an UFO font and renders the path data of the selected .glif file using SVG. The font you can see is the DemoFont.ufo taken from the RoboFab package.


The library can be used in Gecko and Webkit browsers and in NodeJS. The latter has some external dependencies. The Browser dependent parts are yet only in the sample application but use dojo as well.


For Module loading I am using an AMD (Asyncronous Module Definition) Loader. This nicely helps to organize code, is standardized and loads the stuff fast. In the browser facing code I'm using bdload. For nodeJs r.js of the requireJS project is utilized.


Check out the Test Page. This is done using the D.O.H: Dojo Objective Harness and this is the only thing you can run with nodeJS as well.

graphicore Bitmap Font Building – updated Wed, 15 Sep 2010 16:58:24 +0000 http://graphicore.de/de/archive/2010-09-09_A-Brute-Font-Attack http://graphicore.de/diary/tag:graphicore.de,2010-08-31:/diary/201008310024084c7c4ba816ac5

graphicore Bitmap Font Building – updated

Es gibt ein Update unten auf dieser Seite.

...............................###.....##......................... ......##......................###......##......................... .....###......................##.................................. ..####..###.##..##.##.##.###..#####..###...###...####.###.##..###. .##.###..##.##.##.###..##.###.###.##..##..##.##.##.###.##.##.##.## ##...##..###..##...##..##..##.##..##..##.##....##...##.###..#####. ###.##...##...##...##..##..##.##..##..##.##....##...##.##...##.... .######..##...###.###..##.##..##..##..##.###.#.###.##..##...##..#. .....###.##....###.###.####...##..###.###.####..####...##....####. ##....##...............##......................................... ###..##................##......................................... .#####.................##.........................................

graphicore Bitmap Font

ist eine Bitmap Schriftart, die früh von Underwares Sauna bold italic swash inspiriert wurde und letztlich ihren eigenen Weg gegangen ist. Sie hat bei einer Größe von 8 px und Vielfachen davon auf dem Bildschirm scharfe Konturen. Der angedachte Anwendungsfall liegt jedoch eher in Display-Größen. Diese Schrift zu benutzen, ist ein Bekenntnis für die Kernelemente der Wahrnehmung unserer Zeit – Pixel. Auflösung ist endlich. Antialiasing ist eine Lüge!

Die Schriftart selbst ist in einem maßgeschneiderten Format definiert, wobei die Glyphen in Textdateien idiomatisch als Bitmaps gespeichert werden. Wie in der ASCII-Art (s.o.) steht ein Punkt für »kein Pixel« und die Raute markiert das Gegenteil. So, meine ich, sollte eine Bitmapschrift sein – aus Bitmaps gemacht. Die Zeichen wurden in einem einfachen Texteditor-Programm bearbeitet.

graphicore Bitmap Font Building

Die Schriften, die ich hier verfügbar mache, wurden aus einem extra dafür hergestelltem Format »Bitmap Font« (BMF) in das fertig benutzbare OpenType Format von einem Python Programm gebaut: »graphicore Bimap Font Building« (graphicoreBMFB). Durch das Einsetzen unterschiedlicher Parameter werden verschiedene Schriften generiert. Die hier veröffentlichten Schriftdateien sind also eine Demonstration der Ausgabe von graphicoreBMFB. Wenn die Möglichkeiten von graphicoreBMFB umfangreicher werden, wird schließlich auch die graphicore Bitmap Font Familie wachsen.

Dem Programm sind die Quelldaten der graphicore Bitmap Font im BMF-Format beigefügt. Das eröffnet dir folgende Möglichkeiten:

  • Du kannst deine eigenen Schriften generieren, falls du die Einstellungen, die ich gewählt habe, nicht magst.
  • Du kannst es als funktionierendes Beispiel studieren und lernen, wie du deine eigene Schriftart anfertigst.
  • Du kannst deinen eigenen Generator schreiben und die Schrift damit bauen.
  • Du kannst deine Erweiterungen der Welt zurückgeben.

Was zu tun ist

Hol dir die Schriften

Lade die Schriften herunter und hab’ viel Spaß beim Schreiben:
graphicoreBitmapFont.tar.bz2 graphicoreBitmapFont.zip
alle Downloads

Besorge den Code

Wirf ein Auge auf den Code und dann, mach alles besser und mehr – oder benutze ihn einfach: graphicoreBMFB. Er ist in Python geschrieben und benutzt das großartige FontForge-Python Modul, um Outline-Fonts herzustellen. Du wirst dieses auch brauchen.

Komm mit

Wenn du dieses Projekt magst, oder wenn die Ideen nicht aufhören, aus deinem Unterbewusstsein aufzusteigen, lass mir eine Nachricht zukommen. Falls es genug Interesse an einer Zusammenarbeit gibt, werde ich dafür eine zentrale Stelle einrichten.

Mach ernst

Falls du eine individuelle Schrift brauchst oder ein Spezialformat, welches das Lesen auf deiner Spezialmatrix spezieller Dinge ansprechend macht – ich bin dein Mann. Des Weiteren bin ich gut in Internetangelegenheiten und Drucksachen. Wenn du meine Arbeit wertschätzt, passen wir vielleicht zusammen. Mehr Informationen über mein Angebot.

Alle momentan in der Schrift enthaltenen Glyphen.

! " # $ % & ' ( ) * + , - . / 0
1 2 3 4 5 6 7 8 9 : ; < = > ? @
Q R S T U V W X Y Z [ \ ] ^ _ `
a b c d e f g h i j k l m n o p
q r s t u v w x y z { | } ~ ¡ ¢
£ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³
´ µ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã
Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã
ä å æ ç è é ê ë ì í î ï ð ñ ò ó
ô õ ö ÷ ø ù ú û ü ý þ ÿ ı

Die Stile und die Namen

Jede Familie des graphicore Bitmap Font hat eigene Charakteristiken. Weil es kein System in der Entwicklung dieser Charakteristiken gibt, habe ich entschieden, diese zu nummerieren – natürlich habe ich das Zählen bei Null begonnen. Außerdem ist es einfach, der Sammlung neue Varianten hinzuzufügen, wenn neue Generatoren auftauchen. Der Nachteil liegt darin, dass der Name nicht beschreibt, wie die Schrift aussieht.

Die Stile unterscheiden sich in ihrem Eckenradius und darin, wo die Ecken abgerundet sind. In den ersten drei Familien werden alle Ecken jedes »Pixels« gleich behandelt. Der Eckenradius der dritten Familie macht die Pixel zu Kreisen und die Familie daher zu einer »Dot-Matrix«.

In den letzteren Stilen entscheidet ein Algorithmus, wo abgerundete Ecken gezeichnet werden. Nummer Drei und Vier haben abgerundete Ecken, wo sie sein sollten. Fünf und Sechs fügen abgerundete Ecken außerhalb der Pixel hinzu, wo in der Matrix eigentlich kein Inhalt ist. Sieben und Acht haben »äußere« und »innere« abgerundete Ecken.

Das g des graphicore Bitmap Font 0 MediumDas g des graphicore Bitmap Font 1 MediumDas g des graphicore Bitmap Font 2 MediumDas g des graphicore Bitmap Font 3 MediumDas g des graphicore Bitmap Font 4 MediumDas g des graphicore Bitmap Font 5 MediumDas g des graphicore Bitmap Font 6 MediumDas g des graphicore Bitmap Font 7 MediumDas g des graphicore Bitmap Font 8 Medium

Das g des graphicore Bitmap Font 4 ThinDas g des graphicore Bitmap Font 4 Extra-LightDas g des graphicore Bitmap Font 4 LightDas g des graphicore Bitmap Font 4 BookDas g des graphicore Bitmap Font 4 RegularDas g des graphicore Bitmap Font 4 MediumDas g des graphicore Bitmap Font 4 Demi-BoldDas g des graphicore Bitmap Font 4 BoldDas g des graphicore Bitmap Font 4 HeavyDas g des graphicore Bitmap Font 4 BlackDas g des graphicore Bitmap Font 4 Extra-BlackDas g des graphicore Bitmap Font 4 Ultra-Black

Die Gewichte

Ich habe für jede Familie zwölf verschiedene Gewichte vorbereitet. Gewicht heißt, dass sich zwischen den Pixelelementen der Durchmesser unterscheidet, ohne dass sich das Zentrum bewegt.

Im Bereich von Thin bis Regular wird das zugrundeliegende Raster klar sichtbar, weil sich zwischen den Objekten eine Lücke auftut. Medium ist das Gewicht, bei dem die Elemente genau die Rasterweite treffen. Die auf Medium nachfolgenden Gewichte wachsen über die Grenzen der Rastereinheiten hinaus und machen die Schrift fett. Zum Schluß ist bei Extra-Black ein Pixel mehr als doppelt so groß wie eine Rastereinheit, und Ultra-Black geht sogar einen Schritt weiter. Die Familien mit »äußeren« abgerundeten Ecken erhalten zunächst keine Gewichte leichter als Medium, weil ich mit dem Ergebnis bis jetzt noch nicht zufrieden bin.

Um auf einem Bildschirm bei 8 px zu schreiben, sind die Regular- und Book-Schnitte am besten geeignet, denn die Pixel sind ein wenig schmaler als eine Rastereinheit und beugen daher Rundungsfehlern vor. Medium sollte ebenfalls gut funktionieren und scharf sein. Die fetteren Gewichte habe ihren Einsatzbereich in den Display-Größen.

Alles in Einem

Weil es so großartig aussieht, habe ich alle Schnitte einer Familie gemeinsam auf einen Haufen gestapelt. Die fetteren Schriften werden die Umrandungen der leichteren. Dadurch entsteht eine Alles-In-Einem-Familienübersicht.

Das g der graphicore Bitmap Font 0 FamilieDas g der graphicore Bitmap Font 1 FamilieDas g der graphicore Bitmap Font 2 FamilieDas g der graphicore Bitmap Font 3 FamilieDas g der graphicore Bitmap Font 4 FamilieDas g der graphicore Bitmap Font 5 FamilieDas g der graphicore Bitmap Font 6 FamilieDas g der graphicore Bitmap Font 7 FamilieDas g der graphicore Bitmap Font 8 Familie


Die fehlenden Schriftmuster

Manchmal wird ein einfaches Schriftmuster benötigt, hier sind zwei in verschiedenen Größen. Es gibt ein PDF für das größere Muster, dort kannst du heranzoomen und die Details studieren.



Alle Beispiele dieser Seite sind als qualitativ hochwertige PDF, SVG und PNG im »media« Ordner des Schriftpaketes verfügbar. Die Inhalte des »media« Ordners im Schriftpaket und dieser Text sind unter der Creative Commons Attribution 3.0 Unported License verfügbar.

graphicore.de ist online. Mon, 12 Jul 2010 01:23:56 +0000 http://graphicore.de/de/archive/2010-07-09_i-live-again http://graphicore.de/diary/tag:graphicore.de,2010-07-09:/diary/201007091937074c377a6340b8b

graphicore.de ist online.

Freude, Freude,

der Relaunch meiner Website ist fertig. Ich werde hier meine Arbeiten präsentieren. Ich denke, die Seite ist zu einem Großteil selbsterklärend, also werde ich mehr die nicht so offensichtlichen Dinge fokussieren.

Ich habe mich entschieden, das Archiv zu Beginn leer zu lassen. Also, nicht wundern. Denn ich möchte mir etwas Zeit nehmen, um die Projekte angemessen aufzuarbeiten. Die Seite wird sich auf natürliche Weise entwickeln. Schließlich weist sich ein Designer durch die Dokumentation seiner Werke aus – also durch sein Portfolio.

Es wird hier keine Kommentarfunktion geben. Ich freue mich aber immer über eure Emails und werde mich, falls es unvermeidbar wird, zum Nachbessern hinreißen lassen. Das Anliegen hier ist die Präsentation meiner Arbeit, nicht die Diskussion darüber. Auch möchte ich nicht moderieren müssen, was mit Kommentaren unvermeidbar wäre.

teaser for numero uno, a bitmap font by graphicore.de


Als Geschenk zum Geburtstag von graphicore.de werde ich als nächste Aktion die Pixelschrift aus dem graphicore Logo sowie den Code der sie gebaut hat – den ich gebaut habe – unter einer freien Lizenz veröffentlichen. Der Font hat momentan ca. 220 Zeichen und deckt unsere westlichen Sprachen ab. Der Code ist aber eher was für Bastler. Wiederkommen lohnt sich!

Was unter der Haube steckt,

muss ich hier auch erwähnen. Denn das Content Management System habe ich selbst gebaut. Wer für das Technische nicht zu haben ist, darf jetzt gehen.

Zend Framework LogoDojo Logo

doctrine LogoHTMLPurifier Logo


Graphicore.de validiert hier als XHTML 1.0 Strict, was mir sehr wichtig ist. Zugegeben, der Content-type ist text/html, trotzdem habe ich den Vorteil einer strikten Syntax, und es ist mir möglich, andere XML-Tools mit meinem Output zu verwenden. Ein Beispiel in diesem Fall ist der Atom-Feed.


Progressive Verbesserung: Ich habe es mir nicht nehmen lassen, einige der neuen CSS3 Eigenschaften zu nutzen. Dazu zählen Farbverläufe, Pseudoelemente und natürlich @font-fontface. Wichtig war mir dabei, dass auch in Browsern, die diese Eigenschaften nicht unterstützen, die Anzeige funktioniert. Je besser der Browser, desto besser die Anzeige, ganz einfach.

Die Seite ist mit 1000px – relativ zu unserer Bildschirmtechnologie – eher breit. Zudem laden alle Inhalte untereinander, sind also gleichzeitig zu sehen und dadurch direkt vergleichbar. Um die gestalterische Kohärenz zu wahren, habe ich ein Gestaltungs- sowie ein Grundlinienraster eingerichtet. Die Ausführung ist im Vergleich zu den verfügbaren CSS-Frameworks eher primitiv, passt dafür aber auf großzügige 130 Zeilen und genügt meinen Ansprüchen. Das Grundlinienraster funktioniert in allen modernen Browsern ;)

Hier ist es: »das Element des Grundlinienrasters«. Das Raster ist ein 24px hohes und 99px breites Bild, das ständig wiederholt wird. Als ich das CSS geschrieben habe, hatte ich das Bild gelegentlich im Hintergrund, um damit das Raster zu vergleichen. Klicke hier um es in Aktion zu sehen(JavaScript muss an sein).


Ich habe das Konzept des unobtrusive JavaScript umgesetzt. Das heißt, die Seite funktioniert ohne JavaScript. Ist aber JavaScript vorhanden, wird der Unterhaltungsfaktor größer.

Für das dynamische Vehalten der Website mit JavaScript habe ich erstmals das Dojo Toolkit verwendet. Mit Dojo lässt sich – ähnlich wie mit jQuery – geschmeidig umgehen. Ich bin mit Dojo sehr zufrieden.

graphicore cache

Eine Sache, auf die ich besonders Stolz bin, ist meine Art Ajax-Requests zu cachen. Eine Anfrage wird stets zwischen der voherigen Anfrage und dem Hauptmenü geladen. Bevor eine Anfrage abgeschickt wird, falls das Ergebnis schon geladen ist, wird direkt an diese Stelle gesprungen – der Inhalt wird nicht erneut geladen.
Falls das nicht vormals gemacht wurde, möchte ich es gerne »graphicore cache« nennen ;)


Ich werde mich hier kürzer fassen, als es die Dichte des Themas möglicherweise erfordert. Aber auch dieses Post muss zu einem Ende kommen. Ich habe mit dem Zend Framework, Doctrine ORM und HTMLPurifiers das Backend gebaut. Dabei kommen auch eineinhalb Bibliotheken, die ich zusammengeschustert habe, zum Einsatz.


Ein Grund für mich, das Backend selbst zu bauen, war die eher schlechte Unterstützung existierender Lösungen für Internationalisierung. Es ist mir möglich, alle Bereiche der Webseite zu lokalisieren, und das habe ich gemacht.

Cinecita.org Mon, 03 May 2010 13:38:23 +0000 http://graphicore.de/de/archive/2010-10-18_La_Mirada_de_Ella http://graphicore.de/diary/tag:graphicore.de,2010-10-18:/diary/201010181349214cbc5061f0048



Bildschirmfoto der the CineCita Webseite auf english den folgenden Text abbildend: CineCita is a travelling cinema and video laboratory, that will be on tour in the Central Andes in the fall of 2010. CineCita aims to improve general access to audiovisual media and to increase media literacy with rural populations in the region. During the tour, a smart travelling “cine-bus” visits villages in Ecuador, Peru and Bolivia, screening a selected programme of international short films and organizing participative video workshops for local communities.  Screenings are free of charge and held at public places. The selected programme focuses on female perspectives, giving a voice to women’s narratives, from both Europe and Latin America. In the video workshops, young women learn to shoot their own short documentary video, empowering them with audiovisual skills and inspiring them to tell their own stories. An international team of organizers accompanies the workshop participants, while documenting an excerpt of their everyday lives on video themselves. Together, screenings and workshops provide a means of an exchange and networking between the Central Andean Region and Europe.  At the conclusion of each tour stop, the young directors may present their work in form of a public screening. Their films are then sent on the road with CineCita and shown to further audiences in the region.


Content Management

Die Seite läuft mit einem speziell angefertigtem Content-Management-System. Ich habe es mit PHP5, Zend Framework, Doctrine ORM und HTMLPurifier gemacht. Cinecita.org ist der technische Vorgänger von graphicore.de.


Englisch und Spanisch waren notwendig. Die meisten fertig benutzbaren CMSe haben mittelmäßige Unterstützung für Internationalisierung. Dieses CMS war von Beginn an mit mehreren Sprachen im Hinterkopf geplant. Die Übersetzung ist das einzige was zu tun ist, falls aber eine Übersetzung fehlt, wird auf eine verfügbare zurück gegriffen. Die Anzahl der Sprachen ist technisch nicht begrenzt.


Die Seite hat einen komplett integrierten Blog mit eingebautem ATOM und RSS Newsfeed. Einige Teile der Webseite werden vom CineCita-Personal während sie auf Tour sind verändert. Sie können einen WYSIWYG-Editor benutzen und müssen nicht so viel mit HTML herumbasteln.

Eine interaktive Karte

bietet eine schnelle Übersicht des CineCita Tourplans und lässt den Benutzer durch die Tourstops navigieren. Die Ergebnisse der von CineCita abgehaltenen Workshops werden dort verfügbar sein.


transportieren Emotionen. Das müsst ihr euch auf der Life-Seite anschauen. Die Kopfleiste ist überall animiert und wenn ein Untermenü geladen wird öffnet das kleine Mädchen in der linken oberen Ecke den Vorhang. Überhaupt kein Flash wurde benutzt, wir haben ausprobiert wie weit wir ohne gehen konnten. Frontend-Tools waren jQuery, jQuery Tools und natürlich XHTML 1.0 Strict


Progressive Verbesserung gewährleistet, dass die Seite gut ohne Javascript funktioniert. Jedoch – falls Javascript läuft – werden die Inhalte zwischengespeichert und das Seitengerüst muss nicht jedes mal neu angefragt werden. Das lässt intakt, wie sich die Seite anfühlt, und verbessert die Kontrolle über den animierten Vorhang.

Bildschirmfoto der CineCita-Webseite auf spanisch. Zeigt eine Karte mit einigen Punkten die für Tourstops stehen. Über einem Tourstop ist eine Sprechblase sichtbar, die den Namen und das Datum des Tourstops anzeigt.

Die Mediendaten sind ausgegliedert


sind die Kernmedien von CineCita. Bei Workshops werden Videos von lokalen Mädchen und Frauen produziert. Die Videos werden von den guten und skalierenden Diensten von Vimeo oder YouTube ausgeliefert.

Die eingebundenen Diashows

laden Fotoalben von Googles Picasa und zeigen diese im Artikel an. Die CineCita-Leute benutzen diese Funktion häufig in ihren Blog-Artikeln um die wundervollen Plätze zu zeigen, die sie auf ihrer Reise besuchen.

Der Code ist eine stark modifizierte Version von pwi - Picasa Webalbum Integrator. Das Beste: die schwere Arbeit des massiven auslieferns von Bildern wird von Google gemacht.

Das Grafikdesign

ist von 10hoch16.de.

Teil eines Bildschirmfotos der CineCita Webseite, eine eingebundene Diashow zeigend. Ein großes Bild und darunter eine Zeile Thumbnail-Bilder.

Toytoytoys.de Thu, 05 Nov 2009 14:38:01 +0000 http://graphicore.de/de/archive/2010-10-12_serious_toys http://graphicore.de/diary/tag:graphicore.de,2010-10-12:/diary/201010121448344cb475424313c



Das Projekt

Die Realität ist im Spielzeugladen gelandet. Die gesammelten Grausamkeiten der Welt werden hier in Puppenform gepackt. Da können die ganz Kleinen spielend lernen in was für einer Welt sie leben.

Dieses Projekt weist mit einzigartigen Spielzeugen auf relevante gesellschaftliche Themen hin. Mehr Infos dazu werden direkt mit den Produkten verlinkt.

Die Technik

Die ganze Seite ist statisch, wird aber von einem PHP-Script generiert. Wir haben uns dazu entschieden, da die Seite sehr portabel sein sollte – sie musste von einem USB-Stick aus funktionieren. Gleichzeitig bleiben die meisten Vorteile einer dynamischen Lösung erhalten – man kann Änderungen schnell und zentral einpflegen.

Ich habe die Umsetzung der Webseite gemacht. Dafür habe ich PHP5, HTML, CSS und JavaScript verwendet. Die Seite validiert als XHTML 1.0 Strict.


Fast eine Milliarde Menschen weltweit leiden unter Hunger. Dabei ist die Ernährungssituation in 33 Ländern, wie z.B. in Afrika und Indien besonders prekär. Für weiterführende Informationen und die Möglichkeit dem Huger etwas entgegenzusetzen, besuchen Sie bitte: www.welthungerhilfe.de


Laut ILO (International Labour Organisation) sind weltweit über 200 Millionen Kinder zu Arbeiten, welche ihre mentale, physische und emotionale Entwicklung beeinträchtigen, gezwungen. Davon sind nahezu dreiviertel dieser Kinder in die schlimmsten Formen des Kindesmissbrauchs, wie Kinderhandel, bewaffnete Konflikte, Sklaverei und sexuelle Ausbeutung verwickelt. Für weiterführende Informationen und die Möglichkeit selbst aktiv zu werden, besuchen Sie bitte: www.unicef.de oder www.kindernothilfe.de


Abraum Tue, 05 May 2009 16:02:59 +0000 http://graphicore.de/de/archive/2010-10-06_underground_exhibition http://graphicore.de/diary/tag:graphicore.de,2010-10-06:/diary/201010061331004cac7a14de999



Die Ausstellung beschäftigte sich mit dem Thema Keller – genauer, der Entdeckung und Interpretation verschiedener Bedeutunsdimensionen von Kellerräumen – und fand im Keller statt und deshalb musste auch die Werbung in den Keller einladen. Eine waghalsige Kellertreppe visualisiert den Schritt in die Unterwelt.

Die Plakatwerbung in Marburg war zweistufig angelegt. Erst sollte die Treppe alleine prangern, wenige Tage später wurden die Informationen hinzugefügt. abraum-poster_label.png In der Zwischenzeit hatten die Leute zahlreiche Poster mitgenommen – was ich als Kompliment aufnehme.

Die Geschichte des Projektes gibt es auf dem abraum Blog.

Das Abraum Logo ist von Christina Willkomm.

komm mal runter Der Flyer hatte als Ziel die Kühlschranktüren der Marburger Studenten-WGs.


Den Bogen zwischen Keller und White Cube spannend, war der Katalog zur Austellung ein schlicht gestaltetes, quadratisches Heft. Er führte die Besucher erläuternd durch die Exponate.

Die Kulturlosen sind da Sun, 15 Feb 2009 11:00:00 +0000 http://graphicore.de/de/archive/2010-10-01_metropolis-wilderness http://graphicore.de/diary/tag:graphicore.de,2010-10-01:/diary/201010011553324ca603fcc53f3

Die Kulturlosen sind da



Die Idee ist Menschen mit einer bestimmten Aufgabe in ihre Stadt zu schicken – der Suche nach wilden Tieren. Das führt dazu, dass sie ihre Umgebung anders wahrnehmen müssen – als Lebensraum für wilde Tiere. Inspiriert wurde das von der situationistischen Praxis des Dérive, siehe dazu auch Psychogeography. Das »Handbuch der wildwachsenden Großstadtpflanzen« von Helmut Völter schlägt auch in eine ganz ähnliche Kerbe.

Das Buch ist meine Diplomarbeit im Fach Visuelle Kommunikation. Ich habe es konzipiert, geschrieben und gestaltet. Betreut wurde ich von Alexander Branczyk und Prof. Jay Rutherford. Sommersemester 2008, Fakultät Gestaltung, Bauhaus-Universität Weimar.



Das Buch führt Anfangs in generelle Taktiken des Aufspürens wilder Großstadtbewohner ein. Später werden die Eigenheiten der Tierarten selbst unter die Lupe genommen. Im hinteren Teil des Buches wird auf die Lebensräume der Stadt eingegangen. Abschließend findet man eine Artenliste aller in der Großstadt vorkommenden wilden Säugetiere.


Zusätzliche Würze

erhält die Idee der Exkursion, denn die passenden Tierbilder muss der Leser selbst knipsen. Es sind lediglich die Seiten so vorbereitet, dass Bilder auf standard 10 × 15 cm Fotopapier eingefügt werden können.

Damit das Buch – in seiner Eigenschaft als Fotosammelalbum – nicht auseinendergeht, musste Extra-Material als Platzhalter in den Buchrücken eingebracht werden. Der Buchrücken ist breit genug um alle Bilder aufzunehmen.



Es gibt jeweils passende Querverweise zwischen den Tieren und ihren Lebensräumen, damit man sich in dem Buch nicht verirrt. Ein lebender Kolumnentitel durfte auch nicht fehlen. Die Gestaltung der Seiten richtet sich nach einem Gestaltungsraster und dem Grundlinienraster.

Sondermarke zum 200. Geburtstag von Hermann Schulze-Delitzsch. Fri, 15 Jun 2007 10:00:00 +0000 http://graphicore.de/de/archive/2010-09-27_a_stamp_chance http://graphicore.de/diary/tag:graphicore.de,2010-09-27:/diary/201009272109094ca107f52b79c

Sondermarke zum 200. Geburtstag von Hermann Schulze-Delitzsch.


Die Möglichkeit der Teilnahme an einem Entwurfswettbewerb für Briefmarken bekommt man selten. Ich schickte einen ausgefallenen Entwurf, obwohl der Kunstbeirat des Finanzministeriums oft konventionelle Gestaltung favorisiert. Der Entwurf wurde nicht genommen – ich mag ihn immer noch.

Die Schrift ist FF Seria von Martin Majoor. Betreut wurde der Entwurf von Professor Jay Rutherford an der Bauhaus-Universität Weimar im Sommersemester 2007.

Turbine Fri, 15 Jun 2007 09:00:00 +0000 http://graphicore.de/de/archive/2010-09-27_turbo_art_collective http://graphicore.de/diary/tag:graphicore.de,2010-09-27:/diary/201009272105474ca1072b79bf6


Screenshot der turbine website

Die Dokumentation unserer Arbeit ist auf die-turbine.de. Dort ist es voll von spannenden Medien und coolen Ideen.

Turbine ist

Typete – typografische Tapete Sun, 15 May 2005 10:00:00 +0000 http://graphicore.de/de/archive/2010-09-23_Neo-Bourgeois_Grafitti http://graphicore.de/diary/tag:graphicore.de,2010-09-23:/diary/201009231107214c9b34e9d0274

Typete – typografische Tapete

Ein Buchstabe pro Tapetenbahn,

das würde es möglich machen in elegant-floralem Gewand an die Wände deines Heims zu schreiben. Als Illustration dieser Idee haben wir damals, 2005, dieses Bild gemacht.

Die Schrift ist Warnock Pro Regular. Die florale Füllung der Buchstaben wurde in aufwendiger Handarbeit eingepasst.

Das kleine g ist eines der schönsten Zeichen geworden.


Die unterschwellige Botschaft lässt sich am schönsten im entlaubten Zustand lesen: »argwohn«.


Im fertigen Werk tritt die Schrift zurück, ist aber dichter bewuchert als das sie umgebende gleichartige Muster. Damit ist die Tapete weniger aufdringlich – dafür wohnlicher. Der Entwurf ist im Orginal 5,58 Meter mal 2,56 Meter groß.


Die Typete war zu sehen im Rahmen des Aldi Huxley, schöne neue Warenwelt auf dem Design Mai Youngsters 2005 und auf dem Rundgang 2005 der Bauhaus-Universität Weimar.

Sie ist 2005 im Projekt »Schnellmodus International« entstanden. Wurde betreut durch Alexander Branczyk und gestaltet von Tanja Sannwald, Johanna Schiegnitz, Daniel Graf und Lasse Fister.

Die Typete nahm 2005 am Wettberb “New Walls, Please!” teil und fand sich löblich erwähnt im Katalog des Wettbewerbes wieder.