Beyond Orientalisms

Beyond Orientalism(s) is a two-year academic collaboration between the American University of Beirut (AUB) and the Academy of Fine Arts Leipzig (HGB), funded by DAAD. The project brought together artists, curators, and researchers to examine Orientalist discourses through exhibitions, workshops, lectures, and digital conversations across Beirut, Leipzig, and Berlin. They needed a website that could function as both a public-facing archive and an interactive research platform, built to be maintained long-term by HGB's university IT team.

 

The content didn't fit a conventional website structure. The project produced chapters (exhibitions, workshops, events), materials (essays, videos, audio, image galleries), contributor profiles, and a growing glossary of critical terms. These elements were deeply interconnected: a single essay might relate to three chapters, five glossary terms, and two contributors. A traditional menu-and pages approach would flatten all of that into something linear and hierarchical, which was exactly the logic the project was trying to resist. The platform also had to run on WordPress to align with HGB's infrastructure. That meant building the kind of dynamic, non-hierarchical navigation you'd typically need a custom frontend to achieve, inside a CMS that defaults to rigid hierarchies. And it had to be stable and maintainable enough for a university IT department to keep running after handoff.

 

The project needed a CMS architecture that could support thematic, non-linear exploration. We built four custom content types: Chapters, Materials, Contributors, and Glossary Terms. Materials are tagged with glossary terms, which propagate up to their parent chapters automatically. The glossary page becomes the primary navigation layer: click a term, see every chapter and material connected to it.

The editorial tone sits between academic rigor and warmth. The landing page opens with a greeting, "Dear Reader, عزيزي القارئ," and addresses visitors directly. The design keeps that balance: structured enough to hold research content, unconventional enough to resist feeling like a standard institutional site.

The centerpiece of the navigation the 3D interactive glossary cloud built with Three.js. Terms are distributed across a sphere using Fibonacci golden-angle spacing, rendered as real DOM elements so the variable font transitions work natively. It supports drag, pinch-to-zoom, keyboard navigation, and falls back to an alphabetical list on mobile.

The typographic system carries the project's thesis. We set the entire site in ABC Arizona by Dinamo, the first variable font that morphs between serif and sans within a single file. When we reached out, Dinamo offered the font license at no cost because they thought the project aligned with their values. On the site, the font sits in its serif state by default: academic, rooted, traditional. On interaction, it morphs toward sans: modern, stripped-back, forward-looking. That movement from serif to sans is a direct expression of the project's subtitle, "Towards New Infrastructures." It shows up across the site, most visibly in the glossary cloud, where hovering over a term triggers the transition.

 

Full WordPress build with a custom CMS architecture linking four interconnected content types. A bespoke 3D glossary cloud (Three.js). Typographic system built on ABC Arizona's variable serif-to-sans axis. Design token system. Accessible navigation with focus traps, ARIA roles, and keyboard support. Responsive layouts with dedicated mobile fallbacks.

 

The content team at AUB and HGB can manage chapters, materials, contributors, and glossary terms independently. The glossary-driven navigation works: users explore the archive by concept rather than chronology, which is what the project needed from the start. The 3D cloud gives the glossary a spatial, exploratory quality that a flat tag list wouldn't. And the whole thing runs on infrastructure the university can maintain, update, or freeze as a completed archive on their own terms.

 

The real job was translating an intellectual argument into an interface. The glossary cloud wasn't a feature request. It came from asking what non-hierarchical navigation actually means when you stop using it as a buzzword and start building it. The Arizona font morph came from the same question asked at the typographic level. The lesson we're carrying forward: start with what the project is trying to say, not what it needs to display.