Form Blog – Neues aus Design, Kultur und Wirtschaft

User Experience Design 3.0

UX-Design

Das User Experience Design gewinnt in der heutigen medialen Welt einen immer größeren Stellenwert. In diesem Beitrag habe ich ein paar faszinierende Beispiele zusammengestellt was mit intuitiven Bedienkonzepten heute und in Zukunft alles möglich ist.

Katachi Magazine
Ein Lifestyle Magazin für IPad und IPhone. Made with Origami Engine.

)

 

Dieser Werbefilm von Microsoft wirkt ein wenig abenteuerlich. Display overdose.

)

 

Vector-Icons – Immer kantenscharf

Icons
Der Einsatz von Icons und Pictogrammen im Screendesign erleichtert Nutzern das Bedienen und Verstehen von Benutzeroberflächen. Zwecks hoher Informationsdichte und multilingualer Verständlichkeit haben diese stummen Diener eine weite Verbreitung gefunden.

Da es sich bei den meisten Icons im Webdesign um Bilder bzw. Grafikformate handelt, sind diese bei Bildschirmvergrösserung oder höhere Bildschirmauflösung schnell unscharf bzw. die Ränder wirken verpixelt.
Spätestens seit der Veröffentlichung von Apples Retina Displays bei IPhone und IPad bewegt sich die Bildschirmauflösung von Displays webfähiger Endgeräte steil nach oben. Diese Entwicklung ruft nach effizienteren Lösungen im Webdesign, ohne aufwendiges Formatieren der Grafikformate für unterschiedliche Bildschirmauflösungen.

Beispielhafte Vector-Icons aus dem Webfont Genericons sind auf dieser Website eingebunden.

Eine Alternative bietet das vektororientierte SVG Format, daß sich seit HTML5 auch leicht in Websites einbinden lässt. Ein weitere komfortable Möglichkeit der Einbindung vektororientierter Icons sind sogenannte Vectorfonts. Ähnlich wie Webfonts werden hierbei die Icons über einen Schriftfont in die Website eingebunden. So lassen sich Icons problemlos skalieren und gestalterisch einsetzen, außerdem wird die Ladezeit der Seite reduziert. Eine Nachteil haben leider Vector-Icons – sie sind nur monochrom. Dafür lassen sich die Fonts über CSS in Farbe, Größe, Transparenz und Schattenwurf manipulieren, wie es anschaulich auf der Seite von CSS-Tricks demonstriert wird. http://css-tricks.com/examples/IconFont/

Folgende Websites bieten Icon-Fonts unter GNU Public License zur kostenfreien Verwendung.

Awesome
http://fortawesome.github.com/Font-Awesome/#

Iconic
http://somerandomdude.com/work/iconic/

Genericons
http://genericons.com/

Bessere Typografie im Internet

Typo im Web
Die typografische Vielfalt im Internet war in den zurückliegenden Jahren doch eher sehr bescheiden und bewegte sich meist zwischen den Schriften Arial, Helvetica und Times. Die technischen Möglichkeiten ließen eine individuelle Schriftgestaltung nicht zu. Die Hausschriften der Unternehmen wurden meist als Bild in die Webseiten eingebunden, was sehr umständlich und zeitintensiv war und der Logik des World Wide Webs widersprach.

In Zeiten mobilen Internets und barrierefreier Websites wirken solche Lösungen doch eher sehr antiquiert. In der jüngeren Vergangenheit wurden verschieden Techniken entwickelt die das Einbinden von individuellen Schriften erlaubt und so den gestalterischen Spielraum bei der Entwicklung von Websites deutlich erhöht.

sIRF und Cufon für lizenzfreie Schriften

Bei diesen Technologien wird der Text über HTML in die Website eingebunden und anschliessend per Javascript in eine Flashdatei bzw. SVG-Datei umgewandelt.

Bei sIFR Lösungen wird Flash benötigt, Cufon kommt ohne aus und bleibt so auch
auf IPhones und IPads lesbar. Allerdings sind die Texte in der Website nicht mehr markierbar. Die Schriftenglättung kann man bei beiden Technologien systemübergreifend als sehr gut bezeichnen.

Mit @font-face lizensierte Schriften einbinden

@font-face ist eine mittlerweile weit verbreitete Möglichkeit der Schrifteneinbindung.
Dabei werden die speziellen Schriftdateien über CSS in die Website eingebunden.
Eine Verlinkung findet meist über einen externen Server statt. Das Format heißt WOFF-Format und ist für den browserübergreifenden Einsatz entwickelt worden. Verschiedene Schriftenanbieter bieten mittlerweile diese Webfonts in ihren Programmen an.

Typekit von Adobe bietet das umfangreichste Schriftenprogramm für Webfonts an. Nutzer können über ein Lizenzierungsmodell das Programm nutzen und den gewünschten Font in ihre Website einbinden. Die Abrechnung erfolgt über die Nutzerzahl der Website (Pageviews pro Monat).

Adobe Typekit

https://typekit.com/

 

Durch den Einsatz charakteristischer Fonts bekommen Websites oft einen individuellen Eindruck wie die folgenden Beispiele überzeugend zeigen.

gapmedics.co.uk

http://www.gapmedics.co.uk

 

neverabettertime.co.nz

http://www.neverabettertime.co.nz

 

Typo-googlefont

http://www.google.com/webfonts

http://hellohappy.org/beautiful-web-type/

Wir sind wieder startklar!

blog_form2
Nach dem Relaunch unserer Website steht Ihnen jetzt ein noch besseres und umfangreicheres Informationsangebot über unsere Arbeit (siehe Service, Portfolio) und unser Wissen zur Verfügung. 6 Jahre stand die Vorgängerversion im Netz, für eine Website eine lange Zeit. Die neue Version unserer Website wurde im Haus mit WordPress realisiert und bleibt durch ihre Content Management Funktionen hoffentlich immer aktuell.

Und weil unsere neue Website gerade „geschlüpft“ ist, wird es auch noch ein bisschen dauern bis dieser Blog gewachsen ist.

Callback

Kostenlose Anfrage!
Ihre Daten werden vertraulich behandelt
und nicht zu Werbezwecken weitergeben.
Bitte warten …