08.09.24

Why Code Sketch UI Motion?

Why Code Sketch UI Motion?

Code sketches complement Figma prototypes.

Clarify Ideas

Visualize UI motion transitions and animations to refine and communicate designs.

Experimentation

Test animation styles and transitions without committing to full code.

Feedback Loop

Gather feedback from stakeholders before full development.

Iteration

Encourage rapid exploration of multiple concepts.

Figma

Start with Figma, while sketching in UI motion code.

This example Figma shows a parallax scroll with multiple speeds.

 

BASIC IDEA: Complement Figma prototypes with code sketches to show UI motion, choreography, micro interactions, transitions.

 

Basic Figma parallax scroll example. Drag the scroll bar.

A CODE SKETCH CAN BE INDIVIDUAL ELEMENTS, OR ANY UI EFFECT NEEDING MORE ATTENTION BEFORE COMMITTING TO FINAL CODE.

Types of Code Sketches

CODE SKETCH INDIVIDUAL UI MOTION ELEMENTS

Sketch Individual UI Elements

1. Locomotive Scroll Sections: Create sections with different scroll behaviors for smooth transitions.

2. Curtain Menu with Hover Effects: Develop interactive menus with hover animations.

3. Video Section: Incorporate video elements with scrolling or hover-triggered effects.

4. Squares Transition: Show detailed options for element transitions.

5. Parallax Image Scroll Speeds: Multiple scrolling speeds for images to enhance visual interest.

6. Page Transition: Smooth transitions between pages using animations.

7. Matter.js Gravity Typography: Experiment with physics-based typography animations.

8. Adaptive Typography System: Typography scale that adjusts based on device viewport scale and responsive benchmarks, Mobile-first with enhancements for modern browser UI motion design effects. Refine for reusable design system tokens.

9. SVG Button Tap: Create animated button interactions using SVG.

10. Menu Icon Animation: Develop transitions for menu icon that transforms into close button.

11. Spline 3D Element: Integrate 3D elements into the UI for added depth.

12. Background Path Detail: Integrate SVG animate on scroll or interactive objects or path elements into the UI for guiding eye path or attention or adding depth.

CODE SKETCH UI MOTION VARIANTS ON AN ELEMENT

UI Motion Variants

OPTION A: Headline Text with Split Text Effect

OPTION B: Headline Text with Typewriter Effect

SKETCH SCROLL MOTION WIREFRAMES

Scroll Motion Wireframes

OPTION A: Locomotive Scroll JS Behavior: Use wireframes to demonstrate how scrolling affects UI elements.

OPTION B: GSAP JS Scroll Behavior: Showcase smooth scroll effects and interactions using GSAP.

Integrating Locomotive Scroll for smooth scrolling effects.

Integrated Code Sketches

Explore Code Sketch 1

Features: Smooth scrolling effects with Locomotive Scroll, animated loader, page transitions, and a curtain menu with interactive elements. Includes speed indicators and type scaling tied to scroll actions.

Explore Code Sketch 2

Features: Added complexity with Spline 3D scene, video integration, and Matter.js for physics-based animations. Demonstrates handling of multiple media types.

Explore Code Sketch 3

Focus: Refine interactions, optimize, polish previously explored elements, and iterate!

That's it!

Cheers!

stephanie@stephaniejagiello.com