1. Project Overview

House of Design is a project stemming from the study in the Information Modelling and Web Technologies course. Through this project, we aim to create an engaging, informative website that showcases the artistic and practical value of interior design objects. The project features 19 selected pieces, created by six well-known designers who have shaped the history of industrial design. These pieces are thoughtfully placed in a purpose-designed house, aiming to elevate the perception of interior design and celebrate it as a powerful art form that enhances our spaces. By situating these objects within a real-world context, we demonstrate their practical value beyond museum displays, reinforcing interior design’s role as a significant form of art.

This exhibition, contextualises iconic design pieces within a household setting, allowing them to communicate, provoke reflection, and connect past and future. These pieces, more than mere objects, are cultural artefacts that have shaped our relationship with time, space, and daily essentials, underscoring how interior design creativity enriches everyday life. Reflecting this, our project balances usability with aesthetic appeal, aiming to create a website that is both functional and visually refined, just as these design objects are crafted to be both ergonomic and beautiful in everyday use

To be achieved using high-quality images and accurate 3d models, descriptions, and commentary that focus on the artistry of interior design.

1.2 Objects and Designers

We selected 19 pieces from Triennale’s permanent collection, spanning from the 1950s to the 1990s, to illustrate how the evolution of design is not merely about aesthetics but also reflects changing relationships with time and space. Over the decades, design adapted to faster routines, greater efficiency, smaller living spaces, and the integration of technology.

The selected pieces were created by seven visionary designers—Enzo Mari, Vico Magistretti, Ettore Sottsass Jr., Achille Castiglioni, Marco Zanuso, Joe Colombo and Gerenzani Pietro—who have profoundly shaped the history of industrial design.

These objects showcase how items that were once considered luxurious status symbols, such as televisions and washing machines, have become accessible essentials with central roles in our daily lives. These pieces embody not just design innovation but also cultural shifts, illustrating how creativity and functionality can coexist to meet the needs of modern living.

1.3 Project Goals

The project’s main objective is to develop a digital experience that complements physical exhibits, enhancing the educational value of a collection through a website and a digital tool to enrich the exhibition experience. This experience aims to:

• Contextualize objects within a domestic space outside of a museum environment
• Emphasize the aesthetic and practical value of interior design
• Showcase the craftsmanship, creativity, and historical relevance of diverse design styles

Our goal is to make design accessible and engaging, providing universal access to heritage and promoting interaction with design as an art form.

1.4 Storytelling and Narrative Development

To achieve universal accessibility and meaningful engagement with heritage, we’ve developed various narrative perspectives and layers of description. Users can experience the exhibition from different perspectives through distinct storylines:

• History
• Designers
• Usage
• Space

We’ve structured the narrative in layers, from introductory to detailed, allowing a wide range of audiences, from children to non-experts, to explore and enjoy the exhibition. Interactive click buttons enable users to access additional information and deepen their experience as desired.

1.5 Target Users

The project is designed to make exhibitions more interactive, immersive, and educational, accommodating diverse users across age groups, expertise levels, and available time:

• Young audiences: we’ve integrated short texts, interactive click buttons, and image carousels to maintain interest and engagement.
• General visitors: those seeking a cultural experience without extensive expertise can choose among narratives and engage at their own pace.
• Enthusiasts and professionals: for those interested in detailed exploration, we provide in-depth insights into design history, designers, spatial organisation, and detailed views of the 19 objects, making the site suitable for research.

We’ve structured the narrative in layers, from introductory to detailed, allowing a wide range of audiences, from children to non-experts, to explore and enjoy the exhibition. Interactive click buttons enable users to access additional information and deepen their experience as desired.

2. Content Structure

The site architecture is designed to guide users through the exhibit; each page is structured to support an intuitive and immersive experience.

While browsing the website, users can easily access other sections through a fixed menu at the top of each page. We focused on clear and intuitive navigation, making sure that the navigation menu is easy to find on both desktop and mobile so that all users can access the information they need without difficulty, and used descriptive menu names that clearly convey each section’s content.

The internal linking ensures that no page feels isolated, making the entire site seamlessly interconnected. Each link includes descriptive anchor text, making it clear where the links will take the reader.

3. Design Elements

The site has been designed to be an educational and immersive experience for visitors interested in interior design, with a tone that conveys professionalism and curiosity.

Minimalistic

The design emphasizes clean lines, ample white space, and a balanced mix of images and text to create a minimalist and sophisticated look. This ensures the focus remains on the interior design objects, reflecting the modern and refined nature of the exhibit.

Organized

Clear structure and intuitive navigation guide visitors seamlessly through narratives and room-based groupings, emphasizing an easy-to-follow and well-structured design.

Inviting

Subtle interactivity, such as carousels, interactive maps, and varied text formats, invites users to explore. The design strikes a balance between accessibility and elegance, encouraging curiosity while reflecting the exhibit's modern theme.

A synthesis of the design guidelines for the exhibition can be viewed here. Some applications of the design guidelines outside the website can be seen in the following presentation.

Presentation created using canva

3.1 Layout

The layout has been designed to follow a loose F-pattern to help ensure that crucial information stands out and easily lets users get an overview and focus on relevant sections without feeling overwhelmed.

The primary information is aligned toward the left, which is ideal for vertical scanning; the images are aligned towards the right. Visual elements will usually draw the eye first, then lead users to the textual details, encouraging both horizontal and vertical scanning.

3.2 Logos

Primary logo

The House of Design logo is a text-based representation of the exhibit that uses the accent typeface, Glacial Indifference in bold.

Styling

• Size: 16px for easy readability
• Font Weight: 700 for emphasis without being overwhelming
• Colour: UA Red (accent color) aligns with the website's aesthetic

The colour of the logo is switched to white where necessary to maintain legibility on dark backgrounds and pictures .

Secondary logo

The secondary logo combines the letters "HOD" (Glacial Indifference in bold), acronym for "House of Design", with a simplified outline of a house to represent both the brand and an abstract concept of a house.

Specifically designed for screens 768px wide or smaller, primarily for phones.

Like for the primary logo, the colour of the design is adjusted to suit different backgrounds; a white variant of the logo is at all times visible in the footer

3.3 Colour Palette

Inspired by popular colour theories used in interior design, we applied the 60–30–10 rule to create our colour palette.

Benefits

• Emphasises key elements
• Creates visual balance and consistency
• Simplifies the design process

Primary Colour, White enhances readability and legibility, neutral colour

Secondary Colour, Black supports the primary colour, used for text

Accent Colour, Ua Red provides contrast

Accent

10%

Secondary colour

30%

Primary colour

60%

Shades of Grey, used in the timeline, scrollbars, and footer to subtly differentiate these elements without distracting from the main content.

Light Silver

Spanish Gray

Sonic Silver

3.4 Typography

3.5 Sizing and weight

3.6 Spacing

Recurrent margins and paddings have been used throughout the website to create a uniform look and feel throughout the design and avoid visual clutter.

Text spacing is managed through padding within p and h1 elements, ensuring readability and consistencyconsistency across the design. Margins and paddings are used strategically to emphasize key elements, such as the footer and header, while preserving visual hierarchy and ensuring an organized appearance.

Fixed Units are used for elements where precise control is needed (e.g., border widths, icons) to maintain consistent appearance across devices while relative units (% and em) ensure flexibility and adaptability to varying screen sizes, especially for margins and paddings.

3.7 Images

We opted to use 3D renders for the images of the objects to provide a complete view of each item from multiple angles. This allowed us to visualise the objects together in a 3D-rendered environment, showing how they integrate in a concrete setting.

The wireframe render presents each object in a “scientific” format, focusing on its structural details that are typically not visible, emphasising the object’s design process and construction.

3.8 Additional elements

Buttons

The button designs follow a consistent and intentional approach, using visual hierarchy, color, and interactivity to enhance usability and draw attention to key actions In primary buttons the accent colour is used either as the default state or on hover to stand out against the rest of the design.

In secondary buttons, the hover state shifts to a black background with white text, creating a sleek, professional appearance that complements the page's overall tone. This differentiation ensures that secondary buttons are noticeable but do not overshadow primary actions, preserving the visual hierarchy.

Arrows

The arrows are designed for navigation on the Narratives Page (Designers' narrative). The thin black lines maintain the minimalist aesthetic that characterizes the website, harmonizing with the button designs. This simplicity ensures they do not distract from the content while remaining intuitive and functional.

4. Functionality

4.1 Responsive Across Devices

The design and layout of the website have been developed to accommodate various screen sizes and devices, ensuring a seamless experience for users across desktops, tablets, and mobile devices. This is achieved by leveraging:

• Media Queries: used to customize the styles based on device
• Flexible Grid System: support a responsive and fluid arrangement of content
• Scalable Components: components and elements adjust dynamically to the viewport, with margins and paddings scaling appropriately
• Scalable Font Sizes: the font sizes are defined using relative units such as em and rem, allowing them to adjust proportionally based on the parent or root element
• Responsive Images and Media: mages or media are resized appropriately to the viewport, ensuring both performance and visual quality
• Timeline - History Narrative: The timeline is designed for responsive adaptability, using a vertical layout on mobile and a horizontal layout on desktop

4.2 Animations and features

4.3 Accessibility

The website has been created following as closely as possible the Web Content Accessibility Guidelines (WCAG)

Typography

Font Size and Line Height: Adequate font sizes for body text, headers, and subtitles have been used, with a minimum font size of 16px for body text. The line height (1.5) has been chosen to allow for comfortable reading.

Legibility: All three fonts, Poppins, Assistant, and Glacial Indifference, are sans-serif fonts, which are generally easier to read on screens than serif fonts. Their clean and modern styles enhance readability across different devices and screen sizes.

Colour Palette

The colour scheme has been selected to meet accessibility standards. All text colours have good contrast, with a contrast ratio of over 4.5:1 for red elements (Level AA) and well over 7:1 for primary colours (Level AAA). The use of red is reserved for larger or bold text elements to maintain clarity.

To verify colour contrast, we used Coolors, a contrast-checking tool, ensuring each colour pairing meets accessibility standards

The palette was chosen carefully to be colorblind-friendly. The difference in the red shade doesn’t present particular problems as it is still clearly different from the two primary colours. When red is used for interactive elements like links or buttons, accompanying explanatory text further clarifies its function.

5. Workflow

The workflow for this project was divided into five stages: Research, Planning, Design, Implementation, and Testing, ensuring a systematic approach to creating the website.

5.2 Member contributions

5.3 Tools

5.4 Testing Process

We conducted thorough testing to ensure the website's functionality, accessibility, and overall performance. The testing process included the following:

• Website Functionality Tests: we manually checked all links, graphic effects, and animations to confirm they work as expected and provide a smooth user experience.
• HTML Validation: we validated the website’s code using the W3C Markup Validation Service to identify and address any HTML errors or inconsistencies.
• Accessibility Testing - Tab Key Testing: we manually tested keyboard navigation by using the Tab key to verify that all interactive elements are reachable in a logical order and that focus indicators are visible.
• Performance and Accessibility Audit with Lighthouse: we utilized Google Lighthouse to evaluate the website’s performance, accessibility, SEO, and best practices. The audit provided actionable insights to further optimize the site.

These tests allowed us to confirm that the website performs well, adheres to accessibility standards, and delivers a functional and user-friendly experience.

Credits

The purpose of this web site is to explore various types of typographic and layout style for museum pages, as an end-of-course project for the "Information Modeling and Web technologies" course of the Master Degree in Digital Humanities and Digital Knowledge of the University of Bologna, under prof. Fabio Vitali.

The documents contained in this web site have been selected for their length and complexity from Wellcome Collections. Their publication here is not intended to be an alternative or replace their original locations. Full attributions are found in the Documentation page. All copyrights and related rights on the content remain with their original owners.

All copyright on the typographic and layout choices are 2024 © Giorgia Umana, Mohamed Iheb Ouerghi, Niccolò Molinati, Virginia D’Antonio.