Creative · Marketing site · 2023

Balancing artistry and functionality

Hangar Studio is a Zagreb-based filming studio — equipment rental, crew, and the only original airplane set in southeast Europe. Its brand needed a website that matched the studio’s tone while surfacing every technical detail clients ask for — all under a heavy load of high-quality photo and video.

132s
Avg session
< 1s
Page load
Nuxt · Vue
Stack
A composite image showing the Hangar Studio floor plan, the studio interior, and a screenshot of the Hangar landing page.
About Hangar Studio

A unique filming set in southeast Europe

Based in Zagreb, Hangar Studio specialises in video and photo shoots. They rent equipment, supply crew, and have the only original airplane set in the region — ideal for ads and film. It’s one of the most renowned shooting studios in Croatia.

Composite image: Hangar Studio interior with visible cameras alongside a screenshot of the Hangar landing page.
The challenge

Goals to achieve

  • A website that reflects Hangar’s brand and values.
  • An interactive experience that still surfaces a large amount of technical information — studio space layout and equipment specs.
  • Speed, performance, and stability despite a heavy load of high-quality photo and video.
Development phases

From research to a picture-perfect site

A look at the seven phases that shaped the new Hangar Studio website — from competitor research to the final dynamic landing video.

01

Research

Hangar Studio’s business growth had relied mostly on word-of-mouth. To reach a wider audience and show off their services properly, they decided to build a website. Before any design or development, the groundwork came first:

  • A thorough analysis of Hangar Studio’s competitors.
  • Gathering all of the assets needed for the studio presentation.
  • Talking with the client about artistic direction and their core business goals.
Interior of Hangar Studio with a prominent sofa, two mirrors, and a plant in the foreground.
Hangar Studio interior with a green screen setup.
Laptop displaying the Hangar Studio landing page.
02

Site map variations

After research, two priorities stood out:

  • Surface every technical characteristic of the studio.
  • Showcase the rental options — studio, studio + crew, equipment only.

Hangar weighed the pros and cons of each site map together with the team. That open back-and-forth was the primary source of information about their clients’ needs and kept the design process transparent.

Site map variation 1/3
Site map variation 1/3
Site map variation 2/3
Site map variation 2/3
Site map variation 3/3
Site map variation 3/3
Comparison image showcasing two distinct layouts for the Hangar Studio webpage.
03

Experimenting with layouts

The design team used the site map to build a low-fidelity wireframe — the blueprint for the website’s layout and functionality.

Creating these early helps with:

  • Speed — quick drafts of layouts without investing too much time.
  • Early problem detection — catching potential usability issues.
  • Flexibility — showing options to the client without feeling locked in.
  • Collaboration with the rest of the design team.
04

Inspired by light and camera

The dark theme — inspired by the main photographer’s style — offers a contrast of dark and light, signalling their presence as a central figure who is always there but unseen.

Balancing artistry and functionality drove these features:

  • Circular design elements, inspired by a camera lens, for a captivating visual experience.
  • Large-scale photos that depict the studio’s flexible space.
  • An accordion menu that surfaces equipment categories without crowding the page.
  • View and download studio layouts and equipment details — addressing frequent inquiries.
  • The dynamic Hangar Studio logo featured in the landing page video.
  • An interactive aircraft preview.
Hangar Studio website page showing studio equipment.
Two tablets with screens displaying the Hangar Studio website — the landing page and studio information.
Mobile device on a stone floor displaying the Hangar Studio website.
05

Landing page video

The Hangar Studio logo doubles as a stamp, opening up the negative space inside it for a dynamic call-to-action. The logo becomes a “window” to the studio tour video, composited in After Effects so the footage plays inside the logo shape.

06

Airplane as a prominent feature

The idea was to encourage interaction with the page, not just passive observation. The “Rent airplane” section uses a panning view; the photo is elongated to show the aircraft in detail, giving mobile users a complete experience even on a small screen.

Interior of an airplane with seating chairs and windows.
curosr
Drag
07

Website development

Nuxt.js was the right fit for its blend of server-side rendering and static site generation. That combination let an essentially static site hit strong performance and SEO numbers while keeping a familiar Vue-based developer experience — easy to write reusable components and layouts that hold a consistent design language across the site.

The user-friendly routing system simplified navigation, and a wide ecosystem of plugins and modules made it easy to integrate the third-party tools the site needed.

Technologies

Speedy project execution

The shallow learning curve of Nuxt.js and Vue.js let the team move quickly — streamlined development and fast project execution.

Nuxt.js Vue.js
The results

Picture-perfect progress

The website strengthened Hangar Studio’s market credibility and made it easier to communicate with existing clients.

Three smartphones displaying different sections of the Hangar Studio website: studio rentals, studio information, and airplane rentals.
Traction

By the numbers

132 s
Average session duration
44 %
Bounce rate
< 1 s
Page load time
Testimonial
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.

PETAR KRAJAČIĆ VILOVIĆ Photographer