Tom Germeau

How designers can create interactive prototypes with Illustrator

At the start of a product idea the designer uses wireframes, mockups and prototypes to get feedback as fast as possible. Balancing the amount of time spent creating these temporary assets and reducing misinterpretation is key.

Tools like Illustrator give the designer the flexibility to experiment and draw without being forced to think about technical constraints early in the process. It's great for quickly outputting static mockups, though Illustrator does not have great tools built-in to express interactions or different states in the product.

This article explains how you can quickly go from Illustrator to an interactive clickable prototype in the browser without the need for a developer, without writing HTML, in about 10 minutes.

Read more …

Behind the scenes of a dashboard design

As a product designer at Chartbeat, the biggest challenge I face is how to incorporate huge amounts of data into as simple an interface as possible; not only do we have to pick which metrics fit the story we’re trying to tell, but also when we should show them. In this post, I break down a few behind-the-scenes design decisions that went into Chartbeat’s dashboard. This part of the design has a big impact, but is often not mentioned when we talk about the end result.

Read more …

Reorganization — Trent Walton writes about how process is often shaped by how teams are organized:

The idea is to assemble teams with complementary roles in a truly collaborative way. Members are available to each other regularly, and the chain of command is not isolated to each division/skill. The teams are ultimately responsible for what they build and how it performs.

Product Management and Design at Startups — Dan Olsen quickly goes over some basics of how a PM and a designer can collaborate properly.

A Productive Design Critique — Jake Knapp lists some rules to keep your hovering design directors in line.

Using SVG in your web app

SVG has been around for a long time. The dawn of screens with different pixel densities just made it almost a necessity for your web app. Luckily newer technologies like HTML5's inline SVG now make it a cakewalk to deploy. The technologies are in place, but there are some things to keep in mind when you want to keep your assets pixel perfect.

This is not a vector artwork guide, this just describes the Illustrator work flow I use specifically for user interfaces.

Read more …

Radar is in the App Store. Thanks to Meagan Fisher it also has a beautiful webpage. It was a lot of fun. On to the next thing.

How I got into UI Design

Until a few years ago I thought everyone learned to code for the same reason.

That is not the case. There’s a lot of people who know programming that love the act of coding on its own. As long as there’s a technical challenge. Preferably something that can’t be done.

It dawned on me that coding for the sake of coding has never been my goal. The reason I picked up a programming book in the first place was to make my Commodore 64 beep the Star Wars tune so it could assist my guitar.

Probably the first real project I spent a lot of time on was inspired by my childhood friend who had a brand new Power Mac 5000. I still had my C64, so I was blown away by its grace in the same way a caveman would feel if he skipped evolution and got introduced to a Porsche.

Months later my family bought a Windows95 PC and I was instantly disappointed by the feel of it. This triggered something in me to start creating a menu bar that looked and behaved the same way it did in Mac OS 8. So I started coding in some early version of Visual Basic, and hooked into the Windows API so all the menu bars would sit on the top of the screen instead of in the app itself. Less clutter, more Porsche, and a little silly.

Nothing like 3D rendering, cosinus mapping, or query optimizing ever made me feel like I could improve the world. There are people who are way better at this than me.

For me programming has always been a means to an end, a tool to design an experience for people that makes their lives better.

A different point of view from Andy Mangold on skeuomorphism. It makes the average user think: "I know how to use this!"

A good post about App Icons fulfilling multiple purposes.

I'm talking at EmpireJS, October 22nd. The title is "Mobile Apps: Finding the balance between performance and flexibility". View the slides on slideshare.

The talk is mostly inspired by a project I worked on at Chartbeat.