Noun Project – Icons for Everything
thenounproject.com
thenounproject.com
Still, it's free beer money, and a good enough way to distribute work to the public domain.
It feels good as a designer who's not able to easily contribute to the open source community.
You would be surprised how helpful it is to simply offer design insights for free. A lot of projects are maintainted by programmers who have zero design notions and who are not even aware of the little things.
Offering a free mockup to an open-source project is also very valuable.
Jade had to rename. They picked 'Pug' and needed a logo. christopherdowson asks if anyone can propose a logo and ends up creating the final logo.
Pretty neat thread IMO.
Typefaces are exempt from copyright in most countries AFAIK. Only the actual font file ("computer program") and name (trademark) are restricted.
Forcing an open source project to pay roughly $200 for a one time use is a bad decision. Using such a typeface in a logo is a poor choice because that mean you can't embed it easily for free on the product's website (let's say to use as the font of your titles or to use text on the logo instead of using an image). The problem with embedding a font on a website is that by doing so you are not "using" the font but "redistributing" it.
In the end they used Arvo which was a really good choice, they were able to easily use it all over https://pugjs.org
After a quick search I've just discovered opensourcedesign.net which I'll definitely look at contributing to. This would be great for designers portfolios http://opensourcedesign.net/jobs
So the tendency ends up being that a lot of projects just stay small and go out of their way not to grow, even when they address a problem that demands more scope than they have.
My suggestion given all of that is to not give up, but focus your design energies on the inspirational: if you produce mockups and prototypes that are hugely compelling, someone will come out of the woodwork to realize some of them: you may not know which ones or when, but you're giving them footholds in approaching the problem.
Very interesting point about inspirational mockups, definitely food for thought!
(For example, I could use a bit of help later this year from someone with a UI/UX/web background.)
Eg. Heres a random game where upon opening it I was immediately confused http://mobile.cdn.softpedia.com/apk/images/color-switch_1.jp... (also the icons are all animated / rotating, making it even more confusing, made this game menu stick out in my memory as an egregious example)
Some designers seems to love the minimalism of if though, from an aesthetic reason, I assume.
Imo Text is the clearest thing you can put on a button to tell the user what that button does 'save' 'load' 'new game' etc. Yes, it will need to be translated, but thats simply putting in more work for a better product.
I strongly disagree. I'm looking at my browser chrome right now and if the back, forward, reload, home, and bookmark buttons were displayed as that, it would be _awful_.
Even thinking about my IDE, if IntelliJ said "Class with main method" instead of the little C with play button icon or "Library class for which source is decompiled", it would drive me insane. That's most certainly making a worse product.
It's all about the language you can create and sure, no one is going to learn a new language to play some 2 minute game, but lots of great interfaces require a new language. It's about optimizing for the experienced user instead of the newbie.
Of course there are places where it should be the other way around, but it's not universal.
You already know the meaning of the browser icons as well as you know traffic signs. On the other hand on a unknown setting, like a newly installed app, an icon can represent too many things for a person to guess which is the real semantic of the icon in question.
On desktop there are always tool tips. On touch interfaces this was not yet figured out.
I guess poor use of pictograms in mobile and wep-apps is becoming so common these days it made my original comment a bit lopsided.
Ive used a lot of programs like Autocad, Photoshop, 3DSmax, Ableton, Reason, Cubase and so on. Icons + tooltips are a great solution in that context. When you are just starting off you use the tooltips, later you know what each symbol means, and after more experience you can perform all your most common tasks with keyboard shortcuts. Autocad is particularly good for that. You can make an entire drawing with just the keyboard, it makes sense because youre making an accurate measured drawing so will want to type in all the dimensions/angles anyway.
iOS doesn't have the equivalent by default, but Stack Overflow shows that this behavior is achievable.
Much bigger than the traditional menu bar. Enough room to have big meaningful pictures and a text.
They did not give enough thought to the user workflow and mental process to locate things (i.e. Why inserting and deleting a row had a completely different workflow at the beginning)
http://justinvincent.com/page/2387/if-the-iphone-used-text-l...
It shows just how stark an interface can look without them.
For example, desprite owning an iPhone myself, after looking at that comparison, I just realised that I had actually never used (nor really knew what they meant) what the "do not disturb", "timer" or "calculator" icons were. I've always navigated to calculator and timer from the apps on the home screen (and have never used do not disturb).
I'm not saying that Apple should change the icons, not at all. Just that I don't think this is a refutation of the idea that text is best at all. If anything, it shows that text is much more descoverable and understandable, if a good bit uglier (and less compact).
I do think that icons are the right choice for the iPhone, and once you learn the icons there's no problem (as long as they don't get changed!), but its not as clear cut as you seem to be saying. I'm forever confused by non-standard various unlabelled icons all over the place. I also have no idea what most of the articles in the linked article mean (eg the washing machine/clothes icons -- I still don't know what they mean when I see them on clothes!)
you can't just make any picture iconic, it's not something an app can force.
http://oi65.tinypic.com/339jeh3.jpg
Seems like a good solution.
Also interesting they recently updated all the icons / art for Android. I really dont like the new ones compared to the old ones. Its a jarring change. They are all line drawings now, rather than filled shapes.
Also, awesome little job u did there !
Of course, this is about the worst example of iconography I've ever seen so here's the same with the labels left in: http://imgur.com/a/CyqA6 and I'd even go so far as to suggest that given their choice of icons they should just get rid of them and make it text-only.
But wow are they horrible. I agree, they really should go with text-only.
But then I tend to interpret text much more quickly and without having to think about it than with icons, as well. I'm just a word person. Probably why I'm generally happier typing at the command line than poking and clicking at buttons.
I'd take the text-only iPhone, myself. Stark is fine.
Symbolics Genera used an all text approach. Experimentally testing of text vs icons would be very interesting.
Is translating it harder than trying to look up what a picture means on the internet? Is it harder to learn what the word "SAVE" means than to learn that a square box with a circle in it means "save"?
The idea that icons are universal is utter bunk.
Yes. The second is more distinct visually from other icons, and you can even discern it with just a glance, whereas various words are all juxtapositions of letters. There's a reason traffic signs the world over use a visual language.
Suppose I see a squiggle on some program. Where do I go to look up its meaning? I can't even type it in.
Let's take that | that now means "ON" on electrical equipment. If you guessed that it meant "1" because you're a computer/electrical engineer, wouldn't you already know what "ON" meant? If you aren't, how would you guess what | means? Flip the switch back and forth to see what it does?
If you're resorting to that, why bother marking the switch at all?
It's either one of the well known vocabulary of icons used across programs (e.g. floppy disk for save, house for "home", x for delete, etc), or a new one you can just hover over and read what it does in the tooltip.
After the first time (or couple of times), you don't need to read that again, and you'll recognize it very fast (not like stopping and reading it).
> x for delete
I've seen 'x', 'delete', 'del', and the trash can. 'x' is also used to cancel or close. There's little consistency.
Some people have implemented icons poorly, so we shouldn't use icons, isn't a compelling argument. Those people might implement anything badly, for instance choosing bad text in a text-based approach.
Agreed re: consistency -- good icon design requires understanding what people expect and matching it, which isn't always easy (as the referenced project demonstrates!)
Well, those would be bad interfaces. But the standard in OS X and Windows apps is to have tooltips.
>A further complication is that people tend to copyright icons, so the icons from one app to the next are substantially different.
Is that a thing? They might not be able to show the exact same design, but they'd still be able to show a floppy disk or trash can or whatever.
That said, OSes could (and some do) provide standard sets of icons to be used across apps, and only special app-specific actions should have custom icons.
Related: US traffic signs always bothered me because we have trained users who need to be able to identify the traffic signs as quickly as possible so that they can focus on the road. Yet we use traffic signs that are optimized for the opposite use case. Europe and most other countries are way ahead on that.
Here here!
When I use a new bit of software one of my first acts is to try to change all the 'friendly' icons to text only.
We're more used to text, because text has a lot of nice properties as a medium for language so it has become pervasive. It's generally low dimensional and has high composability. For low bandwidth mediums it's ideal, because it's also low bandwidth.
But that doesn't mean icons aren't a language and aren't just as useful as text. They just have different strengths and weaknesses. Icons are higher bandwidth and higher dimensional (a tiny 32x32 grayscale image has 1024 dimensions!). But they're also very dense. What could take a large amount of physical space to describe with text, might only take a small 32x32 space with an icon.
All that to say, I don't disagree with your assessment of the situation. But I don't think it should be viewed as icons vs text, as if they're two completely different things. It should be viewed as a general problem of effective communication. Text can be just as bad. Imagine reading "subtract b from a and divide that result by q" versus "(a - b) / q". The latter is a more efficient language which most everyone will understand. Better to use the latter.
What if instead of writing "save" and "load" the designers wrote "serialize game state" and "deserialize game state". It means the same thing, but clearly "save" and "load" are better. Why? More people will understand them, and the extra information communicated by the verbose alternative isn't necessary.
Just as in a lot of situations an icon, if generally understood by the UI's target audience, can be a better alternative than writing "save" and "load".
Eg. For a casual user, very clear highly descriptive medium is best (eg tooltips), for a mid-level user familiar with the program, icons are ideal. For a super-user, they dont need any visual UI and can do everything from memory using keyboard commands or gestures.
I think icons are mis-used more frequently by modern designers than text. Perhaps it is a lot easier to mis-use icons beceause their meanings are not standardised or codified. With English text for example, there are dictionaries and official sources for grammar, spelling and meaning. Also people are actively taught these officially accepted values in school. The suite of icons we're discussing (eg. disk icon for 'save' right facing arrow for 'play') have come from a mish mash of different contributors, only in the past few decades and in the tech industry where things have been in constant flux. The same icon can often mean two completely different things, and they can also often be stylized into an unrecognizable or ambiguous form.
Nope. Icons are direct visual analogs of the things represented. There's just one layer of abstraction: thing -> picture of thing. An icon, at least in principle, looks like the thing represented (or at least like some important property of it).
That's feasible for "save" or "center the text", but starts to get pretty damned hard when it's something like "Earl Warren's opinion in Brown v. Board of Education".
Western text, by contrast, is a visual representation of the phonemes in the verbal representation of the thing.
Thing -> audio of word representing thing -> phonemes making up that word -> text.
There are at least two more layers of abstraction involved, with all the additional power that implies. The word "horse" has virtually nothing in common with a physical horse.
Another important difference: a literate person can immediately write down any word that can be spoken, and any other literate person (who has learned that same character set) can immediately reproduce the original spoken word.
(I'm assuming, arguendo, that we're using the IPA alphabet or some other character set that tries to cover all the world's phonemes in an unambiguous manner).
Icons, by contrast, have to be designed. Good ones take a lot of thought and artistic skill to create, and even then they are notoriously prone to misinterpretation or outright user bafflement.
'Text can be just as bad. Imagine reading "subtract b from a and divide that result by q" versus "(a - b) / q". The latter is a more efficient language which most everyone will understand. Better to use the latter.'
The latter is still text. It's just using a different written language. It is a compact representation of "subtract the second thing from the first thing and divide the result by the third thing". How on earth could you represent that using icons? It seems like it would be quite a challenge.
Counter example: The universal icon for "play", as in to play a movie, is a right facing arrow. It is not a visual analog of anything, since playing a movie is an entirely abstract concept.
The same is true of rewind, pause, and most other controls on a VCR.
Having two icons next to each other, one that looks like a "+" and the other that looks like a "-" indicates a set of controls for increasing and decreasing. Again, these are icons that are not visual analogs of anything; they're entirely abstract.
The fact that a lot of icons are visual analogs is merely for convenience sake. Having a button that looks like an open door helps communicate to people, who've never been taught what that icon means, that this is probably a button that opens a door. That's more convenient than having to educate all users that a completely arbitrary symbol means "open a door".
But, as I mentioned with the VCR control examples, if the thing you're trying to represent doesn't have a visual analog at all, then you just have to design something arbitrary and explain it to people until it becomes common language. Much like a heart symbol.
Of course it is.
The very reason it's called an "arrow" is because it is fundamentally a visual analog of a physical arrow, which moves linearly through space.
Note that the icon to go backward is an arrow pointing the other way.
Now, the stop button is more of an abstraction, to be sure.
"one that looks like a "+" and the other that looks like a "-"
+ and - are text, not icons. Written mathematics is a form of text.
Yeah no abstraction there. Moron.
"Moron", indeed.
True. I remember Lynda Weinman refered to this as "mystery meatball" navigation in one of the books she wrote on web design somewhere between the mid 90's to early 2000's. Probably it was the book Designing Web Graphics.3 [1] as looking through the Google results the cover of that one looks the most like what I seem to recall.
Tying into what was said in a sibling comment about the icons used in programs like Photoshop, I think the important thing to keep in mind is the context in which you consider adding icons. For a professional market piece of software like Photoshop where you expect your audience to put many hours into learning how to use the software and where you expect them to become power users, you can allow more in terms of UI elements that might steepen the learning curve, but which when learned can be employed by proficient users for faster and more productive workflow and which therefore will make the additional time required to understand them increase the value that your software provides.
Meanwhile for tools and websites that are used only occasionally, or where you don't expect repeat use but want to provide the best value for your users still, you should hold their hand more and make it immediately apperent what everything does and how to use it.
I've been thinking a bit about interfaces that would evolve with the user but my conclusion thus far has been that the amount of work required to implement that successfully would take a lot of time and might even never be worth it. That instead it still seems better to me to decide wether you are targeting heavy repeat use or not, and to optimize your UI accordingly in the manner I stated in the above paragraphs of text.
[1]: https://www.amazon.com/Designing-Web-Graphics-3-Lynda-Weinma...
I think Google's autodraw[2] + noun project would make an excellent pairing.
[0] https://www.logojoy.com/ [1] https://www.tailorbrands.com/ [2] https://aiexperiments.withgoogle.com/autodraw
[1] https://news.ycombinator.com/item?id=2843728 [2] https://news.ycombinator.com/item?id=3498929
I'd probably pay a one-off fee ($20? $30?) just to use the app though, even if it meant requiring attribution for all icons used.
With the app in particular, even though I'd only end up using one or two icons, I'd really like to just be able to use the app to prototype/browse icons. Which is why I'd be very happy to pay a one-off fee to use the app, even if I then have to separately purchase/attribute the individual icons I use. At the moment, you have to be a subscriber to use the app.
Hiring a graphical artist for an hour will probably be a lot more expensive
All I wanted was a bacon egg and cheese icon...
Ex. "Bat" https://thenounproject.com/search/?q=bat&i=660766
Interestingly, iconic languages usually wound up assigning sounds to the icons and were transformed into phonetic alphabets. Icons just aren't practical.
- source graphics for figures in books and articles
- inspiration for new ways of expressing an idea graphically
- gauging variation in visual representation of a concept
- learning how to make a particular shape with vector graphics
- logo ideas
There's also a literal filter icon, which could only ever work at somewhat larger sizes due to the mesh. Without knowing that the context of the search results is that of "filter", however, you probably wouldn't know what it was by simply looking at it.
https://thenounproject.com/search/?q=Fuck&i=54850
Iconic karma sutra here:
Edit: there's actually a ton of good abstract stuff in here. Should have looked more closely.
Am I missing something?
There are now over 2600 emoji. Enough already.
[0]: http://unicode.org/emoji/selection.html
[1]: Just look at how many Chinese characters there are...
[2]: Campaigns to get certain emoji into unicode are quite popular, such as with the taco emoji (https://www.tacobell.com/feed/tacoemoji) and the dumping emoji (http://www.dumplingemoji.org/).
[3]: Eggplant emoji anyone?
Did you mean “anyhting”?
I mainly use it for finding nice logos for my github projects, and they really do not disappoint.
"outstandingly or amazingly good or impressive"
[0] https://en.wikipedia.org/wiki/Floppy_disk#/media/File:Image3...
So the only thing that "floppy disk" ever made sense for, even for the 8" ones, is the storage media inside the casing, not the casing.
https://thenounproject.com/browse/?i=1037952 https://thenounproject.com/term/keyboard/1018886/
I think there was a reason Chinese wasn't based upon the images of the things they were writing about!