Google+ Webseiten meilipeter.ch und meilipeter.de - Projekte - FEINHEIT AG – Online Marketing & Social Media Marketing Agentur

Webseiten meilipeter.ch und meilipeter.de

Design, Performance und bedachte Responsiveness

Marcel Meili und Markus Peter haben die Schweizer Architektur in den letzten Jahrzehnten massgeblich mitgeprägt. Ihre Bauten sind preisgekrönt, ihr Diskurs in Lehre und Praxis anerkannt. Den Wunsch, ihr Schaffen der letzten 30 Jahre online abzubilden, hat FEINHEIT 2013 umgesetzt. Wir übernahmen dabei Konzeption, Grafik, Programmierung sowie Projektleitung in Kooperation mit MeiliPeter.

Ein Buch als Webseite

Als Vorlage für die grafische Umsetzung des Webdesigns diente das Buch «Marcel Meili, Markus Peter 1987-2008». Entstanden ist ein Layout mit viel Weissraum und einer Wiedergabe zahlreicher grossflächiger Bilder. Als zentrales Element fungiert die Mittelachse und verbindet so die Idee eines Buchbundes mit derjenigen der Timeline. Die Navigation besteht aus vier Menüpunkten, die das Überfliegen der Seite ohne Irritation durch projektbezogene Details ermöglichen.

Grosse Bilder – eine Herausforderung

Für die Entwicklung einer solchen Webseite ist neben einer hohen grafischen Qualität auch eine gute Performance im Sinne kurzer Ladezeiten für datenschwere Bilder erforderlich. Für die potenziell am häufigsten frequentierten Projektübersichten wird deshalb eine Verbindung eines Preloads mit Infinite Scrolling angewendet. Sie erlaubt die Verwendung von grossen Bildern in einer angemessenen Ladezeit. Um die Performance auch auf mobilen Endgeräten zu gewährleisten, wird die zweispaltige Darstellung der Projekte je nach Navigationspunkt anders dargestellt. Auch wurde die Fullscreen-Ansicht der Bilder blockiert.

Zürich und München

MeiliPeter wünschten eine Spiegelung der Seite für das Münchner Architekturbüro mit deutscher Domain. In der Navigation ist der Wechsel durch einen Button mit der jeweiligen Ortsbezeichnung integriert. Visuell sind die beiden Seiten durch zwei Hauptfarben unterschieden: Olive für Zürich und Magenta für München. Die Farben werden für den activ hoverstate in der Navigation und der Projekte, den Bürowechsler (ZH-MÜ) und die Links verwendet. Mittels restriktiver Bewirtschaftungsrechte für die Administratoren wird die Unabhängigkeit der beiden Seiten gewahrt.