Setting up SVGs intended for animation and interaction design.

Intro 👋

If you’re looking to add visual interest or interactivity to a website or webapp, SVGs are a fantastic option for visuals. Since they’re vector-based, you get unlimited scalability and clarity compared to raster and bitmap images. And because they’re made up of code, you can manipulate every single shape with CSS — add animations, interactions, or dynamically change the color scheme—something that you cannot do with icon fonts. However, as with any method of coding, there are many things to watch out for to avoid making writing or maintaining code any harder than it has to be. …

My shortlist on when to use SVGs over icon fonts or raster images.

✨ Benefits of SVGs ✨

If you need some selling points to your managers or developers on why your team should be using SVGs, here’s why I recommend them:

  • Resolution independence. Because they’re made to be scalable, there’s no need to export multiple sizes to accomodate different screen sizes, saving your team time and reducing maintenance.
  • Smaller file sizes. This is because they’re vector-based instead of pixel-based (like JPEGs or PNGs). Smaller file sizes = faster load times.
  • Responsive! A single SVG can include multiple variations and be made responsive through CSS, just like HTML. An upcoming article will delve into responsive SVGs. Stay tuned.

Today, I received some very sad news…

Paper, an alternative mobile experience for digesting posts, news, and articles shared on Facebook, will soon be shut down.

For those unfamiliar with Paper – Stories from Facebook, it is arguably one of the absolute best mobile user experiences ever created. If you’ve not had the opportunity to use it, I’m truly sorry. You’ve missed out, but take a quick peek at this video review from 2012 by The Verge if you want to see more than some cached screen shots from the App Store (the app is no longer available to download). Scroll to the end to see the official announcement.

What I’m going to miss:

To get back to my point of writing this, I wanted to share some of the main…

If you’re a web/UI/UX designer, work with one, or would like to become one, this article is for you.

Earlier this year, I decided to check out this app called Sketch, which seemed to be an indie design tool that was getting more and more attention. I hadn’t thought much of anything that wasn’t an Adobe product to use for design. I assumed that newer tools, often found on the App Store for around $99, would be sub-par and probably a waste of money to try. Well, as it turns out, one of these newer inexpensive indie apps is actually…

Michael Todd

UI/UX Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store