Several icons does not look nice in the ring

[erikos]

Eben - can you have a look at them? What are the guidelines they need to follow?

Maze:
​http://git.sugarlabs.org/projects/maze/repos/mainline/blobs/master/Maze.activity/activity/activity-maze.svg

screenshot: ​http://dev.laptop.org/~erikos/maze.png

At least to me this looks wrong.

[tomeu]

Some guidelines for icons here:

​http://wiki.sugarlabs.org/go/DesignTeam/Human_Interface_Guidelines/The_Sugar_Interface/Layout_Guidelines

[eben]

Here is a better reference for icon creation, with some creation and verification scripts as well: ​http://wiki.laptop.org/go/Making_Sugar_Icons

I'll look into moving this page to the SugarLabs wiki...

[garycmartin]

Happy to rework the offending icon, if no one else has started yet, just reassign to me.

erikos: other than Maze (just too big, right?); which others were vinegar in your eye, the mamamedia ones?

[garycmartin]

Well, here's a very quick tweak to the Maze icon. This simple scale trick can be used on any oversized or non-centred icons now that the rounded rect highlight effect makes any deviations from the spec standout. Basically just wrap the svg drawing with the below, or something similar (I might be + .5 of a translate unit over the top if you want to tweak):

<g transform="translate(4,4)">
    <g transform="scale(0.84)">
        ...
        ...
    </g>
</g>

[garycmartin]

Before and after shot

[garycmartin]

Here's the tweaked svg

[garycmartin]

might be + .5 of a translate unit over the top

Actually, looking at a misc selection of icons, I think it might be the rounded rect that's 1 width unit too narrow and 1 height unit too short (with the left edge and top edge staying where they are). Either that or there's a fair few naughty slightly off centre icons.

erikos: until you mentioned it, I hadn't really noticed, now I can't stop seeing it :-)

[erikos]

Gary, thanks for the icon, does work nicely here. As you pointed out - there is more then one issue it looks like. The icons need to follow the guidelines. Does not look nice if some are bigger than others. Some icons seem to fully use the 55px - some seem to leave some space. Have not looked at the details - but I think you know what I mean ;p

As well it looks like the drawing algorithm has some issues as well - see #636.

The other icons are the flipstick puzzles, comic builder and maybe a few more. I guess the ones that we include in soas-2 should be ideally the same size.

Sorry to have you made aware of this aesthetic drama :)

[erikos]

make it new as Gary confirmed it.

[garycmartin]

OK will re-scale Flipsticks, Jigsaw Puzzle, Slider Puzzle, Comic Builder and will look out for others (Speak, Infoslicer, Joke Machine, Write, Chat are all badly centred or over scale). What's much more worrying to me is that this new hover design is so much less visually tolerant – seems like many Activity authors already have too much difficulty making their svg icons – trying to frame every activity icon with a border, in this aspect, is making other aspects of the UI look worse not better (i.e no one reported issues with these icons until now, as most were 'good enough' to get by).

The only though I have on this just now is that slightly increasing the size of the rounded rect will make it more visually tolerant to padding/centring issues – the down side being that it eats some space in the home layout. Is this a reasonable suggestion?

[garycmartin]

Flipsticks svg icon downsized and centred

[garycmartin]

Jigsaw Puzzle svg icon scaled down a little

[garycmartin]

Slider Puzzle svg icon scaled down

[garycmartin]

Cartoon Builder svg icon scaled down a little

[garycmartin]

Speak activity svg icon, centred

[garycmartin]

InfoSlicer activity svg icon re-scaled and centred

[wadeb]

SVGs are inherently scalable. Can't we just have Sugar detect the dimensions of the icon and automatically scale it to the appropriate size?

[garycmartin]

Write activity svg icon re-centred

[garycmartin]

FWIW, I've attached corrected (re-scaled and/or re-centred) Flipsticks, Jigsaw Puzzle, Slider Puzzle, Cartoon Builder, Speak, InfoSlicer and Write.

[alsroot]

Replying to garycmartin:

FWIW, I've attached corrected (re-scaled and/or re-centred) Flipsticks, Jigsaw Puzzle, Slider Puzzle, Cartoon Builder, Speak, InfoSlicer and Write.

thanks, i'll update Flipsticks, Jigsaw, Slider, Cartoon, Speak and InfoSlicer

[walter]

Can this ticket be closed?

[walter]

I think these are all resolved. Please reopen if there are more icons that need corrections.

[dnarvaez]

Milestone 0.86 deleted