The Design Benefits of using Vectors in your designs

What in the heck is a Vector file?

Have you ever looked on some websites or apps and, for whatever strange reason, visuals just look a little blurry? Well, that’s simply a consequence of an image or video file being only so big, and being a set resolution. Especially given the variety of different screen sizes, pixel densities, and how accurate nearly every screen is on the market today (as compared to the CRTs of yesteryear). You can get around this by uploading your file in a higher resolution; but that can lead to issues with loading times, and in really bad cases, lowering your SEO ranking.

So what’s the solution then?
Simply put; vector files.

What actually is a vector though? The quick explanation is that a vector file is a type of visual graphic that is created using mathematical equations, rather than rasterized pixels. Some common vector file types you will likely see will be SVG (Scalable Vector Graphics), AI (Adobe Illustrator), and EPS (Encapsulated PostScript).

What are the primary advantages to using vectors?

There are a few advantages to why you should integrate vectors into your designs, and I’ll outline them below:

1. Scalability: Vector files are resolution-independent, which means they can be scaled up or down infinitely without losing quality. This is particularly important for graphics that need to be displayed at different sizes, such as logos, icons, background elements, or other visuals that are on sites and apps that have a wide variety of screens and screen sizes they will be displayed on.
2. Small file size: Vector files can be much smaller in size than rasterized images, which can be important for website performance and load times. This can be particularly important for mobile users or users with slower internet connections, or keeping fidelity of images on larger desktop-sized screens (especially as ultrawides, 4k, 5k, and even 8k are becoming more and more commonplace) without making files visuals either very blurry, or clear and enormous file sizes.
3. Editability: In most UI/UX design programs such as Figma, Adobe Xd, and Sketch, you can edit layered vector files without leaving the app. I can’t tell you how much time I’ve saved over the years by being able to resize, edit colors, and tweak elements of an SVG or AI file on my prototypes, rather than going off-app like I would need to if I were editing, for example, a logo in Photoshop. And in my opinion, there’s no substitute for making changes in-context rather than hopping in-and-out of different apps all day until you settle on something that looks “ok enough” to not want to open a different program, edit, export, and import the changed file.

What about video?

In some cases, rasterized video are unavoidable. This could be the case for customer testimonials, trailers, on-site footage, and anything else involving captured footage from the real world. However, there are multiple options for vector-based animated file types that carry many of the same advantages as vector graphics. Some examples can be SWFs (Shockwave Flash), HTML5 Canvas, and Lottie Animations. There is a whole rabbit hole one can get into for animations, ranging from what they can be integrated into, interactivity, and compatibility.

While you may not have as much editing freedom in a UX program (at least as of writing this blog) as you would a static vector, these are still important to keep in mind. Things like interactive infographics, snappy looping animations, custom loading animations, animated logos, and custom buttons can add that little extra oomph to your website or app.

What skills do I need?

In some ways, if you’re a web designer, app designer, product designer, etc. you probably already work with tools that have the ability to create and edit vectors. As I stated earlier, they can be edited and exported to vector graphic file types like SVG. If you want to work on this, I would suggest trying to brush up on some basic graphic design skills. There’s definitely a lot of overlap between graphic design and web/app/product design. Want to get a bit further into it? You can certainly push yourself to learn a program dedicated solely to creating vector-based images, like Adobe Illustrator.

In any case, learning to work with vectors has been a cornerstone of my UI designs. Not only can it be fun, but the ability to speed up your workflow, as well as build a cleaner, leaner, and more responsive product to your clients will absolutely help you land more clients.