SVG - User Experience Meets Design Goodness

Here at tr10 we're always trying to stay on trend, helping us deliver the very latest advancements to our clients, and making your business look the very best it possibly can. We've been experimenting with the use of SVGs ( Scalable Vector Graphics ) for a while now, and we're really excited to explain a little more about what we've been up too.

What Are SVGs?

Scalable Vector Graphics are precisely what they say they are, they're graphics that can be scaled down, or up, as much as you want without compromising quality. Vectors have always been a firm favourite for illustrative pieces and concepts, but it's great to see the transition over to the world of website design and we're really excited to see how we can make best use of them.

Our design team initially started implementing SVGs as site logos. This meant that the most important thing on the website ( the branding, ) would always look super sharp and high quality regardless of whether you were viewing the site on a mobile device or a 5K monitor. This worked really well and we saw some impressive results, but we knew we could do more with it.

Last month, one of our clients came to us looking to have an interactive map brought onto their website. We explored a few different avenues before deciding that an SVG would solve this issue beautifully, and so we set about creating a top down image tracing of their building, and then breaking it apart in Illustrator.

This was great as it gave us a base to work with and manipulate in any way we wanted, we then extruded the shape to create an almost isometric map.

After looking at existing colour schemes for each section of the building and what went on within each department, we then added colour. This is where the fun really started though, and after the design team handed over to the development team we set about creating hover states and really manipulating the design. This is the cool thing about SVGs; they're not images, but instead built up of lines of code and then rendered in a web browser. This, in essence, means that we can constantly edit and change bits on the fly. Change your mind and want the entire thing blue? No worries. Want to lose the left hand side of the image? All done. No back and forth needed! And with code being stupidly lightweight, the file saving benefits are enormous too. Win, win, win!

We really went to town with opacity effects and decided that it would be really cool to have an interactive hover state on each department, that when hovered would display some content below about what goes on there. The only thing left was to Bob Ross it and add in some happy little trees, and there we have it; one of the most versatile and user friendly interactive maps we think we've ever made!