arrow_backAll projects

Roath Chamber Orchestra

Info and scroll driven animation website

Click an image to view full image

A website for a local orchestra, showcasing their events and history. Fun to engage with a new client and release another project into the wild.

Features

  • Animation - The logo was nice, and the digital world allowed it to be brought to life with a line drawing effect. A scroll-driven transition opens up the nav bar items as you enter the page.
  • Catalogue View - When adding a concert with its programme, the pieces, composers and more metadata can instantly get viewed in an alternative way, on the catalogue page. This gives a new perspective on the orchestra's historical repertoire.
  • Custom CMS - Once logged in to the site in 'admin mode', new elements are revealed on the page to allow for content creation and editing. This allows the client to easily update the content and lets the site continue to be relevant.

    • Project Details

    After playing in the orchestra for a few years, I thought about creating a website to augment the existing Facebook page. The orchestra liked the proposition and there was collaboration to gather the relevant information. We ended up with a platform to tell the story of the orchestra and attract new members.

    The scroll driven transition is a relatively new web design trend that I wanted to explore. There wasn't much good tooling, so I made a transparency effect on the main container with an striped pattern underneath to help align key 'timings' in 'space'. Even for only a few elements, the moving pieces proved fairly time consuming to fine tune. I think the result is that it reinforces the user's intent of entering the page, opening it up for you, similar to how shop doors may be pushed to enter. But maybe that's overthinking it.

    External Links

    webProject Site