640x480.de

Beiträge aus dem Was-mit-Medien-Alltag

Dislike

Letzten Sonntag in der Max-Liebermann-Straße in Weimar: am Wegesrand steht ein Karton…

2 Bilder. Klicken Sie auf ein Bild um die Diaschau zu starten.

Da steht ja was. Das  kenn’ ich doch.

Darin liegt das Architektenhandbuch der AKT – vor ziemlich genau drei Jahren von uns gesetzt. Offensichtlich wollten die Besitzer es nicht mehr, fanden es aber auch zu schade zum Wegwerfen.

Da lag es einsam in der Kiste und wartete.

„Gut, dass man Websites nicht wegwerfen kann“, dachte ich. Obwohl – wäre eigentlich cool, wenn man als Leser resp. Besucher Websites, die man nicht (mehr) braucht, „wegwerfen“ könnte. Es gibt immer nur Likes aber keine Dislikes. Das ist doch blöd.

04.10.2012 | Noch keine Kommentare

Betriebsblind

Wie wir eine PC-Tastaturbelegung zeichneten.

Tastaturbelegung Mac
Tastaturbelegung Mac • Zeichnung: Birgit Kohlhaas

Wir hatten den Auftrag für ein Programmheft mit Weiterbildungsveranstaltungen für Sektretärinnen. Unsere Idee: auf einer Umschlagklappe bringen wir eine Tastaturbelegung unter, damit die schönen typografischen Anführungszeichen, Ellipsen, Apostrophen usw. ihren Weg in Briefe, Anschreiben, Informationsblätter u.v.a.m. finden. Gesagt – getan und erst mal mit dem Naheliegenden angefangen: der gemeinen Mac-Tastatur. Als diese halbwegs fertig war, stand die PC-Tastatur auf dem Programm. Die Recherche auf einem unserer Alt-Rechner ergab, dass da nix war. Also Wikipedia angeworfen mit dem Ergebnis, dass da wirklich nichts ist, was nicht schon auf der Tastatur selbst zu sehen ist. Sonderzeichen werden am PC tatsächlich nach wie vor via Einfügen > Sonderzeichen oder über die Kombi Alt-Taste + Ziffern erzeugt. Die einfachsten Sachen geraten in Vergessenheit, wenn man immer nur mit einem System arbeitet. Also haben wir die Idee verworfen und dafür jetzt die fast fertige Illustrator-Datei einer Mac-Tastatur auf der Festplatte.

24.09.2012 | 1 Kommentar

Murphy’s Law

Herausforderung im Textsatz

Murphy’s Law
Murphy’s Law • Bildschirmfoto: Birgit Kohlhaas

Fünf mal „Wettbewerb“ in fünf aufeinanderfolgenden Zeilen. So was passiert wirklich nicht oft – ich habe den Rohtext in den Textrahmen eingefügt und das kam raus. 

19.09.2012 | 2 Kommentare

Abgelehnt

Für Informationsmaterial zu einer Veranstaltung (Faltkarte, Anzeigen, Werbebanner) haben wir eine Illustration entworfen, die die Thematiken „Diskussion“, „Neue Perspektiven“, „Neue Strukturen entwickeln“ unterlegen sollte. Unsere Auftraggeber entschieden sich für die Alternativvariante, was uns die Möglichkeit gibt, das Motiv hier im Entwurfsstadium darzustellen.

Ausgangspunkt der Idee ist der Stuhl auf dem man bei Tagungen üblicherweise sitzt. Dieser Stuhl bildet durch Wiederholung und Drehung ein escherhaftes Muster, welches sich auf unterschiedliche Weise lesen lässt. Durch die gegenseite Verdrehung der Stühle entstehen „neue Perspektiven“. Der Stuhlstapel wird zur Architektur. 

Illustration: Stuhlmotiv
Illustration: Stuhlmotiv
Illustration: Stuhlmotiv
Illustration: Stuhlmotiv
Illustration: Stuhlmotiv
Illustration: Stuhlmotiv

17.09.2012 | Noch keine Kommentare

Die 640x480-Headerillustration

SVG im dekorativen Einsatz.

Für den Kopf unserer neuen Seite wollte ich SVG mal als Deko-Element anstatt eines Fotos einsetzen. Als erste Idee geisterte mir der Schriftzug aufgelöst in vereinfachte transparente, sich überlagernde Flächen durch den Kopf. 

Skizzen zur 640x480 Headerillustration
Skizzen zur 640x480 Headerillustration

Ein paar Stunden, mehrere Skizzen und Skripte später und mit Arthurs Hilfe verdichtete sich die Idee zu einem Raster von Dreiecken, die mit Zufallsfarben gefüllt werden. Es ging um den Bezug zu den Pixeln, die ja Grundlage der Auflösung 640x480 sind.

Das spannendste war der Prozess: angefangen haben wir mit dem händischen zeichnen erster Dreiecke (also Eintippen des SVG-Quelltextes Zeile für Zeiel). Da die Grafik aus immer der gleichen Form in vier unterschiedlichen Drehungen besteht haben wir dann die Dreiecke als Symbole definiert, die wir dann im Koordinatensystem der Fläche platzieren konnten. Auch das konnten wir weiter automatisieren, so dass zum Schluss nur noch ein array aus Koordinaten, Dreieckstyp und Farbe übrig blieb. Die Farbe wird mit einer Funktion für jedes Dreieck zufällig ermittelt. Dabei kann eine Farbstimmung (red, green, blue, cyan, magenta, yellow, mono) angegeben werden, die wir nach mehreren Experimenten der Reihe nach auf die einzelnen Zeichen des Schriftzuges verteilt haben. Mit jedem Seitenaufruf entsteht so eine neu eingefärbte Grafik.

Die Grafik im Einsatz als Banner:

Banner auf kohlhaas-kohlhaas.de, Farbschema grau
Banner auf kohlhaas-kohlhaas.de, Farbschema grau
Banner auf atelier-virtual.de, Farbschema gelb
Banner auf atelier-virtual.de, Farbschema gelb
Banner auf netz-meister.de, Farbschema rot
Banner auf netz-meister.de, Farbschema rot

Letztendlich musste die Grafik noch im Layout eingepasst werden und zwar so, dass sie sich im flexiblen Layout anpasst. Das Ergebnis gefällt uns schon sehr gut und lässt viel Raum für weitere Spielereien. So lassen sich zum Beispiel die Symbole der Dreiecke nun einfach durch Kreise austauschen und die Grafik sieht vollkommen anders aus.

Variante der Kopfgrafik mit Punkten statt Dreiecken als Symbol
Variante der Kopfgrafik mit Punkten statt Dreiecken als Symbol

In der nächsten Stufe wollen wir die Interaktivität noch erhöhen und noch eine spielerische Komponente einbauen – dazu später mehr.

11.09.2012 | Noch keine Kommentare

Mehr Infografik

Je mehr ich mich mit SVG-Grafiken beschäftige, desto mehr Spaß macht es und es kommen mir immer neue Ideen für weitere Einsatzzwecke. Heute: SVG-Diagramm statt Tabelle.

Für die Analyse der Auslastung von Datenbanktabellen bzw. der Übersicht über das Vorhandensein der Tabellen in unterschiedlichen Installationen hatten wir vor einiger Zeit ein Skript geschrieben, welches diese Informationen live einsammelt und als Tabelle ausgibt.

Datentabelle Akira-Datenbanken, Tabellen, Inhalte
Datentabelle Akira-Datenbanken, Tabellen, Inhalte

Dieser Tabelle mangelte es erheblich an Charme und Übersichtlichkeit. Nach den letzten Spielereien mit SVG im Zusammenhang mit der Staffellaufauswertung habe ich nun diese Tabelle durch ein Diagramm ersetzt, welches die gleichen Informationen garstellt, nun aber in viel eingängigerer Form.

SVG-Diagramm: Akira-Datenbanken, Tabellen, Inhalte
SVG-Diagramm: Akira-Datenbanken, Tabellen, Inhalte

Ich habe jetzt keine Anstrengungen in eine Neu-Interpretation des strukturellen Aufbaus gesteckt. Andere Diagrammformen wären eventuell platzsparender oder noch übersichtlicher. Insofern lässt sich meine Vorgehensweise mit dem CSS-Syling der Tabelle vergleichen. Würde man die Tabelle richtig schick stylen und z.B. den Wertefeldern je nach Inhaltsmenge noch unterschiedliche Farbschattierungen geben, dann würde man eine schicke Tabelle gegen ein schickes Diagramm vergleichen, was weniger unfair wäre. Ein möglicher Vorteil der der SVG-Lösung: Wird die Grafik, Auswertung, das Diagramm auch für andere Zwecke benötigt, so lässt sich die SVG auch im Illustrator oder Inkscape öffnen und in Drucksachen weiterverarbeiten. Das ist bei der schicken Tabelle nur über das Bildschirmfoto und dann mit den Nachteilen des Pixelbildes möglich.

30.08.2012 | 2 Kommentare