Design Your Space

"Design Your Space" is a web-based application for designing and customizing miniature spaces. Users can drag and drop various items, such as furniture and decorations, into an isometric grid layout. The application features user-friendly interactions, such as saving, sharing designs, and responsive design for multiple devices. The application features a user-friendly drag-and-drop interface that invites users to design and customize miniature spaces.

Credits : Harvey Gunjarueg, for assisting in debugging, and Yidan Hu, for assisting with the Spring Show 2024.

Class : Hand Held Creative Tools | Instructor : Max Bittker

Designed and Developed : Panithan Kasinphila (Penny)

Design Process

I started by utilizing isometric assets from my previous architecture work and redesigned the theme, color scheme, and stroke styles, choosing blue, green, and beige colors. I also adjusted the shadow shades to add depth to the objects and elements using Illustrator and Figma. After finalizing the designs, I uploaded the PNG images to the public folder on the Replit platform.

Created the assets

3 pages

For the website design, I created three HTML pages:

  1. Landing Page: This page features the cover page design and a "Start" button.

  2. Canvas Area: On this page, users can creatively design their space by selecting objects and elements such as furniture, structures, plants, people, and outdoor items. Users can arrange their spatial design and artwork here. The page includes a delete button, a save image button, and a post button that links to the newsfeed page.

  3. Newsfeed Page: This page publicly displays users' artworks to the community, allowing users to view other design spaces as well.

User Testing

For the "Design Your Space" project, showcased at the ITP/IMA Spring Show 2024, I received valuable feedback and ideas from the audience and users who interacted with the web project. Here is a summary of their suggestions for improving the user experience:

  1. Snap to Grid: Implementing a snap-to-grid feature to help users arrange objects and elements more easily.

  2. Layer Lock: Adding a layer lock feature to control the objects better.

  3. UI Clarity: The UI of the main category buttons and subcategories is too similar, causing confusion about which buttons provide the objects.

  4. Introduction: Including an introduction or tutorial to guide new users.

  5. Flip Objects: Allowing users to flip objects.

  6. Undo Button: Adding an undo button for easier corrections.

Interaction Flow

  1. Initialize the Application: When the document is loaded, various elements and event listeners are set up for handling interactions.

  2. Drag and Drop Items: Users can drag items from the item list into the design area. Drag events are handled by the draggable.js script, which manages the position, scale, and rotation of the items.

  3. Item Selection and Removal: Users can select items by clicking on them. The selected item can be removed using the remove button.

  4. Capture and Save Design: The capture button allows users to save the current design as an image using the html2canvas library.

  5. Upload Design: Users can upload their designs to a server for sharing by clicking the post button, which captures the design and sends it to the server.

Code

  • Frontend: HTML5 structures the web pages, CSS styles them, and JavaScript adds interactivity and manages the HTML5 Canvas for dynamic graphics rendering.

  • Backend: Node.js provides the runtime environment, and Express serves as the web framework handling API endpoints and server-side logic.

  • Graphics: PNG format and the Canvas API ensure that the application delivers high-quality, scalable visuals, maintaining the integrity of each design.

Next Step

"Design Your Space" will evolve into a more powerful and versatile tool, leveraging AI to provide users with advanced design capabilities and a more personalized experience. For example, AI from Plan to 3D Room: Converting plans into 3D rooms using AI. Import Real Estate Plans: Allowing users to import real estate plans for decoration. Generate Decorated Interiors: Using AI to create various design options for interiors.

Next

Interactive Landscape