kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

UX/UI Design


Web-Fonts mit Google Font Directory API

Google hat einen neuen Online-Dienst namens Font-Directory Beta gestartet. Dieser Service ermöglicht es Webdesignern individuelle Schriftarten in Websites zu verwenden auch wenn diese nicht zu den wenigen systemübergreifenden Schriftarten gehören.
Schriften stellen im Internet leider nach wie vor ein echtes Problem in der Gestaltung dar. Der Grund liegt darin, dass eine Schriftart nur dann korrekt angezeigt wird sofern der Besucher den Font auch installiert hat. Ist dies nicht der Fall so wird eine alternative Schriftart geladen was zwangsläufig zu Fehldarstellungen führt.
Zwar bieten JavaScript- und Flash-basierte Lösungen wie Cufón oder sIFR eine passable Alternative aber Googles neue API verspricht über kurz oder lang ein echter Hit zu werden.
Ich habe das neue Tool einmal ausprobiert.

Beitrag zu Ende lesen

Web vs. Werbung. GIULIA- vs. AIDA-Modell

Sowohl in der Werbung als auch im Webdesign existieren Modelle um die Wirkung einer Werbeanzeige, oder einer Website, hinsichtlich der Zielgruppe zu kontrollieren und zu planen. Unter Werbern, Mediengestaltern und Webdesignern dürfte hierbei das Werbewirkungs-Modell AIDA hinlänglich bekannt sein. Jeder Buchstabe steht stellvertretend für eine Phase die der spätere Kunde oder Konsument durchlaufen soll: Attention, Interest, Desire, Action. Am Ende der Kette folgt im Idealfall die Kaufhandlung des Kunden.
Webdesign wird leider häufig der Werbung zugeordnet was dazu führt, dass auch hier mitunter das AIDA-Modell angewendet wird. Das ist ein grober Fehler denn Webdesign unterscheidet sich deutlich von konventioneller Werbung und folgt daher auch anderen Regeln.

Beitrag zu Ende lesen

Snow Leopard + Safari: Schriftglättung mit CSS manipulieren

Die Schriftglättung unter OS X Snow Leopard ist je nach Schriftfarbe und Hintergrundgestaltung im Safari ein wenig zu stark geraten - mitunter wirkt die Schrift einfach zu fett.
Dieses Problem kann mit einem simplen CSS-Snippet das auf den body oder einen beliebigen anderen Selektor angewendet wird behoben werden. Möglich wird dies durch Safaris WebKit-Engine.

Beitrag zu Ende lesen

New icons for a better world

Icons sind aus modernem Webdesign nicht mehr wegzudenken; in Bezug auf das heutige Thema möchte ich jedoch die Diskussion um ein spezielles Icon anstoßen.
Die Rede ist von der Glühbirne. Dieses Icon wird allgemein für Tips, Infos, Hinweise, Ideen etc. verwendet. Auch ich verwende dieses Icon auf meiner Seite um bestimmte Textabschnitte im wahrsten Sinne des Wortes zu highlighten. Ist das überhaupt noch zeitgemäß?

Beitrag zu Ende lesen

Photoshop-Tutorial: Organic Webdesign Typografie

In folgendem Tutorial zeige ich Euch wie man aus einer gewöhnlichen Schrift ein organisches, individuelles Artwork erstellt. Meine persönliche Vorliebe für organische Designs dürfte bekannt sein, ein Grund mehr für mich diese häufig vernachlässigte Design-Richtung in Erinnerung zu rufen. In Zeiten in denen es "in" ist mit Bio und Umweltfreundlichkeit zu werben kann das folgende Tutorial helfen einem Print- oder Screendesign den letzten Kick in die richtige Richtung zu geben.

Beitrag zu Ende lesen

Free Racing Icons/Illustrations

Während eines aktuellen Web-Projektes habe ich drei Illustrationen zum Thema Motorsport/Rennsport erstellt die im weiteren Projektverlauf jedoch nicht eingesetzt wurden. Aus diesem Grund stelle ich sie Euch hier kostenlos zum Download zur Verfügung.
Je nach Projekt lassen sie sich die Motive sicher auch als Icon verwenden auch wenn das Anwendungsgebiet eher klar eingegrenzt sein dürfte. Aber wie das nunmal mit kostenlosen Grafiken so ist. Mitnehmen, abspeichern und wenn man es irgendwann mal braucht darauf zurückkommen. Die drei Grafiken haben die abgebildete Standardgröße und liegen im PNG-Format zum Download bereit. In diesem Sinne: Viel Spaß damit!

Beitrag zu Ende lesen

7 Free Sport-Icons

Für ein aktuelles Projekt habe ich sieben Sport-Icons gestaltet. Da ich das Projekt jedoch abbrechen musste, stelle ich Euch diese Icons kostenlos zur Verfügung. Ich hoffe Ihr findet sinnvolle Verwendung dafür. Das Icon-Set umfasst sieben Icons in einer Größe von 64x64 Pixeln und im PNG-Format. Viel Spaß damit.

Beitrag zu Ende lesen