Six Reasons Why Vector UI Design Rules

Posted in Insights

Few moons ago I had the chance to work on the UI of an iPhone application as a part of larger project. Unlike many fellow interface designers who swear by Photoshop, I decided to tackle the whole project on Illustrator. Three months later, the extra time I spent trying to get those inner glows to look right has paid off. Adapting the UI to the larger, higher resolutions of newer Apple devices took me a fraction of the time it would have taken me on a raster graphic editor.

Vector UI
Vector UI is pure bliss.
If the scalability of the overall design is not enough an argument to convince you, consider these six other reasons:
  • Nimble manipulation: objects can be moved, resized, duplicated and grouped with mind-blowing ease, without having to deal with thousands of layers, and then some...
  • Effect scalability: effects do automatically scale up and down in proportion to the resized objects. Manually scaling effects in Photoshop is very time consuming with often inaccurate results.
  • Higher control over colors and gradients: thanks to the 'Recolor artwork' panel in Illustrator, changing the colors of an object is a breeze and often yields more accurate results than it's raster counterpart. Besides, the designer has full control over the position and scale of gradients.
  • Artboards: this alone makes using Photoshop for UI design a no-brainer. Artboards allow instantaneous comparison and cross-referencing between the various screens of the interface.
  • Strokes: dealing with contours in vector graphics is streamlined and unrestrained compared to Photoshop's offerings.
  • Pixel support: with Pixel view and Snap to pixel, Illustrator is now as pixel-precise as its raster counterpart, if not slightly more.

Some might argue that Photoshop can do all of this using paths and layer effects. It would be hard to disagree, except that it is awkward and much more time consuming.