Onion Skinning Animations
January 4th, 2009
When an interface element changes position or size over time during an animation, the path it takes can vary. Onion skinning can help indicate the various paths of an animation.
Credits: Michel Vuijlsteke
- BetterUI Videos
- GoodUI Sketches On Instagram
- Kameleon Flat Icons
- 2086 Icons From Icons Mind
- GoodUI FASTFORWARD
- Pidoco Special Offer: 50% Off Until August 15th
- pentotype
- Axure Flat UI Kit
- GoodUI DATASTORIES – Now Live
- My Sketchbook Color Coding
- 8 Awesome Business & Entrepreneurial Podcasts
- UseYourInterface.com
- RoundIcons
- Streamline – 1640 Vector Icons
- Free Keynote & PowerPoint Mockup Templates
- Visual Website Optimizer: 25% Off The First Month
- Introducing Proto.io 5
- AppSeed – KickStartIt!
- Indigo Studio v2.0
- Basiliq
- Sketchnote Typeface
- Sketchplanations
- MicroPersonas – 41% Off
- InVisionApp: Now With Sketch Commenting
- Fries
- Skeu It!
- SIX UX
- Calling Bull$#!%: On Flat Design
- Blackberry 10 Templates for Keynote and PowerPoint
- GoodUI.org
- InVision 2.0 – Present. Engage. Collaborate. Iterate.
- PowerStory 2.0: Wireframe Storyboards Using PowerPoint
- RWD Wireframes
- Lean Sketching Tips: Flexible Fidelity & Cutting Corners
- Form Follows Function
- BLOKK Font
- Sketch Map
- Wireframes Magazine + Facebook
- GUI Toolkits
- Framer – Modern Prototyping
- MicroPersonas
- jKit – jQuery based UI Toolkit
- Indigo Studio
- Calling Bull$#!%: The Best Interface Is No Interface
- Iterations: Concepting Cards
- Web Layout UI Kit
- InVision Sync (for Mac)
- Interactive Sketching Notation v1.3
- FoldTester & Scrolling
- PowerMockup v3: Wireframe with PowerPoint
- Blueprint Wireframe
- I’m Hiring … a User Interface Designer
- Proto.io V3 – Changes mobile prototyping as we know it
- Windows 8 Templates for PowerPoint
- EightShapes / Blocks
- Large Canvas Flows + With References
- Fluid UI, Mobile App Prototyping
- How I Sketch: An Introduction
- PowerStory
- Wirefy
- Minicons
- Sketchkit
- UXToolbox
- Living CSS Style Guides & Pattern Libraries
- Multi-Device Layout Patterns
- Job Postings
- Justinmind Prototyper FREE 1.0 and PRO 4.5
- 15 Dribbble UI Sketching Designers
- Interface Origami
- Foundation
- InVisionApp: Starter Plan Now Live (1 Free Project)
- Speech Bubble User Flow
- Axutopia – Axure UI widgets
- Proto.io V2 – Silly-fast mobile prototyping
- Wireframes Old & New
- Sketch More, Sketch Better: The Buzz at Interaction12
- Remote Collaborative Sketching
- Sketching Interfaces Workshop Slides
- ProtoShare 6
- 930 Vintage Vector Ornaments Set
- Fireworks Wireframing Kit
- myBalsamiq
- Cue – Gesture Icons
- InVision Prototyping Tool
- Special Offer: World Usability Day Bundle
- Meaningful Transitions
- Axure Fu Master Cheat Sheet
- JustProto 2.0 + 3 Giveaways
- Proto.io – Mobile App Prototyping
- Responsive Layout Wireframe
- Special Offer: UX Heroes Software Mini Bundle
- 3 Ideas For Capturing Feedback
- Call for Samples – Feedback Notes
- Sketchify
- Personal Pattern Books
- App Sketcher
- PowerMockup
- Exploring UI Scaling
- Wireframe Dot Annotation Applescripts for Omnigraffle
- UNITiD BlackBerry Template for Fireworks
- Persona Template
- nForm Sketching Table
- Tiggr 1.2.5
- ZURB iPad Omnigraffle Stencils & Sketchsheets
- Recommendations for Usability in Practice – Card Set
- GestureWorks Open Source Gesture Library – Update
- Interactive Sketching Notation v1.0
- Wirify
- Business Model Canvas – Facilitator Cards
- iPad Sketch Elements AI
- 500 Storyboard Tutorials & Resources
- 750 Vector Icons
- MOObileFrames
- Site Architecture Stencil for OmniGraffle
- SketchWizard
- Call for Samples + 2 HotGloo Giveaways
- Sqetch – Illustrator Wireframe Toolkit
- Dragnet Wireframes Kit for Adobe Fireworks
- Free Keynote UX Stencils
- Omnigraffle Sitemap Generator
- Usability Test Data Logger
- onProximityFade jQuery Plugin
- User Interface Design Framework
- iPad Template for Keynote Prototyping
- Mental Notes
- Quplo
- Dragon Stop Motion
- Sticky Floating Navigation
- ILoveSketch: 3D Sketching
- Keynote Wireframe Toolkit
- Briefs: Wireframes Remade for Cocoa Touch
- Experimental Challenge
- Naview Beta
- Touch Gesture Reference Guide
- WireMolecules
- Cursor Affordances
- Going Experimental
- GestureWorks – Open Source Gesture Library
- Want to take part in a user test for an invoicing application?
- Google Drawings Wireframing Kit
- Grand Narratives & Play Points
- Nonlinear Books
- Blueprint+ (Service Design Visual)
- Usability Test Snapshots
- Call for Samples – Visualizing Usability Issues
- K-Sketch
- SketchFlow
- Nokia S60 Wireframing Stencils
- Show/Hide Annotations Omnigraffle Script
- The Animationizer
- ForeUI 2.0
- Help Design Balsamiq’s “Components” Feature
- Experience Maps
- Subtle Site Improvements
- Use Case Maps
- Gesturcons: Touch Pack 1.0
- inPreso Screens Beta
- Justinmind Prototyper 3.0 Beta + Contest
- Tablet + Illustrator: the Case for Electronic Sketching
- Pencil 1.1
- Big Transparent Thumbs
- Exposure Sheets (X-Sheets)
- Has anyone used the Interactive Sketching Notation?
- Pidoco
- Wireframes 0.0.1 (A simple wireframe tool)
- Clickframes
- Plumb
- Wireframe-Mockup Hybrid
- Present-Future Sketching
- OmniGraffle Wireflows
- Free Sketching & Wireframing Kit
- Easy Front-end Framework
- Protokit 0.1
- Creately Giveaway – Winners
- FlockDraw
- Rigged Stop-Frame Paper Prototype Animations
- Protocasting
- SimpleDiagrams
- Net-Maps
- Dwell Time Diagram
- Call for Samples + 3 Creately.com Giveaways
- Creately
- IxEdit
- Paper Prototype Cutouts
- Sketchy Axure Widget Library
- Protoscript
- FluidIA Wants You!
- Mockingbird Beta
- Jumpchart
- Interactive Sketching Notation 0.1
- Treejack
- EightShapes Unify
- Clickpaths
- Wiremaps
- Visible Change History in Sketches
- MBTI Sketching Framework
- Do you design for mobile and want to contribute to a book?
- Multiuser WireFlows
- C-Inspector
- Axure Libraries & Widgets Compilation
- Connect-a-Sketch Beta
- UI Flow Shorthand Notation
- Prioritized Stickynote Requirements
- Pencils, Pens & Markers Sets
- Long Page Sketches
- MockFlow
- XMind
- Call for Samples – Pencils, Pens & Markers Photos
- Functional Mindmaps
- Inpage Requirements
- iPlotz 1.5
- Selfishly Freeform Sketching
- State Annotations
- Mixed Scale Wireflow
- Hot Gloo Beta
- Napkee 1.0
- Justinmind Prototyper 2.6
- Pwireframing
- Page Crop Marks
- Naview
- Hybrid Stickyframes
- FlairBuilder Giveaway – Winner
- Ethnio
- Pixel Dimension Indicators
- Autodesk SketchBook Pro 4.1
- ProtoShare 3.0
- Call for Samples + FlairBuilder Giveaway
- Digital Colour Overlays
- Hatched Colour Overlays
- ax_admin
- Excel Prototyping
- WireframeSketcher 1.4.2
- Page Dimming
- Wireframe Moodboards
- Edge Cornering
- ForeUI 1.2
- For Hire: User Interface Design & Evaluation Services
- Greeked Text
- JustProto
- Emphasis Techniques in Sketching
- Balsamiq Mockups 1.5
- In Page Conditions
- Pattern Based Sketching
- Infomaki 0.1 Goes Open Source
- Component Based Wireframes
- Seeking Participants for User Testing II (in Toronto)
- FlairBuilder 1.0
- Sketchboarding
- MockupScreens 4.0
- Object-Oriented Wireframes
- Engaging Paper Wireframe
- Touchscreen Gesture Icons
- Cursor Actions
- Cursors As State Indicators
- Structure Juxtaposed Wireframe
- Sketchstorming
- Coloured Paper Templates
- Agile People
- Page Description Diagrams
- Reference Zone Wireframes (with Rough Events)
- Interaction Sketch Alternatives
- Coloured Interface Sketches
- Personal Card Set
- Tab Order Diagram
- Prioritizing Elements with Numbers
- XXL Iteration Views
- Seeking Participants for User Testing
- Bubble Frames
- Sticky Note Pulldown Menus
- Content Sitemaps
- UML State Charts
- Tracing Paper Layers
- Wireframe-Sketch Hybrid
- FluidIA Sketches Are Up
- Computer Based Sketchy Wireframes
- Sticky Sitemaps
- Graph Paper Layout Sketch
- Rough Interface Sketching
- Sketching Alternative and Social Activities
- Multiple Element Changes Using Miniframe References
- A little easier content contributions?
- High Level Layout Alternatives
- Sitemap References
- Want to help out with some user research for fluidIA?
- User Type Views & Annotations with Polypage
- Whiteboard Wireframes
- Kicking Off An Open Source Prototyping Tool – fluidIA.org
- 960.gs Grid Based Prototypes
- Generic Content and Section Labels
- State Level Wireflows and Transitions
- Page Level Wireflows
- Interactive Axure Prototype
- Annotation Droplets
- Little Frames
- Colouring Clickables in Wireframes
- Wireframing Visual Priority with Tone
- Specifying Form Elements
- Error Handling in Wireframes
- State Based HTML Wireframes with Polypage
- Push & Shove Rules
- Stickyframes
- Isolated & Referenced Elements
- Pulldown Contents Sketch
- New Subscription Options: Twitter + Email
- Multivariate Wireframes
- User Journeys
- Flexible Sitemaps
- In Page Events
- Onion Skinning Animations
- Showing Masked & Scrollable Areas
- Multiple Elements & State Conditions Matrix
- Opening Post
Check Out Our
Other Projects
Other Projects
Wireframes Magazine is run by Jakub Linowski, an interaction designer from Toronto. Jakub also helps clients design better products, and has been selling his approach to sketching interfaces.