This year I’ve started digging into SVG and web animation. The two books, discussed below, were published a day apart end of July. Being such a great match to read together, it was great timing too. Twitter went crazy with other people thinking so too.
Woot! Two new arrivals at @CenterCentre: @vlh‘s Designing Interface Animation and @chriscoyier‘s Practical SVG. pic.twitter.com/Mc4vJVozsd
— Jessica Ivins (@jessicaivins) August 1, 2016
Practical SVG
by Chris Coyier
Even thought I have been reading quite a bit about SVG all over the internet, I had to make sure I don’t miss out on anything, by reading this book too. Just as I thought, there were new things to learn from this book. If you are still in doubt…
Reason #1!
It represents a whole bunch of work.https://t.co/lsHUlJMqVZ pic.twitter.com/FYhoS7M3tV
— Chris Coyier (@chriscoyier) July 27, 2016
Also, very suitable, Val Head (author of book discussed below), wrote the intro to this book.
Speaking of which, REASON #4 for buying it is @vlh wrote the intro!https://t.co/lsHUlJuQ4r#valheadhasaposse pic.twitter.com/z22jrvfBE0
— Chris Coyier (@chriscoyier) July 31, 2016
Even though a compact book, it is packed with all the need to know info to get going with SVG. From getting your head around the basics, software, building an icon system to some tools to help you doing just that and further optimising.
The chapter explaining about the all important viewPort and viewBox and how this works with the preserveAspectRatio attribute, made this concept easy to understand.
It also contains a whole chapter about SVG animation – which I personally feel I can never read about enough of. Covering animating SVG with CSS, SMIL and JavaScript.
At the time of writing, the chapter dedicated to design features, had quite a few new things to me. Mentioning the filters, patterns, clipping and masking, other fill options and combining these, sure has put some ideas in my head.
Last but not least, the chapter about fallback options I found extremely valuable.
Designing Interface Animation
by Val Head
Even though I’ve read her (free) Pocket Guide – CSS animations, to me reading Designing Interface Animation: Meaningful Motion for User Experience should be before anything else, when looking into web animations. One can have the technical skills doing animation, but knowing how to choreograph your animations seem just as important.
Doing my 1st ever book signing tonight at #AEADC! I have a whole box of Designing Interface Animation to give away. pic.twitter.com/fErNAzVs0f
— Val Head (@vlh) July 25, 2016
In the first section, it goes through the 12 principles of animation, how it should be used today in our online world, comparing it to some examples found on the web and in apps.
There is also a whole section dedicated on how to use animation to solve design problems – whilst having a function, it also makes the experience more pleasing. A few lines from there can also be part of a good pitch, convincing someone why animation is necessary.
Through out the book each discussion is accompanied by a live example to see the concept in practice. In the book is an image of the example, which also includes a corresponding Vimeo video, showing the animation in action. I thought this is quite a nice touch.
The last section of the book it is all about making animation part of your design process. Some tips on how to explore different ways to consider animation at various points in your design process. It covers a good bit about prototyping and what levels of prototyping one need for different scenarios.
Last, but not least, it also covers how to animate responsibly…
I also left a review on Amazon (under my secret internet name):
Leave a Reply