Hi, I’m Mark, and I’m in charge of product design here at Thanx, making things look nice and — with the engineering team — work intuitively. We wanted to give you a little peek under the hood here at Thanx, so you could see how we build stuff. Here are the primary design tools used to design Thanx 2.0, which shipped in March of 2013.
All layouts and designs are made using Photoshop, my go-to app for almost everything in the past 20 years. Photoshop is running 24/7 on every computer I own. I used it not just for designing every single screen of the app, but for compositing photos and illustrations, color-correcting photos, and sizing merchant logos.
I’m a nazi mayor about organizing and naming my layers, so the developers or designers inheriting my files will have an easier time of it (not to mention making it easier for myself, when I’m opening one of these files months or years from now). I normally use these naming conventions: all caps for layer groups, lowercase with regular capitalization for layers, and I give everything pretty logical and consistent names. For example, a group called “NAV” might contain layers for “icon Profile,” “icon Support,” “icon About Us” and be followed with the text layer for one or all of those labels. Occasionally I’ve toyed with using filenames for layers, such as “logo.png,” but I’ve found that works better in a design when its file goes into an archive mode and you need to come back and change things later.
Adobe Illustrator – Wireframes, icons, etc.
Many of the icons in the app were created from scratch in Illustrator, and some were brought in and edited to make them match the custom icons more closely, giving the entire set more uniformity. I also use Illustrator to create some of the more unusual vector shapes used in the app, such as starbursts, ribbons, and arrows.
I spent a half-day at the outset of this project sampling the latest wireframing and prototyping tools that have emerged in the past year or two, from hosted apps such as Mockingbird to desktop software such as Balsamiq and Mockapp. Ultimately, though, I always find myself going back to Illustrator as my primary wireframing tool. I don’t recommend this unless you’re already super comfortable in Illustrator. But I’ve been using it for 15 years and because of that familiarity it offers a very powerful and flexible toolset for wireframing. For me that compensates for the lack of automation you gain using most other wireframing apps.
The excellent freeware iOS/Mac app LiveView is always on if I’m designing a mobile experience. LiveView allows you to work in Retina/HiDPI resolutions and preview your designs right on your phone, by broadcasting your Mac’s screen over your local wireless network to your phone. This way you can tell if, for example, your fonts are too small. I’m tired of seeing so many awesome but ultimately impractical mobile designs on Dribbble, where the designer obviously hadn’t previewed the type sizes on an actual device.
Even for a small team developing a relatively simple app, documentation and communication is utterly important for a project that’s on a deadline. I’ve often used Basecamp and other tools (including my own home-grown ones back in the Web’s pioneer days), but Thanx was already using Confluence, and I had used it a lot at my prior gig at Fitbit, so it was the natural choice. There are some things I don’t like about Confluence, but for what it lacks in customizability, it more than makes up for in practicality. There are probably a million ways you could use it to facilitate project management of an app redesign, but I used it to capture:
- strategic goals
- business questions
- wireframes and mockups as screens progress through the design process
- interaction notes for the developers
- questions and comments from everyone
While in full swing, we’d typically update the wiki page multiple times per day (if not per hour).
Once various screen designs started nearing completion, I saved them as PNGs and uploaded them to FieldTest, a relatively new hosted service. It’s a wonderful way to prototype iOS animations and transitions, and helped the rest of our team visualize what I was designing and how the new information architecture would work.
Once our engineering whizzes have done their thing (the development process could certainly fill another post, and I’ll leave that to my colleagues who are more qualified), the engineering team starts putting out builds of the app for everyone else to QA. For that we use TestFlight, which acts like a private version of Apple’s App Store where only your app is available, and only to devices you allow. It allows you to use and test the app during the development process, finding and fixing things before submitting the final build to Apple for approval.
iOS App Icon Template
Finally, to mock up and output the various sizes of the Thanx app icon you see in the App Store, on your phone’s home screen, etc., I used the excellent app icon template by Michael Flarup, who even includes Photoshop Actions to output the sliced and sized files at the touch of a button.
Thanx for reading. If you found this article informative or interesting, please let us know.