An Interactive Designer’s Favorite Tools (from 2012)

February 15, 2013

by Michael Meder

0

Categories

FeaturedOur Thinking

As an interactive designer everyday feels like Chanukah. Amazing minds constantly push the envelope, delivering radical new technology to the digital community. I’m spellbound – these ideas seemingly come from nowhere, change everything, and overnight become an integral part of how we do our jobs. Sorry if it sounds nerdy, but that’s just plain cool.

So, to kick off this year, I’ve compiled a list of my favorite discoveries from 2012. Enjoy!

Twitter Bootstrap

What is it?

I’m just gonna come out and say it – I love Twitter Bootstrap. It is without a doubt one of the best web development frameworks out there. If you’re not design minded, you can easily create beautiful looking web pages. Or, let’s say, you’re not a code monkey. Twitter Bootstrap supplies you with the tools to create structurally sound and extremely accessible web pages. Oh Twitter Bootstrap, you had me at “Hello.”

Get Twitter Bootstrap!

Icon Fonts

What is it?

Like Kevin Smith and Batman, I could go on about icon fonts until I’m blue in the face (and wearing jorts). They are that awesome. First, they’re a huge time saver. No more sprites or multiple versions. Just, change the color or the font-size in the stylesheet. Second, they scale! In a world of responsive design and high density displays, image based icons pixelate as they scale up. Icon fonts are vector based, so they look pixel perfect no matter the screen. Oh, and did I mention they are compatible back to IE7. Well, there you go.

Get Font Awesome or Ico Moon!

Compass / Sass

What is it?

Compass (an extension of Sass) isn’t new, but was introduced to me this year by incoming team members. Let me say this – love at first sight. It was a brief courtship: long walks on the beach, candlelight dinners, ending with a promise to never code stylesheets in plain CSS ever again.

Don’t get me wrong. CSS is great, but it lacks structure, efficiency and extensibility. Compass and Sass provide all that, as well as some amazing mix-ins for handling CSS3’s vendor prefix nightmare.

Get Compass or Sass!

Adobe Edge Inspect

What is it?

I want to preface by saying the following: In December 2003 Matthias Shapiro and I waited overnight outside a theater in Atlanta to watch all three ‘Lord of the Rings’ films back to back to back. We were first in line. It was very cold. We waited for what seemed an eternity. That was nothing compared to the wait for a decent multi-device debugging tool.

Finally, 2012 brought us Adobe Edge Inspect. Edge is a Google Chrome extension that you install on both your desktop and the mobile device you want to test. After a quick sync, you’re off to the races with all the awesome debugging kung-fu Chrome has to offer. It’s pretty great. But not as great as ‘Return of the King’ (just sayin’).

Get Adobe Edge Inspect!

Bonus Round – Arduino

As an interactive designer, one of my major hangups is the limitation tacitly placed on the number of ways we can interact with the user. In 2012 I was inspired by the work done in Google’s Web Lab – a virtual playground where the user’s digital interactions are manifested physically in the Science Museum, London.

My journey of discovery was really, really, boring. So let’s say a few yada yadas and one Pumpktris meme later, I figured out how I could DIY that sort of interaction myself – Arduino.

Arduino is an easy to learn open source electronics prototyping environment which is perfect for facilitating this sort of interactivity. Put simply, it allows you to create simple electronic devices that can communicate with your computer (and ostensibly the web). And did I mentioned it’s easy? After about a week or two of tinkering I was successfully building my own projects. Get ready for my Tetris suit debuting Halloween 2013.

Get Arduino!

Your Turn

What mesmerizing online tools have you stumbled across in the past year that has made design and web development easier for you? Don’t forget the cool factor!