base.-.iconset18.-.motion.-.pack >> README
dcrdesign animated iconset and previously released assets.
An Introduction:
Hello, fellow Decred Project contractors/contributors; Over the past couple of months I have been working through the dcrdesign iconset instilling life into the various static imagery that previously existed.
I thought that given the amount of work that has gone into creating a comprehensive animated content library, this all warranted an explanation and a few rough guidelines for those looking to work with the moving imagery.
Primarily, the sole objectives of this effort were to:
Arm contributors with a comprehensive set of animated icons (designed by EETER.co) to help develop more engaging Decred application experiences.
Aid continuity across the numerous contractors (both individual and corporate).
Provide a library for the community to utilise within their own projects albeit educational material, social engagement or working application.
Ultimately high expectations are set by the incumbent retail banking applications we all use on a daily basis from both User Experience and User Interface elements. Obviously, there are many exceptions to this rule (some are really something to be desired). For Decred to really thrive in this fast developing ecosystem it not only needs a robust system of governance but also GUI applications with a fluid and attractive User Experience.
Motion Design can play a pivotal part in building trust as Decred’s application offering moves from experiences built around desktop applications to the exciting domain of mobile wallets.
This README serves as a brief reference to the file types that can be found throughout the archive as well as a few best practices and worthy notations.
Alpha Channels:
Not all Alpha Channels are created equally: Above we have a stark demonstration of two identical .GIFs. One has the colour information baked in (w/o Alpha) and the other has a transparency present (Alpha).
.GIFs don’t support a full spectrum of transparency values, only binary. This results in crude jagged edges as there are only two opacity values present ( 0 and 100). There is no workaround that can be utilised within the constraints of the .GIF format.
Please bear in mind for this reason some of the .GIFs (Alpha) will not display correctly in contrast to their baked .GIF (w/o Alpha) counterparts.
If a smooth edge is essential there are two directions to go here: either use an alternative format (ie: .PNG sequence) or use a .GIF with baked colour values; the caveat here being the background colour values must match the destination background values to avoid clearly visible variation. The default background colour value for the base iconset is hexadecimal value #FFFFFF.
Project files for all icons are included so manual changes can be applied where necessary either using the .AEP (Adobe After Effects Project File) or by importing the .PNG sequence and manually amending the background colour.
End States:
The majority of the animated icons have been created with two motions in mind: open and loop. It’s worth noting that there are a few exceptions to this rule however the presence of these key actions means there are a broad range of use cases where the animated iconset can be implemented.
For example: open animations lent themselves nicely for application notifications as the action is only played once with a definitive end state.
On the other hand those files with the suffix loop do ‘exactly what it says on the tin’. These animations will loop seamlessly forever and work well for hover actions as well as for social media posts via Blockfolio and Coingecko Beam (once these platforms actually support images) as well as more traditional social media platforms; at this point in time primarily Twitter.
It’s worth noting that there is no definitive guide to the ways in which this motion pack should be implemented, these are just the ways in which the animated icons were designed to be utilised, in essence feel free to apply these where appropriate (but don’t go too overboard!).
“Great power comes with great responsibility.” — Uncle Ben, Spiderman
Vector Animation:
Also included in the numerous folder structures are incredibly lightweight .JSON and .XML files.
Lets start with .JSON; How can these be implemented and parsed in application? Lottie is a brilliant solution (developed by the guys and gals at Airbnb) for allowing complex vector animations to be parsed, based on the brilliant bodymovin.js.
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. — Airbnb Design
A handful of the animations are not included in these vector variants mainly due to their use of 3D effects which are yet to be supported. All other animations conform to the broadest compatibility possible across numerous platforms.
Lottie also has a thorough documentation provided so if you see an area where responsive vector animation could have a real impact within a Decred application, get stuck in; the possibilities with time-remapping alone are pretty incredible and that’s just scratching the surface!
Please note: .JSON files have been tested using Lottie Files. Android Drawable Vector (.XML) files however are yet to have be tested so if you do find any issues with the implementation of these vectors as .XML please could you raise an issue in the dcrdesign Github.
For those interested in exporting animation from Adobe After Effects for use with Lottie check out the Bodymovin.js exporter plugin here
Project Files:
Project files come in two different flavours: .JSX (individual compositions) and the traditional .AEP project file for Adobe After Effects. Pirates be warned; to open .AEP project files you must be working with a version of CC at (or beyond) the 14.xx release, which excludes anyone running a cracked version of CS6 or those who plainly just refuses to upgrade (and is subsequently missing out on Create Nulls from Path). I have also included an .AEPX file but am not totally sure how backwards compatible this file pans out.
To create a .JSX of each base iconset composition would be very time consuming an unnecessary so these files only exist for the Roadmap assets. To utilise the .JSX files simply open them up using the Scripts dialog in the main menu and the composition will rebuild itself as if by magic; convenient that.
Archive Structure:
The file structure of the master.-.motion.-.pack is as follows:
- base: includes base icon elements originally created by EETER.co.
decrediton: is a set of folders including the following sub directories:
>> tx: animated version of transaction and ticket states aimed at implementation in wallet applications such as decrediton.
>> nav: includes navigational icons for decrediton wallet.
>> loaders: include the initial loading icons for decrediton wallet.
- roadmap: includes animated roadmap icons.
- core: includes animated versions of core features including Politeia, lightning network and finally atomic swaps.
- marco: a one off set produced for a presentation piece for Marco Peereboom CTO of Company Zero.
Base Increments:
Honouring the main purpose of this project I have included resized .PNG sequences of all the icons to a number of different dimensions (roughly following base increments). By doing this I hope that front-end designers will find it easier to get on and implement their ideas.
20x20, 60x60, 128x128, 256x256, 512x512 and finally 1024x1024px
The reasoning behind the variation of the first two sizes is simply because I get asked for these two sizes on a common basis and felt the need to retain standards moving forward. The larger sizes are uncharted territory hence keeping to a well established convention.
Various directories also include .GIF images in @1, @2 and @3 sizes of the icons (in px these equal: 450x450, 900x900 and 1350x1350)
Conclusion:
I hope that you find this pack useful and look forward to seeing it’s implementation moving forward. If you have any further questions feel free to drop a message on the Slack or Matrix: @kylefirethought.
Created something with this pack? Feel free to post a link in the comments section.
Look forward to seeing what the community creates.
@kylefirethought
