We're hiring!

We're actively seeking designers and developers for all three of our locations.

UX & Design

Turning a Sequence of PNGs into a Basic Animation with Flash

exploring-animations-header-image2

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…

Also posted in UX/Design Techniques | Tagged , | Leave a comment

6 Helpful Sketch Shortcuts

Tablet Portrait 5

The Atomic Designers recently got together to work on an internal project. One of my favorite things was seeing how my fellow atoms used their design tools. In particular, I learned a few new Sketch shortcuts and techniques to use. We have been using Sketch at Atomic for sometime now, and we’ve all come to enjoy using it.

In the spirit of sharing, I have compiled my newly updated list of most useful Sketch keyboard shortcuts.

  • Presentation Mode – cmd + .
  • View all artboards – cmd + 1
  • Group Layers – cmd + g
  • View/hide Layout – ctrl + l
  • Move layers back/front – opt + cmd + arrow
  • Color picker – ctrl + c

Read more on 6 Helpful Sketch Shortcuts…

Also posted in UX/Design Tools | Tagged | Leave a comment

9 Lessons Learned from a Year of Usability Tests

user-testing

When I started at Atomic, I had never participated in or conducted a usability test. In true AO teach-and-learn fashion, I’ve since then been a part of user testing on all of the major projects that I’ve been on since I started almost a year ago.

I have a few concrete take aways that I would want to hear if I were going back and learning about usability testing all over again.

1. Sit in on a test first.

This is probably obvious. But be sure to sit in on a test first, and not as the lead facilitator. See how your teammates run tests, and be there to ask supporting questions and take notes. I recommend pen and paper notes so that you don’t intimidate the tester with the clicking of a keyboard after every comment. Read more on 9 Lessons Learned from a Year of Usability Tests…

Also posted in UX/Design Techniques | Tagged | Leave a comment

Design Rituals at Atomic

markerboardcritique

At Atomic, we currently have 4 designers. Our small (but mighty) team is working to continually evolve and improve our team practices and rituals. We’re in the process of evaluating and possibly revamping some of our design rituals, in fact. As of right now, we have a few things that we’re practicing:

Show n’ Tell

Once a week we reserve an hour to share work. This can be used for formal critique, but is also a time to simply share what we’ve been working on. An hour normally gives us time to review 2-3 pieces of work, depending on how complicated the work is. Previously, this time block was used purely as critique, but we altered the time to be more of a come share with the team time. Read more on Design Rituals at Atomic…

Also posted in UX/Design Practices | Leave a comment

App Review: Frank Deloupe Color Picker

There’s a very small number of apps on my Macbook, but Frank Deloupe has made the cut. It’s a beautifully simple color picker that integrates with Adobe Photoshop and offers a number of very useful features. So far, it’s been well worth the $0.99 price tag.

Read more on App Review: Frank Deloupe Color Picker…

Also posted in UX/Design Tools | Leave a comment

For Product Demos and Lightweight Usability Testing on Mobile, Give Ziggi-HD a Try

Due to the form factor and software constraints of personal devices such as phones and tablets, giving demos and observing user testing on platforms other than desktop and laptop computers has historically been complicated. Crowding around the device so that everyone can see is awkward, resulting in uncomfortable demos and self-conscious user testers.

Recently, my colleague and I wanted to perform a lightweight usability test on a mobile web app. We were interested in gauging users’ ability to perform an end-to-end workflow within the application, as well as identifying any particular pain points that could be mitigated. We took an afternoon and tested with 6 volunteers, and we used our new Ziggi HD USB Camera as a way to comfortably observe while the user completed the test. It worked great! Read more on For Product Demos and Lightweight Usability Testing on Mobile, Give Ziggi-HD a Try…

Also posted in UX/Design Tools | Leave a comment

Follow the Data

One of the exploratory testing techniques I use is a ‘Follow The Data’ tour. For this test I follow a piece of data through the system from where it’s first introduced to where it’s stored, wherever it’s used, and where it’s displayed.

As well as checking that the data is actually used (there are times when input that is carefully validated is never actually used by the system) this technique can also lead to further test ideas.

Printing Problems

If you find that the data is printed out, this can give you a test about whether non-printable characters can form part of the data. And if so, what happens to them? How long can the data be? What happens to the printout when the maximum length of data is used? will it wrap or print off the page or obscure other parts of the printout? Read more on Follow the Data…

Also posted in Exploratory Testing | Leave a comment

Creating Responsive Email Templates – Tips & Tools

Statistics on Spin Post usage

Designing a responsive HTML email presents many of the same challenges as designing a responsive website. However, far fewer businesses bother to create mobile-friendly email templates. Despite the prevalence of mobile device usage, only 25% of businesses are creating mobile-optimized marketing emails. According to estimates from InMobi, 60% of Internet users are using a mobile device to browse, and Litmus estimates that just over half (51%) of all emails are opened on mobile devices.

Tips for Developing an Email Template

In order to capture the attention of mobile email viewers, an email must be easily readable and designed to engage mobile viewers. If you’re thinking of creating your own responsive email, here are five things to keep in mind when designing and developing your email template. Read more on Creating Responsive Email Templates – Tips & Tools…

Also posted in UX/Design Techniques | Tagged | 1 Comment

Lights, Camera, Action, Bugs!

I recently read about what might be one of the worst movies ever made and clicked through to read some reviews and find out why it was so bad. Doing so, I discovered a list of bloopers appearing the film.

Reading about these bloopers was really useful and reminded me about some of the test techniques I use. Read more on Lights, Camera, Action, Bugs!…

Also posted in Exploratory Testing | Leave a comment

When To Compare Features of a Competing App

Imagine that an application just like the one you’re scheduled to start developing was released in the App store today. This scenario happened to me recently. I was perusing a website when an article caught my attention. As I started reading, I thought to myself, “This description sure sounds familiar.” And it was familiar because it had nearly identical features to an application we’re scheduled to start building in the next few days. This brought me to an interesting infection point — do I look at the competing application, or not?

whichWouldYouChoose

It seemed like there were three rational answers: look at the released application and marketing materials now, not look at them until our application is complete, or wait until we are into the development of the application to look. Read more on When To Compare Features of a Competing App…

Also posted in UX/Design Practices | Leave a comment