Typekit ist gestartet – und seit gestern für alle offen. Mit Typekit lassen sich auf sehr einfache Art und Weise Schriften in Websites einbinden.

Wie funktioniert Typekit?

Genutzt wird das @font-face-Attribut – wobei Typekit gleich auch die Konvertierung der Schriftdateien für die unterschiedlichen Browser und vor allem das lizensrechtliche Problem bei der Einbindung von Fonts löst!

Unterstützt werden alle gängigen Browser (Firefox, InternetExplorer, Safari). Ausnahme sind Opera & Google Chrome.

Die Einbindung der Fonts über Typekit ist sehr einfach & komfortabel umgesetzt: In die eigene Website, in den Blog, etc. wird ein JavaScript-Code eingefügt. Der Rest lässt sich komplett über die übersichtlich gestaltete Oberfläche von Typekit einstellen.

Man wählt die gewünschten Schriften (die Anzahl ist je nach Tarif beschränkt) weist diesen die entsprechenden CSS-Selektoren zu. Und das war’s. Auf der Website werden die zugehörigen Texte automatisch durch den gewählten Font ersetzt. Für Browser, die @font-face nicht unterstützen wird eine Fallback-Angabe mit gängigen Systemschriften gemacht. Auch das ist bequem über eine Eingabemaske in Typekit möglich.

Meine bisherigen Tests mit Typekit haben einen rundum positiven Eindruck hinterlassen.

Was man kritisieren könnte:

Im Grunde wird mit Typekit technisch an einem im Kern nicht-technischen Problem gearbeitet: Der Lizensfrage. Besser wären einfache & unkomplizierte Lizensierungen durch die Foundries, welche die direkte Verwendung der Schriften per @font-face ohne Rechtsunsicherheiten und Aufwand beim Kauf ermöglichen und die Schriften als Web-Paket in allen benötigten Formaten bereitstellen. Bisher ist hier aber – bis auf Ausnahmen – eher eine Blockade-Haltung und das Festhalten an alten Rechtemodellen status quo.

Es besteht eine gewisse Abhängigkeit vom Anbieter und dessen technischer Infrastruktur, da die Schriften nicht auf dem eigenen System gehostet werden. – Nicht ganz so tragisch, da bei Ausfällen immer noch die Default-Stylesheet-Angaben greifen und die Inhalte nach wie vor in definierter Form sichtbar sind. Aber natürlich trotzdem ein Punkt.

Derzeit ist die Schriftauswahl einigermaßen begrenzt und wichtige Schriften großer Foundries fehlen (noch).

Typekit = das neue iTunes?

Bei der aktuellen Situation auf dem Schriftenmarkt ist Typekit vielleicht genau die richtige Lösung und könnte zum iTunes für Schrifteinbindung werden. Einfacher, schneller “Kauf”. Geklärte Rechte. Günstiges Preismodell. Volle Übersicht über legal verwendbare Schriften. Einfache & unkomplizierte Handhabung.

Dank der hohen Browserkompatibilität, dem Verzicht auf Krücken wie Einbettung über Flash, etc. auf jeden Fall eine gute Alternative zu den gängigen Tools (sIFR, Cufón) um die typographischen Möglichkeiten im Web deutlich zu erweitern.

Zur Typekit-Website

Weitere Empfehlungen:

1. Gefaltetes Papier
2. Reise in die Vergangenheit
3. Webdesign: Maßgeschneidert vs. Templates
4. Relaunch: SinnerSchrader

Ich bin gerade zurück vom Usability Kongress Frankfurt (eigentlich in Neu-Isenburg Gravenbruch).

Fazit: Eine Veranstaltung mit interessanten, gut gemischten Themen und teils sehr informativen Vorträgen rund um Usabilty/User-Experience. Leider konnte ich nur heute dort sein und habe den ersten Teil der Konferenz verpasst.

Etwas schwierig war der Start des heutigen Konferenztages. Der polemische Initialvortrag zum Thema Usabilty & Social-Media von Frank Puscher hat zunächst den Eindruck hinterlassen eventuell auf einer Veranstaltung für Gatekeeper, die auf Biegen und Brechen an alten Modellen und der verzweifelten Sicherung des Status-Quo im Netz festhalten – ob sinnvoll oder nicht – gelandet zu sein.

Das konnte durch die Folgenden, teils sehr intelligenten und informativen Vorträge zu den unterschiedlichsten Facetten von Usability zum Glück schnell widerlegt werden.

Nichtsdestotrotz ein paar Worte zum Social-Media-Vortrag. Viele der Argumente waren einfach zu haarsträubend um unkommentiert zu bleiben. Hauptthesen: Social-Media ist für die meisten Menschen irrelevant. Social-Media produziert haufenweise Irrelevanz und bietet daher – ausser den Nerds – keinen Nutzen. Social-Media-Angebote haben eine miese Usability (Social-Media vs. Usability).
Unerwähnt blieb, dass Social-Media in vielen Bereichen (Facebook, YouTube, Wikipidia, …) schon tief in die Welt von “Normalusern” Einzug gehalten hat. Die sind sich sicher nicht explizit bewusst, dass sie “Social-Media” nutzen – was aber auch völlig egal ist und nichts daran ändert, dass die Angebote für sie durchaus persönliche Relevanz haben! Das Argument hat mich vor allem deshalb so massiv gestört, weil einer der Punkte, der an Social-Media begeistert, genau der ist, dass man über Dienste wie flickr, delicious, twitter, … und die Verknüpfung zu Menschen mit ähnlichen Interessen, Geschmack, Ideen & Ansichten extrem schnell für sich sehr relevanten Content frei Haus geliefert bekommt, den man über Google & Co. niemals entdecken würde. Sei es tolle, inspirierende Bilder, interessante Links, schöne Produkte oder genau die Informationen zu Themen, die einen selbst unter den Nägeln brennen! Diese Aspekte wurden beim Vortrag wohl vergessen. Nicht nachvollziehbar war auch die Sache mit “Usability vs. Social-Media”. Sowohl bei “klassischen” Webangeboten, wie auch Social-Media-Sites, gibt es hervorragende und weniger hervorragende Beispiele. Ich kann nicht erkennen, wie Social-Media automatisch zu schlechter Usability führen soll. Scheint eine komische Schlussfolgerung zu sein.

Zurück zu den restlichen Vorträgen.

Besonders informativ und horizonterweiternd fand ich die Sessions zu Usability für spezielle Zielgruppen – hauptsächlich Senioren & Kinder. Der Vortrag von Helma Töpper (slash/work) gab Einblick in ein Thema “Wearables” (Notrufsysteme, oder Systeme, die Vitalfunktionen überwachen und direkt am Körper getragen werden) das ich vorher überhaupt nicht auf dem Schirm hatte. Ein Themenfeld, in dem Usability & Design aber einen sehr nutzbringenden Beitrag leisten kann! Etwas, das es sich lohnt weiter zu denken. Auch die Testergebnisse zum Thema Kinder & Webnutzung im Vortrag von Erik Winterberg (SynthiCon AG) waren aufschlussreich. Vieles (wie nutzen Kinder in unterschiedlichen Altersgruppen das Netz) hätte man anders eingeschätzt.

Sehr gut waren auch die Sessions “Usability & Brand Experience” (Brannen Usable Brands) und “Usability als emotionale Inszenierung” (Interactive Tools; Redesign mobile.de, immobilienscout24.de, ARD Hauptstadtstudio), die gezeigt haben, dass gute Usability und emotionale und markengerechtes Design zusammengehören um die User-Experience rund zu machen. Oft wird beides ja recht platt als gegenseitiger Feind angesehen. Eine Einstellung, die ich auch nicht teilen kann.

Abgerundet wurde der Tag durch den guten, fundierten Vortrag von Gunnar Ulle (Teamleiter User Experience, neckermann.de) zum Thema Nutzermotive beim Online-Shopping.

Auf jeden Fall eine gute Konferenz – die einige interessante Gedanken losgetreten hat. Ein paar werden hier sicher demnächst noch zu lesen sein.

Weitere Empfehlungen:

1. Design Blast 2010 – Der Rückblick
2. Stammtisch: eatdrinkmanwoman, Frankfurt
3. Stammtisch: Hopper’s, Frankfurt
4. Webdesign: Maßgeschneidert vs. Templates
5. Stammtisch: Die rote Bar, Frankfurt

Design bedeutet nicht Schönschminken. Das sollte eigentlich klar sein. Ist es aber leider nicht.

Design hat in Deutschland eher geringen Stellenwert. Es wird mit unnötigem Luxus, Schnickschnack, etc. assoziert. Nicht mit etwas, dass das Leben bereichert – und im besten Fall einfacher macht.

Das Problem betrifft allerdings leider nicht nur die Allgemeinheit, sondern auch das professionellere Umfeld.

“Design ist optischer Firlefanz. Designer spinnen. Designer legen Wert auf schöne Optik. Und sonst Nichts. Designer gestalten Sachen, die sich nicht umsetzen lassen. Design ist im Grunde nicht so wichtig.”

Was dabei so gut wie immer ausser acht gelassen wird: Gutes Design verfolgt ein Ziel! Es sucht nach der optischen Lösung, die den Zweck eines Produktes oder Projekts am besten erfüllt.

Charles Eames hat das so ausgedrückt:

“Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.”

Bezogen auf Design für Online-Medien – in diesem Fall das Fachgebiet, auf dem ich mich bewege – heißt das, dass der grundlegende Aufbau, die Wahl von Farbigkeit, Schrift, Bildmaterial, die Anordnung & Gruppierung von Elementen, usw., usw. auf das Ziel ausgerichtet ist einen Webauftritt oder eine Online-Applikation einfach & intuitiv bedienbar zu machen und das zurecht- und wohlfühlen dort bestmöglich zu unterstützen!

- Weitere wichtige Aufgabe, die das Design leisten muss: Die passende Darstellung von Marke, Unternehmen und Produkten. Auch hier ist es wichtig mit der optischen Sprache nicht irgendeinen, sondern den richtigen Ton zu treffen!

Gutes Design ist kein Produkt von Zufall, purem Geschmack oder aktueller optischer Trends, sondern das Ergebnis zielgerichteter, maßgeschneiderter Überlegung, Planung – und am Ende der professionellen, sauberen Umsetzung!

Aus dem “Make-Up”-Mißverständnis heraus entstehen schnell Hindernisse, die gute Gestaltung unnötig schwer machen:

Mangelndes Briefing
Man muss die Ziele und Rahmenbedingungen eines Projekts kennen, um punktgenau & professionell gestalten zu können! Wenn Design nur als purer Anstrich aufgefasst wird, fehlt oft das Bewusstsein, dass überhaupt Hintergrundinformationen benötigt werden.

Dazu ein weiteres, sehr treffendes Zitat von Herrn Eames:

“Recognizing the need is the primary condition for design.”

Bereits vordefiniertes Design
Es wird nicht die Lösung einer Gestaltungsaufgabe vom Designer verlangt – was sein Job ist – sondern Ausmalen einer Vorlage.
Statt dem Verantwortlichen möglichst genau Aufgabe und Problemstellung zu erläutern, wird bereits eine – oft nur vermeintliche – Lösung vorweggenommen.

Designer dürfen nicht als verlängerte Photoshop-Hand mißbraucht werden: Kunde & Agentur können weitaus mehr von ihm bekommen! Und sollten es auch einfordern!

Technik als Showstopper
An der Schnittstelle von Design und Technik steht schnell das “unnötiger Schnickschnack”-Argument im Raum. Es fehlt manchmal der Blick, dass man als Designer ebenfalls einen Job zu erledigen hat und nichts lediglich auf Geschmack und ein bißchen unverständlicher Kunst basiert und Dinge daher nicht einfach mit einem undifferenzierten “geht nicht” ersatzlos gestrichen werden können!

Programmierung darf nicht zum Stopper für Ideen & Maßnahmen werden, die zwar aus rein technischer Sicht “nicht unbedingt notwendig sind”, vielleicht sogar etwas mehr Aufwand erfordern – aber aus dem Blickwinkel besserer Usability, Erzielung einer bestimmten Wirkung & Aussage, usw. aber wichtig für das Projekt sind!

Während für die Programmierung Dinge wie Standardkonformität, sauberer Code, Performance und möglichst einfache Umsetzung im Vordergrund stehen, ist es beim Design das Bestreben die beste optische & ästhetische Lösung für die gestellte Aufgabe zu finden. – Dies kann auch die sein, die dem Programmierer nicht gefällt. Muss sie auch nicht. Genausowenig, wie dem Designer die Syntax des Codes gefallen muss. Dafür ist jeder Experte auf seinem Gebiet. Und auf Beiden Seiten braucht es Vertrauen in die jeweiligen Fähigkeiten.

Gute Designer kennen technischen Rahmenbedingungen und beachten sie. – Das heißt aber auch, dass sie einschätzen können, wo dieser Rahmen, falls es wirklich erforderlich ist, noch Spielraum hat.

Bei tatsächlichen Konflikten muss gemeinsam an einem Weg gearbeitet werden, der gestellte Anforderungen an beide Bereiche – Programmierung und Design – erfüllt. Statt fauler Komprommisse: Lösungen, die dem Ziel eines Projektes nicht schaden.

Keine Disziplin darf dabei “per Definition” über der Anderen stehen. Design ist genauso essentiell wie Technik. Es sollte der Normalfall sein, dass sich beide Bereiche ergänzen und zu einem Projekt aus einem Guss verschmelzen!

Argument “Kosten” – Der Wert von Design
Es darf nicht passieren, dass Technik & Kosten die einzigen Argumente sind, die in die Wagschale geworfen werden und denen das Design automatisch zum Opfer fallen muss. – Die Folge werden schlechte Projekte sein! Die beste Programmierung und der beste Kostenrahmen helfen nichts, wenn die Schnittstelle zum User – die gestaltete Oberfläche vernachlässigt wird oder dort falsche Kompromisse eingegangen werden.

Design ist kein Make-Up. Design hat einen Wert und es ist sträflich den zu vernachlässigen!

Weitere Empfehlungen:

1. Design Blast 2010 – Der Rückblick
2. Keine Gründe sind die falschen Gründe.
3. Fundstück/Interface-Design
4. Webdesign: Maßgeschneidert vs. Templates
5. Packaging-Design: Joakim Sundström

Design-Templates sind eine schöne Sache. Speziell für Blogs. Sie ermöglichen auch weniger Design-Versierten mit wenig Aufwand eine sauber gestaltete Webseite oder einen Blog zu betreiben. Insofern ist es auch keine schlechte Entwicklung, dass im Web immer mehr auf gut gestaltet Templates zurückgegriffen wird – und viele gruselige Selfmade-Seiten verschwunden sind, bei denen viel zu oft sehr gute Inhalte hinter schlechtem, undurchdachten Design verborgen lagen. Einfach weil der Ersteller kein Fachmann für gute Usability durch gutes Design ist und er darauf auch garnicht sein Hauptaugenmerk legt. Genauso gilt das oft für die ästhetische Qualität. Was völlig in Ordnung ist – wenn er dafür hervorragende Inhalte liefert! Insofern: Templates eine tolle Sache.

Das Ganze hat nur einen großen Haken.

Durch diese Templates, die oft einen sehr einheitlichen Stil haben (Verläufe, abgerundete Ecken, Buttons mit Glanz, bestimmtes Farbspektrum, …) hat sich sehr schnell ein Trend entwickelt, der oft auch direkt mit dem Begriff “Web-2.0″ einhergeht, weil er das Aufkommen der anderen (inhaltlichen und technischen) Entwicklungen, die dieser Begriff umfasst, begleitet hat.

Dieser Trend wird mittlerweile oft mißverstanden.
- Wenn man modern & zeitgemäß wirken will, muss auch bei kommerziellen Seiten “dieser Web-2.0-Look” her. Ohne Rücksicht auf Verluste. Ob er passt oder nicht. Es gibt Kunden, die das verlangen ohne weiter darüber nachzudenken. Und tragischerweise auch genug Agenturen, die ihre Mitarbeiter mittlerweile dazu anhalten diesen Style zu verfolgen. Ebenfalls blind. Ohne zur reflektieren ob es nicht eine passendere, individuellere Lösung gäbe.

Warum muss die Website eines Fleischwarenherstellers plötzlich mit Verläufen, Glaseffekten und optischen Web-2.0-like-Features versehen werden? Warum sieht plötzlich eine Firmenwebsite, die ganz andere Funktionen erfüllt, exakt wie ein Blog aus?

Typische Template-Optik wird durch Designer oft in mühevoller Kleinarbeit imitiert. Entweder werden komplette Blog-Layouts entwickelt, wie man sie genauso in unzähligen vorgefertigten WordPress-Vorlagen finden könnte – oder man verpasst einem Design noch den “letzten Schliff” durch Elemente, die solchen Templates entlehnt sind. Verläufe und Spiegelungen, was das Zeug hält.

Früher hätte man soetwas schnell für unkreativ gehalten. Mittlerweile muss man sich als Designer schon nach allen Seiten wehren, wenn man eine individuellere Optik gestalten will. – Was sehr unverständlich ist. Ein Design wird doch nicht automatisch modern & gut, wenn Verläufe und Glasoptik enthalten sind.

Solche Elemente können passen. Dann kann man sie ruhigen Gewissens einsetzen. – Aber oft genug muss man sich die Frage stellen “Warum?!”. – Diese ganzen Effekte um ihrer selbst willen sind eindeutig zu wenig. Ich denke, gutes Design sollte immer inhaltlich Hand und Fuß haben. Funktional sowieso. Verläufe, Spiegelungen, abgerundete Ecken, Boxen sind nicht immer das richtige gestalterische Mittel und sollten eigentlich in gezielten Dosen eingesetzt werden. Leider überziehen sie oft blindlings komplette Webauftritte. Ohne Sinn & Verstand.

Daher an dieser Stelle: Plädoyer für Maßarbeit, wo Maßarbeit machbar ist!
Und machbar sollte das eigentlich immer dann sein, wenn professionelle Designer im Spiel sind – und es nicht darum geht einem Nicht-Designer schnell ein vorgefertigtes Design zur Verfügung zu stellen.

Weitere Empfehlungen:

1. Design ist kein Make-Up!
2. Traurg. Flickr.
3. Relaunch: SinnerSchrader
4. Design Blast 2010 – Der Rückblick
5. Keine Gründe sind die falschen Gründe.