Oh, the Illustrator. I have some sort of love-hate relationship with that program. Compared to its older and more mature brothers Photoshop and InDesign, the user interface just lacks that something. Illustrator has always been the difficult app to master and to really do something productive. But it’s also been pretty much the only real vector app.
I have quite a long history in printing media, where Illustrator was some sort defacto-tool for any vector-image use case. In the era of web design, the Illustrator has gone to one of those rarely used programs. But times they are a changing.
High density displays (I refuse to use the R-word redefined by Apple), mobile-friendly, responsive and flat design trend and increasing demand of bandwidth efficient web is turning the eye towards SVG-files and back to vector.
Sure we have always created assets with Illustrator and InDesign for web, and re-used those printing media assets in electric medium, but last week I took a bold step to design a complete webpage in Illustrator CC.
To my surprise Illustrator did the job quite well. I could set the rulers to show me pixels instead of centimeters, I could drag the assets to drawing board, away from canvas (the thing that Photoshop still doesn’t support) and there’s even a nice pixel-preview -mode meaning I could make a kind of pixel-perfect stuff in vector-format.
Illustrator also has built-in support of Typekit, which I have found to be a very nice tool in web typography and some CSS export -features. The Photoshop layer style CSS export -feature is really bad, so I didn’t even bother to check the Illustrator’s version of it. But maybe the Adobe guys can fix those things some day.
There are also other drawbacks. It’s easy to use Illustrator-made assets as a smart object in Photoshop, but I found the usage of bitmap-images rather difficult in Illustrator. They’re not too easy to handle. Also the export-feature from Illustrator to, say, a JPEG-file, did some harm to typography. Sure at the end of the day the fonts are rendered in in browser, but for illustrative purposes I would like to have a nice export from Illustrator too.
Illustrator is definitely something to check out if you’re a web designer of any sort. The built-on mindset of forgetting the pixel as drawing unit is intriguing. I believe it does good to any modern day designer to put those individual pixels aside and focus in responsive, mobile-friendly graphics.
Further reading
- You may find the Tutsplus-article interesting:
http://vector.tutsplus.com/articles/theory/adobe-illustrators-role-in-a-web-design-workflow/ - I’m not the first one with Illustrator in mind when designing the web. There’s an Illustrator .ai files available for wireframing, Twitter Bootstrap and excellent ZURB Foundation.
- You can also take the SVG to next level with anmations. Check the Codrops articles here: http://tympanus.net/codrops/2013/11/05/animated-svg-icons-with-snap-svg/ and here: http://tympanus.net/codrops/2013/12/30/svg-drawing-animation/