Your friends at Viget present Inspire, a Design & Interaction Blog

5 Tips for Saving SVG for the Web with Illustrator

Authoring SVGs in Illustrator is easy. Authoring an SVG in Illustrator and then properly exporting it for the web can be... tricky. Here's a short list of tips for avoiding common problems with exported SVG.

1. Verify Shape Combinations Support Use Cases (path construction)

Use your love of the pathfinder tool to craft clean paths and shapes. When combining shapes together, consider which shapes a developer may need to independently apply styles or animations to. A hole should be a hole, not a solid shape colored the same as the background.



Using Visual Loudness for Better Wayfinding

Pop!

“It needs more ‘pop’.” Can I tell you how many times I’ve heard that phrase? It’s the sad reaction to a design that could lack proper emphasis. My reaction is usually something like, “if everything pops, nothing pops.” Does this sound familiar?

Over time I’ve learned this can be a symptom of not better understanding hierarchy and priority as it relates to visual loudness. Well-designed interactive experiences use loudness to help identify and amplify wayfinding systems. Because, if everything screams all you will hear is noise. Emphasis used properly—like a loudspeaker in a crowded room—can help guide attention more effectively. Careful use of visual loudness helps illuminate priority.

Suffice to say, it’s worth taking time earlier in your process to better understand and think about what elements need to speak louder than others.


Florence and Working Through Your Bad Ideas

I was delighted to recently design Florence, an exploration of a tool that could help patients better keep up with their medications. (Read Laura’s breakdown of the whole project here!)

One of the most fun, challenging parts was designing the actual character of Florence, a “nurse” patients would interact with directly through texts. A human character like this needed to be recognizable, distinct, and of course, warm.

For a long time, I thought I’d be a better designer when I got to the point where my first idea would be the best one. I’d land on the right answer immediately every time. Lately though, I’ve started to embrace the Bad Idea phase. I’ve realized it’s not as unproductive as it might feel in the moment. Getting the bad ideas out of your system is what starts to get things moving so you can get to increasingly better solutions. The more things you know are wrong, the better you can understand why they’re wrong, then the better you can see what the right answer looks like and why it’s the best way to go.


Angled Edges with CSS Masks and Transforms

Elements with angled horizontal edges can create a unique visual flow while progressing through a page. Though not commonly seen on the web, we decided to use the treatment on the new website for The National Trust for Historic Preservation. We applied angled edges to several elements in different ways: some were applied to the bottom edge of a large full width images, while others were applied to the top and/or bottom edge of blocks with solid color backgrounds.