A little star of pixelated art on the sidewalk. No reference that I can recall, but it does feel quite familiar. Maybe it’s just a Space Invaders flashback. I do love pixel art, so it’s nice to see it show up on the streets. It also reminds me of the Moonites from one of my favorite cartoons: Aqua Teen Hunger Force — but friendly and not as arrogant.

Midtown, Manhattan.

Sometimes it’s a quick illustration that works best. A white chalk tulip under a crescent moon and clouds. No need to overthink it. It works as it is and the core idea stands on it’s own.

West Side, Manhattan.

A real unique and beautiful color palette in this large piece. There’s also no fear in just painting over the smoke stain on the wall. I’ve no idea what the lettering says, but using white and having the lightening coming out from below creates an immediate cloud effect in my mind. The silhouette is a bit menacing, but the color choices lift the mood a bit and give it a more magical feel.

West Side, Manhattan.

Headed upstate and a hurricane rolled in, so we wandered around in the rain. I spotted this little bomber from a Brooklyn based artist. Love the style, the concept and coloring. The rain drops also help to give it a great material feel. The mesh hexagon grate it was stuck on also brings something. A bit industrial with a layer of retro cartoon sprinkled with a bit of nature.

Plattsburgh, New York.

A couple of lovely stencils found on the sidewalk from @go4tart. Having cut and painted many stencils myself, the detail here is really impressive. Plus anytime you’re using multiple colors, you’re increasing the difficulty in getting a good final image. The character choices and message are also guaranteed to make a New Yorker smile. There are also more stencils in the series for you to seek out.

West Side, Manhattan.

A super large mural with a ton of great color. The subject matter is good — individually — but it’s a bit chaotic together. My art director brain says there was a lot of “client feedback” which pulled this piece further and further from the original concept. I love the strong border and then having select elements break out beyond the edge.

West Side, Manhattan.

Revisiting an old project to create a showcase for the illustrations.

FYI: Here’s the original blog post about the project.

As I build out single page sites for projects, both new and old, I remembered this emoji icon set was only really hosted over on Codepen. Yes, you could download the icon set from the original blog post and yes, you could even see the animation inline via a video or the Codepen embed, but it wasn’t exactly a showcase. I really like having these little single page projects, so naturally, this one deserved the same treatment.

View the project showcase.

Design

Color scheme is still using the Flexoki palette I’ve been obsessed with, but scaled back to be very minimal. The key color update was to adjust the icons themselves. The originals were in pure black and white. For the showcase, I removed the white backgrounds to let the warmer, paper tones through as well as adjusting the blacks to be a bit softer.

Fonts are inspired from the main site and the blog, so DIN 2014 for the body copy (condensed) and Titillium Web – Black for the headings.

The layout is also fairly true to the setup of these other projects, but with a couple of updates. I removed the main site link text subhead from the header and instead, dropped in my logo (with main site link) into the footer. This was one of those, “now that you see it, it’s the obvious solution” moments. Of course, the main site link should be in the footer and of course it should be via the logo.

Development

Nothing dramatic in terms of the layout as again the CSS grid sets up all the responsive container items. There are a few updates to the original emoji CSS as well as some new ideas incorporated. One interesting little bug was discovering that the CSS for the responsive positioning within each emoji was conflicting with the page CSS grid. At certain breakpoints, the emojis were busting out of their grid containers. Adding a couple of media queries to reduce the CSS variable used for the emoji sizing units seems to have cured the issue, but honestly, I didn’t spend a ton of time obsessing over breakpoints. I checked a few sizes based on Macbook viewports (from the awesome screensiz.es) and then moved along. It allowed me to take care of a dev chore I’ve been putting off — adding those custom viewport sizes to my Firefox dev tools. A little gift to future me when debugging sites and needing to see additional viewport sizes.

I also realized that the original animations were all set to only play once on page load. That was fine for the Codepen, but on this new page layout, the animations were often off screen meaning you might not even see the animation happen. Adding a replay icon button was a quick solution. It works great, but admittedly uses some hacky Javascript. There are definitely better ways to code it, but whatever, it works here. It also led me to learn more about the limitations of CSS animations and there’s certainly more to learn as I go forward.

The other development update circles back to the philosophy of “owning your content” which is the whole point of creating this single page in the first place. Yes, the original blog post did show some of the art, but the animated versions were all hosted on a third party service — Codepen. Now, even if you like the third party service (and I do like Codepen), there is always the chance the site will go down, get sold to venture capitalists or more recently, start stealing your content for AI. All of which are beyond my control and in the end, only serves to cause me future headaches.

Contrary to all of that of course, is the fact that I’ve also added the code to my Github account. Yes, another corporate third party site. As antithetical as that is, it doesn’t dilute or detract from the project page. It was really just an effort to start learning more about Github. I use it daily for work of course, but in a narrow fashion. Bulking up my personal Github account with more repos will (hopefully) get me to tinker and learn more about it. It’s definitely one of those powerful, yet opaque technologies.

All in all, I’m happy with the outcome and more importantly, glad to have it showcased here on my own site, in it’s own page.

View the project.