Why We Use Illustrator Presets
At MoneyDesktop, we do most of our UI design in Illustrator. We find that the vector workflow keeps file sizes small and allows us to scale assets for any resolution without losing quality. Overall, Illustrator is a great tool, but out of the box it’s optimized for print design and illustration. Swatches are set to CMYK instead of RGB, graphic styles are preset with busy patterns, and the stock set of symbols is hideous. (I mean, who uses a “Gerbera Flower” or “Vector Grime”?)
In order to optimize Illustrator for our needs as UI designers, we initially just created a style guide with a set of patterns. These patterns gave the UI more consistency, but it was cumbersome to enter the same values repeatedly and left a lot of room for accidental deviation from the style guide.
Instead of limiting ourselves to patterns in a style guide, we created a totally new library of presets (which did away with the useless ones Illustrator comes with out of the box). This new library of presets makes it easy for us to adhere to our design patterns by making those patterns easily accessible. By doing this, we’ve built a dynamic style guide that grows and changes as we use it.
Once you have a solid library of presets established, it becomes obvious when new patterns emerge. If you find yourself manually entering the same values over and over, it’s time to consider adding a new preset to the template.
Here is how we optimize Illustrator for building user interfaces.
We started by building a template file (.ait file) that loads art boards that are sized for our phone, tablet, and desktop apps. Then we created the following seven presets:
1. Grid System
Designing to a grid creates a sense of order and alignment. The template has guides set up to make it quick and easy to align things.
2. Device Outlines
Device outlines for tablets and smartphones help us retain context as we design. The interface just feels a little more real when seen in an iPhone. It also helps people visualize when we present designs.
3. Color Swatches
We’ve loaded swatches with our product color palette, including a global swatch for brand color that lets us quickly test how different client colors will look in a design. By selecting from a pre-defined set of colors we simplify the implementation of designs, ensure color consistency between different files, and make designs easier to maintain in the long run.
4. Character Styles
Too many font sizes on a screen create clutter. Implementing preset character styles gives us quick access to the standardized typographic scale that we work from. It also makes communicating with engineers much easier since there are a limited number of sizes to choose from.
5. Graphic Styles
Designers shouldn’t have to think about how to style lines or what values to use for shadows every time. Having these presets helps us work faster and be more consistent. It also allows us to update the style across the entire file with a a few clicks if we need to.
We load preset symbols with a few components that are used in almost every design such as the navigation bar and status bar.
7. Layer Structure
We have a base structure that has five layers to separate the device templates, backgrounds, UI elements, and guides. It’s one less thing we have to think about when we’re in a new file.
A Better Workflow
I’ve been surprised at how helpful the template and presets have been. It allows us to open a new file and quickly build something that looks like our product. It frees up cognitive space from thinking about each specific color value or font and allows me to focus on designing a solution to a problem. It makes collaboration smoother because all the designers use the same standards. And it will allow us to onboard new designers to our team faster.
Template files and presets aren’t a perfect solution. Illustrator does a poor job of updating styles when you re-import libraries. If you need to change the values of a preset, there is no easy way to push that change to all files using that preset (like you could with global styles in Fireworks).
Even with these issues though, building a template with good presets is a worthwhile endeavor. It can be set up in a matter of minutes and will save you hours over the long run.