RGB Schemes logo

2 Dec 2016

RGB Schemes logo

I designed the logo, type treatment, and brand guidelines for RGB Schemes, a VR gaming start-up. Woo, it's a fun one! The main logo is the RGB birdie, a symbol dense with meaning.

  • Bird for fun and whimsy
  • R, G, B letter shapes
  • Letter shapes in isometric view for 3D & VR graphics
  • Additive color blending displaying red-green-blue color space

The kicker: The birdie can be rendered as a 3D object.

RGB Schemes 3D logo rotation

RGB Schemes 3D logo object

I coded up this demo with 3D CSS transforms so you can drag around the logo for yourself.

See the Pen RGB Schemes 3D logo object by David DeSandro (@desandro) on CodePen.

It was one of those wonderful cases of design happenstance. I put the letters in a cube and kept playing around with the arrangement. At one point, I spot: "Hey, that kinda looks like a bird." Sometimes you get lucky ;)

Here's a look at all the explorations designed in the effort.

RGB Schemes logo design process 1

RGB Schemes logo design process 2


Interested in a logo for your project? Let's chat! Email me yo@metafizzy.co to get started.

David DeSandro logos

6

1 Dec 2016

Metafizzy is 6 years old today!

2016 was the biggest year for Metafizzy's product line-up. Major upgrades to three products, plus two new products.

But I'll be real here: I failed.

My goal for Metafizzy in 2016 was to grow license sales by 25%. Now that the year is closing, the numbers are in. Sales will have 0 percent change. That means Metafizzy kept pace with 2015 sales. That in-of-itself is an achievement. But it's nowhere near the goal or even the right direction towards it.

Rather than gloss over this failure, I mean to confront it. It's tempting to project a pastiche of ever-positive progress. I witnessed this behavior while working at Twitter. Failures were framed as lessons. Deficiencies were framed as opportunities. I appreciated the gesture, but what I really wanted was to someone to stand up say "We fucked up."

Metafizzy failed in 2016. I fucked up.

The plan was to do major upgrades to the three principle products, Isotope, Flickity, and Packery, then market these newly updated products. Upgrading the libraries was a worthy project. I'm happy with what I've made. But it was a bigger endeavor than I had anticipated. By the end of it, I was tired of working on the code. I was not motivated for a concentrated marketing effort.

New thing, shortsightedness on Bumpers

This break lead to Logo Pizza. The logos were received better than expected. But I stumbled again, this time in the follow-up. Anxious to start a fresh career in logo design, I said yes to a good number of logo projects brought in by Logo Pizza. Too many. I went from code burn-out to logo burn-out. Again, I'm proud of the work, but I'm worried what it cost.

So it's done. 2016 was not a bad year for Metafizzy — a lot of good stuff and progress was made. But I can't say it was a successful year. I failed the goal. I said it. I'm over it. Onward.

Huebee: 1-click color picker

28 Nov 2016

Huebee color picker

I've made a new thing! Huebee is a one-click color picker. It displays a limited set of colors so users view all colors at a glance, make clear decisions, and select a color with a single click.

I made Huebee while I was working on Logo Pizza. I added a feature so you can choose your own custom colors for a logo. Looking at other color pickers, I couldn't find what I wanted.

Most color pickers are computer-centric. They are designed to display and select from every possible color available, nearly 17 million. But as a human, you only need a good selection: maybe 6 hues, with several shades, plus a couple grays.

That's what Huebee does — show a limited set of colors so its easier to make sense of them.

Huebee is Metafizzy's 4th commercial library. The other libraries, Isotope, Flickity, and Packery, are all big, full-featured projects. Supporting them is a lot of work. Huebee mixes that up. Huebee is small and purpose-built — a welcome entry in the Metafizzy product line-up.

Use GitHub reactions, delete +1 comments

14 Nov 2016

On GitHub Issues, +1 comments are a quick way for people to add their individual support. But for contributors, they are menacing. Each +1 acts like a drip pinging in the dead of night, reminding you of that leaky faucet that still isn't fixed.

After the community called out GitHub on +1 comments, GitHub implemented reactions. Reactions are a nice stop-gap feature. Not only could reactions fill in for +1 comments, but they could provide a wider range of responses — approval, disapproval, happiness, celebration, confusion, affection.

I have since experimented with requesting reactions, asking people to add a reaction to show their interest in the issue. See Masonry#873 - Maintain left-to-right order and Packery#353 - Add back drag / fit packing behavior from v1.

Masonry#873

Masonry#873 has been wildly successful with this strategy, gaining 71 thumbs-up reactions and no +1 comments. Packery#353 has had lesser success with 40 reactions, but several +1 comments continue to pop up.

I believe the problem deals with social proof. Packery#353 already had +1 comments in its thread, added before GitHub implemented reactions. Users scroll through the thread, see a couple +1 comments, and feel okay adding their own as others have done.

Meanwhile, Masonry#873 never had a +1 comment to begin with. The reactions have the social proof, so people continue to use reactions.

Going forward, I will continue to request people use reactions, but also make it clear that +1 comments will be deleted. My instructions look something like:

If you would like to see this feature added, please add a 👍 reaction to this issue.

Do not add a "+1" comment — they will be deleted. Use reactions instead. Subscribe to this issue using the button in the sidebar.

Reactions carry the intent of +1 comments, but they do not subscribe users to the issue like comments do. So I point to using the subscribe button.

You know the faucet is leaky. Now you don't have to hear the drips.

Word is Flickity is good

19 Oct 2016

Flickity has been getting good looks from some of the web's top developers.

To top it off, Darin Reid has extended Flickity's scroll behavior to do wild transformations with Flickity Transformer.

Flickity transformer

See the Pen Flickity Transformer by Darin Reid (@elcontraption) on CodePen.

It's a delight to see Flickity getting the attention it deserves. But it didn't happen overnight. It's taken over a year to accrue this level of praise.

And let's not forget, Yeezy uses Flickity.

BongoHive chat

12 Oct 2016

I was recently invited by Silumesii Maboshe of BongoHive to chat about Metafizzy on their Slack channel. BongoHive is a entreprenurial community based in Zambia. The African start-up scene seems like a distant realm, one I'm hardly familar with, but jumping on a Slack brings it as close as any other community. Below is an edited transcript of the chat session.


silumesii:: Welcome @desandro!

desandro:: Hello!

silumesii: Thank you so much for joining us today. What time is it over there?

desandro: It’s noon on a sunny day here in Alexandria, Virginia, USA

silumesii: Sounds great! I was about to say "Good morning" :smile:.

We'll start in the middle, go back and then come forward (a bit like Pulp Fiction). Where did the name Metafizzy come from?

desandro: Metafizzy is the name of my small business. It’s built around creating and supporting web UI libraries like Isotope and Flickity.

I wanted the name to be something fun. It’s a play on the word “metaphysical.” “metaphysical” is a serious concept, but adding “fizzy” make it silly.

I like that its unique (as opposed to use “Fizzy”). In retrospect, I think its too long of a name. People have a hard time reading it at first site

I wrote about the name when I first started: metafizzy.co/blog/metafizzy-is-a-silly-silly-name

silumesii: Cool! I like that it's evocative and "bubbly" but also "meta". It's fun and futuristic at the same time.

How many people are at Metafizzy (leading question :smile:)?

desandro: It’s just me! I am and have always been the only employee. But I did decide to use a company brand instead of my own name to make it seem more official, and in case more people joined the company

silumesii: That's inspiring! I say "leading question" because a lot of Zambian devs and designers have companies exactly that size as well.

What does it take to run a company that size and still do great work?

desandro: 1) Luck. I was especially lucky for Isotope to be as successful as it has been. It’s be out for 5 years and remains Metafizzy’s number one source of revenue.

2) Interest - you have be interested enough in your work that you can come back to it. You have to be self motivated

3) Carving a niche - I think I’ve gotten this far because not a lot of other people do what I do.

Ha, I don’t know if my work is ‘great’ but it’s good enough to make it this far :stuck_out_tongue:

silumesii: Number 3 stands out for me.!

Before opening it out for everyone to participate, the question I've been dying to ask for months is ... who leaves Twitter to go it alone?

desandro: Working at Twitter allowed me to go it alone. I made a lot of money at Twitter. So it wasn’t as risky if Metafizzy didn’t work out.

While Twitter had great money, great people to work with, huge publicity — but the work itself was unbearable. Meeting and meetings. I’d work on projects for months and they’d eventually get thrown out. I decided to leave Twitter because I felt defeated working there. Even with all money and benefits and free t-shirts

Working for myself, I immediately felt better. I had agency. I had a sense of purpose. The efforts of my work had clear results

silumesii: Inspiring! Thanks!

makayi: what things did you learn from Twitter that you believe have directly or indirectly helped make MetaFizzy a success?

desandro: Thanks for your question @makayi! Working at Twitter opened my eyes to see how users don’t care about your product. They care about how the product in the context of their own lives - how the product can help or aid their lives. It’s a humbling idea. You think that Twitter is so great and that users would love these special features. But the feature has to be about making users’ experiences better, not just making the product better

For example, I re-organized the documentation for the libraries so that it made a progression - from simple concepts to more complex concepts. Previous it was organized around how the library was built - my perspective

I’ve tried to simplify my sites and APIs so that new users can achieve their goals, rather than organizing it around how I know it

Let me take a second to introduce myself. I'm David DeSandro. I work full time at my small business Metafizzy. I create and support web UI libraries like Isotope (filtering and sorting), Flickity (carousels), and Packery (draggable grid layouts)

I've also made Masonry and imagesLoaded, two of the most popular web UI libraries.

Recently I've been working a brand new project. I'm designing and selling 50 logos. logo.pizza

silumesii: Thanks @desandro. I got so excited that I assumed the introduction wasn't necessary. Appreciate that!

chizzo: What!!! I use Masonry... Not knowing you are the guy behind it :flushed:

Now the name rings a bell from url :joy: :grin: #MyBad

desandro: Yup that’s me! masonry.desandro.com. Masonry is 7 years old. Has 10,000 stars on GitHub. One of the top 100 libraries on the web

makayi: @desandro thanks David. I actually got your library as well a few weeks ago. Nice to know the person behind it.

silumesii: @desandro What is the mind-shift back-and-forth like from dev to design. Does it get easier with time?

desandro: Personally, I like to bounce between design and development. It helps solve problems. In both design and development, I run into ‘shower time’ issues. These are tricky problems I’ll have a hard time with. I’ll focus on them for a while but can’t solve them. So if I walk away from them, do something else, a great solution can magically appear by day-dreaming

I work on the same thing for a while, it’s hard to keep a good perspective. For the first half of this year, I was spending all my time working on code. Lots of releases. I’m now taking a break - working on the logo project.

chizzo: Firstly, let me say am a huge fan of grid layouts and the tile like interface, like Windows Phone UI. I use Masonry :grin: and after visiting Metafizzy... I've been fascinated by Packery packery.metafizzy.co

Checking out the sites using packery, none of them use it the way it is demo'd. Do you have any links you can share for the way it has been used in the wild? Like draggable tiles

desandro: niice.co is probably the best use of Packery. To see it draggable, you’ll have to create a new moodboard.

I’ve also collected these Packery CodePens

chizzo: Ok! Nice!

silumesii: @desandro On the development side of things what does your "toolbox" look like?

desandro: Textmate, Google Chrome developer tools, Gulp JS, GitX, iTerm2

chizzo: Am curious on what language you use? PHP, a framework like Ruby on Rails, etc

desandro: All Metafizzy libraries (Isotope, Flickity, Packery) are written in vanilla JavaScript. They support jQuery and can be used as jQuery plugins. They have universal module definitions so they can be used by other frameworks and module loaders like Browserify, RequireJS, and Webpack

Personally I like to write vanilla JS, vanilla CSS, vanilla HTML. I find pre-processors to be too much complexity for little benefit

silumesii: @desandro Perhaps a loaded question but on the other end of things, what makes a good designer? How does one get better at that craft?

desandro: I think the only way to get better an anything is with practice. Quantity over quality. Make more stuff. I’m not that good at logos, and wanted to get better, so I’ve spent the past month designing a lot a logos.

silumesii: Thanks @desandro!

It's been an honour having you! I really enjoy how you write ... rich but succinct. That's quite the skill.

Really appreciate the insights.

desandro: haha, thank you! I think my writing is my weakest skill. Not enough practice!