Urban Dream is a digital exhibition that dives into some of the most radical, ambitious, and sometimes outright impossible architectural ideas. It is a space where unbuilt cities, speculative projects, and experimental urban concepts are brought together to show how architecture is not just about constructing buildings but about imagining new ways of living.
The project was developed as part of the "Information Modeling and Web Technologies" course in the Master's Degree in Digital Humanities and Digital Knowledge at the University of Bologna, under the supervision of Professor Fabio Vitali. It is the result of a collaborative effort between Alisa Antonova, Elena Binotti, and Hubert Krzywonos, combining digital curation, interactive design, and historical research to create an accessible and engaging platform.
The exhibition is built around the idea that some of the most fascinating architectural projects never made it past the concept stage. Some were too ambitious, others too utopian, and many were simply ahead of their time. These "unbuilt cities" still play a huge role in shaping architectural discourse, influencing later designs, and sparking debates about how we should build and inhabit our environments.
Urban Dream brings together a selection of these visionary projects, organizing them into different narratives that help make sense of their historical, spatial, and conceptual significance. It is not just a collection of random futuristic buildings; instead, it follows a clear structure that allows visitors to explore architecture through different lenses:
This thematic structure is what makes Urban Dream more than just an archive—it is an interactive research tool that allows users to navigate and compare projects in a meaningful way.
The projects featured in Urban Dream were chosen based on their historical impact, conceptual strength, and relevance to contemporary architectural discussions. We wanted to showcase designs that push boundaries, challenge conventions, and make us rethink the way we build cities. The selection includes both well-known classics and lesser-known experimental works.
For example, we included Walking City by Archigram, a vision of a mobile, self-sustaining city that could move across landscapes like a giant machine. This idea, though never built, reflects a deep fascination with technology and adaptability in urbanism. Similarly, Plan Voisin by Le Corbusier presents an extreme modernist vision that would have demolished half of historic Paris to make way for towering skyscrapers—an idea that was radical and controversial but influenced many later urban developments.
We also included more recent concepts, such as The Line, a hyper-dense linear city currently under development in Saudi Arabia, which embodies both the promise and the ethical concerns of futuristic urban planning. On the other hand, projects like Torre David, an unfinished skyscraper in Caracas turned into a self-organized community, show how buildings can take on new, unexpected lives beyond their original intentions.
Beyond these famous examples, we also wanted to highlight experimental and artistic projects, like Oase No. 7, an inflatable structure that redefines public space, and Wrapped Reichstag, a temporary transformation of a historic building into an ephemeral artwork. These examples show how architecture can be more than just functional—it can also be a medium for political and artistic expression.
One of the key aspects of Urban Dream is that it exists entirely in a digital space. This is not just a necessity but a deliberate choice. Many of the projects we feature were never meant to be physically realized, and in some cases, they only exist as sketches, collages, or theoretical writings. A digital format allows us to bring these ideas to life in new ways, using maps, animations, and interactive filtering to explore them dynamically.
Instead of a traditional museum exhibit, where visitors walk through physical spaces, Urban Dream encourages exploration through thematic categories, spatial mapping, and timeline-based navigation. This structure allows for a non-linear, immersive experience, where users can approach the projects from multiple angles and see connections between different architectural visions.
Developing this exhibition made us reflect on the role of unbuilt architecture and how it influences real-world urban planning. We realized that even projects that seem impractical or impossible have a way of shaping future designs. Many of the ideas explored in the exhibition—such as modular housing, floating cities, or high-tech infrastructures—are now being revisited in contemporary urban planning as solutions to climate change, housing crises, and technological shifts.
Urban Dream is a tribute to radical imagination in architecture, a way to celebrate the boldest ideas that challenged conventions and redefined what cities could be. Through this digital platform, we aim to make these concepts accessible to a wider audience, encouraging curiosity and discussion about the future of urban life.
Urban Dream is designed as an interactive digital exhibition, structured to provide users with multiple entry points into the world of speculative and visionary architecture. Rather than a linear presentation, the website offers a dynamic and exploratory approach, allowing visitors to engage with projects based on their thematic, historical, and spatial significance. The content is carefully organized to balance accessibility with depth, ensuring that both casual visitors and more dedicated researchers can navigate the exhibition in a way that suits their interests.
The website is divided into several key sections, each serving a distinct function within the broader narrative of the exhibition. The homepage acts as an introductory portal, immediately immersing users in the visual and conceptual world of Urban Dream. A flowing grid animation presents a curated selection of projects, establishing the idea that architecture is constantly evolving, even when it remains unbuilt. Below this, the homepage provides an overview of the exhibition's themes, a historical timeline, and practical information about the project.
From here, users can navigate to the exhibition section, which is the core of the experience. This page is structured around thematic categories rather than a chronological or geographical arrangement. The exhibition is broken down into five distinct narratives—Space, Time, Reality, Context, and Ideals—each representing a different way of understanding architectural experimentation. These categories allow visitors to explore projects through different conceptual frameworks, emphasizing the interconnectedness of ideas across disciplines and time periods.
The map page introduces a spatial dimension to the exhibition, placing projects within a geographic framework. Users can explore how visionary ideas have emerged in different locations, from European modernist experiments to futuristic urban visions in the Middle East and beyond. The interactive interface enables filtering by project type, reality (in theory or in practice), and contextual categories, making it an engaging tool for comparative analysis.
The items page provides a detailed database of individual projects, acting as an archive where users can explore each architectural concept in depth. This section includes high-resolution images, descriptive texts, contextual analysis, and cross-references to related projects. The layout is designed to be intuitive, with filtering and sorting functions that allow users to search by year, category, or conceptual theme.
The about page serves as a meta-narrative, explaining the project's research methodology, curatorial approach, and development process. It also provides background on the team behind Urban Dream, offering transparency on how the exhibition was conceived and assembled.
Urban Dream is built to encourage exploration, integrating several interactive elements that make navigation fluid and engaging. Thematic tabs and filters enable users to quickly switch between different perspectives, ensuring that they can move seamlessly between broad conceptual frameworks and specific projects. The site also incorporates dynamic sorting mechanisms, particularly in the items and map sections, allowing for a customized research experience.
A major emphasis is placed on visual storytelling. Instead of relying solely on text-based descriptions, the exhibition makes extensive use of imagery, animations, and interactive elements to communicate architectural concepts. The use of a carousel system in the exhibition section allows users to preview projects within each thematic category before diving into detailed pages.
The historical timeline presents a chronological overview of key moments in speculative urbanism, providing users with historical context while maintaining an interactive format. By scrolling through different eras, visitors can see how architectural visions have evolved in response to cultural, technological, and political shifts.
Another crucial feature is the SVG-based interactive map, which offers a spatial approach to navigation. Users can explore projects based on their geographic distribution, revealing patterns in architectural experimentation across different regions. This map is particularly useful for understanding the global dimensions of speculative architecture, highlighting how similar ideas have emerged in different cultural contexts.
One of the primary goals of Urban Dream is to make complex architectural ideas accessible to a broad audience. The content is structured in a way that allows for multiple levels of engagement, catering to both general visitors and those with a deeper academic interest in architecture.
Each project page follows a consistent format, ensuring that users can easily compare different items. The structure includes:
Additionally, the website's design choices enhance readability and usability. The typography, color scheme, and spacing are optimized for clarity, while interactive elements provide additional layers of information without overwhelming the user. The filtering and sorting functions ensure that users can find specific projects efficiently, while the modular layout allows for future expansion of the exhibition.
Urban Dream is built around a strong visual identity that makes the experience both aesthetically compelling and functionally intuitive. The project's design choices reinforce its core themes: radical urban visions, speculative architecture, and the intersection of history and the future. Every layout decision, typography selection, and color scheme contributes to a sense of immersion, creating a space where users can explore ideas beyond the physical limits of traditional exhibitions.
The visual identity of Urban Dream originated from a deliberately minimal design approach. We wanted the interface to feel clean, bold, and unobtrusive, allowing the content—the speculative architectural visions—to take center stage. The deep red was chosen as a monolithic, almost ideological color, evoking strength, urgency, and radical imagination. This restrained aesthetic—anchored in geometric structure, generous white space, and limited distractions—reflects the exhibition's conceptual foundation: a space where ideas speak louder than decoration.
One of the first things that stands out in Urban Dream is its bold use of typography. The project primarily employs two fonts:
The color palette is intentionally limited but powerful. The dominant shade is deep red (#D02E02), used for headings, buttons, and interactive elements. Red has been chosen for its association with boldness, revolution, and avant-garde ideas, all of which are central to the themes of the exhibition. To balance this intensity, the background remains predominantly white, while black and gray tones provide contrast and enhance readability.
The hover effects subtly reinforce the visual style without overwhelming the user. Instead of drastic color shifts, elements become slightly darker or gain a subtle underline when interacted with, maintaining consistency across the design.
Urban Dream follows a clean grid-based structure, optimized for both desktop and mobile viewing. The entire website is designed to prioritize exploration, with each section leading naturally to the next.
Navigation is kept simple and efficient. The navbar remains fixed at the top for easy access, while dropdown menus provide filtering options without cluttering the interface. Buttons and interactive elements are large and well-spaced, ensuring usability across different devices.
Visual content plays a crucial role in Urban Dream, given that architecture is inherently a visual discipline. The project incorporates a mix of archival images, concept sketches, 3D renders, and diagrams, all chosen to provide deeper insight into each project.
Animation is used selectively to enhance engagement without overwhelming the experience. Smooth fade-ins and transitions make navigation feel fluid, while the parallax scrolling effects in the timeline section create a sense of depth.
The project cards are one of the most carefully designed components of the site. They are used extensively in the exhibition and items sections, providing a compact yet information-rich preview of each architectural vision. Each card contains:
To maintain readability and consistency, card layouts automatically adjust based on screen size, ensuring they remain clear and accessible on mobile devices. The CSS ensures that all images within cards maintain a fixed aspect ratio, preventing distortion and preserving the original composition of architectural drawings and concept art.
Urban Dream is designed to be fully responsive, adapting seamlessly to different screen sizes and resolutions. The use of flexbox and CSS grid layouts allows content to reflow dynamically, ensuring an optimal experience on both large desktop monitors and small mobile screens.
Several media queries fine-tune the layout:
Accessibility is also taken into consideration:
One of the key design principles of Urban Dream is that everything that can be interacted with should feel interactive. This means that buttons and links have clear visual feedback when hovered or clicked.
The dropdown menus for filtering projects maintain a minimalist style, appearing only when needed and disappearing smoothly to avoid distractions.
The design of Urban Dream is meant to reflect the essence of the exhibition itself: a place where futuristic visions, experimental ideas, and historical narratives come together. By combining bold typography, a structured layout, carefully chosen imagery, and smooth interactivity, the project creates a digital experience that is both visually striking and easy to navigate.
More than just a website, it functions as a research and discovery tool, giving users the freedom to explore radical architecture in their own way. The combination of strong graphic identity, intuitive navigation, and interactive elements ensures that Urban Dream is not just a repository of information, but an engaging space where speculative architecture comes to life.
The Urban Dream logo is a bold, minimalist representation of the relationship between humans and the city. Its design can be seen as a stylized human figure, represented by the central opening, surrounded by concentric rings that symbolize the layered structure of an urban environment. This creates a strong visual metaphor: the city is not just a collection of buildings but a space shaped by human presence, movement, and interaction.
The circular structure gives a sense of enclosure, suggesting the way cities surround and define the people who inhabit them. The rings can be interpreted as different layers of urban life—infrastructure, communities, or even the evolving history of a place. They also evoke ideas of movement and expansion, reinforcing the notion that architecture and urban planning are in constant transformation.
A key feature of the logo is the open gap at the bottom, which interrupts the otherwise perfect circular form. This detail is significant because it suggests a gateway, a passage into the city, or even an invitation to explore. It breaks the idea of a closed system and instead emphasizes accessibility, interaction, and openness to change—values that align with the speculative and visionary nature of the exhibition.
The simplicity of the design reflects a modernist and functional approach, keeping the visual identity of Urban Dream clean, impactful, and easy to recognize. The contrast between the rigid, geometric structure and the organic concept of human presence reinforces the idea that the city is both a designed space and a lived experience.
The deep red background and stark white lines create a strong visual impact, making the logo highly recognizable. Red is often associated with boldness, transformation, and radical thought, making it an ideal choice for an exhibition focused on avant-garde and speculative architecture. The use of white against red enhances clarity and contrast, ensuring that the message of the logo is immediate and striking.
The Urban Dream logo is more than just a visual identity—it acts as a conceptual gateway to the themes of the exhibition. It encapsulates the core ideas of human interaction with urban space, the layered complexity of cities, and the continuous transformation of architecture. It is a symbol of exploration, where the city is not seen as a static entity but as a space of possibility, innovation, and future visions.
The map featured in Urban Dream is not a traditional geographic tool. Instead, it acts as a conceptual landscape — a symbolic cartography where visionary architecture is mapped not by coordinates, but by ideas. Circles placed over a stylized image represent unbuilt cities, radical blueprints, and unrealized futures. This visual layer offers immediate access to a curated selection of architectural experiments, emphasizing their spatial imagination rather than their physical location.
Each clickable point is more than just a marker: it’s a narrative entry. By interacting with the map, users uncover projects that challenge norms, reimagine the built environment, and reflect utopian or dystopian aspirations. The aesthetic is minimalist but charged with conceptual meaning — a flat surface that evokes depth through interaction.
The interactive behavior is central to how the map functions. Users are encouraged to click directly on the circles embedded in the SVG layout. Each point is tied to a unique identifier, which retrieves additional information connected to that specific project. This allows seamless movement between spatial exploration and metadata consultation — bridging visual engagement with structured knowledge.
While the map offers an abstract overview, it’s tightly connected to a more systematic component placed just below: a dynamic, responsive table that serves as the second core of the page.
This table was created out of a personal and curatorial need: the desire to maintain a transparent, coherent catalogue of all the architectural projects presented within Urban Dream. Its primary function is to expose the metadata of each project in a format that is easy to read, compare, and analyze.
Each row represents a project, while the columns reflect key conceptual and factual elements:
The design ensures that the table is not static: every column header can be clicked to sort the dataset in ascending or descending order, allowing for chronological, alphabetical, or thematic reading.
But beyond simple sorting, the most distinctive feature lies in the embedded dropdown menus that let users filter the dataset interactively. For example, one can isolate all radical projects, or all unbuilt utopian proposals. The filters are combinable, making it possible to perform complex queries like:
Each change updates the table live, without reloading the page — creating a fluid, exploratory experience.
The table isn’t just a digital spreadsheet — it’s a curatorial tool that transforms raw data into insight. It invites users to read across projects, trace patterns, recognize clusters, or notice absences. It allows for comparative readings: by ideal, by status, by historical moment.
This form of metadata navigation reflects a deeper ambition of Urban Dream: to explore how unbuilt visions can still shape critical discourse. By exposing their structure, intentions, and typologies, the table contributes to a new kind of architectural archive — one that treats speculation as material worthy of analysis.
Together, the map and the table construct a two-layered system: the visual and the analytical. One appeals to intuitive exploration, the other to structured reflection. This dual interface allows the audience to approach the project in multiple ways — spatially, conceptually, historically.
For curators, designers, or researchers, this tool can support deeper study. For general audiences, it offers a guided but flexible route through a landscape of ideas. In both cases, it enables a form of critical curation, where filters and interactions become methods to rethink how we catalogue what has not yet — or never — been built.
The CSS file that governs the Urban Dream interface is a modular, scalable stylesheet that translates conceptual design into concrete structure. It does so by organizing rules into thematic blocks — typography, layout, navigation, interactivity — and by using responsive design principles to maintain consistency across devices.
Typography is established through @font-face, importing “Inter” for its neutral yet contemporary look. The entire site inherits this typeface, paired with a strict color palette centered around #d02d00 — a red used not only for text and borders, but also for hover effects, arrows, dropdowns, and interactive cues. This makes the interface feel coherent and ideologically marked, almost editorial.
The page layout is governed by Flexbox, with .row and .container controlling spacing and alignment. The .info-section and .custom-margin blocks use proportional widths and min-width constraints to ensure that both text and SVG elements remain readable even when screen real estate is reduced.
SVG interactivity is achieved through the class .image-mapper-shape, which defines transparent clickable zones. A hover effect overlays a soft red tint, implemented with fill and fill-opacity, using smooth transitions to maintain visual elegance.
The metadata table follows a semantic structure, with thead, th, and td all styled for clarity. Each column is clickable (cursor: pointer) and sortable, thanks to the .sort-arrow class, which rotates via transform: rotate(180deg) to indicate direction. The choice of a thin red underline or border communicates interactivity without overwhelming the aesthetic.
Filters are handled through .custom-dropdown, .dropdown-menu, and .menu-item. Positioned absolutely under the headers, these menus are shown or hidden via class toggling, and styled with minimalism: red borders, white backgrounds, and padding. They adapt responsively across media queries — collapsing into modal-like overlays on mobile screens to avoid overlap and preserve usability.
The .hidden-info section, used to reveal expanded metadata on each project, is animated with opacity and transform, triggered via the .show class. This ensures that additional content doesn’t interrupt the table’s rhythm, but emerges softly when needed.
Media queries at 992px, 768px, and 480px thresholds adjust font sizes, table width, dropdown behavior, and image containers. The design remains mobile-first, ensuring that the archive is accessible on both wide screens and small handheld devices.
Ultimately, the CSS serves as a silent framework: a tool that shapes perception, interaction, and interpretation. It reinforces the identity of Urban Dream as a speculative archive — minimalist in form, conceptual in depth, and fluid in navigation.
Urban Dream doesn’t aim to recover the past or predict the future. Instead, it carves out a space for what exists in between: imagined cities, radical thoughts, incomplete manifestos. This map and catalogue are part of that gesture — giving form to the unbuilt, and turning metadata into meaning.
The Exhibition page is one of the core components of the Urban Dream platform. It is structured to guide users through a curated selection of architectural projects using a thematic and highly visual approach. The page is organized into three main sections:
The tab system uses Bootstrap’s tab-pane architecture with data-bs-toggle="pill". Each thematic section is marked by a unique ID (e.g., #space, #time, etc.) and is activated client-side, meaning navigation occurs without reloading the page. This system allows users to engage with architectural content through semantic categories instead of chronological or geographic filters.
Each tab section includes a local filtering system, implemented with button groups (.btn-group). Each button carries a data-filter attribute corresponding to CSS classes assigned to project cards. When a button is clicked, a JavaScript function in exhibition.js toggles the visibility of cards based on matching filters. This behavior is instantaneous and does not require page reloads.
Example filters include:
global, europe, asia, americabefore-2000, after-2000in-theory, in-practiceurban, artistic, radical, technologicalutopian, dystopian, innovative, deconstructiveEach architectural project is displayed as a card that includes:
The cards are wrapped within a responsive grid (.card-wrapper) that adapts based on device width:
Hover effects and high contrast ensure readability and enhance interaction.
The exhibition stylesheet defines responsive behavior through media queries. The layout adapts fluidly to different devices, with filter buttons wrapping on small screens and font sizes scaling appropriately. Colors (deep red, white, black) are selected to guarantee accessibility and maintain visual consistency.
The entire system is designed to be extensible. New thematic tabs can be added by replicating the tab-pane structure and assigning corresponding filters and IDs. New cards can be introduced into any section, provided they include appropriate class attributes for filtering. The current JavaScript allows single-filter logic, but it can be expanded to support multiple simultaneous filters in future versions.
Urban Dream is more than just a static exhibition—it is designed as an interactive and dynamic digital space where users can explore, filter, and engage with speculative architecture. The project's functionality is built using JavaScript, which plays a key role in making the experience seamless, responsive, and engaging. The website's interactive components, such as the filtering system, sorting mechanisms, toggle displays, and map navigation, all contribute to a user experience that is fluid and adaptable.
One of the most important interactive features of Urban Dream is the ability to filter and sort architectural projects based on different criteria. This system is implemented in the items section and works through JavaScript functions that dynamically update the displayed content based on user selections.
Users can filter projects by:
The filtering works in real-time: when a user selects a filter, the list of projects updates instantly without needing a page refresh. This is achieved through event listeners that detect when a filter is clicked and dynamically modify the visibility of certain items.
Sorting is another key functionality. Users can sort projects alphabetically, by year, or by category, thanks to a JavaScript function that rearranges table rows or grid items dynamically. The sorting mechanism updates the table structure in the items section, ensuring that projects are displayed in a logical order based on user preference.
The map page is one of the most unique features of Urban Dream, allowing users to explore projects in a spatial context. Instead of just reading about radical architecture, users can see where these concepts were developed, debated, or imagined.
The map is implemented using SVG elements combined with JavaScript event listeners that make different parts of the map clickable and interactive. When a user clicks on a map marker, the corresponding project details are dynamically displayed. Additionally, the map allows for category-based filtering, meaning users can view only unbuilt projects, futuristic utopias, or projects from specific regions.
To keep the interaction smooth, JavaScript ensures that hover effects, popups, and zooming work efficiently. When a user hovers over a project marker, additional details appear, giving a quick overview without requiring a full page reload.
Another interactive element of the site is the toggle feature, which allows users to reveal more information about a project by clicking a "+" icon. This functionality is essential for maintaining a clean layout while still providing detailed information when needed.
Each project entry in the items section has a collapsed state that only displays the title, year, and basic details. When the toggle button is clicked, a JavaScript function expands the row, revealing a more in-depth description, images, and additional context. Clicking again collapses the entry, keeping the interface streamlined and preventing information overload.
The JavaScript behind this feature ensures that multiple toggles can be opened simultaneously while preventing conflicts between different items. It also uses smooth animations to make the transition between expanded and collapsed states visually appealing.
Urban Dream also incorporates dynamic elements such as a timeline animation and an image carousel, which make the exhibition feel more engaging.
Urban Dream is designed to be fully responsive, ensuring smooth functionality across devices. JavaScript plays a role in adjusting layouts dynamically, detecting screen sizes, and modifying element behaviors accordingly.
Some examples of this adaptation include:
Media queries in CSS handle most of the visual adjustments, but JavaScript ensures that interactive elements function properly across different devices.
Since the exhibition contains a large dataset of projects, optimization is crucial to maintaining performance. JavaScript is used to minimize unnecessary reloading and optimize rendering by:
To handle potential errors (e.g., missing images, broken links, or unexpected inputs), JavaScript includes fail-safe mechanisms that display fallback content when needed.
The functionality of Urban Dream is what truly brings the exhibition to life, transforming it from a static collection of architectural concepts into an interactive research and exploration tool. JavaScript drives real-time filtering, interactive mapping, dynamic toggling, and smooth animations, ensuring that users can engage with the content in a fluid and engaging way.
By integrating these features seamlessly, Urban Dream not only showcases radical architecture but also invites users to actively participate in discovering and analyzing visionary urban concepts. The combination of a well-structured dataset, intuitive navigation, and interactive components makes this digital exhibition an engaging experience that goes beyond traditional architectural documentation.