Do’s and Don’ts of Effective Icon Design
Designing an icon can be tricky as it is very important to balance good design and color with clarity. An icon, no matter how artistically designed will lose its value if it does not communicate to the viewer.
[m2leep]
Effective icon designs
1. Create a theme: Although it is important for icons to stand out from each other, it is important to include a common design element. These elements can be based on color, perspective, size or light and shade.
2. Keep it simple: The function of an icon is clearest when the least number of elements are used in the design. Adding too many elements or trying to make the icon look realistic might make it too complicated to understand thereby defeating the purpose.
3. Consistency in shadows, light and reflection: Ensure that all the icons in the group are consistent with each other. If the light is acting from a specific direction, use the same direction for all other icons and add shadows and reflections accordingly. Use a simple perspective and ensure that all icons are drawn from the same angle.
Mistakes to avoid
1. Ambiguous and disarrayed designs: The efforts to create a set of icons that follow a theme may go waste if the icons look too similar. This will confuse the viewer and won’t serve the purpose. Similarly, if icons are too different from each other, the output will not be aesthetically pleasing and can be off-putting.
2. Cluttered icons: Adding too many elements or unnecessary design in the icon can confuse and irritate the viewer. The icon should be equally clear when resized. As icons are usually very small in size, it is important to keep it clean and easily understandable.
3. Unclear metaphors: While taking the creative approach to icon designing could get you great results; they may not always be as effective. Ensure that the designs you choose for icons are universally recognizable.
Want to learn more on how to design Icons from scratch, check out these 100+ amazing tutorials!
Create a Magnifying Glass Icon in Photoshop CS4

Design a Vintage Radio Icon in Photoshop

How to Create an Alarm Clock Icon

How to Create A Swanky Coffee Table Icon in Photoshop

How to Design a Custom Newspaper Icon – Vector Plus Tutorial

New Quicktime Icon in Photoshop

Draw a Speaker Icon in Photoshop Part 1

Design a Realistic 3D Baseball Cap in Photoshop

Design a Stylish Mail Icon in Photoshop

How to Create a Golden, Vector Compass in Illustrator

Create an Adobe Box Icon in Photoshop

Create a Fun Icon of Frozen People on Ice – Part II

Icon Design Tutorial – Designing a New Icon In Illustrator

Create a Dock Icon Folder in Photoshop

Glossy RSS icon

Create a Stylized GPS Icon

Design a Vector Audio Speaker Icon In Illustrator

Create an iMac – Design Your Desk – Part 2

How to Create a Van Icon in Photoshop

How to Create a Yellow Submarine Icon with Gradient Meshes – Vector Plus Tutorial

How to Create a Gearbox Settings Icon Using Simple Shapes

How to Create a Transparent Battery Icon

Craft a Delicious Chinese Food Icon

Draw a Classy 3D Poker Chip in Photoshop

Create a Cute Panda Bear Face Icon

paint brush logo icon in Photoshop

panic button logo icon in photoshop

Glossy Black Button Icons

Making a Photoshop Shield

How to Illustrate a Brain Icon for OSX and Vista

Handy Web 2.0 Icons In Photoshop

Photoshop Tutorial: Design the Mac OS X Leopard Folder

How to Create a Moka Express Icon

Cubite graphics icon

Create a High-Gloss Graduation Hat Icon Design

How to Create a Magic Wand Icon

MP3 player icon

Creating A Vector Style MacBook From Scratch

Sony playstation Icon

Photoshop Gold Ipod Shuffle Icon

Make a 3D Vector Film Roll, Drawn In Perspective

Compact Disc Icon

Simple Coffee Cup Icon Photoshop Tutorial

Halloween Pumpkin Icon

Photoshop Video Game Mario Icon

Carbon Style Icon

Design Float Circle Icon (AI Tutorial)

iTune Icon

Sleek Icon Design

Design a 3D Box Icon in Photoshop

How to Create a Super Shiny Pencil Icon

Custom Hard Drive Icon

Create a Vector Lock Icon Design

Photoshop Pedometer Icon

3D Mp3 Player

Photoshop Film Clapper Logo Icon

Vista Error Icon

Creating an XP Style Monitor Icon

How To Create A Vector Wacom Tablet In Illustrator

How To Create An Academy Icon From Simple Shapes

Make a Handy 3D Vector Calendar Icon

How to Create a Vector Safari Compass in Illustrator

How to create a Television Icon

How to Create Shiny, Vector Dice in Illustrator

How to Create an Energy Saving Bulb in Illustrator

How to Draw A Realistic Vector Light Bulb From Scratch

Create a Glossy Volt Icon in Photoshop

LG LCD Monitor Icon

Create a Vector Film Slate Icon

Share This Icon

How to Make a Vector Military Cap Icon

Abracadabra, How to Create a Magic Hat Icon

Creating a Cool Yellow Helmet Icon

Create An Aperture Style Camera Lens Icon

Create An iPod Shuffle

Create a Speed Gauge and Watch Icon in Photoshop

Create a Cheerful Twitter Bird in Photoshop

Illustrate a Traffic Cone Icon in Photoshop

Designing a Sleek Pencil Icon

Icon Design Tutorial: Drawing A Pencil Icon

How to Create A Realistic Chef’s Knife in Illustrator

Create a Jaguar Style Folder Icon

Create a Custom Mac OSX Style Ring Binder Address Book Icon

How to Turn Glasses into a Great Geek Icon

Thermometer Icon

design USB portable speaker logo icon in Photoshop

Create a Glowing Globe Icon in Photoshop

Angry Emoticon

Water cooler logo icon in photoshop

design stainless steel shape sensor dustbin logo icon in Photoshop

Photoshop Laser Printer Model

Photoshop PC Adapter Logo Icon

design whistle logo icon in photoshop

Photoshop Electronic Torch Light Icon

design joy stick logo icon in photoshop

How To Draw The Billings Application Icon

USB Stick Tutorial

Create an envelpe icon with a satin feel

How to Create a Juicy RSS Feed Icon

Beginner Illustrator Tutorial – Create a Vector RSS Icon

Glassy & Vibrant Rss feed icon Tutorial – Vista Style

Adobe Photoshop CS3 Style Icons

Design a Detailed Compass Icon in Photoshop

Create a Wooden Stack Dock Icon in Photoshop

Icon design tutorial: How to make a Calendar icon

Photoshop tutorial website pill button icon design in photoshop

Make 3D Yet Flat Looking Shopping Basket Icons

Post Pic Monitor Icon Design – Photoshop Tutorial

Design a Glossy Download Icon

How to Create a Stack of Poker Chips

Crystal Clear Bubble Icons

Create a Shiny Lock Icon Design
