What is the better way to show these icons selected?

These are the icons we have made for one of the product and these ones are the finalized ones.

What is the better way to show these icons selected?
.

But we have a problem as we are unable to get a better way to show the selected ones.

One way to do this is by inverting the colors but the issue is we have more than 50 icons overall and from the development perspective we have to provide two SVGs for a single icon to the developers which will make the app heavy.

So my problems are :

(a) Better way to show these icons(in general : icons with long shadow effect) selected.

(b) And a way to show them on the darker backgrounds

Replay

Use a colour to represent "selected" and grey scale to represent "unselected". You can do this against a dark background too (as long as the "selected" and "unselected" has enough visual contrast and visual harmony against that darker background)

You can achieve this by using colors. Depending on the environment/language you are working with. I think you are developing a web-based application. Use the original color of the icon when it's selected else target the unselected icons with class that when they are inactive , their colors would be set to grey. This is the most used technique and it will reduce the cognitive load.

Just add a grey square around the icon so it looks selected.

What is the better way to show these icons selected?

What is the better way to show these icons selected?

– Wireframes created with Balsamiq Mockups

Also, to keep it consistent you can try this as way as well https://au.pinterest.com/pin/180284791312462170/

Category: gui design Time: 2016-07-28 Views: 0

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 4.063 (s). 13 q(s)