I was asked by a professor to come up with an animated logo for the new Comcast XLab at the University of Pennsylvania. XLab is a research lab pursuing the future of interactive technology and entertainment with a focus on user experience. The lab is staffed by an interdisciplinary team of designers and engineers, and they wanted a logo that represented their fusion of skills.
Their initial concept and request was for a simple wordmark with a special X where one of the crossbars was smooth like an analog sine wave and the other was pixellated and digital - representing both sides of the XLab team.
After a couple variations in font options for the X, I figured a script X would make the most sense for the curls on the 'analog' bar. I played with a couple different weights for the digital bar, but it was tough to keep it symmetrical and balanced. Ultimately we decided to set this design aside and broaden the scope of our explorations.
Since it was important for the client that the logo be animated, I started to experiment with designs that could be compelling in motion. The animated version of the logo would be exported as a gif to be inserted before powerpoint presentations, on the website, as an intro card in videos, and so on. The next concept I came up with was something I called the Slice. This was my first real foray into motion graphics, and it ended up being a fun way to learn a little bit about After Effects. Below are two separate gifs - the first is the entry animation, and the second is the loop animation, which could be used as a loading indicator, or just sit passively on the website somewhere.
I thought this logo was much slicker, but perhaps a bit too corporate. It could represent an aerospace firm, a new brand of running shoes, or an especially hip department of Xerox.
Partway through the process, the professor who asked me to make this logo mentioned he was working with a designer a couple months prior who had sent some early concepts, but ultimately wasn't able to work further on the project. One of them was a sort of Venn diagram representing the overlap of design and engineering. This inspired me to draw a lot of rings.
When the rings overlap correctly, they make a nice X shape. However, drawing circles is hard. I was finding it difficult to test out different arc lengths, circle separations, and stoke widths while hand-drawing all this stuff, so I whipped up a Processing app. It allowed me to play with the different parameters of the circles and the app could even animate the drawn arcs with a little rotating motion that swung them in and out of the X shape. I recorded a video of the app - when I started the screen recording function, my computer slowed to a crawl (it's 4 years old), but the app runs smoothly under normal conditions.
So I was able to use this to vary the arc length, line weight, diameter, distance between centerpoints, rotation, and color. I was able to test out a bunch of variations really quickly and came up with a design I really liked. I recreated it in After Effects and made some gifs. In After Effects I was able to do some other cool things also, like vary the arc length over time and add a little motion blur. Immediately below is the primary version of the logo, it snaps into full color at the end, with a little bit of transparency to highlight the theme of overlapping. There's a simplified, inverted version of the logo that I like a lot, and also an example of application on top of an image.