Matt JohnsonIn case you missed it the first time ’round, our very own Jory Raphael began a blog series on the basics of Designing Icons. Curious about what makes for an awesome icon? You’ve come to the right place. Get caught up on icon design principles, and let us know what you think on Twitter.
Designing Icons
In the intro, we take a big picture look at exploring icons, the metaphors they can convey, and what goes into making a great icon.
.animate-beat { -webkit-animation-name: fa-beat; animation-name: fa-beat; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-direction: normal; animation-direction: normal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @keyframes fa-beat { 0%, 28%, 70% { -webkit-transform: scale(1); transform: scale(1); } 14%, 42% { -webkit-transform: scale(1.25); transform: scale(1.25)); } }
Context is King
The visual metaphors you select for a project need to be legible (or at least learnable) to your intended audience. And to know your audience better, you’ll need to do a bit of research. Not sure where to start? Put on your journalist hat and learn 5 ways to understand your icon audience.
Simplification of Form
A key goal for every icon designer should be to create icons that viewers understand unconsciously. With the goal of simplicity in mind, you’ll find that subtle variations help amplify meaning and aid understanding. Here are 3 tips tips and tricks to consider.
The 5 Elements of an Icon Grid
As many designers and artists can attest, a blank canvas represents endless possibilities. There’s no limit to what can fill that space. And that can be equal parts exciting and paralyzing. With so many directions a design can take, where do you begin? Break it down with the 5 elements of an icon grid.
Do you have tricks of the trade that helps guide you in your icon design? Find us on Twitter and share your thoughts!
