Bildkompression und -qualität wieder im Fokus

Die meisten technischen Probleme sind singulär (zum Glück gibt es „so was wie“ Erfahrung ;-) und fast so viele kommen irgendwann wieder zurück. Heute bei mir grad das Thema der Bildkompression.

Als Internet-Bandbreiten rar und die Browser bei der Unterstützung von multimedialen Inhalten (noch) lausig(er) waren, war die Diskussion um die geeignete Kompression und den maximalen Kompressionsfaktor ein sehr präsentes Thema. Heute wurde viele ein bisschen nachlässiger…

Plötzlich werden Bilder aber wieder grösser und die Bildschirme – so beispielsweise auf den iPad – gnadenlos präzise. Hier das Beispiel, welches mich zu diesem Post anregte: Die identische Nespresso-Werbung einmal in der iPad App der Sonntagszeitung und einmal in der iPad App der NZZ am Sonntag.

Screenshot aus der Sonntagszeitung (verkleinert auf 500×667, hier das Orignialbild)

2782-nespresso-werbung-ipad-sz-preview.png

Screenshot aus der NZZ am Sonntag (verkleinert auf 500×667, hier das Orignialbild)

2783-nespresso-werbung-ipad-nzzas-preview.png

Auf der Fläche hinter der Person (das von der Kreation inszenierte Kaffee-Braun ;-) sind sehr klar Artefakte zu erkennen. Die NZZ-Version nutzte bei der Kompression eine zu kleine Farbpalette und/oder die Zuordnung der fehlenden Farben in unauffällige Bereiche gelang nicht.

Aus meiner Sicht sind solche (und ähnliche) Fehler wieder häufiger anzutreffen. Insbesondere auch bei Bildern die in der Desktopversion klein gezeigt werden und sich auf der Tablet-Version vergrössern lassen.

Und nun? Qualitätskontrolle und Kenntnis der Ausgabemedien!

Für mich ist nicht wirklich erklärbar, dass die Werbeagentur solche Probleme nicht bemerkt und diese behebt. Grad bei Luxusprodukten sind solche Schnitzer mehr als unschön und ich nehme an, dass die Papier-Fahne ein dutzend Mal mit der Lupe beäugt wurde…

Zudem muss die Kreation bereits im Rahmen der Konzeption an die Ausgabekanäle denken und entweder das Konzept anpassen und im Rahmen der Produktion auf die Ausgabekanäle optimieren. Wir sind wieder einen Qualitätsschritt zurückgegangen und die Print-Welt muss sich erneut zusammenreissen und sich mit Online befassen… Und kurzfristig könnte die NZZ (resp. Comyan) ihren Werbekunden zu liebe die Kompression anpassen.

Veröffentlicht unter Design

Kultur Online erleben mit dem Theater St.Gallen

Als in St.Gallen beheimatetes Unternehmen, in welchem Kultur gross geschrieben wird, war es eine spannende Herausforderung den Relaunch der Website des Theaters St. Gallen durchzuführen.

Seit Ende August ist die neue Website live. Erste Reaktionen und viele Online-Ticketverkäufe haben gezeigt, dass der neue Webauftritt von der Kundschaft sehr positiv aufgenommen wurde. Neu bietet die Website die Möglichkeit, Online Tickets zu kaufen. Die Gestaltung präsentiert sich bewusst schlicht und zurückhaltend, um die künstlerische Leistung und die Vielfalt der Produktionen klar in den Mittelpunkt zu stellen. Die einzelnen Produktionen werden Online erlebbar.

2430-BlogMadama-thumb-500x395-2429.jpg

Die Website wurde auf Basis von Drupal und Terrific implementiert und bietet den Mitarbeitern des Theaters grösste Flexibilität. Für die Startseite und Veranstaltungen wurde eine virtuelle Bühne im Internet geschaffen, die tagesaktuell angepasst werden kann.

Im Verlauf der Zusammenarbeit wurden wir vom Theater St.Gallen zum Besuch einer Veranstaltung eingeladen. Dabei kamen wir in den Genuss einer persönlichen Backstage-Führung inkl. der Oper Madama Butterfly. Mit eigenen Augen zu sehen, was hinter der Bühne geschieht und die Menschen „privat“ zu treffen, war eine sehr eindrückliche Erfahrung.

2433-_091-thumb-500x332-2432.jpg

Wir freuen uns sehr, dass wir dieses Projekt mit dem Theater St.Gallen umsetzen durften und glauben durch diese enge Zusammenarbeit noch ein Stück kultur-affiner geworden zu sein.

In diesem Sinne freuen wir uns auf die Performance „Wir Chrononauten“, welche am Freitag in der wiedereröffneten Lokremise aufgeführt wird.

Veröffentlicht unter Design

The Man From Hollywood – CSS3 Typoanimation

Ton an. Link klicken. Zurücklehnen. Zuschauen.

TheManFromHollywood.jpLOVxjCqMqm.jpg

Ein Filmtrailer a la Saul Bass, realisiert mit Webkit-CSS3 Elementen und ‚nem Schuss Javascript – daher leider nur für Safari und Chrome.
Beeindruckend, was mit CSS3 alles machbar wird. Nicht nur Schatten, sondern auch Drehung, Ebenen, Animation, etc.

Auch wenn es so ausschaut wie in Film, dies ist kein Flash oder HTML 5-Video sondern nur HTML und CSS. (Wer’s nicht glaubt, kann sich den Source-Code laden)

Web-Design Trends. Was uns bewegt.

Kreation ob Online, Offline, Mode oder Produktentwicklung, liegt oder besser unterliegt immer den Folgen von Trends. Im Unterschied zur Mode, wo die Trends sich aus Kunst und Strassenkultur entwickeln, sind wir im digitalen Kreationsumfeld direkt verbunden mit den allerneuesten technolgischen Entwicklungen. Ein gutes Beispiel dafür ist sicher das iPhone, welches neue Massstäbe in vielen Bereichen gesetzt hat. Sei es für die Benutzerführung, das Interaktionsverhalten oder die Darstellung von Inhalten.

Konzepte für „die Freude am Benutzen“ werden von uns erwartet! Gleichzeitig verändert sich das Verhalten vom passiven Konsumenten zum aktiven Mitmacher.

Wir Namics-Kreative arbeiten in einem stets innovativen Umfeld und stellen uns den neuesten Entwicklungen. Diese neuen inspirierenden Erkenntnisse fliessen in unsere Konzepte ein, sind unsere Konzepte. Jetzt ist es an der Zeit unsere Kunden und andere „Hungrige“ an den neusten Erkenntnissen im Bereich Kreation, Design und Frontend teilhaben zu lassen.

Wir wollen unser Wissen weitergeben und Appetit machen für „Neues“. Deshalb eröffnen wir am 14.04.2010 unsere Design Kantine in Zürich mit dem brandheissen Thema Web-Typografie.

„Typografie ist nicht mehr nur in den klassischen Medien von Relevanz. Mit jeder neuen Browsergeneration bieten sich auch immer mehr Möglichkeiten in der typografischen Gestaltung. Diese werden allerdings noch viel zu selten eingesetzt obschon sie sich bereits mit den heutigen Standards (CSS, XHTML) realisieren liessen“ sagt Claus Medvesek, der die Kantine eröffnet.

Weiter spannende Themen wie Augmented Realitiy folgen.

Die Namcis-Kreativeköche freuen sich auf zahlreiche Besucher in unserer Design.Kantine.Namics.

1150-Web-Typo-thumb-500x266-1149.png

Kalender ZwanzigZehn Online für 365 Tage

Dar Namics-Kalender mit 365 Wünschen/Mottos von Mitarbeiterinnen und Mitarbeitern für jeden Tag im Jahr , ist ab sofort auf Flickr mit einem BIld pro Tag: http://www.flickr.com/photos/zwanzigzehn/ (und somit auch als RSS-Feed für iPhone und Co.). So sieht übrigens die Papier-Version davon aus:

Xmas Kalender 2010 - Namics

Die Idee für die Online-Version entsprang dem Abendessen nach Su’s Vortrag „Online Netzwerken: wenn der Dialog öffentlich wird“ des Verbandes Frauenunternehmen zusammen mit Nathalie und mir. Danach fingierte es als „Geheimprojekt“ und selbst auf Zugfahrten wurde daran gearbeitet ;-)

Als der Kalender dann verschenkt war, kamen auch die konkreteren Anfragen für eine Online-Version, so von Pixelfreund oder von Renato Mitra

Also hier ist er: http://www.flickr.com/photos/zwanzigzehn/ und „das erste Wort“ heute hatte André Schmid mit „Anhalten und einen Blick zurückwerfen“

PS: Und bezüglich der Jahresbezeichnung hat uns MG Siegler vorgestern recht gegeben ;-)

BIG BANG- Kreativitätsseminar mit Mario Pricken

Zwei Tage durfte ich nach Wien ans Kreativitätsseminar von Mario Pricken. Es gab einen Einblick in die Alchemie kreativen Denkens.
Wie denken Kreative? Diese Fähigkeit neue innovative Ideen und Lösungen zu finden hat jeder Kreative individuell gelernt und meist sind diese komplexen Abläufe unbewusst gesteuert. Den dass was wir am besten tun, machen wir meist unbewusst, wie das Telefon zu benutzen, Rad zu fahren oder diesen Text zu lesen. Wir brauchen darüber nicht mehr nachzudenken. Gleiches lässt sich laut Mario Pricken bei Kreativen beobachten, sie haben meist kein Bewusstsein darüber, wie konkret sie eine grossartige Idee entwickeln.

Im Seminar wurden uns verschiedene Techniken vorgestellt wie man Kreativsessionen abhält. Die eigenen Mittel und Denkwerkzeuge in der täglichen Praxis konnten so erweitert werden. Es gibt keine einzig richtige Art und Weise, kreativ zu sein. Es ist ein lebendiger Prozess mit einer Vielzahl an Strategien, die je nach Kontext und Individuum zu kreativen Ergebnissen führen. Kreativ zu sein, bedeutet Vielfalt, weshalb es das Ziel ist, neue Wahlmöglichkeiten hinzuzufügen, um die Flexibilität zu erhöhen. Einzig theoretisches Wissen nützt jedoch nichts, die Kreativität zu steigern. Man muss die Methoden ausprobieren und experimentieren in der beruflichen Praxis.

Auf welche Weise handhabt man all die auftauchenden Informationen und Ideen, damit man am Ende garantiert die besten Lösungen erhält? Anhand eines klar strukturierten Prozesses des Ideenmanagements lernten wir Kursteilnehmer wie man vom Briefing zu der BIG BANG IDEA kommt. Dieser Prozess ist in klaren Bereichen wie Zielformulierung, Ideenfindung, Ideenentwicklung und Umsetzung unterteilt. In Zweier- und Dreierteams arbeiteten wir anhand von Praxisbeispielen den Kreativitätsprozess durch- mit Erfolg. Um mit den Methoden von Mario Pricken zu arbeiten, ist es sinnvoll, dass alle Teammitglieder über den gleichen Wissensstand verfügen und Bereitschaft mitbringen, die Spielregeln einzuhalten. Aktives Ideenmanagement geht oft weit über Kreativmeetings hinaus und beeinflusst Bereiche wie Kundenkontakt, Briefing und die Zusammenarbeit einzelner Bereiche.

Buch „Kribbeln im Kopf“ von Mario Pricken:

i-cf196f220760895a8bb7dd1fc311bae8-kribbeln_innen-thumb.jpg

Veröffentlicht unter Design

Business. Photos. Namics.

Ein Thema um welches man in den letzten Tagen bei Namics nicht herumgekommen ist, war ganz bestimmt der CD Relaunch. Die neue Wortmarke ist nahezu Omnipräsent. Zu einem guten Relaunch gehören auch neue Businessphotos. Und über die Entstehung genau dieser Photos möchte ich heute schreiben.

Während der Umsetzung des neuen Designs ist der Wunsch entstanden, von allen Mitarbeitern die nach Aussen sichtbar sind (Bücher, Fachartikel, Referate, Interviews), neue Businessfotos machen zu lassen. Dabei ist Jana Nobel auf mich zugekommen und wollte wissen ob ich denn Interesse hätte diesen Job zu übernehmen. Auch wenn ich meinen Job als Software Engineer bei Namics liebe, habe ich ohne zu zögern zugesagt. Fotografieren gibt mir den visuell-kreativen Ausgleich zu meiner täglichen Arbeit.

Man stelle sich eine Firma mit zehn Mitarbeitern und einem Standort vor, die ihre neue Webseite lancieren. Dafür braucht man selbstverständlich hübsche Fotos, damit die Kunden auch sehen mit wem Sie es zu tun haben. Für einen Fotografen ist dies eigentlich keine Herausforderung. Ein gemeinsamer Termin ist schnell gefunden und die Fotos befinden sich innert einem Tag im Kasten.

Bei Namics ist die ganze Sache schon etwas verzwickter. Bei fast 50 zu fotografierenden Mitarbeitern und sechs verschiedenen Standorten in Deutschland und der Schweiz kann man nicht einfach mal schnell einen Termin finden der für alle passt. Da ist Planung und Improvisation angesagt.

Es galt als erstes ein Konzept zu erarbeiten, welches wir an allen Standorten ohne grösseren Aufwand durchziehen konnten. Ein Konzept, dass auch von anderen internen Mitarbeitern umgesetzt werden kann (Reproduzierbarkeit). Jana und ich haben uns also zusammengesetzt und gemeinsam innert kürzester Zeit das Konzept auf die Beine gestellt. Um das Konzept visuell unterstützen zu können haben wir uns Jürg Stuker geschnappt (der sich bereitwillig zur Verfügung gestellt hat) und die ersten Testfotos geschossen. Philipp Lämmlin war begeistert und wir konnten loslegen.

Zum Konzept:
Ausgangslage:
– PR-Fotos die nicht zu Steif und Stier sind, aber trotzdem noch eine seriöse Botschaft transportieren.
– Da alles sehr kurzfristig geplant ist, müssen wir ohne grosse Aufwände die Fotos produzieren können.

Konzept:
– Es wird mit Tageslicht fotografiert.
– Augenkontakt mit der Kamera. Freundlich aber nicht überschwänglich.
– Die Persönlichkeit jedes portraitierten soll erkennbar sein.
– Ein persönliches Gadget oder „Objekt“ soll auf dem Foto erkennbar sein .
– Wir wollen keine flachen Portraits! der Raum/die Tiefe soll erkennbar sein.
– Hände sind immer sichtbar. Ganz, oder angeschnitten.
– drei mögliche Posen haben wir uns vorgestellt (es werden alle Posen fotografiert, man wählt danach einfach das beste aus):
* Sitzend auf einem Hocker / Sessel.
* Sitzend an der Bar oder ähnlichen Konstrukten.
* Stehend angelehnt (Wand, Sideboard, Tisch, Stehbar).

Über mehrere Wochen entstanden dann die einzelnen Portraits. Manchmal sogar von zehn Personen an einem Tag. Es hat mir unheimlich viel Spass gemacht all die Namics’ler abzulichten. Ich durfte so selbst erfahren was Namics ist – Eine bunte Mischung von verschiedensten Charakteren die Freude an der Arbeit und keine Angst vor Fotografen haben.

Dabei sind viele wunderbare Fotos entstanden die von unserer Kreativabteilung ausgewählt und bearbeitet wurden.

i-a2999ee6a1c8b7bdacd69cc86d5b1e11-namics_business_photos_2009.jpg

Das Foto kann in Originalgrösse (4784px x 7380px ,ca. 14MB) auf flickr betrachtet werden.

Ich bedanke mich ganz herzlich bei allen Portraitierten für das mehr oder weniger freiwillige hinhalten, Jana Nobel für den stetigen Zuspruch, Alex Huldi und Patrick Stürcken für die Bearbeitung der Bilder, Philipp Lämmlin für das „Go!“, Susanne Franke und Nina Studer für die Hilfe bei der Organisation, Chris Kipper und Mandy Ehlers für die Fotos von München und Hamburg und Christoph Walter dafür, dass er mich für ein paar Tage hat entbehren können.

Veröffentlicht unter Design

Comics und die Konzeption von Websites – passt das zusammen?

Vor ein paar Monaten haben wir selbst die ersten positiven Erfahrungen gemacht – gerade hab ich ein interessantes Interview (mit Kevin Cheng – bekannt durch OK/Cancel) dazu gelesen – welches ich kurz zusammenfassen möchte:

  • Comics eignen sich eigentlich auf jeder Unternehmensebene zum besseren Verständnis der Ziele, Funktionen und besonders Benutzerinteraktionen einer Website – die Version für den CEO sollte jedoch nicht gerade die schlampigste sein
  • Ein Comics liest sich noch einfacher als eine 10-seitige Spezifikation und ist dabei meist noch besser durchdacht – weil immer der Benutzer (als Darsteller) im Zentrum steht. Was aber zählt ist: Jeder schaut sich deshalb den Comic an und legt Ihn nicht zuerst zur Seite – so dass alle mit einer sehr ähnlichen Vorstellung vom Ergebnis mit der Arbeit beginnen
  • Der beste Zeitpunkt ist zwischen Brainstorming und den ersten Wireframes
  • Möglichst keine Erklärungen unter die Bilder stellen – die Personen sollen in den Sprechblasen Ziele und Ideen formulieren
  • 6 bis 10 Panels sollten ausreichen die wichtigsten Dinge zu vermitteln – bei mehr läuft man Gefahr sich in Details zu verlieren
  • Man muss nicht auf alles hauen, bloss weil man einen Hammer in der Hand hat… Besonders geeignete Projekte sind neue Features, Web-Applikationen, Produkt-Ideen oder Prozesse. Ausserdem kann mit diesen Comic internes Marketing unterstützt werden.

Eine Sammlung von Ressourcen und Tools hat Kevin auf seinem Blog zusammengestellt.

Wie gesagt haben wir sehr positives Feedback vom Kunden bekommen und dies wird bestätigt. Und natürlich hilft ein kleiner Kniff beim Verkaufen: Es handelt sich hier nicht um Comics – sondern “Conceptual Storyboards”…

Und wer möchte kann auf Boxes and Arrows thematisch noch weiterlesen.

Veröffentlicht unter Design

MAKE: Blog: HOW TO – Improve your photography with classical art

via HOW TO – Improve your photography with classical art / MAKE: Blog, kottke.org and unfocusedbrain.com

i-320d6695f4190c91f8bfd04eeb51daf7-alte_meister_farben.jpg

Man nehme ein (scheinbar) beliebiges Foto und ein Kunstwerk dessen Farbgebung einem besonders gut gefällt.
Dann braucht es noch Photoshop CS oder besser, denn seit dieser Version gibt es den Befehl „Match color…“ oder in der deutschen Version „Gleiche Farbe…“ (zu finden im Menü Bild: Anpassen).

Ein toller Tipp, den ich natürlich gleich mal ausprobieren muss.

Das Original:

i-345803f69349446b2fe1ef92c4900e26-thomas_alte_meister__original-tm.jpg

i-cac6a3f5cddfde82ce7383d03901b69a-thomas_alte_meister_1-tm.jpg i-f05fb2f8d9df31c620610325c3a257fe-thomas_alte_meister_2-tm.jpg

i-4bc75bef6859c660d990d07ab959c782-thomas_alte_meister__3-tm.jpg

i-dffc63d24f5366a30456ab238d639dfb-thomas_alte_meister_4-tm.jpg

Fazit: Offensichtlich ist halt doch nicht jedes x-beliebige Foto mit jedem Kunstwerk „kompatibel“. Trotzdem ist das Ergebnis mit Hockney sehr schön.
Je ähnlicher sich Original und Kunstwerk (zumindest farblich) sind, desto besser das Ergebnis. Wie sieht’s bei Euch aus?

Veröffentlicht unter Design

Wo liegt der Quell des Web 2.0 Kults?

Yet another post about Web 2.0 – und dann soll’s auch noch Kult sein, obwohl schon längst Mainstream…

Egal, jeder Kult hat auch seine visuellen Erkennungsmerkmale – und da sind sie nun: die „neuen“ Designs.

Erik schreib nun auch darüber und zeigt eine fiktive Auswahl von denen ein paar (mit sehr kritischen Kommentaren) von Be a design group sind…
Wem das noch nicht genügt, der Suche mal bei flickr…
Und wer noch weiter in der Zeit zurück geht findet eine (damalige) Konkurrenzanalyse von Jon Hicks.
Sein damaliges Logo hatte erstaunliche Ähnlichkeit mit den Dargestellten.

Letzte Bestätigung, dass es hier einen einheitlichen Trend gibt holt man sich bei http://web2logo.com/

Aber wo liegt der Ursprung, die Quelle – wer ist das Original?
Flickr? Nein! Selbstverständlich in Zürich – oder besser gesagt Züri. Als Deutscher (Schwob) musste ich 1996 lernen, dass man niemals zu einem Menschen aus Zürich „Z ü r i c h e r“ sagt…
Sollte es Dir mal passieren: Nimm die Beine in die Hand!
i-f2e49ea5a09c0be8289ade685e5c967d-zuerchr.jpg
Und das ist schon seit Jahrhunderten so. :-D

Q.E.D.

Veröffentlicht unter Design