simple button in AdobeXD

I really didn’t begin to look back at AdobeXD until they had released the Auto-Animate feature earlier this year. 

I saw some posts online from Elaine Cho and Howard Pinsky and they were doing some really cool stuff with the application.

So the first thing I did was try to replicate one of the demos Elaine had showcased on her twitter feed. 

It was nothing earth shattering, just a simple button; but it showcased a cool little micro-interaction. Something that apps like Sketch are still unable to accomplish on their own. 

So I cracked open the application and make a simple button, following along Elaine’s design. 

My first attempts were fruitless, since I was not able to get the pulsing right as an interaction. That is where I reached out to Elaine and asked for guidance. She was incredibly gracious and patient answering the most basic questions on the application, auto-animate, and the sample she had originally shared. 

Once I introduced a time-based rather than a user interaction trigger, it was all just a matter of finessing the timing. 

The idea for using certain triggers is based on how you want your interaction and animations to showcase.

For this button, I want the interaction to be based on the user clicking on the button to begin the micro-interaction. 

The next auto-animation, however, is based on the artboard and a time trigger. For this effect, the trigger required no delay, so the animation would proceed and then just proceed to the next artboard and stage of animation. 

The last state in the button animation was the ability to return to the beginning. This was also another time trigger based on the artboard itself. 

As you can see, this may not seem groundbreaking but the introduction of this feature to AdobeXD makes it a powerful prototyping tool for individuals and teams. 

I am extremely thankful to Elaine and Howard who were very open to engaging with me on twitter and answering questions. I plan to explore more great things with this application as I work through some new concepts and ideas for products in the coming weeks.

Drop-Down Micro Interaction

Drop-down menu

I have been experimenting with Adobe XD and how to display certain types of micro-interactions for our development teams. 

With the addition of Adobe’s auto-animate feature, they really improved the capabilities of their application and leapfrogged their competition. 

This is a simple drop-down animation created by using 4 artboards and a few auto-animations between them. 

There are 4 artboards that create the above micro-interaction. The first transition is triggered by a click on the “Plan Your Vacation” table. 

The next animation is automatically triggered as a Timed animation to show the sub-menu of the parent item. 

The third transition is another click to close the sub-menu with the final trigger using another timed transition to close the menu back to its original state. 

If you have not tried AdobeXD yet, now is a great time to test it out. There was a recent major upgrade to the application that adds some refinements to existing tools while also extending its capabilities. 

 

 

xenomorph

xenomorph

ripley and the xenomorph

I am continuing to work through spot illustrations using some of my favorite films and actors as subject matter. This is a diptych of one of my favorite science fiction films, Alien.

Detail of Ripley from image

It is Ripley and the Xenomorph, face-to-face. Ever since I saw this film, I have been a big Giger fan. His creations have spawned decades of copy cats, but none have lived up to his imagination and this creature that brought new meaning to the word monster.

I am always looking to collaborate on new and interesting projects, so contact me and let’s see how we can work together.

Cap

Cap

Captain America

This is the my last illustration to close out 2018. Captain America has always been one of my favorite characters in the Marvel Universe and he seemed like a good subject for the last sketch of this year.

Like all of these recent spot illustrations, it began as a pure vector illustration. Simplifying a complex image down to key areas to convey the intent of the source material within the vector program.

Once that stage is complete, I will then work with the base vector in a bitmap editor to paint the illustration. This is done with a set of unique brushes as well as channel operations to lighten, darken, and manipulate the image.

This illustration is closer to the mark and is the culmination of the year’s efforts to transpose my traditional painting skills to a digital realm. Although I like this image, my technique is evolving and I look forward to expanding my illustration repertoire in 2019.

I am always looking for interesting projects to work on so if you need some illustration work, please contact me.

wonder woman

wonder woman

Wonder Woman deflecting a hail of bullets

Over this past year I have focused much of my free time to traditional illustrations. My development projects are large-scale, enterprise-wide applications that offer loads of productive development but not as much creative freedom.

These side sketches and spot illustrations have allowed me to refine the transposition of my traditional painting background to the digital realm. There is still much to work through and nothing will beat the feel of paper and canvas for me, but the ability to work in both “mediums” is a necessary requirement for artists today.

The image of Wonder Woman is taken from a scene in the movie where she storms the German line, leading her band of troops to victory. I continue to enjoy this movie and feel it is the most successful DC-based comic movie since the Dark Knight trilogies.

The piece started out as a simple vector illustration and evolved through painting and channel operations in the bitmap editor. I will continue to work on these sketches in the new year. If you have an upcoming project and you need a partner, please contact me and let’s talk.