-
Matthijs Collard
In this interview, we have Matthijs Collard, the creator of TAP for iOS prototypes. He will share with us his insights and experiences on Fireworks.
To begin with, who are you and where are you from?
Matthijs Collard. Interaction Designer, founder of UNITiD and leading the team. I am from the Netherlands, I have a background in Industrial Design Engineering and have been designing digital products since 1998.What do you work as in your day job?
Me and the rest of the team (18 in total) are all interaction designers. We do user research, facilitate session with clients, create prototypes, make wireframes, do user testing etc. We work for a lot of different clients and for a lot of different platforms and devices.Demo of iPad magazine
We do web, mobile, tablets, public space displays, remote controls and so on. The last two years we have had a lot of iOS projects. We were involved in the development of many of the top 20 best scoring iPhone and iPad apps in the Netherlands (NU HD, Ziggo TV, VI Tablet, AutoWeek, etc).
Firstly, i like your Touch Application Prototype for Fireworks. It is great for mobile prototyping. Can you tell us more about it and what makes you started this?
Fireworks is our main design tool for creating user interfaces. For every web project we make a prototype with the HTML & Images export function in Fireworks. This enables us to test our concepts, convince and present to our clients and of course do user testing. On every prototype we tweak a lot with external scripts. When the iPhone came out, and we started to design apps, we needed a tool to make prototypes.
Quickly, and of course, preferably straight out of our design tool without the need to dig into code every time you make an export. We combined the iOS web view possibilities with jQuery and the jQTouch plugin. Everything was build around the Library export function of Fireworks.
As a designer, you can set up almost everything in Fireworks. Basically, you export the document and have a prototype on the device on your iPhone within a few clicks. Running full screen, with realistic transitions, loaders, device orientation, caching en some advanced options like adding video to a page.
We have created around 100 prototypes with the tool and we know many large design companies and business use it in their processes.
Read the full article on TAP at
http://www.adobe.com/devnet/fireworks/articles/prototype_iphone_app.htmlCan you share with us some of the plans you have for TAP in future?
We just solved some issues with iOS5. We do have a TAP version for Android prototyping but the workflow is not smooth enough to publish yet.
Check out the latest TAP for iOS5 here
What type of projects do you work in Fireworks and are there any challenges you faced that Fireworks have helped you? As we design digital products all the time, Fireworks is our most used program. Everyone in the office uses Fireworks CS5. Many of our visual design partners also use it, making our workflow very efficient.
How long have you been using Fireworks?
I believe since Macromedia Studio 8. As I started doing some commercial assignments during my study, I decided to buy one suite. It was either Macromedia Studio or Adobe CS. I picked Macromedia because of Flash and Dreamweaver. So I was more or less forced to work with Fireworks and Freehand, but quickly discovered the advantages. Macromedia's product suite was build for digital work, as Adobe originated from print. This is a big difference and you can still see this in the products today.Why should a designer use Fireworks?
Because you can work faster and therefore concentrate on the design work instead of unneccesary repetitive tasks.Tell us why Fireworks is your preferred choice for doing user interface design? Most of our designs consists of many screens and screen states. Up to 80 screens in not an exception. Thanks to the "pages" functionality in Fireworks, you can create the whole interface in a single document.
As a designer, you know your design is gonna change at least 10 times. For example the main menu. It would be a waste of time to edit every one of the 80 screens because the menu is on every page.
Fireworks excels as a rapid prototyping tool. What is your favorite workflow in Fireworks and why?
We usually sketch the interface by hand first. Once we think we are on the right track, we open Fireworks and set up the wireframe. We use sketchy styles with handwritten fonts a lot. This is faster and it is more obvious that it is an early sketch. We always make a clickable mockup of the pages we design so we can see it working on a device (i.e. Browser, or iPad).We iterate the design based on feedback and user testing. When the wireframes are final we export the pages to flat files and document them in InDesign. Adding annotations. The source PNG will be send to a visual designer and he starts working on the visual design, also in Fireworks.
If you can only list 5 favorite best features in Fireworks, what will they be?
1. Pages
2. Symbols
3. Vector orientated, pixel based (or vice versa)
4. Export HTML (or pieces of HTML)
5. 9 slice scalingMany people compare Photoshop with Fireworks. What is your viewpoint in this?
Photoshop is a great program. For editing photos. It was never designed for creating digital interfaces. Imagine you have a PSD with 80 screens. A nightmare to work with. The file is huge, your layers are a mess. Now the client wants to change that bitmap icon that occurs on at least half the screens. There are people who can do awesome graphical design in Photoshop, but for things like websites and apps, it takes way to much time to do this in Photoshop. Most of the time you can make the exact same design in Fireworks, but in half the time or less.
Fireworks work even better with fireworks extensions. What are your favorite extensions from other developers and how do you use it in your work?
We do not really use extensions. But we should. I have a few installed but hardly use them. The problem we have is that the whole team of 18 people should be able to take over each others work and therefore need to have the same software. Extensions are more or less "individual downloads" which make it hard to manage. But we shouldDo you develop your own Fireworks commands?
No. I was looking into developing extensions and commands when we start building TAP. I should take a look at it again.Do you have a blog? Where can we find you?
Check our blog at www.unitid.nl and the tools section (www.unitid.nl/tools) where we have quite a lot of Fireworks stencils and of course the TAP prototype files.
Thanks for the opportunity to talk you, Matthijs. Last question, any advice to the designers out there exploring Fireworks?
Just use it for a week or two as your main design tool and I think by then you have figured out it is the best tool out there for designing and prototyping user interfaces.
Connecting the World with Fireworks
Click and drag the "Yellow Guy" icon located above the zoom slider onto the google map. Blue overlay areas allow you to see street map view! Have Fun!
