AAU Anastas
An architecture studio
Design
Development
Agency

AAU Anastas is an innovative architecture studio located in Bethlehem, Palestine, with an additional office in Paris. Co-founded by Elias and Yousef Anastas, the studio is dedicated to exploring the intricate relationship between crafts and architecture. Their work spans a diverse range of scales, from furniture design to expansive territorial explorations. AAU Anastas is particularly noted for its advocacy of contemporary structural stone usage in architecture, focusing on low carbon footprint structures and the responsible exploitation of quarries.

The primary objective for AAU Anastas was to develop a website that transcended the conventional portfolio format. Instead of merely showcasing their projects, the goal was to create an abstract visual representation that encapsulated the studio's philosophy and practices. We aimed to craft a digital experience that would effectively communicate the studio's narrative while engaging users in a dynamic and interactive manner.

To achieve this vision, we collaborated closely with AAU Anastas to design and develop a website that emphasises video as the core storytelling medium. Each of their most impactful projects is presented through their short films, allowing users to immerse themselves in the narrative behind each project or idea. Users can scroll through a full timeline that transports them to various films, providing a seamless journey through AAU Anastas's work promoting space where they can explore and be immersed in. Each project can be clicked on for more information where users encounter a unique interface that allows them to interactively and creatively engage with content - move, resize, or delete according to their preferences.

The website is built on a robust and customisable Sanity CMS, which empowers AAU Anastas add, remove, or reorder short films easily, ensuring that they can maintain an up-to-date and relevant online presence despite the site's complex front-end design.

Screenshot of the expandable menu module that allows users to select different projects to watchScreenshot of the expandable menu module that allows users to select different projects to watch
Screenshot of Anastas website on the Contact page displaying their bio, addresses, and images.Screenshot of Anastas website on the Contact page displaying their bio, addresses, and images.
Screenshot of the Contact page on a mobile deviceScreenshot of the Contact page on a mobile device
A selection of UI components from our documentationA selection of UI components from our documentation

Development

We knew from the outset, the experience had to surround the video content, and that the fidelity and streaming performance would be pivotal for the users. Hosting the video files directly from Sanity's content delivery network was not an option due to their scalability, so we began to investigate alternative options which would fit our needs.

Serving our files from an AWS S3 bucket would be most logical from a scalability/cost stand point. It has a robust api for integration within our stack, and with Amazon Elastic Transcoder service and AWS Elemental MediaConvert, we can ensure video files are optimized for the web without manual conversion. Though, all this flexibility from an unmanaged third-party required more development time which did not align with our client's plan.

We needed a managed solution which would enable us to focus on the user-interface and not be concerned with the video hosting infrastructure. Vimeo, already known for their video platform, offers a comprehensive api and the ability to use their CDN for our custom player. There is an intuitive UI for our client to upload and process their video content that is more approachable than AWS which is built for engineers.

Moreover, Vimeo supports HLS (Http Live Streaming) to serve up on-demand video at different resolutions and bitrates. HLS players utilize dynamic network monitoring to determine which files to begin in order to reduce the likelihood of buffering which is the primary concern for the client.

Technical graphic showing how we deliver video to the AAU Anastas using HLSTechnical graphic showing how we deliver video to the AAU Anastas using HLS
Visit Site

How can we help?

info@automaticengineering.com

Follow Us

@autoengineering
Automatic Engineering © 2024
Automatic is the sister brand of  Manual Engineering