I am proposing a new icon set for AOO 4.1 that will make them more usable and recognizable to users.
Our focus should be to be the best user experience. To do this, you need to step out of your shoes and think "if I were a user would I care about X in this context?"
| 3.4.1 | 4.1 Proposed | Comments |
---|---|---|---|
Shape |
| This is an example size for document instances. The Templates are similarly designed. | |
64px |
| Optimal size, great for showing how fabulous and sophisticated our product is. | |
32px |
| At this level we should still be able to see the branding well as well as identifying the file type quickly. | |
16px |
| At 16px, space is limited, we want to be the least busiest. |
Tools To Complete Task
GIMP - Free - Can exports icon files with varying sizes. Tutorial on layer sizing and exporting: http://www.gimp-tutorials.net/How-to-make-an-icon-from-a-picture
Description | Current 3.4.1 |
---|---|
Base - .odb Database Document | |
Calc - .ods Spreadsheet | |
Calc - .ots Spreadsheet Template | |
Draw - .odg Drawing | |
Draw - .otg Drawing Template | |
Impress - .odp Presentation | |
Impress - .otp Presentation Template | |
Math - .odf Formula Document | |
Writer - .odm Master Document | |
Writer - .odt Text Document | |
Writer - .ott Text Template | |
Writer - .oth Web Template |
Existing references and resources for icons:
http://www.openoffice.org/ui/VisualDesign/ODF_icons4print.html
http://www.openoffice.org/ui/VisualDesign/OOo30MimeType4print.html
http://www.openoffice.org/ui/VisualDesign/OOo_galaxy_mimetype.html
AOO.next Flat Desktop Icon Exploration
Submitted by Kevin Grignon
Palette is based on AOO blue as key colour.
AOO Desktop Icon Exploration - Samer Mansour
Improvement in icons to emphasize file type (enlarged application icon and colours, decrease in birds and black styling taking up space.)
AOO Desktop Icon Exploration 2 (Round) - Samer Mansour
Rounded to match branding, Went flat, sharper, increased contrast between designator and background icon. Less busy, dropped the gulls.
Changed templates to be dotted, different perspective than we used in the past, left the solid bar at the top so previous 3.x users transition to new icon set.
Then I thought keep the circle theme going (lines don't scale down as nicely in circle version because its smaller to start with):
Zipped Icons:
One more example for comparison on Windows 8 (can be done by Properties->Shortcut->Change Icon... dialog in windows):
You can see how having a circle or rounded square makes the Icon slightly less readable/less pixels to work with. BTW The anti aliasing isn't fine tuned.
Oct 15th - Logo with offset - Samer Mansour
Logo with offset (new style of previous icons)
November 23rd
Feb 17th - Samer
Fine tuned pixels in inkscape "Icon Preview" under File Menu "View" -> "Icon Preview", If you will be modifying please see changes under that view to see if it causes pixelation or drowning of color.
Main Icons.zip - Mar 5 (Mac and Windows)
File Icons.zip - Mar 4 (Impress, Draw and Math)
Working on more file icons tomorrow.
Icon Ideas | Pros | Cons |
---|---|---|
Keep Gulls | Branding (arguable how this is beneficial though) | Makes Icons busier at smaller sizes |
Square | Looks like an App, user is familiar. | Tougher to see when small |
Circle | Looks like logo, consistency is neat idea. | Toughest to see when small |
No Background | Easier to see when < 48px, majority of icon's life is < 48px (Windows). | Can be a shock at first. |
8 Comments
Kay Schenk
So far, I like the top row in the first exploration the best. I like the simplicity and the more square shape.
I don't know what size you're using for the Win 8 sizing in:
https://cwiki.apache.org/confluence/download/attachments/34834886/Win8Task.png
but it would be useful to see my favorite rendering (and others) in this size also.
Also: Keep the gulls!
In my mind, they are an important "branding" element of OpenOffice. The gull was used in the "early" days in various stages of maturity – from hatching out of a shell, to fuzzy chick to mature bird – for product announcements, etc. I realize that use is probably no longer relevant, but the gulls are an ingrained symbol of this project and product in my mind.
Kay Schenk
Re Oct 15 –
Well, interesting – no particular preference of top row vs bottom on this. I tried a test with the top row, and they did indeed desaturate fine. I still favor the square ones even though our main logo is a circle. I don't see that as an issue but maybe others do.
Resized to 32 px high with Gimp, still OK
Drew Jensen
Well, rather the same with me (as with Kay), I tend to like the round icons - and do note the comment about them getting a bit harder to read when small - but not so that I feel too strongly.
So the gulls, or gull; I suppose that this has often come down to a question not so much about aesthetics but rather brand emphasis. It's come up over the years and I believe it would be fair to say that the reasoning for not using the gull(s) on the document (mime) icons is to emphasis less the brand of the application and more the brand of the document format - promote AOO over ODF or ODF over AOO.
Anyway, I've always tended to see more value in promoting the application brand - though I do see the rational in the other opinion.
Otherwise, as Kay I desaturated also and yeah they seem just fine to my old eyes![(wink)](/confluence/s/p9b4rx/8804/1naq7q0/_/images/icons/emoticons/wink.svg)
Not sure if I should ask about the slight change in color assignments - Red for Math for instance.. I guess that is part of the decision here, yes?
Samer Mansour
Red made sense to me because it completed the rainbow, more fun than grey.
Kay Schenk
What I discovered on about a 45% desaturation was the last three because of color, all seemed to fade to a murky yellow-orange-ish color.
Could just be my monitor though. I mean they were still readable but didn't really retain their individual color all that well. I don't know what our goals are in this respect.
Samer Mansour
High contrast icons satisfy that you can tell them apart while grey scaled. I know this is satisfied through the primary context (red areas in mock ups). The context and the background are different enough to see when greyscaled.
ie the same saturation of two Hues will make the same grey colour. See left side for an example here: http://rgm.ogalab.net/RGM-files/R_CC/result/colorspace/desaturate.Rd_001_large.png
Since I use White and a colour, the contast is high enough so you can still make out its a spreadsheet vs a document. Making the primary context large would also help this.
Semi-saturation is not a real threat because we have handled it with primary contexts (red areas in mock ups)
Edit: meant to say red areas not green areas, fixed
Kay Schenk
Drew –
Jsut so we're clear. I prefer the square ones over the round ones..the VERY first set on this page under this heading:
AOO Desktop Icon Exploration - Samer Mansour
Edwin Sharp
No Offense, but IMHO the proposed icons are very bad.
Edwin