Design Is All Around Us

Design exists in everyday life scenarios as products, services and systems. If the purpose of education is to expand our understanding of the world, what can we learn from design in our everyday? The premise for this article is that design surrounds us in diverse, complex and integrated ways, without us ackowledging its presence each time. We take an ordinary scene in everyday urban life, and then decode design in it, in the next spread. In this contribution we hope to identify design in objects, spaces and experiences that we encounter on a regular basis.

As curators we have struggled to define design definitively. The contributions make this complexity visible. As you proceed, some of what we have identified as design will make immediate sense while some might take you by surpise, or make you ponder. We also do not claim that our identification is exhaustive. Our intention is to evoke curiosity and build foundational awareness. Ask your learners to bring images from their enviornment and decode design in it!

// Variable to track the zoom level for each image let zoomLevels = { ‘popup-image1’: 1, ‘popup-image2’: 1 }; // Function to open the popup and show the image function openPopup(popupId, imageId) { document.getElementById(popupId).style.display = ‘flex’; // Display the popup document.getElementById(imageId).style.transform = `scale(${zoomLevels[imageId]})`; // Apply zoom level to image } // Function to close the popup when clicked outside the image function closePopup(event, popupId) { if (event.target === document.getElementById(popupId)) { document.getElementById(popupId).style.display = ‘none’; // Hide the popup } } // Function to zoom the image by clicking function zoomImage(event, imageId) { event.stopPropagation(); // Prevents the click event from propagating to the popup (which closes it) // Toggle zoom in and out on click for each image if (zoomLevels[imageId] === 1) { zoomLevels[imageId] = 1.5; // Zoom in } else { zoomLevels[imageId] = 1; // Zoom out } document.getElementById(imageId).style.transform = `scale(${zoomLevels[imageId]})`; // Apply the zoom } // Function to zoom the image with mouse scroll function zoomWithScroll(event, imageId) { event.preventDefault(); // Prevent the default scroll behavior (page scroll) if (event.deltaY 0.1 ? zoomLevels[imageId] – 0.1 : 0.1; // Prevent zooming out too much } document.getElementById(imageId).style.transform = `scale(${zoomLevels[imageId]})`; // Apply the zoom }