Interactions

Immer wieder staune ich ab der Seite von airbnb.com. Sie ist erfrischend, selbsterklärend und (meiner Meinung nach) sehr ansprechend gestaltet. Das ist aber bloss einer von vielen Gründen, weshalb ich stundenlang auf AirBnB rumstöbern könnte.

airbnb_index3

Im Rahmen der Vorlesung gestalterische Grundlagen sollten wir von einer Website, die uns gefällt, alle Interaktionselemente ausfindig machen und benennen. Et voilà, die Herren und Damen der Programmier-Belegschaft von AirBnB sind äusserst fleissig. Die haben fast alle nur möglichen Interaktionselemente in ihrer Website eingebaut. Hier eine Auswahl:

airbnb_interactionsairbnb_interactions_2

Raster

Das Anordnen von Text-, Bild-, Video- und Navigationselementen sollte auf einem grundlegenden Raster beruhen. Anhand eines Gestaltungsrasters lassen sich alle Elemente ausrichten.

Diese Gestaltungsrater existieren sowohl im Print-, als auch Web- und Ausstellungsdesign. Doch unterscheiden sich diese in der unterschiedlichen Herangehensweise bei der Arbeit mit den Rastern. So existiert im Web beispielsweise keine starre Fläche – die Viewports im Browser sind flexibel. Nicht so wie im Print, wo es die verschiedenen Papierformate gibt.

Mit Hilfe des Rasters lassen sich Proportionen zwischen Elementen bestimmen und somit ein einheitliches Erscheinungsbild von mehreren Seiten erreichen.

 

Eine wichtige Rolle nimmt das Raster in Bezug auf das Responsive Web Design (RWD) an. RWD versucht das beste Nutzererlebnis auf dem jeweils benutzten Gerät zu bieten.

Static Layoutstatic_layout1
Liquid Layout

liquid_layout1Adaptive Layout
Das Layout ist anpassungsfähig und passt sich wenigen, ausgewählten Displaygrössen an.adaptive_layout1
Responsive Layout
Das Layout passt sich jeder erdenklichen Displaygrösse an.

responsive_layout1Zuerst bestimmt man für wen, resp. für welches Device man am ehesten gestaltet. Dessen Viewport soll der Master sein.

Grundsätzlich gilt der Mobile First Ansatz. Der Fokus liegt zwangsmässig auf den absolut wichtigen Inhalten.

Beispiel anhand watson.ch

watson_raster3_ba

watson_raster2_ba

watson_raster1_ba