The Noun Project

May 16th, 2012

Beautiful Icons from Tim Boelaars

Every icon designer has their own unique style.  What line weight to use, how much detail to show, what should the corner radius be, all of these effect the aesthetics and feel of the symbol suite. Here at The Noun Project we really enjoy seeing symbol sets that are unexpected and unique, and that is exactly why the icons created by Dutch designer Tim Boelaars caught our eye.  We recently caught up with Tim and asked him a few questions about his process and the motivation behind his amazing designs.

Tim and his beautiful studio in Amsterdam.


Why did you create these symbols? Was it for a specific client or just something on the side?

I started on this set for fun. I made a few icons for a client and noticed how much I enjoyed it. I decided to challenge myself and set up a document filled with little squares, on which I’d be able to fill all them with icons. To constrain myself, I resolved to use one line weight and work on a grid.

The set was something I’d usually go back to if I was either bored or when I needed to take a break from client work. I became obsessed with watching the set grow, slowly but surely. I tried creating specific categories covering subjects that weren’t all too common.

Where did you get inspiration for your designs? Did you model your icons after an existing set?

I don’t think I get inspiration from anywhere in particular. As I already enjoy working on a grid with mono-weight lines, the set was mostly based on my previous work methodology.

Your designs are very playful and light. Is this a consistent theme in your work?

While it’s not a theme I’m actively seeking out, I think I’ve grown into this style or type of work. It’s not something I try really hard to achieve but rather takes place naturally.

How long did it take to design the entire set?

In total, about a eight to ten months from start to finish. I started working on the set in the summer of 2011.

Which icon was the most challenging and why?

Tough question. I think the more organic icons were the most difficult for me. Mostly because I like to constrain myself by working on the grid and only using flat shapes. Others were difficult due to their perspective. Oftentimes the ones that took me the most time to make, I’m most fond of.

Who are your top 3 favorite artists / designers?

Since there are so many great designers and artists out there, I really don’t know which 3 are my absolute favorites. It’s almost like what type of music of food I like—it depends on a number of various factors. Some designers excel in a particular area or style while others are more skilled in different areas of the field. However, to give an answer to the question I’d have to name the top 3 people that have inspired me; graphically, philosophically and mentally. I should mention that these artists / designers are in no particular order.

I’ll start off with Saul Bass—possibly a predictably cliched choice, but I still believe this man is one of the best designers who has ever lived. His work has always struck me as conceptually solid and honest.

Next to his designs, his thoughts about his work as a designer are interesting. He said the following. It’s something I can really relate to and would seek to always find it applicable:

“There is nothing glamorous in what I do. I’m a working man. Perhaps I’m luckier than most in that I receive considerable satisfaction from doing useful work which I, and sometimes others, think is good.”

Another favorite artist of mine is Jeremy Fish, an amazing artist from San Francisco whose work I’ve always loved. When I was 17, I stayed in SF for a couple of months and had the opportunity to meet him. At the time, I was still drawing a lot but I wasn’t sure what I wanted to become.

During our short talk, he asked me to show him a couple of my drawings. He told me I should keeping doing what I loved and not listen to the people who try to bring others down. This

exchange has been a constant source of motivation. I was young, ambitious and quite scared of what would come next. These few words were of such great value to me then and I continue to be ever thankful for them.

Third, I wanted to choose someone that has inspired me recently, and of course still does. Dan Cassaro is a designer, animator and illustrator from Brooklyn, New York. Not only his work, but also his view on work ethic have inspired me. There are people who, I believe, take design a bit too serious sometimes. I think that Dan’s humility is something incredibly valuable to always remember when you’re working in this, or any other industry. To understand what I’m yapping about, read his interview on The Great Discontent.

Again, this question was pretty difficult to answer, especially if you look at how many supremely good artists and designers are out there. I’ve tried chose a couple of people who I think not only make great work, but have an exceptional work ethic.

May 8th, 2012

Designing Icons for Web Cartography

For our latest guest blog post we invited designer / cartographer Saman Bemel Benrud to talk about the unique challenges presented when designing icons for maps.  Saman is one of the creators of Maki which is an open source map icon project.  We are proud to announce the Maki collection is now available for download on The Noun Project as well. 


Maps are capable of powerfully communicating ideas, clearly visualizing complex data, and adding context to a stories, whether you’re mapping humanitarian crisis in Africa or providing directions to the nearest café. As a designer with MapBox, I’ve been working on and off over the last few months on Maki, an open source icon set made especially for cartography and based on the points-of-interest used in OpenStreetMap. In cartography, points-of-interest include things like restaurants, bus stations, and schools. Maki will eventually grow to include icons for pretty much anything you might want to mark on a map. I’m excited that Maki has been added to the Noun Project as a collection, and to introduce these symbols, I thought I’d outline some of the unique challenges that come along with designing icons for maps. While these icons were designed with mapping in mind, they should work great in many different situations.

Icon Size


Effective map icons need to be large enough to be recognizable but small enough to not impede the readability of the rest of the map. Most of the time, icons larger than 25 or 30 pixels in either direction are going to be too big. With Maki, I designed three separate sizes: 24px, 18px, and 12px, so the icons can scale with the map as a user zooms in and out. To make icons that work well at small sizes, the symbols need to be simplified down to their most iconic form, with no extraneous details, and great care needs to be taken to work with the pixel grid in creative ways or forms will look blurry. Here’s what my grid looks like for the bicycle icon, blown up 900%:

To get the best results, it’s not good enough to just scale icons to the desired size. Manual tweaking needs to take place or else you’ll be left with a blurry mess. Here are the same icons at their actual size:

In addition to making sure the icons stay crisp at the smallest size, I’ve also designed the largest size to elegantly scale up and look good at any size. The particular version of Maki I’m releasing on The Noun Project includes only the largest size. If you’d like to use the original small icons, download the bitmap versions from mapbox.com/maki.

Universality


It is especially important for web maps to have iconography that works across cultures. Openstreetmap data has global coverage and active communities all over the world, and these people should be able to recognize symbols on maps just as well as Americans like me. For each icon, I researched precedents set by the likes of the AIGA and spent a lot of time just google searching things like “school symbol Korea”. I ended up using two running children for the school icon because it’s widely used, from the US to France to India, while other school symbols like a bell, an apple, or a traditional American schoolhouse wouldn’t translate as well:

Legibility


When maps get busy, colorful, and complex, icons need to stay visible while not contributing themselves to excessive busyness of a map. I address this problem in two ways with these icons. First of all, it’s important to design each symbol with a unique silhouette so they are easily distinguishable from each other, but not so different that they are loud or distracting. While I strive to make each icon completely unique, the whole set shares the same grid, and uniform corner radiuses and widths help hold the set together as well. Secondly, it’s best to use a simple 1px semi-transparent border around the icons so they stay visible even against dark backgrounds.

Using These Icons


Even though these icons were designed with mapping in mind, they should work great in all sorts of different situations, from user interfaces to data visualizations. However, if you would like to use them in their native habitat and get your feet wet with map design, I recommend downloading TileMill, a free map design suite. There’s good point-of-interest data available from CloudMade. For inspiration, check out some of the other projects that have used Maki, like this demo I whipped up, or in MapBox Streets to mark airports and rail stops. Expect the Maki collection to continue to grow in the coming months.

April 18th, 2012

New Energy Efficiency Symbols now in the Public Domain

With Earth Day fast approaching many of our thoughts are again turning to the environment and how we can help preserve and sustain our beautiful planet.

The Noun Project recently partnered with Cree, Inc. to host an Iconathon to create new symbols for Energy Efficiency and LED Lighting.  One of the goals we’ve set out for Iconathon is to add to the public domain a set of graphic symbols that communicate universally recognized concepts, in particular those that have yet to be visually defined.  Although the idea of Energy Efficiency has been around for many years, it is just now gaining the kind of exposure and focus that requires it to have its own visual language to represent concepts like wind and solar farms, electric charging stations, and sustainable energy.

Thanks to the help from our Durham Iconathon participants, we’re thrilled to release 15 of these new symbols into the public domain.  The symbols below can be found for download in our Iconathon Suite.

Why a New Symbol for LED Lighting?

We asked Ginny Skalski, CREE’s Social Media Specialist this exact question.  

“At Cree, we’ve been talking for a long time about the need for a symbol to represent LED lighting to help get people to think beyond the energy-wasting incandescent bulb and ugly fluorescent lighting. But we weren’t really sure what the symbol should look like. By teaming up with the Noun Project for an Iconathon, we were able to put a lot of thought into the symbol for LED lighting and other energy-efficient technologies.

The Iconathon process really allowed a diverse group of people to discuss the merits of a variety of designs. And through the critiques,  many strong concepts emerged. It was remarkable to see sketches from the iconathon take on a life of their own as beautiful digital symbols.

Our hope is that these new symbols become the go-to images for the Lighting, Energy-Efficiency and Design industries. We’d love to see the new symbol for LED lighting become as universal as the first aid or no smoking symbols.”

LED Symbol Design Process

One of the core themes that emerged from the group critique was that LED is a radically different light source from any of its predecessors, and because of this we all felt it was appropriate and necessary to break free from any past “light bulb” design precedents.  LED needed to have its own distinct and identifiable mark.  

As a group we decided the two essential elements that needed to be present in the final design were the semiconductor microchip that produces the light, and of course light itself.  During the group critique we observed that many of the sketches used a square to represent the chip.  The final design uses this concept but displays the square as a three-dimensional diamond shape, thus creating the illusion of depth and volume.  Representing the second element, light, turned out to be the greater challenge.  When limited to black and white with no gradients, designers only have a few options to graphically represent light.  Most of the sketches created at the Iconathon used lines emanating from the microchip to communicate a light source.  However, after the event there was a realization that so many other icons used this same “emanating line” technique to represent a variety of concepts (i.e. sound), that we came to the conclusion that there should be a more unique and memorable way to illustrate light.  

The solution we arrived upon is to use negative space to represent a powerful focused beam of light rising up from the microchip.  We felt this created a much more dynamic, memorable, and bold design that still contains the same original elements agreed upon by the participants of the Iconathon.  

LED Symbol

Sustainable Energy Symbol


Finally, we view these symbols not just as purely utilitarian, but also representative of where we are as a society, and what we want our future to look like.  Creating symbols for these powerful ideas helps disseminate them by providing people with the visual tools to make their voices heard across contemporary communication platforms.  We can’t wait to see how you use them and we hope you enjoy these symbols as much as we do. 

March 5th, 2012

Can One Size Fit All?

For this weeks’ blog post, we would like to welcome designer extraordinaire, John Caserta.  John and I first came into contact when he uploaded his amazing Modern Pictograms symbol suite to The Noun Project.  We really thought the design quality and craft of this collection of symbols was superb so I asked him to share his process. You can see more of his excellent work here.  It’s also worth checking out the design collective he belongs to in Providence, RI. 


Modern Pictograms, an icon typeface for interface designers, grew from the need for a few buttons on a Web site. Andrew LeClair and I were developing the Flatfile Wordpress theme in late 2010 and we wanted icons to suit the modern design. We came up with two requirements: that the icons work at small sizes, and that they could change to a user-selected color when interacted with.

After some thought and research, we decided an embedded @font-face typeface would best satisfy the second requirement. But, if we wanted to go with an embedded typeface, it made the first requirement that much harder to satisfy.

Early versions of pictograms contained too much detail to read at small sizes when rendered as a typeface. The black icon is where it ended up.


That’s because typefaces — and the Standard Vector Graphics files used by the Noun Project — are converted to pixels from outlines by the device or browser on which they’re seen. On Macs and mobile devices, there is no way to control exactly how the pixels render from the outlines.  Every device has a certain number of pixels and will display a web page within those pixel dimensions. If you’ve zoomed into a web page on your computer or on your smartphone, you’ve noticed the type stays crisp, but most images don’t.

Certain sites are hip to this and are using SVG files instead of png or gif for their logos. Pinch into the New York Times nameplate or any icon on The Noun Project to see the benefit of SVG and typefaces over static images.

Note how the type and NYT nameplate are sharp. The nameplate is SVG (like Noun Project website). PNG and JPG icons at the bottom render poorly when zoomed in on.


Consulting type design

When building out the typeface, I looked to how type designers draw a typeface intended for small sizes and/or poor printing conditions. Contemporary examples include Matthew Carter’s Bell Centennial from the late 1970s and Hoefler & Frere-Jones’ Retina. Both exaggerate white spaces to avoid having ink spread into critical white areas of the letterform. Although meant for small sizes, Tobias Frere-Jones admitted in a lecture at Yale University in 2003 that he also crafted the typeface so it could also be used at large sizes. “Ultimately, someone was going to use it on a billboard.”

Even display faces can provide some guidance as to how to design pictograms to work at extreme sizes. Another H&FJ typeface, Didot, was drawn at seven sizes with the horizontal strokes retaining the same thickness at each size. A 72pt Didot is not twice as big as a 36pt Didot. The thin details stay thin even at double the size. Drawing the typeface seven times is one way to keep the hairline without losing the stroke altogether at small sizes or having a clunky stroke at large sizes.

The lock shows how there is too little detail at billboard size. The spikey ends created a nice optical effect below 36px, but don’t make sense when larger.


After spending months developing Modern Pictograms for use between 18px and 36px, I am much less satisfied at how many of them appear at “billboard” size — like the SVG files here on The Noun Project. To draw seven weights (or 2 or 3), like Didot, would be one solution, but labor intensive and not developer or download-friendly. The typeface is intended for @font-face embedding.

Taking a cue from web design

A one-size fits all pictogram typeface may be possible if we don’t get attached to every size looking the same. This is something that web designers have learned after years of trying to make web sites look the same in all browsers. Said nicely by Andy Clarke in an interview with Jeffrey Zeldman, “I only show clients working [coded] pages and never a Photoshop comp. The client will expect that a static image will be the same on all browsers and platforms.” He goes on to say that trying to match a single design ties us to the idea that the same design can look the same or appear the same on different browser or platforms.” It’s usually not possible and not even desirable.

The translates to scale fairly well: not all sizes need to show the same detail. Modern Pictograms should still work for small sizes, but details can appear when used at larger sizes, too. Slight rounded corners and flecks of negative space will turn to sharp(ish) corners and no space when small. But when larger, some personality can emerge.

Updated version has a center dot and rounded handles that disappear at smaller sizes but relate to the original object (a flat file cabinet) and give the icon personality.


It is a sort of “graceful elevation” approach. Simple and unadorned when small, but detailed when enlarged.

Keep your eye out for a one-size fits all set of Modern Pictograms on the Noun Project in the coming months. To celebrate the one year anniversary of Flatfile, we’re giving away totes with any orders (free shipping in the U.S.), and putting our new Flatfile pictogram on the Noun Project for t-shirt availability.

February 21st, 2012

Wisecracks: Jokes as Design Practice

Since our launch we have seen The Noun Project community use symbols from the collection for pretty much every application.  But something we have not seen is someone leveraging symbols to tell “jokes.”  We invited David Owen Morgan of Faunt to tell us about his fascinating concept.


I started the Daily Design Forecast a year ago to practice being funnier. The practice of design gains a lot from the practice of funny, or so I’ll suggest here (at least half-seriously) as successful jokes work the same metaphorical muscles as effective design.

The concept has been to start my design work each day with a quick scan through The Noun Project, grabbing a symbol and pairing it with a one-liner, a stretch at some idea beyond the icon’s intended meaning. In combination they pretend to convey some kind of insight or outlook on the day, a #DesignForecast, but the notion’s nonsensical.

I guess the joke is that these forecasts can be both literally meaningless and yet have something to say. They don’t have to make you laugh, but they have to let you in, exposing their backhanded logic and way of working. That’s the rule.

Symbols are a good place for jokes to start in that they’re so broadly and quickly understood. They aim at universals, signifiers in need of no words to mean what they mean. Symbols are wise, they’re self-explanatory, but their explanations are always incomplete. Their wisdom comes from knowing that they both are and are not what they represent.

Designers should remember that every symbol tells a lie. It may point at a noun, but only points it out while pretending to be its equal. It fools us with this gesture somewhere else — a quiet jester that says what it means while hiding whatever else it might know. Its half truth is there but never flaunted.

Just like all good jokes, symbols hide their wisdom. Jokes are also lies, but the best ones are always half true. A punchline offers some kind of surprise: an insight, some new perspective that expands one’s window on the world. All a joke wants to do is unhinge something familiar, crack open its own way of working and make an offering through the crack — a wise crack:

There’s grace in the logical pirouette, which veils the error or category mistake: first a disconnect, then a leap of imagination and suddenly understanding, all in one sweeping spin.

The daily task of design thinking mirrors this search for what‘s possible through leaps of imagination. It’s a search for new metaphors to crack open. Designing meaningful things — whether web menus or airport signs, dashboard icons or typefaces — requires that we straddle what we know while reaching for what’s yet to be revealed.

Do one but not the other and the process fails, stumbles too close or leaps too far, and our resulting designs fail to mean much of anything at all.

Of course, effective communication is no joke. Wisecracks and smart design must yield to an audience. We owe our deepest sympathies and respect to the user (reader or listener), and must take great care and concern to share what we mean in clear and meaningful ways.

But the beauty of a joke is in how clever it can be at witholding its logic til the end. It wagers miscommunicating by daring to say more than it means. Every wager prompts a leap in the direction of something to gain. By pulling us along and into its story, a good joke works by eventually revealing this awful daring, sharing its wisdom to crack open our world and see something we hadn’t seen before.

I’ve tried to let this wisdom of jokes inform my approach to design. It manifests as a commitment to expert wandering, combing shared landscapes and languages in the hopes of finding new meanings there. The Daily Design Forecast has been a fun little example of this larger practice, an ongoing attempt to uncover what’s hidden and dormant through the funny new ways we can find to make things mean.

Follow @faunts to engage in these daily #DesignForecasts, or better yet, contribute your own nuggets of design thinking with the hashtag.

February 17th, 2012

A Simple Test of User Comprehension

Yesterday we asked our twitter followers a simple question:  Which symbol from the collection communicates “handshake” most effectively, A or B?  After a few  hours it was clear what the answer was.  “A” received two votes and “B” received 56 votes.  

Many responders commented that symbol “A” looked more like hand holding than a handshake due to the angle of the hands, which affected user comprehension.  It was also mentioned many times that symbol “A” read more as unity between black and white, which we found to be very interesting. 

User comprehension is one of the many aspects that makes symbol design so fascinating and intriguing.  Many times designers can get caught up in the aesthetics of their creation and lose track of how the end user will perceive the symbol.  A simple experiment like this can really help the process.

February 13th, 2012

Insights on Symbol Design, by Jon Hicks

We are proud to have designer Jon Hicks do a guest blog post and give us a quick design tutorial about symbols and icons.  For those of you who don’t know, Jon is a designer from the UK and is well known for designing the Firefox and Mailchimp logos.  You can view more information about his studio and his work here.

Take it away Jon!

sketchbook

You’ve sketched out a great idea for an icon, and have checked that the metaphor you’ve chosen doesn’t have potential problems with its intended audience. How do you take that concept and turn it into finished artwork? While everyone has their own way of drawing, there are a few important aspects to consider to get the best result. We’ll look at the process of designing for icons on screen (websites, apps and so on), but the principles are the same whether we’re dealing with pixels or centimetres.

Size and context

Normally, icons are square, sized in even numbers of pixels and multiples — 16px, 32px, 48px, and so on, being the most common. The context will often determine this; for example, a tab bar icon for the iPhone4 would require a 60×60px icon. The Icon Handbook has a comprehensive reference chart (available online at http://iconhandbook.co.uk/reference/chart/) that will help here, detailing what sizes and formats you’ll need for popular contexts, and even listing naming conventions where necessary. If there are no specifications for the intended context then it’s up to you, and there are occasions when an odd-numbered canvas size suits the artwork best. In this 16×16px example, an arrow is drawn on an even numbered grid, and the point falls exactly on the gridline. However, owing to the way anti-aliasing works, two pixels are rendered for the point, which makes it look blunt or rounded:

arrow with even numbered pixels

Compare it with the same arrow on an odd-numbered grid at 15×15px:

Arrow odd numbered pixels

Here, the point falls in the centre of a pixel, so it only uses one pixel and the point no longer looks blunt. In the future, high density screens will negate the need for this kind of fiddling!

Balance

Once you know your icon size, it’s tempting to fill the entire area with the icon. But to enable the viewer to easily distinguish each icon, they need to have a different outline, which in turn will have a different visual size. This will become obvious when you draw icons in company. In this example, the circle and star in particular look small in comparison with the square:

unbalanced shapes

Of all these shapes, the square needs to be the smallest. If the canvas size is 32px, sticking to a rough guideline of making a square 75–80% (whichever gives a even number) of the original size will make it 24px, and give us an inner margin of 4px (32×0.75=24 and 32−24÷2=4). The circle then overlaps this guide, while irregular shapes like the star are allowed to take the entire space, and the cross is somewhere in between. In the same way, the diagonal bar needs to be shorter than a vertical or horizontal one, such as those in the plus sign:

balanced

Consistency isn’t a strict numerical value however, as optical illusions skew our perceptions. In general, you will have to trust your eye!

Grids

By working out the inner margin area we’ve already created the first guide lines of a grid. Just as layout design uses a grid system to create a structure, we can use the same technique with icon design. It enables us to create consistent, balanced artwork by giving elements like stroke width, gaps and corner radii a guide. It doesn’t mean that lines can only occur along grid lines though. Here’s an example of a pencil symbol with it’s underlying grid:

grid

If the context is a web site or mobile app, you will already have a grid to work to - one of pixels. Even if you’re not designing icons for screen use, you may find it useful to create your artwork in something like Adobe Illustrator’s Pixel Preview mode with small canvas size. For example, this pencil icon is set up on a 40px square canvas. Illustrator automatically shows a pixel grid at 600%, and can snap to its guides. If it works at this size, you can be sure that it will scale up well. Its a good rule of thumb that strokes and gaps shouldn’t be any smaller than 1px when working at this size.

Style

Even with apparently simple icons there are many styles or approaches you can use. You can see this on The Noun Project. Look up ‘Bike’ and you’ll see a seven different ways in which a simplified bicycle shape can be drawn.

There’s no right or wrong here, only what is appropriate to the context. An icon of a figure, intended to be viewed on signage, would be best kept simple in the traditional toilet symbol. However, when used in something like an instruction manual, where there is slightly more time to digest the information, there is scope for more style: 

http://www.iconwerk.de/) When designing icons for use on screen, perspective, or rather the lack of it, is very important. The smaller the icon, the greater the likelihood that anti-aliasing will make the angle edges look blurred. If this is the context you are designing for, keeping to a either a flat-on, or simple 1-point perspective will keep the lines clean and legible.

Fuzzy and flat on

Detail

Finally, we need to decide on the level of detail that we show. It’s obvious that icons need to be simple: the more detail you add, the longer it takes for the brain to decode. For example, the concept of history is normally shown as a clock face, which can be rendered very simply.

history icons

A glanced comparison proves that the minimal version on the left works best. The reverse is also true though, as some icons require a certain level of detail in order to be recognisable. The iPhone icon below (left) has been drawn in its simplest form. At this level, it could be anything from a picture frame to an Amazon Kindle, and needs the details of the speaker and home button to make it clear (below right):

iphone

As Einstein is purported to have said, “Make things as simple as possible, but not simpler”. This conciseness doesn’t exclude showing the form of an object however, as what you leave out of a piece of artwork can be just as important as what you leave in. Negative space can be used to suggest the form of an object, and a great example of this is the 3D glasses icon from The Noun Project. Where the highlight would naturally occur on the top edge of the glasses, a gap has been left that suggests this:

3dglasses

Compare it with the version on the right, where this hasn’t been done - a seemingly simple change, but one that makes all the difference!


I hope this walk-through has been useful! To find out more about icons, their history, usage and the drawing process in more detail, my book The Icon Handbook, with foreword by The Noun Project, is now available! 

February 7th, 2012

New Iconathon - “Energy Efficiency” with Cree in Durham, N.C.

On Saturday, February 25th The Noun Project is heading to Durham, N.C. for the first Iconathon of 2012!  If you’re in the area, we’d love for you to join us in creating new symbols for Energy Efficiency.  Space is limited, so please RSVP.

This day-long collaborative design workshop is sponsored by Cree, Inc., one of the world’s largest manufacturers of LEDs and LED lights.  A few months ago they reached out to us,  bummed that the old incandescent light bulb and the twisty CFL bulb are still the only symbols used to represent lighting.  What’s amazing is that the incandescent light bulb has been around for 132 years, and yet whenever we need to symbolically represent “new” ideas, we still use the old bulb as the go-to symbol (we’ve been guilty of this many times).  But just think of all the innovative strides that have been made in the past 132 years.  Take, for example, the telephone.  If you go through the list of symbols for telephone on our site, you can see a beautiful progression from the candlestick telephone, to the behemoth first portable phones, to finally the new slender and compact iPhones.  Although there may not be so many drastic progressions for the light bulb, one of the symbols we want to design during this Energy Efficiency workshop is a new symbol for LED light - the most energy-efficient lighting to date (about 85% more efficient than incandescent bulbs and mercury-free unlike CFL’s).  How amazing would it be if this new symbol became the “it” symbol for new ideas, progressive thinking, and of course - light, just like the original incandescent light bulb has been for over 100 years?!

Think about how many other symbols we’re lacking that could represent the recent developments in Energy Efficiency.  Can you visualize a symbol for solar farms, weatherized homes, or wind turbines?  These technologies are so new, there just aren’t any easily-recognized symbols for them yet.  And we want to change that.

The event will begin with a presentation about Symbol Design & User Comprehension by Edward Boatman, co-founder & Creative Director of The Noun Project.  Paul Pickard, former head of research and development for Cree lighting, will speak about the important role energy-saving technologies play in conserving energy. Paul and his team designed and commercialized the first commercially viable LED downlight, so he is very passionate about energy-efficiency.  The presentations will be followed by a sponsored lunch, and then it’s on to creating a new set of universally-recognized symbols for Energy Efficiency!

As with all of our previous design workshops, the final set of graphic symbols will be added to the public domain and available for anyone to download for free.  You can see the symbols created during the previous events in the Iconathon symbol suite.

RSVP on EventBrite, or recommend which symbols we should create.

January 31st, 2012

Introducing The Noun Collection

As some of you may have noticed, this past week we released a few new features to the site.  These updates allow users to see the most popular symbols, watch real-time downloads, and browse through recent submissions.  You may have also noticed that we have a new landing page featuring the Noun Collection.

The Noun Collection consists of the symbols we feel best communicate the objects or concepts they are representing, while at the same time exhibit a high level of design skill and execution.

Below are some symbols that have been recently submitted and added to the Noun Collection.  The common theme between these symbols is they are clear, concise, and beautifully designed.

This symbol designed by Christopher T. Howlett is simple, bold, and beautiful.  The triangle shapes in the diamond create a pleasing geometric pattern and really add to the user comprehension of the symbol.

This translation symbol by Geremy Good does a great job of taking a complex concept and reducing it down to its core elements or characteristics.  By looking at the symbol one can gather a variety of information very quickly and efficiently. 

The Sardine symbol designed by Jakub Ukrop is descriptive and fun.  The fact that the fish are elongated to match the shape of an actual sardine is a really nice touch.  Also showing the top of the metal can rolled back gives the symbol more clarity.

The Kiwi symbol designed by Mike Harding is intriguing and educational.  The first time I saw this symbol, my curiosity was piqued. I immediately went to Wikipedia and did some research.  After seeing pictures of the actual bird I was impressed with how well Mike’s symbol captured the “essence” of the bird.  The long beak, large feat, and unique proportion between the head and body are all rendered beautifully. Nice work Mike!

This Silverware symbol designed by Scott Lewis is very well executed.  Anyone who has tried to draw a spoon or fork before knows it is not an easy task.  The subtle soft curves of the objects are difficult to elegantly capture.  I’m also really impressed with the negative space between the symbols, the lines are beautiful.

The Factory symbol designed by Adrijan Karavdic has an aggressive visual presence, that I feel is very appropriate.  The diagonal lines of the roof not only speak to an architectural feature of many factories, but it also creates movement and dynamism in the design that is representative of the processes that take place inside.

We think all of the above symbols are great examples of the level and quality of design The Noun Project is looking for.  Thanks again to the above designers and all of our community who is helping to share, celebrate, and enhance the world’s visual language.

Receive Updates!

Receive Updates!