Iconic is a set of icons that's designed for the modern web. Image: Iconic
They may look nondescript, but that's by design. This simplicity gives designers free reign to style the icons however they choose. Image: Iconic
Smart icons react to data inputs. So an icon showing a thermometer can actually actually display how warm or cold it is. Image: Iconic
Each icon will come in three sizes with varying degrees of details. This is to ensure that the icons are legible on every size of screen. Image: Iconic
Customizable icons means that they can communicate much more clearly. Image: Iconic
The team of designers have even talked about how to redesign the save icon. Image: Iconic
Because all icons come in the SVG format, their appearance can be easily tweaked. Image: Iconic
Around five years ago P.J. Onori was designing his website when he made, in hindsight, a questionable choice. “I made the horrible decision to make everything on my personal website open source,” the designer jokes. This included the CSS, HTML and even the icons he used on his site. Onori, who considers himself an open source evangelist, began making simple symbols for his RSS feed, calendar and documents. “I figured, maybe I’ll make a few more,” he recalls. “Then for whatever reason it really caught on.” As Onori continued to design icons, he also began developing tools and techniques for displaying them. And before he knew it, he’d created Iconic, a set of simply designed icons that could be used free of charge.
Today, most of the icons you see on the web are static.
In the past four years, Iconic has grown to include more than 200 icons, but its development has stalled since Onori has, you know, a real, paying job that he has to attend to. Now Onori and his partners Ryan Teuscher and Dave Johnson, who run San Francisco-based design firm Waybury, have decided to build Iconic into a commercial set of icons and tools that will help expand their capabilities far beyond the open source version.
Their goals, outlined on their Kickstarter page, are idealistic: “Were trying to push iconography forward into the web age and have it reflect the technology and the approaches and philosophies of the web,” explains Onori. But they’re also necessary. Today, most of the icons you see on the web are static. They sit on sites like little pictures in a book and do little to engage with the people who are using them. This is, in the guys’ opinions, a total waste of the internet’s potential. “The problem is that we’ve been displaying icons essentially the same way we were displaying them 60 years ago, where they’re just these static image illustrations that show up on a screen,” says Onori. “There’s really no reason for that any more. The technology has matured to a point where that doesn’t need to be the case.”
Onori and his partners are hoping to create an integrated icon system that expands the functionality of icons and makes them smarter, more legible and more responsive. “We all believe that icons are going play an increasingly important role in interfaces,” Onori says, explaining that as screens shrink, so does the room designers have to communicate ideas and actions. “Screens are considerably smaller than they were five years ago. We need to find ways to communicate information in smaller spaces; we need to be denser about how we communicate that information, and icons are perfect for that.”
‘We need to find ways to communicate information in smaller spaces.’
Iconic’s distinguishing factor, even years ago, was that the images were created as SVG files, a vector format that allows designers to tweak the size, color and general appearance of an icon. They’re still working with that format type (though icons are available in PNG, WebP and font formats, too), only now they’re looking to add in new capabilities like making icons responsive to the size of screen. For every icon designed, there will be three versions and sizes so it can scale appropriately. For example, the microphone you see on your 27” desktop will be more detailed than the microphone you see on your smartphone screen. “When you start cramming that detail into smaller sizes it become illegible—it’s like a blob,” says Onori. “If an icon isn’t legible, then it’s useless.”
An example of a smart icon. The goal is to give icons more context. Image: Iconic
This extends to the aesthetic of the icons, which is nondescript by design. The images’ simplicity was intentional, says Teuscher, who explained that the team would like to see Iconic become a standard or baseline for iconography design and functionality in the future. “We want them to be reliable and we want them to work in every single use case,” Onori elaborate. “We’ve been jokingly saying that it would be like the Helvetica of icons … don’t quote that.” Jokes aside, what he really means is that by getting the icons’ appearance out of the way allows designers more freedom to tweak and stylize however they see fit.
Ultimately, the team is aiming to build in added context to the icons through a java script. This allows designers to set values and create visual nuances like a battery that shows how charged it is or a document in its various states of not-saved, in progress and saved. This context is vital, they say, to propelling icons into the 21st century. “We’re able to inject life into these things so they’re able to respond directly to the person seeing it, and I think that’s pretty powerful,” says Onori. “I don’t have the illusions that we’ll be the only people to do it, but I hope that were the people who can help start that conversation.”
Similar Articles: Panda Express Blacklist Yahoo Fantasy Football Nexus 4 Jesse Jackson Jr
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.