Hi, my name is Jeff and I’m an appaholic.
I love apps. I love to play with apps and explore and test them to see what they can and cannot do. I love all the features of the apps I use, I love the interface and the little buttons & icons. Hell, I’d eat apps if could. My favorite thing in the whole world (except for motorcycles) is when my favorite apps release a new version, or even just an update. I love to see what’s been added, removed, streamlined or just improved. I suppose it was inevitable that I would end up designing app GUI’s and graphics: it’s the ultimate in playing with apps!
Contributing to my app addiction is a handful of apps that I depend on every day for my work: building app UI’s, web sites and other types of web-based graphics, and printed media too (marketing & promotional design and the like, which I’m not doing as often these days). This batch of apps that I’m dependent upon for almost every type of job that I do are worth a look for every designer that works in the web design (& development) and app/app UI design fields. Some extend beyond the web and mobile design world to other digital art based types of work also.
Before I get into the list however, I’d like to say that my collection of daily apps has grown quite a bit over the past couple years, mainly due to Adobe and it’s resistance to listening to it’s beta testers and users (me, on both counts) when a serious bug has been pointed out. They’ve chosen to ignore the bugs and issues in order to make the release date for the Creative Suite (6) rather than resolve the pending issues. This is one of the reasons that I’ve gone outside the Adobe Creative Suite in search of other options; something I haven’t done in over a decade being the rabidly dedicated and loyal user I was. Now that I have ventured outside the walls of Adobe, I’ve found a bunch of other apps for my development process that I’ve come to love and depend on (including and in addition to my Adobe apps of course). Here are a few:
In The Graphics Department
Adobe Photoshop CS6.
No matter what fancy, new apps I find out there, Photoshop is my number one favorite app of all time and has been since the early 90′s. I can’t live without Photoshop anymore than I can live without air and water. However, this is one of the CS6 apps that was released with a couple of major bugs that I documented more than once during the pre-release beta testing but they chose to ignore. In fact, after CS6 was released to the public, I spoke with an Adobe support tech about one of the bugs which I tracked down to a problem with the layers and paths panel when running more than one display, and possibly graphics card compatibility, and his response to it was to “not use more than one monitor”. Really? After nearly twenty years of running two to 4 monitors on my Mac I should now just ignore my second graphics card, unplug my 2nd and 3rd monitors and just use one because of a Photoshop CS6 bug that didn’t get fixed during development? What kind of a dumb ass answer is that?
Adobe Illustrator CS6
Again, I can’t live without Illustrator any more than I can live without Photoshop and the other Adobe apps I’ve depended on for more than twenty years. These apps are just too powerful and I’ve been using them religiously for so long that I wouldn’t know what to do without them. Over the past couple Creative Suites they’ve (Adobe devs) really come a long way in the integration of the apps in the Creative Suite.
ColorSchemer Studio
$19.99
ColorSchemer is a very handy little color management app that really makes life a lot easier in the scope of design and development while working between a variety of apps. This app has a lot of great features for working with color swatches and color schemes for your project, and it also imports and exports all the mainstream formats, such as the .ase format for Illustrator and Photoshop, and many more.
Available in the AppStore.
Art Directors Toolkit
$19.95 by Code-Line Software.
ADTK shipped with every desktop Mac a few years ago, which is how I stumbled across the app. I first launched it to see what the app was for before I deleted it (which I did with all the extraneous apps that came bundled on every system) but found it to have a lot of very useful features. It has a great little measuring tool; very handy for finding the size of an element or the space you have to work with on a web page, for example. It has tons of color-based tools for mixing colors, creating custom color swatches and themes, and too many other features to mention here. This app is similar to ColorSchemer Studio for working with colors but that’s where the similarities end. ADTK is the Swiss Army knife of graphics utilities apps.
Listed under “Utilities for Graphic Design & Production” on their web site, here’s their own short description:
Art Directors Toolkit is a collection of 11 distinct utilities that offer countless solutions to the daily madness that goes hand-in-hand with design.
ICONS
$4.99 by Empoc, LLC
ICONS is the best damn app out there for converting an icon to all those different sizes required for any iOS, OSX or Android app, and also web site favicons. Until I found this app, I had my own system (set of Photoshop Actions I set up specifically for this one purpose) of exporting app and web icons for development, but that was so much slower. ICONS takes that sweet little app icon you spent all day designing and exports every conceivable variation of it in one shot. It will do multiple icons at the same time too. The app makes it super simple to add rounded corners, that nice glossy effect and other nifty little details too, and you can save all your custom settings for next time when you’re done. I don’t know what the hell I did before this app came along!
Shrink O Matic
Free
Shrink O’Matic is an AIR application to easily (batch) resize (shrink) images. It handles JPGs, GIFs and PNGs.
ImageOptim
Free.
ImageOptim is a little app that doesn’t have a bunch of features, but what it does, it does very well. If you are a designer or developer that has to worry about the size of your images or bandwidth, this is an app you really should have. Their web site declares:
ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.
Save a PNG image from Photoshop’s Save For Web command, note the size, then check it again after you’ve run it through ImageOptim: There’s no arguing with the results!
Slicy
(formerly Layer Cake)
$29 from MacRabbit
When I’m creating app UI graphics, Slicy is used almost as often as Photoshop and Illustrator.
Slicy truly reinvents Photoshop slicing. To export PSD elements as assets for your website or app, rename your layer groups once and let Slicy do everything else. Designers and developers, rejoice!
Slicy makes the process so much faster by doing all the exporting and resizing for you. All you have to do is name your Photoshop layers or groups with the name (and extension) you wish to give your exported graphic (button.png, for example) and that’s it. Leave the PSD file as you would normally build a PSD file and Slicy does the rest. You don’t have to crop anything or put graphics in their own separate files – it can all live in one Photoshop document. To save standard and Retina graphics, you can simply name your layer(s) “button@2x.png” and Slicy will export both a 1x and 2x(Retina) size for each graphic.
There’s a lot more Slicy can do so if I were you, I would already be over at the macrabbit site checking it out.
Well? What are you waiting for?
Cocoapotrace
Free
Cocoapotace is a simple app for converting bitmap images into vector art. Take any photo or scan, run it through Cocoapotrace and you’ll have a nice vector-based version that you can tweak till the cows come home, in Illustrator or your other favorite vector app.
Normally, Adobe Illustrator’s Trace feature does a pretty good job and creates a relatively clean vector conversion to play with, but sometimes when you need to work faster and simpler, this app is the way to go. Don’t look for a lot of help and support with this one, or even a UI that’s better than fugly, because it just ain’t there. In fact, the whole web site is in Japanese so just finding the damn download link can take awhile. You are a genius though, despite what your GPA may have indicated, because you are reading this and know that I wouldn’t go through all the trouble writing this up without including a link to the download.
And here’s the aforementioned DOWNLOAD link.
Okeedokee, that about wraps up the graphics apps for the time being. Let’s move on to the next big thing…
In the Code/Text Editor Department
Coda 2
$75 by Panic.
This is one app that runs on my Mac all day every day. I used to do the majority of my coding and web development in Adobe Dreamweaver until I stumbled upon Coda. One of the reasons for the switch was due to support for LESS CSS, which Dreamweaver hasn’t touched yet. Although Dreamweaver has a few features that Coda doesn’t have yet, it isn’t far behind, and it’s a much cleaner, simplified and streamlined app whereas Dreamweaver has become extremely bloated over the years. Also, any issue I’ve come across in Coda, which isn’t often, their developers respond damn quick to resolve the issue. They’ve yet to tell me to unplug my extra displays.
Espresso
$75 by MacRabbit
Espresso is another excellent code editor that is very clean and simple and makes development so much faster. Although I prefer Coda 2 to Espresso for most of my coding, I do like Espresso for some of the features it has that Coda does not.
From the macrabbit site:
You design and develop for the Web? Espresso turbo-charges your workflowwith the perfect blend of features. Speed through day-to-day edits with extensive language support, contextual completions, powerful smart snippets, and Zen actions. Use the Navigator and code folding to prevail over the most complicated documents. Watch your web pages update in real time with live styling, visualize and inspect your layouts with X-ray, then push the changes to your server withSync or Quick Publish. Oh, and did we mention CSSEdit 3 is built in?
Espresso has a beautiful file preview built into it’s workspace that allows me to see the contents of any file in my project without actually opening it. That alone makes it worth the price, and it’s one of the reasons I keep it running right alongside Coda almost every day. I can’t begin to cover all of it’s other features here so I suggest checking it out yourself. Hey, it can’t hurt.
Codekit
$25
Another app that depend on daily in conjunction with Coda, is CodeKit. It compiles Less, Sass, Stylus, Compass and tons of other languages and manages frameworks from one location for use in every project, plus a ton of other features that just make development a hell of a lot easier. Coda 2 also compiles Less, Compass and some of the other languages and works very well too, but I like CodeKit for it’s handling of all the frameworks, the compiling and minifying, and it even optimizes images.
Here are a few highlights from the developer’s site:
Compile Everything
Process Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript and Compass files automatically each time you save. Easily set options for each language.Easy Frameworks
Keep just one copy of a file on your drive and easily use it across many projectswithout worrying about file paths. No more copying files into every new site.Optimize Images
Losslessly reduce JPEG and PNG file sizes with one click and see the savings. One less thing to do at deployment. (More compression options coming soon!)
Sublime 2
$70
BBEdit
“It doesn’t suck.®”
$49.99/Single User
from Bare Bones Software.
For a simple text editor, BBEdit has way too many features to list, so I pasted their description and some highlights from their home page below.
BBEdit is the leading professional HTML and text editor for the Macintosh. Specifically crafted in response to the needs of Web authors and software developers, this award-winning product provides an abundance of high-performance features for editing, searching, and manipulation of text. An intelligent interface provides easy access to BBEdit’s best-of-class features, including grep pattern matching, search and replace across multiple files, project definition tools, function navigation and syntax coloring for numerous source code languages, code folding, FTP and SFTP open and save, AppleScript, Mac OS X Unix scripting support, text and code completion, and of course a complete set of robust HTML markup tools.
With BBEdit, you can…
- Exercise Total Control Over Text
- Work YOUR Way
- Command Files, Folders, Disks, and Servers
- Enjoy Textual Omnipotence
- Live Up To Standards
- Integrate Smoothly Into Existing Workflows
TextWrangler
Free
No complications but plenty of useful features for development. If you don’t need to access your server and can live without the extra FTP capabilities of BBEdit, TextWrangler will handle the job just fine. Even though I’ve upgraded to BBEdit for all of the additional functionality, I still use TextWrangler when I just need to take care of some simple editing outside of my main code editor and development apps.
TextWrangler is the “little brother” to BBEdit, our leading professional HTML and text editor for the Macintosh.
TextWrangler vs. BBEditTextWrangler is a very capable text editor. What sets BBEdit apart is its extensive professional feature set including Web authoring capabilities and software development tools.
TextEdit
Free, included with OS X. Even after all the money I’ve spent on other editors, I still use TextEdit by default. Mostly because it IS the default text editing app on any Mac, but also because it is so lightweight and yet displays images and even HTML beautifully. After I’ve viewed or tweaked whatever I was working on, I can save it right to iCloud if I wish. This is really nice when I want to work on my shit from my iPad on the couch.
TextEdit is a highly versatile word processor included with OS X. TextEdit lets you create all kinds of text documents. It includes tools to format and layout your page, edit and stylize text, check spelling, create tables and lists, import graphics, work with HTML, and even add music and movie files.
And that’s all for now. I’m sure I’ll have purchased a couple more new apps by Monday, but these are the ones I use every day for my mobile app UI and web development projects. A few of these apps I found in various articles in .net magazine, where I find a lot of excellent information related to the development of apps and web sites. If one person finds a useful app in this list to help in their development workflow my time will not have been wasted.
Share on, kiddies.
