my two cents

Diese Woche bei Holger im Screendesign-Unterricht: Fortsetzung des Typographie-Einstiegs von letzter Woche sowie Interface-Design, vornehmlich von Websites.

Am Montag kamen wir nochmal kurz auf das Thema Textsatz zu sprechen, bevor es mit Auszeichnungen weiter ging. Kursiv, fett und unterstrichen; Kapitälchen und gesperrte Schrift: Wann nimmt man was, spezielle Schriftschnitte, Versalien und Gemeine, kurzer Exkurs in die Steinzeit mit Schreibmaschinen und in frühere Zeitungsredaktionen.
Es folgten Hinweise zur Bildschirm-Typographie: Wie Schriften auf einem Monitor wirken, die Auflösung von Bildschirmen und Druckern, was Aliasing-Fehler sind und wie Anti-Aliasing dagegen wirkt, die Qualitätsstufen in Flash (z.B. wird bei 4-fachem Anti-Aliasing in Flash für jeden Pixel eigentlich 16 Pixel berechnet).
Vor der Pause sprachen wir zusammen einige Plakate durch, die Holger auf dem Weg zur SAE per Digiknipse eingefangen hat (»Das muss nicht unbedingt gut sein, was da hängt.«). An einigen Plakaten haben wir deutlich gemerkt: Wenn die Idee nicht gut ist, hilft auch technische Perfektion nicht mehr.

Nach der Pause begannen wir mit dem großen Thema Interface-Design. GMX, web.de oder eBay sind nur Programme, die über eine Web-Oberfläche bedient werden. Und da dafür ein Browser eigentlich nicht gemacht wurde, gibt es eine Reihe von Einschränkungen zu beachten, wobei man viel falsch machen kann.
Zu Beginn eines Auftrags (nach einem gewonnenen Pitch) steht die Konzeption: Worum geht’s bei der Website, wenn will ich erreichen, was biete ich an, wie mache ich was und wo mache ich das? Es sind Aufgaben zu definieren, die zu einem Konzeptmodell führen. Im weiteren Verlauf wird ein Lexikon geschrieben. Immer wieder auch (gerade!) in dieser frühen Phase kleine Usability-Tests durchführen: Verstehen Freunde unter den Begriffen, die ich auf der Website verwende, das selbe wie ich? Begriffe auf Karteikarten aufschreiben und gruppieren. Anschließend einige grundsätzliche Gedanken zum Aufbau, zur Anordnung. Die drei Fragen, die jede Navigation beantworten muss (Wo bin ich? Wo kann ich hin? Wie komme ich da hin?).
Es ist wichtig, sich nicht gleich an Photoshop zu setzen und mit dem Design anzufangen. Zuerst muss eine Struktur mit prinzipiellem Aufbau und Anordnung geschaffen werden. Danach, wenn dann die Seite so funktioniert, ist das Design eigentlich nur noch eine Sache des anmalens, auch wenn Kunden das in der Regel genau andersrum sehen und sich als erstes Gedanken über Unwichtiges machen (Schriftart, schweinchen-rosa oder doch etwas mehr rot…). Tipp aus der Praxis: Entwürfe in schwarz/weiß vorlegen.
Amazon würde auch funktionieren, wenn die linke Navi nicht hellgelb, sondern hellblau wäre…

Hausaufgabe: Struktur der Start- oder einer Unterseite für den fiktiven Pizzadienst »Pronto Pizza« überlegen. Was auf die Seite drauf muss, besprachen wir noch im Unterricht, daheim ging es um die Anordnung.

+++

Dienstag. Wir besprachen einige der Hausaufgaben: Was ist gut, was kann man besser machen? Es waren einige interessante Ansätze dabei! Bei meiner Lösung habe ich eher eine vertikale statt eine horizontale Anordnung gewählt; da kommt man früher oder später natürlich mit dem »Falz« (unterer Browserfensterrand) in Konflikte. Dass man auf den Falz achten muss, hat heute eindrucksvoll die Bild-Zeitung demonstriert: In den Zeitungsständern auf der Straße war die Titelseite so in das Fenster der Automaten eingelegt, dass über dem Falz folgende Schlagzeile zu lesen war (unter »Rambo-Rudi«):

»Kurt Felix:
Mein Kampf«

Gut, meine »Pronto Pizza«-Seite würde zwar irgendwo in der Mitte abgeschnitten werden, aber das wichtigste ist über’m Falz, und die Speisekarte mit angeschlossenem Bestellformular kann man auch nicht verfehlen.   :-)
Im Anschluss noch ein kleiner Vortrag zum Thema, und worauf man bei Formularelementen und der Navigation achten sollte. Es folgte gleich eine praktische Übung: Die lange Liste für die Bestellseite (»Pizza-Konfigurator«) von Pronto Pizza sollten wir Ordnen und mit Formularelementen versehen (Radio- und Checkboxen sowie Dropdowns und Texteingabefelder wo es uns jeweils angebracht schien).
Die letzten Minuten gab uns Holger einige Buchempfehlungen sowie Websites an die Hand:

• »Schriften erkennen« von Daniel Sauthoff u.a.
• »Erste Hilfe in Typografie« von Hans Peter Willberg u.a.
• »Don’t make me think« von Steve Krug
• »The Non-Designer’s Design Book« von Robin Williams
• »GUI Bloopers« von Jeff Johnson

Drei Websites: Linkdup, Kaliber 10000 und stereotypography.

»Macht was draus, sonst drohen die Grußkarten.«

+++

Am Montag erhielten wir außerdem – zumindest die, die bestanden haben – unsere Zeugnisse für die ersten drei Monate an der SAE (Mai bis August): Das »Basic Media Certificate«.

 

Nächste Woche: Zwei Wochen DTP-Unterricht bei Caro (Grundlagen, Umgang mit InDesign).

 
Erschienen am Dienstag, 09.09.2003 @ 23:09
Tags: SAE, screendesign