Icon Redesign

[Fatih20]

The previous icons doesn't reflect the use of the apps. Furthermore, it doesn't comply by the eOS HIG.

[jeremypw]

Thanks for contributing! You are right that the existing icon does not directly indicate the app's usage (it is a visual pun on an alternative name for nonograms - Tsunami - and the "Great Wave off Kanagawa" by Hokusai). The mime-type icon (application-x-gnonograms-puzzle.svg) does try to depict a nonogram puzzle but I struggled to design a suitable app icon that reflected the full appearance of a nonogram without being over-complicated.

Your version indicates a grid is involved but I am not sure it indicates the specific usage of nonograms but I would like to produce a new release soon and a new icon that conforms to the HIG would be nice. I will ask someone from the elementary ux team for their opinion as graphic design is not my strong point.

[Fatih20]

I think that is a super obscure reference that is definitely not a good foundation of an icon design. While we can actually design a nonogram puzzle, it's too complex and would be cluttered which is against the eOS HIG. So, I think my use of a grid with yellow and blue boxes are the best way to do this without making a cluttered icon.

It's important to not make a cluttered icon because then, small visual elements like the boxes that you tried to put in wouldn't be visible to the user and instead just become a garbled mess of pixel.

[jeremypw]

I agree that the icon must not be cluttered.

[jeremypw]

Perhaps I should have named the app "gtsunami" but I thought Tsunami might be a trade-name.

[jeremypw]

There are plenty of examples of icons based on the app's name rather than what it does or what it looks like.

[Fatih20]

But that's not how an app should be named. If you name it gtsunami, does the app have anything to do with tsunami. Or, do you just wanted to make an obscure reference.

[jeremypw]

That's why I went with gnonograms. "Nonograms" is the original technical name so presumably most widely known.

[Fatih20]

And that's my point. And that's why you should approve these changes so I can continue making the app icon for smaller sizes.

[jeremypw]

I notice that the blue color in your icon does not match the current appearance of the actual app. The app purple color is intended as a "brand" color and is used for the headerbar etc. I think it was taken from the original icon but it may be a good idea to change it for the nearest elementary palette color. Either Blueberry 700 and Blueberry 900 I guess.

[jeremypw]

How about losing the bottom row and right-hand column so that the remaining white squares correspond to the clues?

[Fatih20]

I think the color of the block in your app is the one that actually needs to be changed to a lighter color because it looks horrible next to yellow. Furthermore, the color that you chose for the headerbar doesn't have enough contrast with black and so, it doesn't look good and make the headerbar looks unreadable.

[jeremypw]

The text in the headerbar should be white? It is on my system. However, I am open to reconsidering this color and going for a lighter blueberry shade.

[Fatih20]

I prefer is the headerbar has a lighter color. Darker color (except black for dark theme) generally look bad as headerbar because it makes your app looks depressed.

[jeremypw]

I think I would prefer just to lose the color in the headerbar altogether because of the colored navigation controls.

[Fatih20]

Ok, that's great. Do you want the icon or not? I will make a pixel fitted version for the smaller sizes.

[jeremypw]

@Fatih20 Are you willing to amend the icon as I suggested? My concern at the moment is that it does not specifically indicate a nonogram app, let alone gnonograms. Have you searched for similar looking icons used by other apps? If you search AppCenter for "grid" you will see there are a number of grid based games but each icon has some feature specific for that game.

[Fatih20]

Yes, I do. I'm not super familiar with nonograms, what changes would you suggest?

[jeremypw]

@Fatih20 : As previously suggested:

How about losing the bottom row and right-hand column so that the remaining white squares correspond to the clues?

Maybe a dot or dash in the white squares could imply a clue. Again, I am not sure whether there are enough pixels. I'll leave that up to you.

Maybe the top-right square could contain a "G" or something but there are probably not enough pixels. Or maybe the colored squares could spell "G"? This is less important - it is probably enough to represent a "nonogram".

I'll be away for the next few days so may not be able to respond immediately by the way.

[Fatih20]

It's best practive to not use text in any kind on an app icon according to the eOS HIG/ So, I will follow the first one.

[Fatih20]

Furthermore, adding the small number that is in the game to be in the icon wouldn't work because it wouldn't be visible at smaller size. Also also, according to the eOS HIG, icons shouldn't be cluttered.

[jeremypw]

OK - just something to suggest a clue would suffice - in the same way the document icon shows lines rather than actual text.

[jeremypw]

@Fatih20 You might draw some ideas from the icon on https://nonogram.com/ (Although I do not think the numbers are a good idea as previously discussed). You should also consider that when solving there are three different colors of cell.

[jeremypw]

Thanks for the update. The 128 x 128 icon is nearer to what I would like (except for the X which makes it too similar to the nonograms.com one). However the smaller ones lose the clue squares - was that deliberate? The icons should look as similar as possible at different sizes.

[jeremypw]

I might have a go at tweaking these icons in a different branch.

[Fatih20]

No, they don't. It's called pixel fitting. Read this part from the eOS HIG

[jeremypw]

@Fatih20 Sorry, I don't understand - pixel fitting should not cause significant parts of the icon to be lost. It means drawing each icon individually at the correct scale so that anti-aliasing is minimised instead of just scaling down a large icon. Obviously this means some detail is lost at the smaller sizes but this is spread across the whole icon - not just chopping bits off!

[jeremypw]

This is what I whas thinking off - off course the 'G' would have to be lost or simplified manually at smaller sizes. But the grey cell with the circular cursor still identifies the icon specifically as gnonograms as I do not think other similar apps have this feature.

[jeremypw]

I would not worry about smaller sized icons until the design is finalized because pixel fitting is a lot of work.

[Fatih20]

@Fatih20 Sorry, I don't understand - pixel fitting should not cause significant parts of the icon to be lost. It means drawing each icon individually at the correct scale so that anti-aliasing is minimised instead of just scaling down a large icon. Obviously this means some detail is lost at the smaller sizes but this is spread across the whole icon - not just chopping bits off!

You contradicted yourself. "Drawing each icon individually" is what I'm doing and it does not exclude chopping bits off should they be necessary. "Drawing each icon individually" is not limited to " detail is lost at the smaller sizes but this is spread across the whole icon".

Also, have I told you that the use of alpabethical character is bad? Furthermore, one of the important principle in icon design is Show Don't Tell. Maybe you can learn more about it in this back and forth between me and lainsce who has developed many app and designed many icons for eOS apps. It would explain why the use of letter G in the icon is bad.

[jeremypw]

OK, drop the 'G' but there still needs to be something specific to gnonograms, not just a generic grid based app. I am afraid I disagree about "chopping bits off". This is rarely, if ever, necessary. I have not found an example of another app that truncates the smaller icons as much as you have.