From the desk of Edmundo Santos

Multidisciplinary designer & coder

Waiting for inspiration

There is a popular notion that artists work from inspiration—that there is some strike or bolt or bubbling up of creative mojo from who knows where… but I hope [my work] makes clear that waiting for inspiration to strike is a terrible, terrible plan. In fact, perhaps the single best piece of advice I can offer to anyone trying to do creative work is to ignore inspiration.

I’m currently reading Deep Work by Cal Newport and found this great little piece of advice. There’s an article by David Brooks in which he summarizes this more blunty, saying that you should think like an artist but work like an accountant.

If you feel like distractions are hurting your productivity, go buy this book, I can’t recommend it enough.

Why animate?

When done well, animations can add valuable interaction and feedback. They enhance the emotional experience, bringing delight and adding personality to your interface. In fact, to animate means bring to life.

Emotional design’s primary goal is to facilitate human-to-human communication. If we’re doing our job well, the computer recedes into the background, and personalities rise to the surface.

— Aarron Walter, Designing For Emotion

No animation is unnatural

You click on a “New” button and a form just… appears from nowhere? You click a “X” to close a modal and… it just vanishes into thin air? That is unnatural and it’s what we should be avoiding as designers. Nothing in the real world does anything as jarringly as just swapping states. If that happened it would feel like a glitch in the matrix.

Animations help the user understand the flow between two states and they make your app feels faster.

A good animation should amplify the behaviour and consolidate the relationship between different elements.

— Benjamin De Dock

What makes a good animation

So we know we should animate, but what makes for a good animation? What should we focus on?

First of all, you should animate exclusively using opacity and transform properties, anything else will trigger a browser layout or paint, which are expensive operations. That’s the only way to keep your animations running at a smooth 60fps rate.

The process that the browser goes through is pretty simple: calculate the styles that apply to the elements (Recalculate Style), generate the geometry and position for each element (Layout), fill out the pixels for each element into layers (Paint Setup and Paint) and draw the layers out to screen (Composite Layers). To achieve silky smooth animations you need to avoid work, and the best way to do that is to only change properties that affect compositing — transform and opacity. The higher up you start on the timeline waterfall the more work the browser has to do to get pixels on to the screen.

Secondly, animation is all about timing:

  • Try to keep your animations fast: usually around the 300ms mark
  • Animate things independently: stagger individual elements instead of animating big blocks
  • Always use custom easings: the default ones are crap

That’s about it. Remember that having fun is the best way to get the best results. Go the extra mile, play, experiment, and be happy with what you do. Try, iterate, and polish!

The Scariest Moment

Happy days: today I’m releasing a new version of my website! 🎉

I decided to throw away the previous one (✦ 2014 - ♱ 2018) and build this one from scratch using Gatsby.js, a static site generator for React.js.

Because I was already learning about the new CSS Grid system, I decided to use it for designing this baby. I started with some rough sketches on Sketch (ah ha!) and then moved on to design in the browser. FirefoxDeveloperEdition has some excellent tools for working with CSS Grid layout, I highly recommend it.

Here’s a list of things I plan to do next with this website, in no particular order:

  • Build a library page with books I’m reading, books I’ve read, and books I’m gonna read
  • Write articles about stuff I’m working on, what I’m learning, or whatever I feel like writing really
  • It would be cool to have a photography page where I can share some of my pics too, definitely going to copy some ideas from @stammy’s website
  • Build an about page (meh)

The website is not fully responsive yet and there are probably lots of bugs, but oh well. Please report if you find any bugs. 🐛

On each and every one of the blogs I’ve started in the past I posted this quote, so here it is again:

“The scariest moment is always just before you start. After that, things can only get better.”

— Stephen King

That’s it for today, let me know what you think.