Website 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)
 

Beispiele:

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.

Beispiele:

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:

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.

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

• RoyalSlider (WordPress-Plugin für Bildergalerien)

  http://dimsemenov.com/plugins/royal-slider/

• Relevanssi (WordPress-Plugin für die Suche)

  http://www.relevanssi.com/

• jQuery Mouse Wheel

  https://github.com/brandonaaron/jquery-mousewheel/

• Website Irene Naef

  http://irene-naef.ch/

• Website Prototyp

  http://markussteiger.ch/projekte/02454/image.html