Website Irene Naef

Irene Naef
http://irene-naef.ch/

Online-Dokumentation für eine Künstlerin. Gestaltungsoptionen:

  • Sachliches, „cleanes“ Design im Stil einer Museums- oder Galeriewebsite. Eigentlich der naheliegendste Weg. Das Kunstwerk, die Arbeiten sind in einem neutralem Umfeld (Weissraum etc.) dargestellt.
  • Der andere Weg ist eine visuelle Sprache die das Medium miteinbezieht. Die Technologie akzeptiert und sich derer Unzulänglichkeiten bewusst ist: Farbtreue, Format, Materialität, Räumlichkeit. Der Bildschirm wird, sagen wir mal, akzeptiert.

Ich habe mich in Richtung zweite Variante bewegt. Wollte bewusst etwas nicht „so sauberes“ machen, ein bisschen Experimentieren. Irene hat mir freie Hand gelassen und ich habe mich auf ihre Arbeiten eingelassen. Farbiges, intensives. Da sollte es eigentlich einfach sein, etwas Schönes zu machen. Denkt man immer am Anfang…

 

Flexibel

Wichtig war mir, ein Werkzeug zu schaffen mit dem sie Gestalten kann. Einfach mit Bildern, Farben, Schriftgössen und Transparenzen spielen kann. Dazu habe ich ins Backend investiert und einige kleine Hilfen gebaut. (Fig. 1)
 

backend Projektbeschrieb Irene Naef
Fig. 1: Mit sogenannten „Custom Fields“ kann das Layout jedes Beitrags personalisiert werden.

 

Beispiele:

examples

Site Irene Naef

 

 

Theme Options

Zum ersten Mal habe ich eine „Theme Options“ Seite gebaut. Für Basiseinstellungen wie Kontaktdaten, Hintergrundbild des Aufklappmenüs, etc. Dafür verzichte ich bei dieser Website vorerst auf Widgets.

 

Backend 02
Fig. 2: Das Hintergrundbild des Aufklappmenüs kann in den „Theme Options“ geändert werden.

 

Beispiele:

Projekt Irene Naef

 

 

Bildergalerien

Ein zentrales Element der Website sind die Bildergalerien. Hier, isoliert, habe ich versucht eine Form zu finden, in welcher die Arbeiten so sachlich wie möglich präsentiert werden. Unterstützt durch die Fullscreen-Option und die Wahl der Hintergrundfarbe. Ich benutze dazu das WordPress-Plugin „Royalslider“. Leicht angepasst. Die Mousewheelbedienung für das iOS muss noch verbessert werden (Bug mit der Sensibilität) und ich bin noch auf der Suche nach einer Fullscreenlösung für die iPads. Dieser Slider kann auch über die Tastatur gesteuert werden und sieht auch auf Fernsehgeräten gut aus (Groooooosse Slideshow). Aber wie bereits erwähnt: Farbtreue, Materialität sind Themen.

Slideshow Beispiele:

RoyalSlider on TV Screen

 

Mobile Version

Das Aufklappmenü reagiert auf Vertikalscrolling. Beim Abwärtsscrollen (Fig.3-2) verschwindet es und vergrössert die „Lesefläche“. Beim Aufwärtsscrollen wird es wieder angezeigt. Das ist vorallem bei textlastigen Seiten eine interessante Variante. Das Aufklappmenü selber zeigt alle Auswahlmöglichkeiten an. Man kommt also von überall auf der Website mit einem bis maximal zwei Clicks nach überall hin.

 

Scrollen

Fig. 3 scrollen3.jpg

 

Verschiedenes

  • Code: Die Seiten sind valides html5. Das ist immer gut. Testwerkzeug: http://validator.w3.org/
  • Separates Layout für den Ausdruck der Seiten.

 

 
 

Weiterführende Links