Adding Much Needed Polish to Piwik UI/UX

Hi Guys,

I think there is definitely room for some much needed polish (and by polish I DON’T mean a glossy UI. I think you get the point) to the Piwik User Interface.
Now, I’m not just going to say this, and sit back, kick up my feet, wait for others to act. I’m willing to help with this!
I know a little bit of Design myself, and quite a bit more about HTML5, JavaScript, JQuery, CSS, and PHP.

One area I see that can be improved dramatically, is:

The Icons:

The use of PNG images as icons is OK, but if you go that route (for better, more detailed, and richer colored icons), always make sure to use source (src) images at least 2, 4, or even 8 times larger than presented on the webpage (to coincide with 2k, 4k, and possibly 8k resolutions), and always specify at least one dimension (width, or height) in CSS, but preferably not both (just the most important dimension). This is because tablets and phones (not sure about PC’s and MAC’s, because I only have a PC with 1080p resolution) make good use of the extra image [detail] information to make the image clearer on higher resolution screens, whereas 1080p, 720p, or lower resolution screens, will simply downsize (shrink) the image to fit the specified dimension (CSS will never distort the image, unless you specify both dimensions, at an incorrect ratio, as compared to the original source image).

However, the use of font-based icons such as Font Awesome to render beautifully crisp [uni-color] icons at any screen resolution (btw: my tablets resolution is: 2560 x 1600) is highly recommended for a cohesive, and unified, user interface. And, I’m definitely not against a mixture of both if done correctly, using proper discernment.

And one last suggestion about the icons (especially the folders, flags, and browser icons) is to (even if you decide not to take heed to any of my previous advice)…please do remove the gloss. It’s just really old looking and very poor taste.

Thanks for listening, and I hope I can be of further assistance in the future.

Bump-ity, Bump-ity, Bump! Someone Please Reply!

Hi James,

Thanks for your suggestions. For all suggestions related to product, please directly create issues (or comment on relevant issues) in our issue tracker: Issues · matomo-org/piwik · GitHub

We have already an issue related to improving our icons: Make Piwik look nice on Apple Retina displays - better icons? · Issue #9292 · matomo-org/piwik · GitHub
we’d love some help in making our design better :thumbsup:

Hi, @JamesAndersonJr.

I have spent some time trying to improve the icons. They are now converted from high resolution source images and have 3 times the displayed resolution.

If you have time, can you look at them at the pull request, my icon repository or wait for the next release (3.0.1) which will hopefully include them.

If you have better images for the few remaining low resolution icon, send them to me or open a pull request.