Vector Drawing for UI Design

Leonard Reese
Jul 10, 2017 · 4 min read

Vector graphics make up the system icons, empty state graphics, illustrations, and other visual elements of user interfaces. Professional UI designers should be able to edit vector graphics, and generate new ones from scratch to meet the needs of a project.

Modern vector graphic programs owe much of their design to a computer language invented in the 80’s at Adobe called PostScript. PostScript provided a way to articulate the visual layout of a page, so that it could be displayed on a screen or printed onto paper. Even now we can still manually write out visual designs in PostScript, entering basic commands to draw strokes, shapes and text, manipulating them in 2D space, and styling their attributes. Today however, powerful drawing tools have been developed that make it much easier for artists to edit vectors in real time. Clicking and dragging the elements on the page will execute commands behind the scenes, and show us the changes on screen instantaneously.

Adobe still produces some of the best programs on the market — Illustrator and Photoshop — but UI Designers can also find great alternatives like the open source Inkscape, and highly specialized tools like Sketch. Standardized file types make it possible for us to pass vector graphics between programs in our workflow. One important file type is EPS, which stands for “Encapsulated PostScript,” and is a small program that executes the commands to draw the graphic. Perhaps the most common file type is SVG, which stands for “Scalable Vector Graphic,” and is a standard for describing a 2D image in XML format. Any vector drawing program can be expected to import and export these file types with similar results.

Drawing a vector graphic heart.

Vector graphics stand out against digital image file types that rely on pixel information. JPEGs, PNGs, and even GIFs all use a system of image representation known as bitmap, which “maps” out pictures in tiny solid squares of pixels. Bitmap images are ideal for photography, and certain styles of artwork that use complex visual textures. The size of a bitmap image file depends on the image’s scale and its resolution — the more pixels the larger the file size. Low resolution bitmaps will be visibly choppy, revealing the pixel grid.

Instead of pixel information, vector graphic files store their images as mathematical formulas. When the image is loaded, its geometry is expressed on the screen, rendering the picture to see. That means vectors are totally independent of size, and will look just as crisp on a postage stamp, as printed on the side of a building. For this reason vector images are the preferred format in print for any graphics other than photographs. What’s more, computer aided vectors are used in product design for everything from car engines to lollypops because of their mathematical precision. Now that we are in the age of multiple device screen sizes and resolutions, vectors have come to be the standard for user interface design. A system icon designed with vector tools should be rendered perfectly by either a smartwatch or an HDTV.

Drawing a vector graphic skull and crossbones.

In my experience designing custom icons, I keep returning to principles I learned in high school math. It’s important to understand the geometry at play in order to achieve a desired result on screen. To that end I use primitive objects — polygons, lines, and curves — edited together into meaningful symbols. With drawing tools we can generate simple shapes, and then use control points to adjust nuances of curvature. These types of curves known as “Bézier curves” have been used in design for decades, and became indispensable to modern computer aided design. The most successful icons make intelligent use of these simple mathematical formulas to produce well proportioned images.

Vector Drawing Tips

  1. Set up a grid, and snap to it. Defining a grid establishes a framework for your creativity. By default I always begin with a grid system in mind, and points are generally snapped to precise coordinates at the grid intersections. When designing for mobile UI system icons, which generally take up around a square centimeter of physical screen area, I prefer working in a 24 x 24 grid. This small scale forces you to be selective in the level of detail you include. It also allows you to pay attention to the exact proportion of elements to one another.
  2. Use transparent shapes. I like to use shapes with 50% transparent blue color fills, and no outlines. The outlines can be distracting, since they take up physical space. The transparent layers allow you to view overlapping shapes and anticipate your next moves. If the composition becomes too complex then you can introduce additional transparent colors to distinguish the elements.
  3. Think like a carpenter, not a painter. I relate the commands in vector drawing software to machines in a workshop. I often start with ‘blank’ shapes and then trim off the negative space using custom ‘punch’ shapes. Become familiar with offsets, bevels, alignment, and pathfinding tools. I’m constantly measuring everything.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade