Photoshop: 20th Anniversary

Das tool wird 20 – nun häufen sich die Meldungen im Netz. Aber trotzdem, die GUI-Elemente sind prägend gewesen. Eine schöne Timeline findet sich auf Gizmodo.

Vor der Zeit gabs sowas, wer den Atari ST noch kennt – wobei man damit auch schon gut pixelbasiert arbeiten konnte, denn die Daten waren damals noch mit dem großen Einmaleins zu rechnen. Hier ein interessanter Artikel mit dem Hintergrund von UI-Regeln:

Posted in Allgemein. Tags: , , , . Kommentare deaktiviert »

Explanation of the Interface-Design of Blender

Eine sehr detaillierte Einführung als Video-Tutorials in das 3D-Werkzeug Blender findet man auf:

http://www.ibiblio.org/bvidtute/contrib/interface.avi

http://www.ibiblio.org/bvidtute/

Dabei werden auch die Zustände, Interaction-patterns und Gestaltungsmerkmale des Systems sehr gut erklärt. Liefert schöne Inspirationen für das Interfacedesign für neue Studien-Projekte.
blender_interface

Posted in Allgemein, Designkonzept. Tags: , , , . Kommentare deaktiviert »

Nikerunning Application & Visualization

Auf Nikerunning kann man sich seine Strecken, Befindlichkeiten und weitere Details festhalten. Die Medien und Devices konvergieren – wenn man dann noch Blutdruck, Herzfrequenz, Sauerstoffgehalt (…) speichert, kann man sich die Diskussion um die “elektronische Gesundheitskarte” (eGK) sparen, es ist sowieso schon alles sichtbar und statt Karte legt man nun sein Mobile in die Nähe eines Blauzahnlesegerätes. Siehe auch aktuell die Meldung zu den Kosten auf heise.de, die könnte man so bestimmt eindämmen.

Aber genug Polemik, die Screens sollen zunächst zu Diskussionen hinsichtlich der Gestaltung und Konzeption dienen.

nike3nike nike2

Posted in Allgemein, Designkonzept. Tags: , . Kommentare deaktiviert »

Zurück an alter Stätte

Nach längerer Zeit war ich mal wieder bei der Werkschau meiner “Studierstube”, der HfG in Pforzheim. Zugegeben, die jetzt renovierten Werkräume lassen etwas Wehmut aufkommen, es war eine sehr schöne Zeit als Student.

Schön war aber auch, einige alte Bekannte zu treffen, insbesondere Herrn Müller, den besten Mann im Prüfungsamt ;o)

Interaktives war bei meinem Rundgang nicht so häufig zu finden, aber vielleicht hab ich nicht richtig geschaut. Die vielen anderen spannenden Arbeiten zeigen jedoch immer noch den deutlich künstlerischen Charakter der HfG PF – ein wenig davon versuche ich ja auch bei uns zu installieren.

links/oben: Skizzen für eine LCD-watch
rechts/unten: Ausstellungs-Konzepte

watchUlmerhocker

links/oben: großer Zeichensaal
rechts/unten: Scribble-Projekt (Darstellungstechnik lässt grüßen!)

zeichnen scribbles

links/oben: Malerei-Atelier
rechts/unten: Diplomarbeit Packaging-Design/Nudelverpackung inkl. Website-Konzept.
Eine interessante Arbeit und eine gute Erläuterung der Studentin. Leider hab ich keine Visitenkarte mitgenommen.

Malerei2cu_packaging

links/oben: Typografie-Seminar

typo

Posted in Allgemein. Tags: , , . Kommentare deaktiviert »

Werkschau/Semesterausstellungen

Die beiden Gestaltungs-Hochschulen haben wieder die halbjährlichen Werkschauen/Ausstellungen – vielleicht sehen wir uns dort?
Pforzheim 5.2. und 6.2.
Schwäbisch Gmünd 12.2. und 13.2.
hfg

pf

Posted in Allgemein. Tags: , . Kommentare deaktiviert »

Persona-Erstellung falsch verstanden?

Im designtagebuch wird das Ding, also die neue Homepage der LVB (Leipziger Verkehrs Betriebe) gerade zerrissen. Ich finde insbesondere den unten gezeigten Screen als Knüller. Erwachsene sind dick und Autofahrer ham nen fetten Hintern…
Die Navigations-Panels auf der linken Seite sind auch “spannend”, runde Ecken sind auch wieder vorhanden, aber genug, sehen Sie selbst.

lvb

Posted in Allgemein, Designkonzept. Tags: , , . Kommentare deaktiviert »

Schriften am Bildschirm

Das Thema Screen-Fonts ist grundlegend, hat sich aber die letzten Jahre drastisch verändert. Trotzdem ein paar Grundregeln, die den Umgang mit Schrift bei Interfacedesign ein wenig unterstützen.

Der Web-Artikel hat ältere Literatur als Basis, trotzdem sei er hier für weitere Details empfohlen.

Eine gute Hilfe für den Einstieg ist immer noch der Typetester, da man hier schnell alle Webfonts testen, einstellen und vor allem visuell analysieren kann.

typetester

Was ist anders am Bildschirm?
Das Bild zeigt die Rasterung eines feinen Fonts am Bildschirm. Man sieht, wie schnell Details verschwinden bzw. wieviel Aufwand man treiben muß, um eine analoge Schrift digital hochwertig zu gestalten. Das schafft noch nicht mal MS bei Vista mit ClearType.

Was macht eine gute Interfaceschrift aus?
(Bitte nicht den Begriff Display-Schrift verwenden, der gilt für Zierschriften und stammt aus früheren Zeiten)
Als Einstieg sollen uns 3 Argumente erstmal ausreichen

1. Offene Schriften
Also solche mit deutlichen Punzen (siehe Grafik aus dem designtagbuch). Diese Schriften, z.B. die Verdana, laufen meist breiter, die Tahoma etwas schmaler. Leider sind die visuell “verbraucht”, deshalb sucht man gern was anderes.

Offen, das spricht auch für “unsere” Frutiger und eben auch für die Corbel von Microsoft, die ein Frutiger-Derivat ist. (So wie die Arial von der Helvetica viel geerbt hat). Ähnlich gut eignet sich auch die Myriad.

Was ist mit Serifen? Ja, auch die sind heutzutage gut lesbar, die Georgia ist hier ein gutes Beispiel. Die Bembo jedoch nicht wirklich, aber das liegt wirklich nicht an den Serifen. Trotzdem findet man deutlich mehr sans serif im Interface-Design, ausser wenn man z.B. wie den Text hier in wordpress editiert.

2. große x-Höhe
Auch da sind die Verdana und Trebuchet einfach passend, aber: auch die Comic Sans (ja, ich weiss…) macht hier Punkte.

3. passend zu Produkt und Betrachter
Nun, hier wirds bekanntermaßen schwammig, man sollte jedoch diesen Aspekt nicht ausser acht lassen. Eine technisch anmutende, steif wirkende Schrift wäre für eine spielerische, fröhliche Applikation weniger geeignet.

Technisches und Wahrnehmung

Schrifthöhe
Es gibt auch hier diverse Normen und Richtlinien, als Faustwert hat sich bei ca. 500mm Sehabstand eine minimale Versalhöhe von 4-6mm als gut herausgestellt. Genaueres bspw. hier bei ergo-online. Um diverse Einheiten umzurechnen findet man hier eine kleine Applikation.

Bei Wandmacher (1993) findet sich diese Formel:

Buchstabenhöhe (in mm) = 0,0022 x d + k1 + k2

d = Augenabstand zum Bildschirm in mm
k1 = 1,5 bei günstigen Lesebedingungen
k1 = 4,1 bei ungünstigen Lesebedingungen
k2 = 0 bei normalen Informationen
k2 = 1,9 bei kritischen Informationen

Quelle: Wandmacher, J. (1993). Software-Ergonomie – Mensch Compter Kommunikation – Grundwissen 2. Berlin, New York: Walter de Gruyter. S.21


Farben bitte wie immer behutsam, sparsam oder als Auszeichnung einsetzen.

Kontraste kann man berechnen, meist schafft man es jedoch nicht, mehr als 3-4 Stufen gut erkennbar darzustellen. Diese Varianten würde man ggf. noch für bestimmte Zustände (z.B. bei Schaltflächen) invertieren.
Wichtig: Der Kontrast zum Hintergrund sollte möglichst hoch sein

Die “C-Schriften”
Der Artikel bei den webkrauts zeigt die damals neuen Schriften gut auf. Lesbarkeit gut, Verfügbarkeit sehr gut, Abneigung steigend.

Die gefühlte Lesbarkeit
Hier sei auf den sehr schönen Artikel im designtagebuch von Martin Liebig verwiesen.
Sein Fazit: look&feel geht vor Lesbarkeit.

Typodetails – Anatomie der Buchstaben

Im designtagebuch erschien Anfang 2010 das sehr ruhige und sauber gestaltete Poster. Mal schnell nach dem A1-Drucker schauen…

Noch ein Typo-Poster:

http://www.type-together.com/modules/skins/default/images/shippingposter/typefaces%20are%20structures.pdf

Posted in Designkonzept. Tags: , , , . Kommentare deaktiviert »

What is Interactiondesign?

Eine immer noch sehr gute und breite Quelle zu Hintergründen des Interactiondesign (oder stylisher IxD)  ist das Buch (und die DVD) von Bill Moggridge. Er war lange Jahre bei IDEO und hat jetzt eine neue Aufgabe, siehe den Artikel in der form.

interactions

Posted in Allgemein, Theorie. Tags: , . Kommentare deaktiviert »

Interaktionskonzepte von Baudisch et al.

Heute hatten wir spannende Diskussionen in den Projektgruppen zu Interaktion und Gestaltung der jeweiligen Applikation.

Eine nachwievor interessante Sammlung von neuen, getesteten Interaktionskonzepten bietet die Seite von Patrick Baudisch, ehemals Researcher bei Microsoft und seit einigen Monaten Professor am HPI in Potsdam.

baudisch dragandpop
Übersicht                                                            drag´n´drop-Variante

Posted in Designkonzept. Tags: , , . Kommentare deaktiviert »

Multitouch-Applikation im Rahmen einer Masterarbeit

Die Masterarbeit von Christian Acevedo entstand in Zusammenarbeit mit und bei UID in Ludwigsburg. Anbei ein kleiner Einblick für die, die auf dem WUD keine Gelegenheit zum Testen hatten.

Posted in Designkonzept. Tags: , , . Kommentare deaktiviert »