I am proposing a new icon set for AOO 4.0 that will make them more usable and recognizable to users.
Our focus should be to be the best user experience, anywhere we can make an improvement is important.
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.0 Proposed
|
Shape
256px
|
Unable to render embedded object: File (MIME-Icon-Current-Shape.png) not found. Unable to render embedded object: File (3.4.1-ods-256px.png) not found.
This is for documents.
The Templates are similarly designed
Rather than the page corner in the top right, its in the bottom right.
As well the top of the page has a solid color designating it as a template.
|
Unable to render embedded object: File (MIME-Icon-Proposed-Shape.png) not found.
More Usable? Yes.
- Primary Context (Application Designation - Red). Secondary Context (Application Brand - Green)
- Corner And Designator Color (keep from old design), user can identify the file type quickly by color and designator.
- Enlarged Designation, helps color blind and hard of seeing individuals.
- Mime designation, helps users differentiate file type when the above two fail to help, include when screen space permits MIME Type is not important to this audience, brain-spill-over from my technical side, technical files like .XML & .XSD. -Samer.
- Additionally, the color of the MIME type could be different for further differentiation of template files.
- Single gull, or maybe O or circle can satisfy secondary element, less busy yet gets the brand across.
|
| 64px |
Unable to render embedded object: File (MIME-Icon-Current-Shape.png) not found. Unable to render embedded object: File (MIME-Icon-Current-Example-64px.png) not found.
Optimal size, great for showing how fabulous and sophisticated our product is.
|
Unable to render embedded object: File (MIME-Icon-Proposed-Shape.png) not found.
At this level we keep the MIME designation but the three characters at a little larger.
|
32px
|
Unable to render embedded object: File (MIME-Icon-Current-Shape-32px.png) not found. Unable to render embedded object: File (MIME-Icon-Current-Example-32px.png) not found.
At this level we should still be able to see the branding well as well as identifying the file type quickly
|
Unable to render embedded object: File (MIME-Icon-Proposed-Shape-32px.png) not found.
At this level we drop the MIME designation, space is limited and mime type becomes less likely to help identify or connect with the user.
|
16px
|
Unable to render embedded object: File (MIME-Icon-Current-Shape-16px.png) not found. Unable to render embedded object: File (MIME-Icon-Current-Example-16px.png) not found.
At 16px, space is limited, we want to be the least busiest.
|
Unable to render embedded object: File (MIME-Icon-Proposed-Shape-16px.png) not found.
Might need to drop the branding to make less busy. (Green)
Our focus should be to be the best user experience, and that might mean dropping the branding to be much more helpful to the user.
|
Legend
|
Green - Branding (Twin Gulls)
Red - Application Designation
Orange - Page Corner (Colored)
|
Green - Branding (Approx 1/8 icon)
Red - Application Designation (Approx 1/2 icon)
Orange - Colored Page Corner (Approx 1/8 icon)
Blue - MIME Designation (Approx 1/8 icon)
|
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
256px (click to enlarge)
|
| Base - .odb Database Document |
Unable to render embedded object: File (3.4.1-odb-256px.png) not found.
|
| Calc - .ods Spreadsheet |
Unable to render embedded object: File (3.4.1-ods-256px.png) not found.
|
| Calc - .ots Spreadsheet Template |
Unable to render embedded object: File (3.4.1-ots-256px.png) not found.
|
| Draw - .odg Drawing |
Unable to render embedded object: File (3.4.1-odg-256px.png) not found.
|
| Draw - .otg Drawing Template |
Unable to render embedded object: File (3.4.1-otg-256px.png) not found.
|
| Impress - .odp Presentation |
Unable to render embedded object: File (3.4.1-odp-256px.png) not found.
|
| Impress - .otp Presentation Template |
Unable to render embedded object: File (3.4.1-otp-256px.png) not found.
|
| Math - .odf Formula Document |
Unable to render embedded object: File (3.4.1-odf-266px.png) not found.
|
| Writer - .odm Master Document |
Unable to render embedded object: File (3.4.1-odm-256px.png) not found.
|
| Writer - .odt Text Document |
Unable to render embedded object: File (3.4.1-odt-256px.png) not found.
|
| Writer - .ott Text Template |
Unable to render embedded object: File (3.4.1-ott-256px.png) not found.
|
| Writer - .oth Web Template |
Unable to render embedded object: File (3.4.1-oth-256px.png) not found.
|
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 Unable to render embedded object: File (AOO-4.0-Logo-Product-Icons-with-new-flat-logo.jpg) not found.
Palette is based on AOO blue as key colour.
AOO Desktop Icon Exploration - Samer Mansour
Unable to render embedded object: File (Just Icons.png) not found.
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.
Unable to render embedded object: File (Just Icons Roundv2.png) not found.
Then I thought keep the circle theme going (lines don't scale down as nicely in circle version because its smaller to start with):
Unable to render embedded object: File (Icon scale down.png) not found.
