The site we made for the 2019 CAMP Festival for creatives recently won an Applied Arts award for Community Promotional Design! To celebrate, we looked back at some of the assets that went into the site experience.

The Site

I saw some Blender Grease Pencil animations by Dedouze and got inspired by what the tool seemed to offer. The Grease Pencil tool is like a typical drawing tool made for Blender. It allows you to draw in 3D space as well as make and play animations in real-time. Pretty neat right? The closest thing I can compare it to is one of those 3D pens that lets you “draw” in a 3D space.

Recently I saw this video explaining all 80+ Blender material nodes on my YouTube homepage. Naturally, I watched the video and one of the nodes, in particular, caught my attention: the Shader to RGB Node.

As it turns out, this node is great for toon shading and it’s really easy to use! Below are some quick instructions on how to get started and some ideas of what you can do with it.

The Node

So what exactly is this mysterious node that only works in Eevee? As the Blender manual puts it:

“The Shader to RGB node is typically used for non-photorealistic…

As the amount of data in the world increases, so does the need for designers to know how to visualize that data. Since at gskinner we have to work with quite a variety of data sets, I thought it was a good idea to brush up my data visualization skills.

I read Information Dashboard Design by Stephen Few and The Visual Display of Quantitative Information by Edward R. Tufte to get a better understanding of the principles and theories behind data visualization. In this post, I’ll share some valuable take-aways from these books that you can apply to your designs.

Who’s Your User?

…

I had the pleasure design two vignettes for our Google Flutter Vignette Showcase. What made the opportunity even sweeter was I could use 3D motion in the Flutter showcases. Here is how I designed the two 3D vignettes to showcase Flutter’s capabilities.

Designing the Vignettes

Speakers and PNG Sequences

To start, our team researched existing examples of interesting app interactions. One 3D interaction stood out was this guitar interaction by Minh Pham. What we liked about this concept was it showed a product from many angles in a fun and interactive way.

Warning: There is a GIF at the bottom of the post with flashing images.

Like many of you, I was inspired by the impressive visuals of Spider-Man: Into the Spider-Verse (which, by the way, has a website built using gskinner’s CreateJS libraries) and wanted to try to apply some of that style into one of my animations.

Back in May, the organizer of CAMP approached gskinner to create a site to promote their festival. For those who don’t know, CAMP is a festival held in Calgary every year that describes itself as: “…a non-profit organization celebrating the art and technology of creative storytelling. We bring together like-minded professionals, artists, educators and students to share and shape experiences that educate, challenge and inspire.”

The original ask for the site was open-ended: something to do with digital nature, mental health, and flowers. That got our team excited since there were a lot of creative possibilities within those parameters. …

It’s been a while since I did any motion graphics so I thought I’d jump back into it. My goal: make a short HUD animation inspired by sci-fi films. I’m a sucker for flashy sci-fi FUI (Fictional User Interface) visuals, so I couldn’t resist making my own and documenting the process.

Gathering the Reference

I headed over to Pinterest to gather some reference related to FUI design. From the reference, I noticed the usage of lines, and simple geometric shapes that follow visual rhythms as well as a high contrast appearance. I made sure to keep referring to this to stay on track.