Developers love automation. Our jobs depend on automation and taking away a bit of the pain in completing repetitive tasks. Unfortunately, not everyone at a company knows just how much basic automation of everyday work can greatly improve both their productivity and give them time to concentrate on more important decision-based tasks.
I witnessed one such case at an entry-level job about a decade ago. It was at a small company that lived off of advertising spaces that were sold by only one employee. She was the best employee on the team. We’d mainly interact whenever something went wrong with her computer, usually to scrub clean her malware-prone machine. In one such case, after cleanup, I noticed she was transferring several contacts from an email message to her Windows Address Book by retyping them with both programs’ windows tiled next to each other. I quickly learned that she wasn’t copy-pasting the information because she didn’t know that was possible. It only took 3 minutes of training, and after receiving a few flattering thank-yous, I realized just how much I took for granted the basic tools I was so familiarized with. This may be an extreme example, but it helps illustrate just how much benefit tiny improvements to our workflow can make, and how much time our team may be wasting on needlessly tedious tasks.
As a frontend developer, I can get projects up and running faster with every new tool I add to my toolkit. Armed with boilerplates, frameworks, preprocessors and building systems, I can generate more quality code while writing less than ever before. Yet this is not usually the case for designers, illustrators and image content creators. In this article, I want to give a few examples of designer-related tasks that can be improved using better toolkits.
Picture by Alejandro Escamilla
Let’s start with some basic file exporting. Whether it’s preparing raster images or vector illustrations, we’re always faced with the time consuming task of adapting our work to the desired media. One such case is creating images for the web or mobile apps.
Since Photoshop’s Save-For-Web feature doesn’t export 8-bit PNG alpha channels correctly, and produces files that can be greatly reduced in size, let’s use ImageOptim-CLI along with Alfred (to avoid having to use the Terminal). After downloading and installing ImageOptim, ImageAlpha, ImageOptim-CLI, and Alfred, simply install the necessary workflow file. You can now generate small, metadata-free, web-ready JPGs and PNGs using a few keystrokes in Finder.
Another similar case are the bloated SVGs exported by Illustrator and Sketch. We’ll use SVGO and a simple folder to improve them. Any file dropped into the folder will be reduced in size and have unnecessary code removed. First we install SVGO. Next we install the Folder Action. Create a folder, right-click it and choose ‘Folder Actions Setup’. Select svgo.scpt, and close. That’s it!
For both the previous examples, creators will be able to improve how they work using familiar tools, and only using the Terminal during the installation of the dependencies.
Let’s look at a very different case: Many email newsletter design creators are familiar with HTML and CSS, but not with task runners. Email HTML has several limitations compared to what we use on the Web. Writing clean templates while minding the limited CSS support in email clients can be painful. Configuring Gulp is more complex than the tools used in the previous examples, and I’ll leave that out of this article, but the configuration I use is available for anyone wanting to use it. This building process does the following:
- Lets you work in separate CSS and HTML files.
- Removes unused CSS styles and reorganizes those styles for better compatibility.
- Tells you the features you used that may conflict with specific email clients.
- Compresses all images and optimizes their file size.
- Generates a single HTML file that’s highly optimized.
A lengthy chore that can be replaced by running a single line of code to run the building tool.
The benefits of automation in these examples are evident, and I’m sure creative developers can think of similar cases that can help their fellow teammates. Design work is hard as it is with the creative decisions that need to be made, and the everchanging goals of the content they create. I used designers as an example in this article, but many other workmates can also benefit from our help. Taking the time to build your colleagues internal tools such as these is a worthwhile investment, and I’m sure many of them will appreciate the effort.
by Pablo Delgadillo
Front End Developer at Camaloon