Adventures with SASS Preprocessors

For design implementation, one critical power tool that I wouldn’t want to be left without is the CSS preprocessor SASS. Generally when I’m working on a project here at Atomic, I’m operating within the context of a larger application, maintained by the developers on my team, that runs Ruby on Rails or a similar tech stack. We install the SASS gem in the application, and we’re good to go.

In the case of our recent website redesign, I found myself in a very different type of application, writing templates for our new Craft CMS install. Read more on Adventures with SASS Preprocessors…

Using Team-Driven Design to Create a Flexible Content Design System

We at Atomic Object recently launched our brand-new website with completely rewritten content and a clean, beautiful look that accurately represents our company’s progress in the field of design. This new website was a long time coming, and we’re proud of what we’ve achieved with the redesign. It represents a great step forward for our company–the result of many years of progress and hard work.

Read more on Using Team-Driven Design to Create a Flexible Content Design System…

A Fresh Outlook: Updating Atomic’s Visual Brand

Designing your own stuff is hard. I might even go so far as to say that it’s painful.

Why? Because it requires you to take a hard look at yourself and admit what sucks. What’s even harder is that you have to put a stake in the ground and make decisions. For whatever reason, this is much easier to do with our clients than it is for ourselves. Read more on A Fresh Outlook: Updating Atomic’s Visual Brand…

Creating & Sharing Color Swatches in Adobe

When I began in graphic design, I struggled with maintaining color consistency between documents. After I created a color palate, I would often want to utilize it across Adobe Photoshop, Illustrator, and InDesign. As any designer knows, good color is an essential part of design, and finding the right color palate can make a huge difference in the overall success of your design. Read more on Creating & Sharing Color Swatches in Adobe…

Turning a Sequence of PNGs into a Basic Animation with Flash

On a recent project, I had a team of Atomic developers come to me with an animation problem. They wanted to animate an icon, but they wanted it to be a series of PNGs. This post will review the process we took in finding a tool to create the animations and a few key pointers I learned along the way to improve the look of the animation.

Finding the Right Tools

My first thought was to use Apple’s Quartz Composer, where I have been prototyping most of my interactions and animations lately. I even found a cool patch plugin (Quartz Composer ImageExporter) that would record the animation and save a series of PNGs. But there was a big drawback: I couldn’t change the frames per second. This caused the playback to be choppy like a flip book missing every other page. By this stage in the process, I had a rough mockup of how we wanted to animate the icons, as Quartz Composer make it pretty easy with a few patch libraries like Origami (Facebook) and Avocado (IDEO). Read more on Turning a Sequence of PNGs into a Basic Animation with Flash…