As an avid Adobe Illustrator user for the past 15 years, I think it’s safe to say that I love the vector format. That’s why I’m excited SVG is gaining traction.

The good

The many benefits of SVG:

• Scale without quality loss
• Smaller file sizes
• Is simply an XML file; you can open an SVG in a text editor and edit the code.
• Can be styled with CSS; colours can be changed, elements hidden, allowing a single image to be used for multiple purposes.
• Animation

The bad

Nothing’s perfect, and browser support for SVG is no exception;

• Quirky behaviour in some modern browsers
• Old browsers lack support (IE prior to version 9, Android prior to version 4)
• The way you load an image affects whether or not it can be styled with external stylesheets
• It can be tricky to wrap your head around the way viewBox works

The resources

If you’re interested in the SVG format, below are some great resources to help you get started.

CSS-Tricks – Using SVG

A great place to start, with overviews of browser support, CSS integration, and the various methods of loading SVG on your site.

Can I Use – SVG Browser Support

Helpful table indicating browser support for SVG

StackOverflow – Optimal Settings for Illustrator Export

The title says it all, a short guide to exporting SVG from Illustrator.

Making Sense of SVG viewBox’s Madness

Helpful examples that explain how and why viewBox works the way it does.

Snap SVG

An Adobe backed SVG Javascript framework for loading and animating SVG in modern browsers. Be sure to check out their demos.

Raphael

SnapSVG’s older brother. Written by the same developer, Dmitry Baranovskiy, Raphael is a little heftier in the codebase than Snap, but includes support for older browsers.

Iconic

An extensive collection of standard interface icons in browser ready SVG format.

The post SVG: The most exciting format since the Animated GIF appeared first on Say Yeah!.

Following Apple’s iOS 7 announcement earlier this week, there’s been a lot of discussion around the default icon set (pictured above, right). Detractors have focused on inconsistencies, concerns around a lack of cohesion between icons, and a general disdain for the colour palette and icon styles. Designer Leo Drapeau’s taken a stab at addressing some of the more moderate considerations with his iOS 7 icon refinements (pictured above, left).

He offers some nice takes on both simplifying some of the icons (Camera, Game Center, Stocks) and differentiating others (Reminders vs Notes), but I don’t agree with his decision to go back to the iOS 6 corner radius (where icons appear smaller inside their rounded corner squares).

The new, larger iOS 7 icons have a beautiful playfulness and resonance with the smaller padding. Resetting them makes them appear less touch-friendly.

Update: Neven Mrgan wonderfully illustrates an issue with the larger icons based on their varying weights:

And yes, you need to scale to ensure lighter weight icons are not overwhelmed by their fuller cousins.

Now back to Leo: I fear he’s lost the plot in the dock, with a more complex Phone icon, under-styled Mail and Safari icons, and a thin, more conservative musical note which almost disappears when compared to the other icons.

For me, there are five concerns that stand out with the iOS 7 icons.

1. Game Center’s reflective bubbles, which are incongruous with every other icon.

2. Music’s vibrant red/orange, which is outside the colour palette of the other icons (or at least appears to be because of the dark to dark gradient, rather than light to dark gradients of the other icons).

3. The Reminders icon, which has no charm, particularly in light of Leo’s wonderful reworking.

4. The overly complex Settings and Compass icons.

5. A Camera icon that shows something that isn’t anything like my iPhone. I’m sure they still aren’t using a floppy disk as a save icon, right? The previous camera icon was a lens. Perfect.

Some minor efforts in finding consistency will resolve most of these issues, but there’s no doubt these new icons better suit the expression and the experience of iOS 7’s overall redesign.

Icons aside, the most important concern stemming from this redesign is found on the lock screen, where ‘slide to unlock’ has lost its arrow, trough, and the block that slides through it from left to right (pictured below).

Certainly some visual cues need to be added so you know how the heck to unlock your phone. I bet 50% of people try to slide up, rather than from left to right:

The post Refining iOS 7’s Icons. And What To Do About A Very Confusing Lock Screen. appeared first on Say Yeah!.

Here’s what they looked like on Monday:

And here’s what our Tumblr Dashboard looks like today:

Wow. What an improvement!

So, what makes these new icons so great? Well, at a glance recognition, that’s what.

Previously, there was a relatively clear distinction in the colour differences for each post type. Tumblr’s done well to keep this colour palette so, not only do the icons continue to be visually distinct from one another, but they retain the same colour for user’s who identified post types this way. In other words, the new icons are still familiar to long time Tumblr users.

However, the previously-used fancy torn paper motif was a needless distraction with its high realism, off balance angle, and consistent shape, ultimately creating a pattern that made it difficult to recognize the icons themselves.

In this case, the apparent decision to simplify meant removing the paper, gradients and drop shadows, so now each of the icons has a distinct shape from one another, at a glance.

Though I could quibble about the inconsistent weights (some icons appear needlessly heavier than others), complain about the vertical alignment (they do look like they’re all centred vertically, but why make some taller than others so there’s no rhythm or consistency to the icons), and wonder about the decision to illustrate the too similar Photo and Chat shapes (that’s a funky chat bubble which is very similar to the camera, making it harder to differentiate between the two), overall this is a great improvement.

The post Tumblr’s new icons. A great improvement. appeared first on Say Yeah!.