The Vienna Template: Bringing Viennese Modernism to Figma UI Design

The Vienna Template: Bringing Viennese Art and Architecture into Figma To kick off www.viennadesignweek.at/en/, the Vienna Tourist Board teamed up with creative agency Jung von Matt DONAU to drop something super cool: The Vienna Template! Instead of running a typical travel ad campaign, this project hands out a free UI design system and presentation template directly on Figma.

Co-created with curators from the Vienna Museum of Applied Arts (MAK), this toolkit translates the iconic philosophy of Viennese Modernism into slick, contemporary UI components. It revives the classic concept of Gesamtkunstwerk (a total work of art), offering creative teams a beautifully structured design framework packed with rich history.

Every layout element in the kit connects directly to a real piece of early 20th-century design history:

  • The main image grid draws its proportions from a geometric wine glass designed by Josef Hoffmann for J. & L. Lobmeyr.
  • Custom text underlines mirror the expressive brushstrokes from Dagobert Peche’s Kardinal fabric pattern.
  • The typography blends clean monospaced details with elegant serif headers, paying homage to the editorial layout of Wiener Werkstätte.
  • Checkerboard dividers and asymmetric white space create a lively rhythm across 33 unique slide configurations.

The color tokens are pulled straight from historical archives:

  • Otto Wagner Green (RAL 6011), inspired by historic Stadtbahn rail stations.
  • The luminous Klimt Gold.
  • A soft ceramic blue taken from Vally Wieselthier’s interior sketches.

Alongside master creators like Koloman Moser, this UI design kit features dedicated case studies celebrating female design pioneers such as fashion reformer Emilie Flöge. Bringing museum archives straight into daily design tools shows just how beautifully traditional craftsmanship can support modern digital workflows.

Learn more about the project at template.wien.info/ or dive right in and test out the template on the Figma Community!

The Vienna Template: Mang tinh thần kiến trúc và nghệ thuật Vienna vào Figma

Nhân dịp khai mạc www.viennadesignweek.at/en/, Cục Du lịch Vienna đã hợp tác cùng agency sáng tạo Jung von Matt DONAU để ra mắt The Vienna Template. Thay vì thực hiện những chiến dịch quảng bá du lịch thông thường, dự án cung cấp một bộ UI design system và template thuyết trình hoàn toàn miễn phí trực tiếp trên Figma.

Được phát triển cùng các giám tuyển từ Bảo tàng Nghệ thuật Ứng dụng Vienna (MAK), bộ công cụ chuyển hóa triết lý của chủ nghĩa Hiện đại Vienna thành các component giao diện hiện đại. Dự án hồi sinh khái niệm Gesamtkunstwerk (tác phẩm nghệ thuật toàn diện), mang đến một khung thiết kế chỉn chu và giàu giá trị lịch sử cho các đội ngũ sáng tạo.

Mỗi phần layout trong bộ công cụ đều gắn liền với một di sản thiết kế thực tế từ đầu thế kỷ 20:

  • Lưới hình ảnh (image grid) chính dựa trên tỷ lệ từ chiếc ly rượu hình học do Josef Hoffmann thiết kế cho J. & L. Lobmeyr.
  • Đường gạch chân chữ tái hiện nét cọ trên mẫu vải Kardinal của Dagobert Peche.
  • Typography kết hợp giữa tọa độ monospaced sắc nét và tiêu đề font serif, gợi nhớ đến cấu trúc biên tập của Wiener Werkstätte.
  • Các vạch phân cách dạng bàn cờ và khoảng trắng bất đối xứng tạo nên nét nhịp nhàng qua 33 cấu hình slide khác nhau.

Bảng màu (color tokens) cũng được trích xuất chính xác từ các tài liệu lưu trữ:

  • Màu xanh Otto Wagner Green (RAL 6011) từ các ga tàu Stadtbahn lịch sử.
  • Sắc vàng Klimt Gold.
  • Tông xanh gốm sứ lấy từ bản phác thảo nội thất của Vally Wieselthier.

Bên cạnh Koloman Moser, thiết kế UI này còn dành riêng các case study để tôn vinh những nữ nghệ sĩ tiên phong như nhà cải cách thời trang Emilie Flöge. Việc đưa tư liệu bảo tàng vào công cụ làm việc hàng ngày cho thấy nét đẹp thủ công truyền thống có thể hỗ trợ hiệu quả cho quy trình thiết kế giao diện hiện đại.

Bạn có thể tìm hiểu thêm về dự án qua template.wien.info/ hoặc trải nghiệm trực tiếp bộ template này trên Figma Community.

The Vienna Template: Bringing Viennese Modernism to Figma UI Design

Img01 - The Vienna Template: Bringing Viennese Modernism to Figma UI Design

Posted

in

by

Tags: