Smallblog

Company Insta

2017-03-30T00:00:00+00:00

The Metafizzy Instagram follows other companies and designers. I feel like we’re all going after the same slice of pie, sharing in-progress works, behind-the-scenes looks. It’s not so special any more. The spectacle of a sketch photo with the pen in the shot faded long ago.

Made in 2016

2016-12-31T00:00:00+00:00

See previous made in 2015

Masonry v4 and imagesLoaded v4

Masonry v4 and imagesLoaded v4 released:
🔵 IE8 & 9 support dropped
✂️ 25% & 50% smaller
🔌 Backwards compatiblehttps://t.co/OLPwrc1iIa
— Metafizzy (@metafizzyco) January 19, 2016

Web audio synth

Was worrying about stuff but then started playing with this and now I'm one with drone lords https://t.co/6qBE4VdUeI pic.twitter.com/9SEASc6vhs
— Dave DeSandro (@desandro) February 10, 2016

Packery v2

Packery v2 is out! All new drag & drop, IE8 support removed, 20% smaller https://t.co/GNQEE0Uglq pic.twitter.com/WIZw6YLwGJ
— Dave DeSandro (@desandro) February 16, 2016

Web audio arpeggiator (now buggy)

Created this Web Audio Arpeggiator so you can make your own bonkers Mega Man stage music https://t.co/Vacnburg9b pic.twitter.com/ErW4I7d6Qa
— Dave DeSandro (@desandro) February 29, 2016

Netflix Atlas logo

Run run cycle

Been collecting run & walk cycle gifs for past year. 80+ posts so far https://t.co/TKFBuVwFOo or follow @runruncycle pic.twitter.com/qgVx1a6JSw
— Dave DeSandro (@desandro) April 27, 2016

Isotope v3

Isotope v3 is here! New stagger transition option. IE8 support dropped. 20% smaller https://t.co/yzAclIBB1S pic.twitter.com/E8O8zFnPB0
— Dave DeSandro (@desandro) April 28, 2016

Metafizzy weekly review videos

Weekly review: New shirts, sticker give-away https://t.co/UBI2iBv9ZU pic.twitter.com/qpBQoKVqi9
— Metafizzy (@metafizzyco) May 27, 2016

Mega Man 24 frame run cycle

Cub n pup puzzle game

Made a little puzzle game! Drag cub and rotate grid to get cub to star. 40 levels to play https://t.co/ejryavAW3L pic.twitter.com/NqrHHFHdLw
— Dave DeSandro (@desandro) June 6, 2016

Flickity v2

Flickity v2 launched 🚀 Group cells, adaptive height, parallax, 800 lines smaller https://t.co/v4CCwodKsR pic.twitter.com/9Nr4XqiLxT
— Dave DeSandro (@desandro) July 11, 2016

Fetchy logo

Staggering animations article

Logo Pizza

Huebee

New! Huebee 🐝 1-click color picker https://t.co/mXcOOwQsTb
Uses limited color palette so all colors are visible pic.twitter.com/nPEo5Q1S6J
— Dave DeSandro (@desandro) November 18, 2016

A couple legit Bumpers

https://bumpers.fm/e/audr171motkg00tb32sg

RGB Schemes logo

Shepherd logo

Several other client logos, to be revealed in 2017.

And Caleb!

Caleb Parker DeSandro born 12/11/16. Erin & baby both doing well. pic.twitter.com/UDNxk9QBh2
— Dave DeSandro (@desandro) December 13, 2016

Improve Facebook or leave it

2016-11-26T00:00:00+00:00

Friends that work at Facebook: I hope you are either fighting to improve your company from the inside, or preparing to leave it.

Because Facebook has multiple figures in leadership positions that supported Trump. Thiel vocally, Luckey surreptitiously.

Because Zuckerberg believes the fake news his platform elevates played no part in the election.

Because Facebook’s core product promotes the distribution of false information.

Because Facebook shipped a racist feature in its core advertising product.

Your employer does not represent who you are. But you represent your company. You can stay and try to change it, or leave to signal change.

If Facebook is looking to recruit you: bring up these issues. Say no because of these issues.

Bob Wages' Atlanta Flames and Hawks logo

2016-11-23T00:00:00+00:00

Some long gone NHL team had lovely modern logos.

The Atlanta Flames logo lives on as the Alternate Captain letter on the Calgary Flames jersey.

The Flames logo along with the Atlanta Hawks logo (another beauty) were designed by Bob Wages for McDonald & Little in 1972. Wages was 24.

Fetchy Shiba logo comin' to get ya

2016-08-18T00:00:00+00:00

Fetchy takes YouTube videos and converts them to downloadable videos and audio files. Thank heavens. Pulling out videos to make clips and gifs has been difficult for too long. Fetchy is a great service that I consistently need. I was pumped to be tasked with designing its logo.

I kicked off the concepts with dogs, lots of dogs. Why over think it? I sketched out a variety of breeds, actions, and styles. I tried using the most meme-able breeds: corgis and pugs. To mix things up, I sketched a couple “f bird” concepts and more straight-forward monogram letters.

Look at that winged puppy. Too bad he didn’t get used. Fly high, little guy.

Liam at Fetchy confirmed that the dogs were the way to go. He suggested trying out foxes, which lead me to the fox-like, and even more meme-able Shiba Inu.

Liam selected concepts A and G. I brought these concepts in to Illustrator to produce the final vector logos.

Rather than select only one concept, I proposed using both for different contexts. Both head and runner logos were designed with the same style, so they could be used together. The head logo would be the main logo. It had simpler forms and less detail, which made it easier to shrink to small sizes. The head logo could be used on the site and elsewhere. The runner logo could be used as an illustration, suitable for specialized uses, like in emails, or on a t-shirt.

Its easy to over-use your logo. It could be the one piece of unique art you have. But it can lose its importance when it gets put everywhere as the default imagery, for placeholder avatars, loading screens, and list item bullets. Having an alternate logo or illustration relieves this pressure and keeps the main logo feeling special.

Interested in a logo for your work? I’m available to hire! Email yo@metafizzy.co to get started.

Bootstrap logo, or not

2016-06-22T00:00:00+00:00

A while back Bootstrap author Mark Otto put out a call for a logo. As Bootstrap is the shining star of the open-source front-end cosmos, I was eager to throw my hat in the ring.

@mdo [Should never engage in spec work, but wtf] Here's something I did quick. If worth pursuing, open a GH issue? pic.twitter.com/yLUSJuI8n6
— Dave DeSandro (@desandro) December 8, 2014

I followed up via email with additional iterations on that first concept.

Mark was open to collaborating. He wasn’t keen on this concept, so I went back and started the process proper, sketching lots of concepts. I liked using a boot. “Boot” is in Bootstrap’s name. It’s simple imagery. I did a lot of boots.

From these sketches, I liked this last concept best: a boot stepping off. It’s a boot in action. It’s analogous to the initial steps that Bootstrap can provide. I cranked out some vectors.

And finally

Alas, it was not to be. Mark passed on proceeding with this concept. And I get why. Even though this project started on a whim, I should have treated it like any proper creative project. The creative process works best when you collaborate with clients, building and refining ideas together. I made the error of jumping in with my own assumptions. I would have been better off getting Mark’s input about what he was looking for: Bootstrap’s values, character, vision, voice. The logo should have been born out of the authors.

It’s a good logo. I’ll add it to the portfolio. But I’m bummed I missed this opportunity.

Netflix Atlas logo

2016-04-06T00:00:00+00:00

From the Netflix Atlas team:

When Netflix doesn’t work, teams go to their Atlas Dashboards to find out why. Atlas supports a robust alerting system, which allows Netflix to notice problems around the world before our users do.

The logo design process started by identifying its key qualities. For Atlas, we landed on reliable, scalable, and powerful.

I took a look at other “Atlas” logo concepts on Dribbble to see how other designers approached this idea.

It was time to start sketching. 100 concepts to need to die in order for one to live :P

From all those sketches, I put together four concepts to decide which were worth pursuing.

The Atlas of Greek myth directly speaks to the core qualities: reliable, powerful, and considering he has the world in his hands, scalable. Using a human figure personifies the brand, and makes it more relatable.

But it’s a hard to concept to pull off. It look like a shrug ¯\_(ツ)_/¯, or it could look like Christ the Redeemer. Other Atlas logo concepts on Dribbble had similar issues.

Just an A in a circle. But the forms can also be viewed as a figure with his/her hands upward. Like this:

So it’s one of those clever logos. The A is clear, but it has another image. I admit, it was a bit of a stretch, but I think once you see it, it’s easy to spot.

Moving away from figures, this logo is the most abstract. The triangle (trapezoid, actually) represents an “A”, the starburst represents Atlas’s power and capability, as well as appearing like a cardinal coordinate legend on a map — alluding the atlases of maps and way-finding.

Finally, something more technical and detailed. Netflix Atlas is software after all. This treatment shows Atlas a multifaceted conduit.

We settled on pursuing the myth and Circle-A concepts. I went back to the pencil and paper to iterate and pump out more sketches with these ideas.

The figure’s body position is tricky. It has to appear that it’s lifting up a big object, but shouldn’t look overwhelmed. The globe is large, but the figure should be more prominent.

I tried variations of realistic figures versus geometric shapes. Realistic figures may be easier to see at a glance, but geometric shapes feel stronger and more iconic.

I selected a two ideas and brought them into Illustrator.

I produced these two concepts. The figure shapes are simplified, so they feel solid. The globes are large, but they don’t overpower the figure. I mocked-up these logos on t-shirts and in websites to better see them in context.

The Netflix team decided on the globe-on-shoulders treatment. With that, I finalized the logo in Illustrator. Look at these beautiful vectors. Not a stray node to spare.

Web Animation using JavaScript: Foreword

2016-03-30T00:00:00+00:00

I wrote this foreword for Web Animation using JavaScript by Julian Shapiro, released 1 year ago.

It’s a special time when a developer first discovers jQuery’s .animate(). I remember trying to animate any part of the page that wasn’t bolted to the main content. I created accordions, fly-out menus, hover effects, scroll transitions, magical reveals, and parallax sliders. Turning my websites from cold, static documents into moving, visual experiences felt like I was reaching another level as a web designer. But it was just bells and whistles. I realize now that for all the animation I added, I hadn’t actually improved the user experience of my websites.

All the same, it was thrilling. So what makes animation so exciting?

My apartment looks over downtown Brooklyn. I see people walk down the street. Plumes from smokestacks billow up. Pigeons flutter to perch on a ledge. A construction crane raises a section of a building. A single, heart-shaped balloon floats up into the Brooklyn sky (corny, I know, but I literally saw this happen twice). Cars drive over the Williamsburg Bridge. Clouds pass overhead.

The world is in motion.

This is how you expect the universe to work. Things move. Like the movements outside my window, each one is a one-sentence story. Together they tell the larger story of what is happening.

Yet this isn’t how digital interfaces work. Those little stories are missing. When things change, you have to fill in the story for yourself. When you press the Next button at an ATM, the screen suddenly changes. Did it move forward successfully? Was there an error? You have to read the screen again to interpret the results of your action. Utilizing motion removes this leap of understanding between interactions. Motion inherently communicates what has changed. It’s like writing tiny stories between states.

When a slide transition takes you to the next screen, animation helps you better understand what just happened. Wielding this power is what makes animation so thrilling. Like layout, color, and typography, animation helps you shape and direct the user experience. Animation is more than just making things move. It’s designing more effectively, and doing it thoughtfully.

Unfortunately, in the history of web animation, thoughtfulness hasn’t always been the highest priority. As developers, we’ve used Flash, animated GIFs, Java applets, marquee tags, and, more recently, CSS, JavaScript, and SVG to create animation that’s been, at best, a level of polish or, at worst, a gimmick. The idea of creating animation that’s both high-performance and user-friendly is relatively new.

So it’s a good thing you have this book in front of you. Julian Shapiro is one of the principal experts on animation on the web. In creating and supporting Velocity.js, he has developed an intimate knowledge of all the quirks and advantages of using motion on websites. Web Animation using JavaScript will give you not only the technical know-how required to implement animation in your websites, but, more importantly, the insights you’ll need to use animation effectively and craft compelling user experiences.

Animation libraries and technologies have made motion design more accessible than ever. But not every developer abides by best practices. The past couple of years have seen several trendy anti-patterns come and go. Scroll behavior has been hijacked. Mobile navigation has been pushed into menus accessible only via gestures. While adding animation is within the grasp of anyone who stumbles across .animate(), utilizing it to improve the user experience is one of the hallmarks of a dedicated developer. This book will help you become one of them.

David DeSandro

February 2015

Brooklyn, New York

Who Is Hideaki Anno?

2016-02-02T00:00:00+00:00

You can find quotes [which suggest] that Anno was hoping for the audience to find meaning for themselves rather than seeking it from him.

Time and again, Anno says, not only of Eva, but of art in general, that its purpose is to communicate. And that he wishes for people to be able to gain an understanding of him through his art. For someone who doesn’t really know how to communicate with people directly, he tries to speak through visual medium. He deems his success to be in how well his viewers understand him.

In a sense, I wonder if it would even be depressing for someone to ask him what he means by something, when his entire hope is that he has communicated his meaning through his work.

The Demon Vanquisher

2016-01-15T00:00:00+00:00

During sleep paralysis, sufferers wake up unable to move and are often set upon by various demons. It’s a terrifying disorder that affects millions of people worldwide and one that has largely baffled researchers. One neuroscientist, however, has not only figured out the cause — but has also figured out a way to end the nightmare for good.

I experience sleep paralysis about twice a year — fortunately without the demons.

Made in 2015

2015-12-31T00:00:00+00:00

Flickity

desandro.com v4

Electric Objects gallery show

Web Animation using JavaScript: Forward

platformer demo

Ribbon physics demo

playable character demo

Left Brooklyn

Practical UI Physics talk

CodePen draggable panels

Collapsable dragging panels coming to @CodePen pic.twitter.com/6EhuKcvpur
— DeSandron Collider (@desandro) September 24, 2015

Metafizzy rebrand

metafizzy.co v2

From Brazil

2015-12-21T00:00:00+00:00

Last year, I produced a series of halftone portraits for Electric Objects. I used Creative Commons licensed photos on Flickr. I treat these photos as the raw medium, like paint on a palette. But they’re of people. It’s their face, front and center.

In one of their first public demos, the Electric Objects team displayed one of my portraits in a side room at the Metropolitan Museum of Art in New York City. It was just for an afternoon.

The woman from the portrait walks into that room.

She’s from Brazil. I hadn’t reached out to her or the photographer. She knows the original photo exists, but not my derivative artwork. Imagine traveling across the globe, peaking into a museum room, and seeing your own face.

It’s a lovely coincidence. But I’m embarrassed. The internet doesn’t have to be full of strangers. Good neighbors introduce themselves.

In progress

2015-10-27T00:00:00+00:00

Things are going well, but too many things going. I need to complete a couple.

Contracting with CodePen.

Collapsable dragging panels coming to @CodePen pic.twitter.com/6EhuKcvpur
— Dave DeSandro (@desandro) September 24, 2015

Metafizzy rebrand.

metafizzy.co overhaul

imagesLoaded supporting background images. (I wasn’t planning on working on imagesLoaded, but then this dude responded with a snooty remark)

Tackling background images support in imagesLoaded. It just might happen https://t.co/MNrIYMQ2Dq
— Metafizzy (@metafizzyco) October 28, 2015

Masonry killer

Working on a Masonry-killer to atone for my sins of Masonry
— Metafizzy (@metafizzyco) October 23, 2015

To top it off, I’d like to overhaul Masonry, Isotope, Packery and Flickity in 2016, removing IE8 & 9 support, using good JavaScript. Then I have this idea for a new drag-and-drop product.

Classic Game Postmortem: Loom

2015-04-08T00:00:00+00:00

By Brian Moriarty

James Murphy's Subway Symphony

2014-10-09T00:00:00+00:00

James Murphy of LCD Soundsystem has been working on a system of sounds (appropriately) for the NYC Subway.

I love the subway system of my city–one of the most egalitarian, kind and high-functioning miracles in a city known around the world for it’s nearly unforgiving toughness. I also love sound, and music. Unfortunately, the sound of the subway is kind of a drag. Every time you swipe your MetroCard, the turnstile emits a flat, unpleasant “beep”. Each turnstile emits its own beep, all of which are slightly out of tune with one another, creating a dissonant rubbing-styrofoam-on-glass squeak in stations all around New York City. It’s kind of horrible.

What i propose to do is to create a series of 3 to 5 note sequences, all unique, one for each station in the subway system. These sequences will be part of an intersecting larger piece of music, which would run from station to station, and cross one another as, say, the 4, 5, 6 line (one musical piece) intersects with the L, N, R, Q and W (another musical piece) at Union Square. At each turnstile in Union Square, as you tap your new tap and ride card, a pleasant bell tone will sound, in one of a set of possible notes, all related to that station’s note sequence. The effect would be that at the busiest times, like rush hour, what was once cacophony would now be music.

I believe that music makes people happy, and makes them reflective. I think people who are willing to do what it takes to live here and work here–the commutes and the crowds, deserve a small sonic gift on their way home, or to deliver something, or getting to their school in another neighborhood. And i think that in the years to come, if this system is implemented, people who grew up with these sounds will hear a piece of music at an opera, or on an ad, or in the background of a film and feel a nostalgia for their first apartment, or their basketball practices, as they think “this song reminds me of Borough Hall” or “This song reminds me of my school be East Broadway”.

This would be my favorite thing ever.

Apple live GIFs

2014-09-09T00:00:00+00:00

Today, I tried live-GIFing the Apple event. It was a hoot!

View the Tweets in my Apple 9/9/14 GIFs Twitter collection.

View all the GIFs on Imgur.

I love the communal aspect of these events. There’s plenty of people doing gag pics, but I figured there wouldn’t be that many GIFs. I had a shot to do something special.

Here’s how I did it:

Have the event video playing.
Record a Screen Recording with QuickTime Player of the video.
Save the movie.
Import the movie in Photoshop. Do GIF workflow. Make the GIF.

The tricky part is that you can’t predict when there’s going to be a GIF-worthy bit. I would keep a recording going so anything would get captured. Then I’d make a judgement call to stop the recording and make the GIF.

I got to capture a bunch of big reveals.

But I also missed out on some smaller bits – like Tim Cook waving his rolled-sleeve arms, brandishing a real Apple Watch.

There’s so much work that goes into these events. And then, it’s all over in two hours. All the little moments can be quickly forgotten as the next unveiling tops what you just saw.

But, c’mon. I wanted favs and Retweets. And hot damn, did it work. This “Twitter on Apple Watch” Tweet got hundreds of engagements.

Twitter on Apple Watch http://t.co/X0jiNYm311
— Dave DeSandro (@desandro) September 9, 2014

GIFs (and GIF-like videos like Vine) work so well for events like these. This moment with Tim Cook and Bono was both cringe-enducing and endearing. I don’t think any kind of live-blog could capture it as well as the GIF.

Tim Cook: We could give it away for free http://t.co/xfl7ZKRCBR
— Dave DeSandro (@desandro) September 9, 2014

The Legend of Zelda

2014-09-01T00:00:00+00:00

I’ve completed playing the original The Legend of Zelda. Re-claiming the Triforce on the NES has long been on my list of shame.

Zelda is the greatest video game of all time. It was a game-changer. Everything previous to it was precursor. Everything afterward is an imitation. Zelda is the 2001 Space Odyssey of video games. This sounds a bit audacious, but after playing it, I can confirm it’s legitimate.

Recently, the magic of The Legend of Zelda has had a couple great examinations. Saving Zelda by Tevis Thompson reveals what made the original so special, and what the Zelda franchise has lost in its sequels. His essay is so well formed that it became the catalyst of a comic Second Quest which is to be published this fall.

Sequelitis - ZELDA: A Link to the Past vs. Ocarina of Time by Egoraptor is a comprehensive comparison of the NES, SNES, and N64 incarnations. He digs into game mechanics, environment and combat systems, and the trail of tropes the Zeldas have accumulated. It’s about Zelda in particular, but it’s great writing about all video games. It’s hilarious as well.

A puzzle is something you have all the information for. The only thing standing between you and the solution is your ability to put the pieces together in the right way. The satisfaction you obtain from solving a puzzle is from the Aha! moment. When the pieces fit, and you have only yourself to blame for it. …

The satisfaction doesn’t come from the door opening, it comes from the puzzle itself.

Zelda is a great game because it is purely a game. You have a huge world. You can go anywhere you want. There are no directions, no clear objective, no rails to keep you on your path. Whether your succeed or fail, it is you who is responsible. You completely control your experience.

Playing Zelda, I found every little triumph to be rewarding. Finding a new dungeon, bombing to reveal a secret, defeating a boss. I felt clever for having solved the challenges myself.

Zelda is challenging. It took me around 15 hours to complete the quest. That’s a huge amount of gameplay for a game that’s 25 years old. I tried my best to play the game as if it were 1986, a time before the Internet and instant solutions a google away. Finding dungeons required exploration. Beating bosses required experimentation.

When I came upon a new challenge, I had the sense that it was solvable, that I had all the parts necessary to beat it. It was just up to my wits to figure it out and my ability to get it done. But, I did hit a couple walls, relent and turn to google for two tricky spots – finding a pathway in Dungeon 7, and finding the entrance to Dungeon 8. For both solutions, I felt cheap for not figuring it out for myself. The solutions weren’t obvious, but they were certainly reachable if I had held out a bit longer. I cheated myself out of the thrill of Zelda – playing the game for myself.

Zelda is genuine game fun. It has the ultimate element of gamification – the act of playing the game is the reward itself.

Cotton Bureau — Happy birthday to us.

2014-06-12T00:00:00+00:00

Cotton Bureau made it to one year. I love rooting for these guys. They asked me to write something nice. I wrote this:

I love designing for web. But you can’t wear it. You can’t roll over on a Saturday morning to find your paramour snug in your app. You can’t put on your website and feel like you look good today. Cotton Bureau allowed me to be a part of these wonderful experiences.

Patton Oswalt - The Spurts

2014-06-11T00:00:00+00:00

[T]here’s a portal to a shadow planet in my right hand, the size of a deck of cards, and I can’t keep myself from peeling off one card after another, looking for a rare ace of sensation.

Alan Turing - To the Best of Our Knowledge

2014-06-05T00:00:00+00:00