Your friends at Viget present Inspire, a Design & Interaction Blog

Prototyping Mobile Animations with Pixate

As a project manager here at Viget, one of my responsibilities is making sure my team is actually available to work on a project. We have a great internal process for planning resources, but it can be challenging to reserve team time for internal projects that we launch via Pointless Corp. when we've got so much awesome client work going on. During these busy times, we sometimes have to get creative and figure out ways to make progress even if the ideal team member isn't available. This happened recently on a mobile web app we're building internally; our front-end development team was all booked, but we wanted to start building out some fun animations that are integral to the app.

It was perfect timing that Justin Belcher came to the Viget office to demo Pixate, a web-based mobile animation prototyping tool, which allows you to preview animations in a native mobile app. The tool, currently in beta stage, is intended for designers, but the interface was intuitive enough for me to create a quick prototype that would help us nail down exactly what we were going for.


Add Colors To Your Palette With Color Mixing

Viget color wheel

I’ve been wondering lately what it would look like to extend the Viget color palette beyond our signature blue and orange – particularly when I see a chart or graph in a Viget-branded presentation template. The colors typically lack harmony and sometimes it’s hard to distinguish one data point from another. If we had a few more colors to choose from, there would be more consistency and perhaps more visual contrast in our graphic visualizations.

I decided to take on the palette-extending challenge. I quickly discovered that while there’s some science to it (found in basic color theory), there’s also an art to manipulating the rules to discover just the right color combination.


A Quick Plug for Time-Saving Photoshop CS6 Plug-ins

I know, I know, there’s already a hundred lists of the 10 Best Photoshop Plugins, the 100 Best Photoshop Plugins, the 1000 Best… etc. This is certainly not one of those lists. This is just a brief shoutout for the extensions, scripts, and tools I’ve come to completely rely on to make my design process more efficient and elegant. These are the workhorses I use day in, day out.

Note: I use Photoshop CS6, so the mysteries of Photoshop CC and its wealth of features and plugins elude me.


Managing :focus styles without breaking accessibility

We’ve all done it at one time or another. The browser’s default focus style for links and form controls doesn’t mix well with a design we’re building, so either at someone’s request or of our own volition, we throw something like this into our CSS:

*, *:focus { outline: none; }

It’s seems harmless. I mean, how many problems could such a small declaration cause?


Using HSB Inputs in Photoshop’s Color Picker

Quick tip, here. Perhaps you already know about and use these. If not, read on!

I've recently started changing color values using the HSB inputs in Photoshop's color picker. If you don't know, HSB stands for hue, saturation, and brightness. One of the things I like about using the HSB inputs is that it feels intuitive (especially compared to RGB or hex values). It corresponds pretty closely with how I already use the color picker when I'm choosing new colors or slightly modifying an existing color I'm working with. In short, the saturation input moves left and right within the color box. Brightness moves up and down. Hue moves the color bar to the right of the box. Pretty simple.