Dale de Silva

Product Designer
and Developer
at the intersection of motion, art, and code.

I'm a rapid & hi-fidelity prototyper at design stage or in code.

I'm an experienced micro-interaction designer and browser-based artist/experimentor.

And I'm a champion of design systems, documentation, and strong processes.

I've been working in design and development for over 20 years with an intersection of skills that continually informs my product design and front-end development work.

Contact or follow

xthreadscodepenyoutubelinkedin

← Back to folio

Youtube Tutorials

AnimationsDesign & Animation

ublik-om Tutorials Self-Initiated

Tasks: Concept, Script, Design, Animation, Sound Design Creating tutorials for use with my students at Swinburne University as well as for creators online, I designed a video structure encourage speed while further increasing depth in understanding. The structure is also intended to increase reference-ability for those in search of only a subset of the information.

Below are samples from a tutorial on storyboarding which can be viewed here.

While most of the currently developed tutorials run for 3-5 minutes, I believe this is too long for most self-initiated learning online. These videos are exceptions due to their necessity to discuss larger processes (as well as the need to consider YouTube channel viability), however, further tutorials are being developed that are more snapshots into smaller aspects.

youtube-tutorials

youtube-tutorials

Various overlays were designed for use throughout all the animations. These describe user actions while maintaining the style for the videos. They’re placements on screen are designed to prevent the viewer from shifting their gaze away from the action. This allows for maintaining or increasing the videos pace without compromising understanding.

youtube-tutorials

youtube-tutorials

A timeline was designed to allow viewers to easily scrub the video and access specific parts of the video (above). This approach was designed before YouTube allowed for chapter marks in videos - which would partially replace this in future videos.

A format for displaying additional information was also devised to clearly provide context during the delivery. This is seen in the clip below which shows the screen splitting to indicate a diversion from the main narrative. This is also re enforced by the sound design.

youtube-tutorials

As the videos are a personal project, some of the design elements were evolved over a number of videos. The first poster frame below was used in the initial videos while the style was eventually refined to the latter frames to focus on thumbnail readability and recognisability.

youtube-tutorials