Mastering the Basics of Icon Design
blog.thenounproject.com
blog.thenounproject.com
First lesson: A white A4 paper and one black square of fixed size. You are allowed to move and rotate. Afterwards you have to explain your compositions.
Second lesson: you are allowed to scale the black square now.
Third lesson: two squares
Fourth lesson: three squares, colors are allowed now
Fifth lesson: Circles are allowed now
Etc.
We talked about fonts and type only a year in, but the stuff I learned in the first five lessons was peobably the most valuable stuff I learned about graphics ever.
Just a recommendation for anyone reading the comments & wants this kind of base level knowledge, Visual Grammar by Christian Leborg is this, basically, it's an excellent book, can normally get it dirt cheap off Amazon or wherever but link from publishers:
https://papress.com/collections/design-browse-books/products...
The article of this thread at least has some practical tips and guidelines, what to look out for when designing small icons.
The article is a technical overview of the way a single designer creates icons with a specific tool. The book isn't practical tips [well it is, but not at all the same]
If you're not interested in designing and just want to, say, add some icons to a set and call it a day, then that's fine
It's just, if you want to actually get very good at...anything I guess, there are base level skills and knowledge that you have to be able to unconsciously apply.
eg for a similar field, when learning to draw, you need to understand perspective, composition, effect of light. You do things like draw people without looking at the paper, over and over and over again. Or draw light hitting solids: spheres or cubes or pyramids. That's kinda the bulk of what you do for quite a long time. And I think that basically applies to most fields.
If you are not that interested in mastering it, then just following a step by step tutorial will get you a result, but it's just not the same thing -- there's nothing wrong with it, it just is what it is.
Edit: I think the article is great! I really liked the explanation of his process, it's really useful, I don't want to trivialise it. In-depth breakdowns of process by skilled people who know what they are doing are great
It is about having a very unobstructed and experienced feeling on how shapes and colors affect people, how information is read visually and so on. This can become complicated if you dive deep into the way our brain works or into the different cultural, political and historical connotations connected to certain visual languages and elements — however just developing a sense for how to manipulate shapes and colors in order to achieve visual goals is much more fundamental to the practical parts of the profession than any elaborate theory.
The critiques of this are up on youtube, and it's some of the most insightful content about basic design principles I've seen!
Simple but effective. A block of text in a layout could also be a square later on, but by focusing us on the bare minimum of a layout we started seeing negative space, started to get a feel what positioning, proportions and rotations do to a visual composition (and before mentioned negative space) and so on.
This was mostly about developing a feel for visual composition and made us actually care about all these choices.
SVG icons scale, sure, but human perception doesn't, so if you're zoomed in while drawing it, and don't look at it at smaller sizes until you're done, chances are you'll have made an icon that doesn't look very good. You have to draw it while zoomed in, but check it at the smallest reasonable size pretty much constantly.
One reason (as he points out in the article) is that you'll probably have included too many details, and it just looks like noise when you zoom out.
Another reason is that if you're not extremely careful, and aware of your intended resolution, you'll make an icon with a lot of aliasing. Aliasing often reads as blurry edges, especially on diagonal lines, and makes the icon look amateurish. You can tell a professional icon, because it's crisp and clean when displayed.
The other thing to keep in mind is that icons, like logos, are all about recognizable silhouettes. Icons need to be "readable" at the edge of the user's vision, not just when stared at dead on. For the same reason, you don't want them to rely on color, or small details, otherwise they just won't work as well.
I've got to disagree with that part -- these days you have no control over pixel alignment or blurry edges. Both OS-level and browser-level zoom is the norm, not the exception, which means your icon edges will usually straddle pixels. And on retina-level displays, the alignment/blur doesn't really matter anyways.
Designing icons to some fixed pixel grid in order to achieve "crispness" is a relic from a 72dpi or 96dpi past that is in the process of entirely disappearing.
So it's not something to worry about anymore, and certainly not something that separates "professional" icons from non-professional ones.
I don’t think these monitors are uncommon, either. Especially for office and education use, normal DPI monitors still have far better bang for buck than 4K+ monitors do, and 1920x1080 and 2560x1440 in particular are popular with anybody who uses their machine to also play games because those resolutions are for more reasonable to drive than 4K+.
It’ll be great once we’re in the “HiDPI by default” era but that’s still several years out.
Someone choosing "More Space" on their new Mac's display settings has destroyed all pixel alignment on their computer, but with the display's density it might not matter much. Older hardware like the iPhone 8+ scaled everything down for the 1080p display at all times, and no icon was ever perfectly crisp on that thing, even Apple's.
The notion of logical (UX measurement) pixel size and physical (monitor) pixel size should just be considered to be totally decoupled at this point. Sure sometimes they perfectly align but as a developer you have zero control as to when that happens.
So it's not worth even trying anymore. Just use hi-res assets designed to still be legible at standard resolution and forget about pixel alignment.
She used graph paper and pencils to set individual pixels. Every pixel counts in her icon work.
It's easy to make icons if they're big. It's tiny, informative ones that are hard.
(Her web site, "kare.com", is gone. There is a copy at "https://web.archive.org/web/20210403001323/http://kare.com/")
https://github.com/iconpush/iconpush.github.io/tree/master/P...
I also built a visual search tool, though it's not particularly useful. The text search is a little better.
I wrote some documentation about how I gathered the icons too.
I was extremely lucky to get a chance to work with them a long time ago -- they're an awesome company with an awesome product. They deserve all the success in the world :)
I've also thought about how to communicate actions, effectively making The Verb Project. Usually there's an input and output, sometimes storage or feedback loops too.
Most of my basic shell scripts are written to convert data from one format to another. I made a standard icon format: a diagonally-divided icon with the input on the top left, and the output on the bottom right.
For example, GPSToGalileo will take GPS coordinates as an input, generate a KML file, and open it with Galileo (Guru) offline maps. Or iMessageToCalendar. Or ClockBible. Or NotesToText.
Having designed icons, I then put them as links on my (jailbroken) iPhone homescreen, to trigger these scripts. Having an auto-generator for icons could make some command-line tools much more accessible for non-technical users.
Icon design is really difficult. Simple is hard.
A good rule of thumb, for me, is that I always begin my illustrations in vector; usually with Illustrator. If possible I keep them as vector.
An icon should always work as monochrome; preferably pure black-and white. Color should be “icing on the cake.”
An icon should be immediately recognizable, even when very small or fuzzy, and in monochrome.
Not so easy.
The technique they demostrarte is very stroke dependent. My preference is for sharper edges and less uniformity. Though my uni professor taught us to exercise a lot of different styles to avoid getting stuck on one.
But you can definitely do all he talks about just with boolean operations.