UXUI Design | Adaptive Layout | Wireframing

Please Touch Museum Website

overview
In this project, I utilized the branding guidelines and logo I previously developed for the Please Touch Museum, an interactive space where children can engage with the exhibits. Using Figma, I redesigned the museum's website, creating a responsive layout that adapts seamlessly across mobile, tablet, and desktop formats, all while incorporating my logo, brand design, and brand identify. Check out each device's prototype and high-fidelity screen display below.
Process
This project began with the branding design, followed researching the current website, then sketching layout ideas for all applications. I created low-fidelity grayscale designs to explore color placement and usage before transitioning to high-fidelity prototypes. Click below to view the branding project that served as the foundation for this project.
please touch museum branding
sketches:

I analyzed their existing website to gain ideas for my redesign layout and organization of my website, including what I wanted to exist in each category, and where it should be placed.

LOW fidelity mobile DESIGNS:

In this project, my low-fidelity designs were essential in shaping the overall layout. By working in grayscale, I could focus on the structure and easily identify where colors should be applied. This approach was particularly helpful in managing the color placement of the saturated color palette.

LOW FIDELITY desktop DESIGNS:
high fidelity mobile screens:
figma mobile prototype
high fidelity desktop screens:
figma desktop prototype
high fidelity tablet screens:
figma tablet prototype
application:

The images below demonstrate how the design seamlessly adapts across different devices, maintaining a cohesive and visually appealing layout regardless of screen size.

PREV