Warning: Trying to access array offset on false in /var/www/vhosts/rogerburkhard.com/httpdocs/wp-content/themes/rogerburkhard/single-projekte.php on line 6Roger Burkhard — Development + Interaction Design — Kraftreaktor
Zum InhaltHomeProfileWorkIndexJournalImpressumDatenschutz
Roger Burkhard
Development + Interaction Design
Bern, Switzerland

064. Kraftreaktor (2019)
Website in Kollaboration mit
Büro a+o.

Der Kraftreaktor gilt als der Treffpunkt der Kletterszene im Aargau. Die eindrückliche 18 Meter hohe Halle bietet rund 70 Routen und das 20 Meter überhängende Dach bringt selbst das Adrenalin von erfahrenen Klettern zum kochen! Eine grosse Boulder-Halle, Kletter-Kurse und ein Café runden das Angebot ab. Seit der Eröffnung vor rund 22 Jahren konnte eine treue Stamm-Kundschaft aufgebaut werden und täglich wird Anfängern die Freude und Sicherheit am Seil von leidenschaftlichen Klettern vermittelt.

In Kollaboration mit dem Aarauer Grafik Atelier Büro a+o erhielt ich den Auftrag, die neue Website in Zusammenhang mit dem neuen Branding umsetzen. Basierend auf Adobe XD Prototypen entwickelte ich eine flexible Inhaltsstruktur auf Basis von WordPress. Entsprechend kann Kraftreaktor selbständig Inhalte basierend auf ihren Branding Guidelines generieren. Daten der aktuellen Routen werden über eine Schnittstelle vom Routen-Tool übernommen und können entsprechend in Realtime auf der Website dargestellt werden.

Mit Scroll- und Mikro-Animationen, Blur-Effekten und der Integration des animierten Logos via der Lottie Technologie enstand auch im Frontend eine moderne Umsetzung mit App Charakter. Die Inhalte, wie auch die Navigation werden mit viel Weissraum dargestellt um den Blick auf das Wesentliche zu lenken und die geometrische Schrift Stolzl von The Northern Block unterstützt die mimalistische und moderne Aesthetik der Website.

001.
Startseite mit Lottie-Animation
002.
Parallax Effekt auf Startseite
003.
Kraftreaktor Mood
004.
Detailseite
005.
Massgeschneiderte Icon-Sets
006.
Kraftreaktor Mood
007.
Übersicht der Kurse
008.
Team-Ansicht
009.
Kraftreaktor Mood
010.
Team-Ansicht
011.
Team Mouseover
012.
Team-Ansicht
013.
Team Mouseover
014.
Journal Übersicht
015.
Kontaktseite
016.
Kraftreaktor Mood