Balancing artistry and functionality
Is there a better way to start designing than having breath-taking photos as an inspiration? We had the pleasure to collaborate with Hangar’s creative and talented crew in our journey to showcase the studio's space and services on their new website.
About hangar studio
A unique filming set in southeast Europe
Based in Zagreb, Hangar Studio is a professional studio that specializes in video and photo shootings. They provide clients with equipment rental options and offer the unique feature of an original airplane set, ideal for advertising projects or movies. This is one of the most renowned shooting studios in Croatia.
The challenge
Goals to achieve
- website that reflects Hangars’ brand and values
- creating interactive experience while also providing big number of technical information, including studio’s space layout and equipment specs
- optimization of site speed, performance, and stability due to variety of high quality photos and videos
Development phases
01 Research
- thorough analysis of Hangar Studio’s competitors
- gathering all of the assets needed for the studio presentation
- communicating with the client about studio’s artistic direction and identifying key aspects of their business goals
02 Site map variations
- It's essential to highlight all the technical characteristics of the studio.
- It’s important to showcase the possibilities of studio rental / studio and crew rental / equipment rental-flexibility.
03 Experimenting with layouts
The design team used the site map to create a low-fidelity wireframe, which served as the blueprint for the layout and functionality of the website.
Creating this in website design helps with:
- speed (these are quick drafts of different layouts and ideas without investing too much time)
- early problem detection (are there any potential usability issues)
- flexibility (showing these to the client helps with feedback without feeling overly committed to a specific design direction)
- collaboration with other design team members.
04 Inspired by light and camera
- circular design elements, inspired by a camera lens, create a captivating visual experience
- large-scale photos depict the studio’s flexible space
- an accordion menu is incorporated to facilitate easy navigation of equipment categories, without cluttering the space
- the option to view and download studio layouts and equipment details addresses frequent inquiries and enhances the overall user experience
- the dynamic Hangar Studios logo is featured in the landing page video
- an interactive aircraft preview
05 Landing page video
The Hangar Studio logo was used as a stamp, offering many possibilities in negative space. This includes using multimedia to create a dynamic call-to-action through video on the landing page. The logo became a "window" to the studio tour video, which was created using Adobe After Effects to manipulate the video content inside the logo shape.
06 Airplane as a prominent feature
The idea was to encourage user interaction with the page, rather than just passive observation. That’s why we used the Panning view for the "Rent airplane" section. The photo was elongated to show the aircraft in detail. This way, we were able to provide mobile users with a complete experience, even on a small screen.
Drag
07 Website development
technologies
Speedy project execution
The shallow learning curve associated with Nuxt.js and Vue.js ensured that our team could rapidly grasp these technologies, resulting in streamlined development and efficient and quick project execution.
01
Nuxt
02
Vue.js
The Results
Picture-perfect progress
The website strengthened Hangar Studio's market credibility and eased communication with existing clients.
Average session duration
132 s
Bounce rate
44 %
Page load time under
1 s
Photographer
“They put an extra effort not only to make the website out of the content we provided them, but they proposed some extra features and content which would become beneficial for our business.”