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

Das Spiel mit Farbe

Nach der Vorlesung zum Thema Farbe sollten wir als Hausaufgabe unser zuvor in schwarz/weiss gehaltenes E-Book-Cover des kleinen Prinzen einfärben. Da ich nach wie vor ein Fan von simplen, cleanen Layouts bin, ist folgendes entstanden:

ebook_petitprince_v1ebook_petitprince_v3

Beim ersten Cover spiele ich mit dem Quantitätskontrast – auch bekannt als Proportionskontrast. Dieser entsteht beim Gegenüberstellen von zwei verschieden grossen Farbflächen. Stehen diese in einem ausgewogenen Verhältnis zueinander, so ist die optische Wirkung der Farben gleich intensiv und das Bild wirkt harmonisch.

So wunderbar gaga

Der Dadaismus feiert in diesem Jahr sein 100 Jahr Jubiläum und ich heute meinen ersten Meilenstein im Rahmen unserer Gestaltungsgrundlagen-Vorlesungen: Mein Tablet-Design für das Digitorial ist endlich finalisiert!

Das Fazit der letzten Zwichenbesprechung mit Frau Brockman, dass meine Idee fürs Layout gut so umsetzen kann wie angedacht, es aber ruhig auch etwas chaotischer aussehen dürfte. Das gefiel mir und ich machte mich auch gleich daran, alles etwas wilder zu gestalten. Aber das klingt einfacher als es ist. Zumindest für mich. Ich, die alles gerne schlicht, simpel und clean mag. Da passt Chaos nun mal so gar nicht rein. Im Endeffekt bin ich aber ziemlich zufrieden. Grundgedanke hinter meinem Layout sind die alten Manifeste der Dadaisten, die ich mir zur Vorlage genommen habe. Nun bin ich gespannt, wie ich den selben Inhalt für Smartphones und Desktops gestalte.

 

Weissraum

Oder na ja, halt eben nicht weiss. Der Weissraum kann sowohl weiss, als auch farbig oder gemustert sein. Er bezeichnet lediglich den Raum zwischen den Elementen.

Am Anfang jeder Gestaltung steht ein leeres Blatt Papier. Oder InDesign-, Photoshop-File – was auch immer. Egal was man gestalten möchte, der Anfang ist immer gleich. Im Laufe der Gestaltung kommen immer mehr Elemente dazu. Icons, Headlines, Hintergrundgrafiken, Symbole… Wichtig ist aber, dieses leere Blatt nicht vollzuklatschen. Wieso?

Weissraum schafft ein Vakuum, welches es erlaubt die Aufmerksamkeit auf andere Elemente zu ziehen. So hilft uns dieser…

  • beim Erfassen von Inhalten. Er kann den Betrachter leiten und zu den wichtigen Inhalten führen.
  • bei der Lesbarkeit von Texten – Schriften per se, aber auch beim gesamten Layout (Zeilendurchschuss, Absätze…).

In gewisser Weise beeinflusst er auch die Gesamtästhetik. Vollgepackte Layouts sehen nur selten gut aus. Layouts mit grosszügigem Weissraum hingegen wirken souverän, elegant bis hin zu luxuriös.

Macro Whitespace
Er beeinflusst durch die Gesamtkomposition den visuellen Fluss des Users.

  • Separieren von verschiedenen Elementen
  • Spalten Abstände
  • Ränder
  • Raum in Grafiken/Bildern

Micro Whitespace
Beeinflusst die allgemeine Klarheit eines Layouts, insbesondere natürlich auch die Lesbarkeit von Text.

  • Buchstaben
  • Zeilenabstand
  • Absätze
  • Listen/Bildunterschriften
  • Buttons & Icons

wearehuntly.com.au

huntly_v2.2

huntly_v2.3.3

Bei Huntly handelt es sich um zwei Innenarchitektinnen aus Melbourne. Ihre Homepage kommt clean, schlicht und frisch rüber und wiederspiegelt schön den Stil, den sie selber auch in ihrer Arbeit umsetzen.

arngren.net

arngrent

Hierbei handelt es sich um eine Kleinanzeigen-Homepage. Es lässt sich so ziemlich alles kaufen – und das wollten die Macher der Homepage anscheinend auch auf den ersten Blick ersichtlich machen. Man wird regelrecht von Angeboten erschlagen. Mirco-Whitespace ist zwar vorhanden. Geht ja auch nicht ohne. Aber den Macro-Whitespace sucht man vergeblich.

Der kleine Prinz mal anders

Mit folgenden Vorgaben sollten wir ein E-Book Cover gestalten:

  • Grösse: Kindle Fire HD 8.9″  1200×1920
  • Schrift: es darf nur eine Schrift verwendet werden – eine Antiqua Schrift
  • Farbe: S/W
  • Text: Der kleine Prinz, Illustrierte Erzählung, Antoine de Saint-Exupery

Die zweite und die letzte Version sind meine Favoriten.

ebook_petitprince

ebook_petitprince_v2

ebook_petitprince_v3.3

ebook_petitprince_v6.5

 

 

 

Moodboard Digitorial

Zu einem von uns frei gewählten Design-Thema erstellen wir dieses Semester ein Digitorial. Das ist eine inhaltliche Zusammenfassung eines Themas in einem sogenannten „Onepager“. Uhh, wie bin ich gespannt. Layouten, das Zusammenspiel von Formen und Farben – ein Bereich, der mich unglaublich interessiert, ich aber noch null Ahnung von habe.

Allein schon die Themenwahl war für mich so eine Art Feuerprobe. Schliesslich soll das gewählte Thema auch im Digitorial grafisch umgesetzt werden. Für mich steht und fällt somit schon alles beim Thema. Nachdem ich meine Hirnzellen eifrig angestrengt habe, fiel meine Wahl dann auf den Dadaismus.

Bestimmt den meisten ein Begriff. Und ansonsten: Geduld! Spätestens Ende Mai erfährt ihr die wichtigsten Facts & Figures dazu auf meinem Digitorial. Bis dahin müsst ihr euch mit meinem Moodboard zufrieden geben.

moodboard_oliviakasper