640x480.de

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

The State of The Internet

Unter diesem Titel veröffentlichte Business Insider eine Sammlung von Folien zum Stand und den Prognosen rund um unseren Lieblingsspielplatz.

The future is mobile, The State Of The Internet, Alex Cocotas, Business Insider
The future is mobile, The State Of The Internet, Alex Cocotas, Business Insider • http://www.businessinsider.com/state-of-internet-slides-2012-10

Es werden alle nur erdenklichen Bereiche behandelt: „Internet vs. Old Media“, „Werbemarkt“, „Mit welchen Geräten geht man ins Netz?“, „Wer macht die Geschäfte“, usw.

Für uns als Webdeveloper sind natürlich die Fragen der Nutzung sehr interessant. Und da ist die Prognose eindeutig. Letztendlich spiegelt es auch nur das wider, was wir selbst jeden Tag erleben: Es gibt eine „Arbeitszeit im Internet“ am Desktop und dann gibt es eine - immer länger werdende - Zeit, die man per mobilem Gerät, smart phone oder tablet ebenfalls im Netz ist. Und beide Zeiten vermischen sich immer mehr, da man ja zum Beispiel auf dem Weg zum Geschäftstermin nochmal die Newsfeeds durchsieht, Mails checked oder ähnliches. 

Insofern, um wieder auf den Entwickleraspekt zurückzukommen, fallen immer mehr diejenigen Websites auf, die nicht für diese Geräte optimiert sind. Uns wenn man die ausgewählte Grafik betrachtet, dann macht es Sinn, Websites nicht nur für den parallelen Einsatz auf mobilen Geräten zu optimieren, sondern sie von Grund auf, als mobile Websites zu entwickeln, die auch auf dem großen Bildschirm eine gute Figur machen. Das Konzept heißt „mobile first“ und wie bei allen anderen Trends der letzten Jahre wird es auch hier eine Weile dauern, bis sich ein Gefühl für das richtige Maß und die geeignetsten Gestaltungsmittel einfindet.

Links

04.10.2012 | 3 Kommentare

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