Design and development teams are integrating more and more, and chances are you’ve worked directly with a developer on your team or as a designer on a team of developers. We all know Creative Suite like the back of our hands as designers, some have moved onto Sketch for prototyping or Affinity for other heavy lifting. Design tools are evolving and updating, but when a developer counterpart starts talking about IDEs, terminal and git commands it’s easy to go glassy eyed. I’ve been the sole designer with a group of developers for a few years now, and merged my workflow in new and exciting ways. Here are eight must have development tools for any project while working with or doing the development on your own:
1. Atom
A text editor is a text editor is a text editor, or so I used to think then I moved to Atom for all my coding. It’s clean, customizable, and comes with a huge base of community packages(think of packages as similar to WordPress’s plugins directory that give you even more power and customization). What’s better, it’s 100% free.
Split your views, search by file name, project, or document. After you master the search and shortcut keys coding in any other environment feels clunky. It’s open source and works across windows, mac, and linux.
You can control tabs, colors, and syntax highlighting. Built in git-differ, meaning if you have source control through a git, Atom will highlight your changes in the file tree. It’s a great little feature for tracking your work.
Get Atom
2. GitHub Desktop
If you’re not using a git on all your website projects, it’s time to start. With the GitHub desktop app, it’s never been easier, especially if you’re working with a team of designers and developers, source control is a must.
Git can be confusing at a command line. Designers are visual by nature, so why not use a great visual app for tracking changes? Github created a desktop app to do just that. You can visually compare branches, look back at your projects historical changes, and merge with a few button pushes.
Get GitHug Desktop
3. pgAdmin3 ( or Sequel Pro )
Learning how to interface with your database from a command line is great for the serious hybrid design/developer, but can be daunting. With pgAdmin(for postgres) and Sequal Pro(for MySQL), you can start with a more visual frame of reference for working with your raw DB. Most designers who work with WordPress are familiar with PHPMyAdmin, a browser tool for accessing your WP MySQL database. If you’ve ever had to migrate a site, you’ll have had to do some find and replace commands, which can always be scary. Sequel Pro gives you another option. A visual representation that can connect to your databases and help manage the data without need of learning SQL commands. Almost every CMS and App will require a database of some sort, and this will help you manage it without too much set up.
Get pgAdmin3, get Sequel Pro
4. Libra Office
Open source and, opens all MS Office docs with ease. If you’re like me, a lot of clients and/or team members send an excel, powerpoint, or word doc for review at some point, and this is the best way to access those files without buying an expensive MS Office license.
Get Libra Office
5. VirtualBox
There are a lot of tools for testing cross browser, but nothing beats live testing on your local machine for browser bugs and js issues. Microsoft makes it easy to set up virtual machine images for testing with VirtualBox: https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/mac/
There are online options and tools, but nothing beats local testing and utilizing ie’s development tools for debugging a problem.
Get VirtualBox
6. Terminal
If you’re on a mac, get comfortable with your terminal. It can be scary, but it’s a built in and powerful tool. Working with Sass, creating symlinks, and running a local rails app are all done from here. The ability to quickly jump in and start running sass without a third party app is worth the effort alone, and if you’re working on anything more complicated than a WP build, you’ll probably be crossing paths with this built in mac-tool. It’s worth learning a few quick basics.
7. MAMP or WAMP
This is mainly for the designers delving into WordPress of PHP development. The M and W each stand for Mac and Windows respectively with the AMP meaning Apache, MySQL, and PHP. These are the basics you’ll need to get your first WP build running locally. Doing this will save you time, cut out the need for FTP, and let you utilize other local environment tools (such as SaSS or LESS).
Get MAMP
8. Slack
Communication is key. Slack is a great tool with ton of friendly developer integrations. Try the desktop app to reduce load on chrome(You know you have at least 30 tabs open right now). You can break your team communication into searchable channels, which comes in handy when you’re
Get Slack
Honorable Mentions:
Podcasting – Push to Talk, and Audio Switcher
General – Spectacle, 1password, the Great Suspender, Harvest
