From the desk of Edmundo Santos

Multidisciplinary designer & coder

Reading Tip‌‌‌‌ #1

“It’s tempting to judge what you read:

I agree with these statements, and I disagree with those.

However, a great thinker who has spent decades on an unusual line of thought cannot induce their context into your head in a few pages. It’s almost certainly the case that you don’t fully understand their statements.

Instead, you can say:

I have now learned that there exists a worldview in which all of these statements are consistent.

And if it feels worthwhile, you can make a genuine effort to understand that entire worldview. You don't have to adopt it. Just make it available to yourself, so you can make connections to it when it's needed.”

Occasionally I'll find myself browsing Bret Victor's website. I'm usually looking for inspiration and I am always curious to see what is he working on.

This reading tip is from a 2013 links page, you'll find additional reading tips and a fair amount of book recommendations and links about powerful seeing, and powerful representations for scientific thinking. Enjoy it!

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 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.

Take for instance the carousel interface below: without any animations, could you tell that it is indeed a carousel interface? Are we offering the user any clues other than changing the background color and emoji when we swap the panels?

If you toggle the animation (go on, I wait), you'll see how much nicer it is to understand the relationship between the elements and the flow between different states – you instantly get a sense of depth of the interface, it feels faster, it is now enjoybable… you feel that it is truly alive. 😊

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.