A collection of works created in a variety of applications including, but not limited to Photoshop, Illustrator, Sketch, and Articulate Storyline.

 

 

ELH CHALLENGE #148: CHECKLIST

Design inspiration for the E-Learning Heroes Challenge #148 on creating a design based on a checklist.

The concept of this design focused on integrating a checklist design in a meaningful navigational function rather than a task based approach. The visual concept was approached in a nontraditional dark and photographic emphasis  balancing content, visuals, and structure of the overall design.

A live demo can be viewed here.

(More information on the weekly challenges here.)


ELH CHALLENGE #147: ACCORDION DESIGN

Design inspiration for the E-Learning Heroes Challenge #147 on creating a design based on the accordion styled content presentation and interaction.

This interaction designed focused on keeping a fairly basic structure relative to common accordion styled interactions, with horizontal design. Title banners were designed to move in a more natural approach pushing other banners and content as expected no matter which items are open or closed.

A live demo can be viewed here.

(More information on the weekly challenge here.)


CARD SWIPING DESIGN

A design example created and presented during the 2016 Articulate Roadshow attendees in Boston. The design was used in showcasing advanced animation functionality within Articulate Storyline 2 and how users can utilize some modern approaches and designs for user interaction with the content they are building in the software.

My design approach focused on the modern focused approaches in presenting bite-sized content for learning in a swipe away manner.

 

Free download available here


ELH CHALLENGE #123: COURSE TEMPLATE

A personal template design inspired by some of the dark web designs on the internet.  This concept was originally a personal build coming to life that was then tailored to the E-Learning Heroes weekly challenge #123, involving designing a course template.

The goal of the design was to contrast a dark interface and highly visual photography with interactive elements that hold a bright attentiveness to audiences with text that stands out but balances between the bright and dark elements on screen.

Upon finishing the the design, the template was provided to the community to freely download and use for their own.

A live demo can be viewed here.

(More information on the weekly challenge here)


FRIDAY FREEBIE TEMPLATE

A template design that was built for personal design and functionality concept practice, but not used for any specific project. The intent and direction of this design played on material design along with the utilization of cards for presenting content drill-down. The focus was to keep the final design clean, light, and distraction free with a visual additive that finished the final design in a fitting manner that felt intentional.

The design and functionality felt most appropriate to be shared with the online community at E-Learning Heroes which led to a tutorial write-up on building this concept from scratch.


A live demo here.

A video tutorial was created for this design and can be found here.


BUTTON NESTING ANIMATION EFFECT WITH STORYLINE 2
(BLOG-TUTORIAL)

A step by step tutorial for Articulate and the E-Learning Heroes community on how I created an animation effect on a menu button using the Articulate Storyline. In addition to providing a tutorial a free download of the menu button in full effect was provided as a free download to the community.

The full tutorial can be found here.

A live demo of can be found here.


ELH CHALLENGE #70: VALENTINE'S DAY GAME

A simple game designed and built for E-Learning Heroes weekly challenge #70, for fun to utilize Adobe Illustrator and variables within Articulate Storyline for repeat animation effects and tracking a user's input (which is the stop position of the light on a target).

The intent of the design was to be lighthearted, fun, and simplistic in overall design and imagery.

A live demo can be viewed here.

(More information on the weekly challenge here.)


ELH CHALLENGE #69: MEDICAL TEMPLATE

A medical template design built for E-Learning Heroes weekly challenge #69. This template utilized Adobe Photoshop for manipulating images and isolating subjects within a color overlay in order to isolate subjects from their background. In addition, all icons were created using Adobe Illustrator for this template design.

My approach to this template design was to focus on a wider screen display and provide a balance of photography and flat iconography for presenting material to keep the visuals both professional but refreshing for aesthetics.

A live demo can be viewed here.

(More information on the weekly challenge here.)


ELH CHALLENGE #68: FOOTBALL

A fun infographic style design built for E-Learning Heroes weekly challenge #68. This design utilized Adobe Illustrator for creating all visuals in the sample build to accent the factual information being presented. 

A live demo can be viewed here.

(More information on the weekly challenge here.)


EXTENDING STORYLINE 2'S ANIMATIONS
(BLOG)

Blog write-up on extending the built-in features of Articulate Storyline 2 to create more natural animation effects and seamless animations that feel right for entrance and exit of content opposed to a stiff and rigid approach to just use the standard animations alone.

The blog utilizes a number of GIFs to exemplify the key points and animation results being discussed throughout.

The full blog can be found here.


ELH CHALLENGE #59: KID'S GAME

A Disney movie quiz/game built for E-Learning Heroes weekly challenge #59. Originally the concept was just a fun idea I had based on similar concepts as the identify the logo games that exist. In creating this, Adobe Illustrator was used for all imagery.

A live demo can be viewed here.

(More information on the weekly challenge here)


ELH CHALLENGE #58: INTERACTIVE MAGAZINE

Design based off of interactive magazines for E-Learning Heroes weekly challenge #58.

A live demo can be viewed here.

(More information on the weekly challenge here.)


ELH CHALLENGE #44: VIRTUAL TOURS

Design inspiration for virtual tours for the E-Learning Heroes weekly challenge #44.

A live demo can be viewed here.

(More information on the weekly challenge here.)


EVACUATION SCENARIO
(BLOG DEMO)

A demo created for a blog on the concept "Can eLearning save your life?".  The demo was created from a content outline with the structure of a branching scenario to exemplify consequences per a user's input in decision making.

The demo can be viewed here.

The blog can be found here.