CASE STUDY: Handmade Web Project – Wade and Leta Inspired Website & A3 Poster
Projects
About
Designs
Contact
Take a Peek ->
Projects
About
Designs
Contact
Project Overview
As part of my Master’s in UX Design, I undertook a project titled “Handmade Web” that merges digital and print design into one cohesive experience. The goal was to create a fully functioning, visually engaging interactive website that could seamlessly transform into a printed A3 poster via a CSS print stylesheet.
The design and thematic inspiration came from the vibrant and playful aesthetics of renowned design duo Wade and Leta, whose work celebrates color, motion, and experimental forms.
Project Goals
Interpret and communicate Wade and Leta’s design philosophy through an interactive and accessible platform.
Design an engaging, responsive website that incorporates animation and interaction principles.
Integrate print and web design by transforming the website into an A3 poster using CSS @media print.
Experiment with coding techniques (HTML, CSS, JS, SVGs) to reflect their dynamic, morphing style.
Practitioner Selection - Wade and Leta
Wade and Leta’s playful, multidisciplinary design approach immediately drew my attention. Their ability to blend humor, structure, form, and color into engaging spatial and digital experiences inspired me to replicate their bold and tactile aesthetic digitally.
“Their work isn’t just visual. it’s performative and emotional.”
This philosophy drove the core of my design decisions.
Research Process
I analyzed Wade and Leta’s website and key portfolio projects to understand their artistic DNA. Key areas I focused on:
Color usage (high saturation, bold palettes)
Typographic playfulness
Interactivity and motion
Visual balance between chaos and control
I then selected key works that could visually and conceptually translate well into a web experience, guiding the narrative and interaction design.
Planning & Prototyping
Using Figma, I created wireframes and high-fidelity prototypes. The planning phase included:
Structuring two main screens for the site:
Screen 1: A bold, animated homepage
Screen 2: Project highlights and descriptions
Creating modular layouts that adapt across screen sizes
Planning animation flows, hover states, and micro-interactions
I envisioned the web experience to be fluid, dynamic, and unexpected, much like Wade and Leta’s visual rhythm.
Technical Execution
Development Tools:
HTML + CSS: For structure and styling
JavaScript: For interaction and dynamic effects
VS Code: Primary IDE
Browser DevTools: For responsive testing and debugging
Adobe Illustrator: For creating scalable SVG paths and vector assets
Challenges Faced
Aligning complex visual elements across devices using vh, vw, and media queries
Creating responsive SVG animations while preserving performance
Ensuring hover and motion effects worked uniformly across browsers
“Every interaction was manually crafted – just like the term ‘handmade’ suggests.”
Print Integration - The A3 Poster
The final website was not just a digital experience it transformed into a printable A3 poster. I created a CSS @media print stylesheet that:
Reformatted the layout for an A3 dimension
Adjusted typography and spacing for legibility in print
Retained the visual identity of the website while adapting it to a static, informative format
The printed output featured large visuals, short descriptions, and retained the bold typographic and color elements, effectively translating motion into still form.
Testing & Quality Assurance
Cross-device testing: Tablet and desktop
Browser testing: Chrome, Edge
Print testing: Real A3 prints from the CSS print stylesheet
Animation performance: Optimized SVGs and animations for smooth performance on all devices
Final Outcomes
A fully functional interactive website hosted on Netlify
An A3 printed poster directly generated from the website
Seamless transitions between print and web formats
Visually rich, experimental UI that reflects Wade and Leta’s identity
Design Features
Screen One – The Introduction
Animated landing screen with morphing shapes, floating vectors, and interactive cursors
Infinite loop text that follows SVG paths
High-contrast colors and bold fonts to immediately reflect their energetic vibe
Screen Two – The Portfolio
Project previews with zoom-on-hover and smooth transitions
Descriptive content layered with animated visuals
Continuous interaction using cursor-based movement
Animation Techniques & Interaction Design
Key animation effects I implemented:
Morphing effects: Smooth transitions between shapes and images
Cursor interaction: Circular elements move dynamically with the mouse position
Zoom-in on hover: For visual emphasis on project images
Infinite loop text: Orbiting around SVG paths to create rhythm and flow
Floating vector animations: Enhancing the sense of depth and movement
All these interactions were manually coded using CSS animations, JavaScript, and SVG manipulation for precision and performance.
Reflection & Takeaways
This project helped me:
Strengthen my web animation skills (CSS, JS, SVG)
Build responsive layouts using flexible units and media queries
Develop a deeper appreciation for integrated design systems across formats
Embrace playfulness and emotion in digital design
It also reaffirmed the importance of storytelling and interaction in communicating a designer’s work — not just presenting it.
Conclusion
The Handmade Web Project became a personal milestone in combining code with creativity, print with interaction, and form with narrative. Inspired by Wade and Leta’s expressive energy, I was able to create a project that was bold, unexpected, and emotionally engaging.
“Good design doesn’t just look good, it feels right.”
This project was a step toward designing not just for users, but with feeling and intention.
