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.
Masonry v4 and imagesLoaded v4
Masonry v4 and imagesLoaded v4 released:
— Metafizzy (@metafizzyco) January 19, 2016
🔵 IE8 & 9 support dropped
✂️ 25% & 50% smaller
🔌 Backwards compatiblehttps://t.co/OLPwrc1iIa
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 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
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 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
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 launched 🚀 Group cells, adaptive height, parallax, 800 lines smaller https://t.co/v4CCwodKsR pic.twitter.com/9Nr4XqiLxT
— Dave DeSandro (@desandro) July 11, 2016
New! Huebee 🐝 1-click color picker https://t.co/mXcOOwQsTb
— Dave DeSandro (@desandro) November 18, 2016
Uses limited color palette so all colors are visible pic.twitter.com/nPEo5Q1S6J
https://bumpers.fm/e/audr171motkg00tb32sg
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
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.
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 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.
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.
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.
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
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.
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.
Web Animation using JavaScript: Forward
Left Brooklyn
Collapsable dragging panels coming to @CodePen pic.twitter.com/6EhuKcvpur
— DeSandron Collider (@desandro) September 24, 2015
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.
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, 2015Metafizzy 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, 2015Working on a Masonry-killer to atone for my sins of Masonry
— Metafizzy (@metafizzyco) October 23, 2015To 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.
By Brian Moriarty
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.