Simplifying icons

- Now that we've talked a little bit…about the design process for simplifying icons…we need to put that into practice…by creating a simpler version of our contacts icon.…So I've opened up the hruns_icons file…from the 03_15 directory.…And the way I've arranged my windows…is I've got a preview window over here…on the right hand side that's zoomed out to 25%.…That's gonna show these icons at a 32 by 32 view…and it's gonna help me understand whether or not…what we're drawing is going to be readable at smaller sizes.…

In the main window I've centered the view…on the contacts artboard…and zoomed up so that I can really get a nice up close view…of the grid and what it is that I'm going to be drawing.…So the first thing that we need to do…is talk about the contacts icon itself…and what design elements we're going to keep,…which design elements we're not going to be able to keep,…what'll read well at smaller sizes,…and what isn't going to read very well at smaller sizes.…The first thing that we know that we're going…

Resume Transcript Auto-Scroll

Author

Released

8/27/2015

Learn techniques and best practices for designing smart, visually interesting web icons in any software, in this guide with senior author James Williamson. First, find out what makes icons most effective and how to plan your design right from the start. Then review the best practices for brainstorming, sketching your ideas, and finding the right visual metaphors. James shows how to build your designs at high resolutions and create variations that will work at smaller sizes. Finally, learn how to export your work to multiple file types, and optimize SVGs, one of the most popular formats for icons.