matt_tools_header_1
alt_matt_tools

3 Top Tools with Matt Ambler, Interaction Designer

(Our “3 Top Tools with” series looks at the everyday work of Bresslergroup’s strategists, researchers, designers, and engineers through the lens of their top tools for product design.)

I’ve been working in user experience since I got the opportunity to help design Comcast’s (then) new cable system called “X1.”

After that experience I knew I wanted to shift away from advertising and into designing user interfaces for desktop, web, and mobile applications. As an interaction designer who thinks all day about user experience and workflow, I’m hyper-aware of my own workflow and continue to fine-tune it as I go. Each tool I use contributes in its own way.

tool_time_matt

I try to stay up to date on new tools and on updates to existing ones as much as possible. Most recently, I’ve incorporated Sketch, which has quickly become an industry standard, into my process. I also recently used InVision to prototype a mobile app. New and powerful prototyping tools seem to be popping up from everywhere. In the end, it all depends on the project and the type of platform I’m designing for.

matt_tools_notebook

1. Bresslergroup Notebook

I’ve always used notebooks to visualize information architecture, create crude wireframes for user interfaces (UIs), and sketch the icons and conceptual imagery I need for projects. I’m a very visual person and sketching helps me communicate abstract ideas. I like to draw a lot of ideas quickly and decide which approach is the most suitable for a project.

Before coming to Bresslergroup I would use whatever notebooks I had lying around or just scraps of paper. I started using my BG notebook my first day here. I like it because it’s thick, durable, and – most importantly – filled with graph paper.

As an interaction designer who thinks all day about user experience and workflow, I’m hyper-aware of my own workflow and continue to fine-tune it as I go.

The graph paper helps me keep my sketches clean and aligned, and it REALLY helps me accurately map out the elements of a UI. It helps me sketch cleaner icon concepts that are then easier to convert to vector shapes in Illustrator or Sketch.

I also love the new Bresslergroup branding on the cover.

2. Design Software (Illustrator & Sketch)

I started using tools like Illustrator, Photoshop, and InDesign in computer arts classes during my junior year of high school. I only began using Sketch about six months ago. At that point, the program was gaining a lot of support from the design community and starting to add really cool features. I was constantly reading rave reviews about the tool and hearing great things from colleagues. ­ 

Sketch is mainly for designing user interfaces, which is why I use it in the visual design phase of a project. Previously, I used Illustrator and Photoshop for UI design, but Sketch provides more control over layouts, accurate rendering of elements, and features targeted at streamlining workflows.

I’m a very visual person and sketching helps me communicate abstract ideas.

Each tool has its place. Typically, I begin a project with Illustrator by designing digital-physical flows (if applicable to the project). I also use Illustrator to create wireframes when I have a stronger understanding and vision for a project. After solidifying the wireframes, I use Sketch for the visual design phase. If I’m designing an app, I also like to use a tool called Skala with Sketch to preview designs directly on a mobile device.

I’ll also use Photoshop at times to create or tweak images. I then use both Illustrator and InDesign to document the project and provide style guides and spec documentation for development.

matt_tools_working

3. Prototyping Software (Axure, InVision, Proto.io, Adobe After Effects)

I began using Axure about three years ago to make quick website prototypes. At Bresslergroup, I now use Axure to build prototypes for projects with embedded displays. When we design mobile apps, I like to use other tools such as InVision and Proto.io that are more suited for those types of projects. I also like to prototype any unique animations with Adobe After Effects.

Prototyping is a relatively quick way to bring designs to life. Prototypes allow clients to get a better understanding of how the final product might work by interacting with the design. I also create prototypes for testing purposes. In both scenarios, I’m able to gain more insightful feedback when the client/user interacts with the concept. I can then fine-tune my designs and offer better experiences.

(Researchers and engineers and designers, oh my! Read the other entries in our 3 Top Tools with series to learn about other top tools for product design across Bresslergroup’s disciplines.)