Mac Users, Ready to Supercharge Your Productivity?
Top Tools for Designers & Developers
Whether you just picked up a shiny new Mac or you’ve been a Mac “pro” for years the following tools will greatly enhance your experience and boost your productivity. These applications are especially useful for web designers and developers.
This entire suite runs about $53, and you can get basic versions of 5 of these 7 applications for free! You truly will feel like your Mac has been streamlined and supercharged once you get your hands on these tools.
Alfred 2
Alfred 2 is an incredible productivity application. Used to clicking through Finder to find folders and files? After downloading Alfred you’ll never have to bother with Finder again. Simply type in what you’re searching for and Alfred instantly finds it. Thanks to intelligent autocomplete you’ll only need to type the first letter or two in most instances.
You can also quick search the web with Alfred. Use keywords like Wiki, Google, or Twitter before your search terms to search these sites without ever opening your browser.
I personally use Alfred to open any file or folder I need, to launch web browsers, search websites, and do basic math. With just a couple extra keystrokes you can also choose which program to open a file or folder with. With just a few keystrokes you can have a project folder opened in Sublime Text 2 (learn more about this awesome tool below) and your local site opened for testing in Google Chrome (my preferred web testing browser).
Alfred 2 comes with my highest recommendation and can be downloaded here for free! For $29 you can also upgrade to the Alfred Powerpack which I highly recommend. The Powerpack will allow you to create and import “workflows” which basically make your trackpad or mouse obsolete as you’ll be able to accomplish just about anything with a few keystrokes. Check out some sample workflows here.
Divvy
Next up in my “must have” Mac tools list is Divvy. Divvy is a very simple but extremely useful application. This app allows you to divide your screen into sections. This is very useful if you’re testing out website design and want to be able to see how your code changes effect the site.
I recommend this application if you have a screen 23" and up. However, if you have decent eyesight it can be used effectively on smaller screens at scaled resolutions.
Bonus tip: you can see these changes live by utilizing LiveReload (discussed further below).
A free trial of Divvy can be downloaded here and the full version sells for $14.
Sublime Text 2
This next tool is probably very familiar to many of you. Sublime Text 2 is an extremely robust text editor and my tool of choice for all coding needs (HTML, CSS, Javascript, etc.).
Once you download Sublime Text you’ll want to install the Package Manager and then check out some of the incredible packages you can easily install to greatly enhance your experience with this awesome tool.
Be sure to install the LiveReload package and pick up LiveReload (discussed in the next section). These tools paired with Divvy will allow you to see your coding changes take effect instantly, just by saving your file in Sublime.
Sublime Text 2 is available here for free, but I recommend shelling out the $70 to purchase the licensed version eventually. It’s the least we can all do to thank the team behind Sublime for such an awesome program.
Bonus tips thanks to Medium contributor Chrysto: If you do a lot of coding in Javascript be sure to check out WebStorm 8, widely considered the best Javascript IDE (Integrated Development Environment). Another Sublime alternative is CodeKit which I do not have personal experience with, but comes highly recommended by others.
LiveReload
LiveReload is another one of those deceivingly simple tools. This application basically removes the need for a browser refresh button when designing or developing. Paired with Sublime Text, Google Chrome, and the LiveReload Chrome plugin you’ll be making web design changes in record time!
LiveReload can be downloaded here for $9.99. Well worth the price of admission as far as I’m concerned!
GitHub for Mac
Before I talk about this specific tool let me mention GitHub in general. If you’re a web designer or developer you owe it to yourself to get familiar with version control and git in general, and GitHub in particular. GitHub is a powerful and free tool that makes “collaboration, code review, and code management” simple.
GitHub for Mac is the self proclaimed “easiest way to use GitHub on Mac”, and it’s true. Committing changes and syncing branches is a breeze thanks to this simple lightweight tool.
You can download GitHub for Mac here for free!
Dropbox
This next tool is another familiar one, Dropbox! I recommend Dropbox for keeping your project files organized and freely available wherever you are. With a Dropbox account and apps installed on your phone, tablet, and computer you can keep track of your project documents, images, and other files wherever you are. You can also open up certain folders to wider audiences so your clients and collaborators can share files with you instantly.
You can sign up for Dropbox here for free, and premium plans are available as your data needs grow.
Evernote
The final productivity tool I highly recommend is Evernote! Evernote is similar to Dropbox in that it allows you to access it anywhere at anytime with their companion Mac, phone, and tablet apps.
Where Dropbox shines with files Evernote shines with ideas, thoughts, plans, and lists. Evernote is my trusty companion when I come up with a new idea for a website, app, or article. I can quickly pull up Evernote and edit my vision at anytime from anywhere as your account syncs across all devices.
You can get your hands on Evernote here for free, and also check out their premium offerings with offline notebooks, collaboration and presentation tools, and more.
If you enjoyed this post please click that little “Recommend” button to let me know, and shoot me a tweet anytime @mattdionis.
Recently published: The Best of Both Worlds: Turn your 13" MacBook into a 23" iMac for under $400
