openoffice-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Samer Mansour (Confluence)" <conflue...@apache.org>
Subject [CONF] Apache OpenOffice Community > AOO4 - Desktop Icons
Date Mon, 08 Jul 2013 13:39:00 GMT
<html>
<head>
    <base href="https://cwiki.apache.org/confluence">
            <link rel="stylesheet" href="/confluence/s/en/2176/1/3/_/styles/combined.css?spaceKey=OOOUSERS&amp;forWysiwyg=true"
type="text/css">
    </head>
<body style="background: white;" bgcolor="white" class="email-body">
<div id="pageContent">
<div id="notificationFormat">
<div class="wiki-content">
<div class="email">
    <h2><a href="https://cwiki.apache.org/confluence/display/OOOUSERS/AOO4+-+Desktop+Icons">AOO4
- Desktop Icons</a></h2>
    <h4>Page <b>edited</b> by             <a href="https://cwiki.apache.org/confluence/display/~smansour">Samer
Mansour</a>
    </h4>
        <br/>
                         <h4>Changes (2)</h4>
                                 
    
<div id="page-diffs">
                    <table class="diff" cellpadding="0" cellspacing="0">
    
            <tr><td class="diff-snipped" >...<br></td></tr>
            <tr><td class="diff-unchanged" >\- Corner And Designator Color (keep
from old design), user can identify the file type quickly by color and designator. \\ <br>\-
Enlarged Designation, helps color blind and hard of seeing individuals. \\ <br></td></tr>
            <tr><td class="diff-deleted-lines" style="color:#999;background-color:#fdd;text-decoration:line-through;">\-
Mime designation, helps users differentiate file type when the above two fail to help, include
when screen space permits. \\ <br></td></tr>
            <tr><td class="diff-added-lines" style="background-color: #dfd;">-\-
Mime designation, helps users differentiate file type when the above two fail to help, include
when screen space permits-&amp;nbsp; MIME Type is not important to this audience, brain-spill-over
from my technical side, technical files like .XML &amp; .XSD. \-Samer. \\ <br></td></tr>
            <tr><td class="diff-unchanged" >&amp;nbsp;&amp;nbsp; - Additionally,
the color of the MIME type could be different for further differentiation of template files.
\\ <br>\- Single gull, or maybe O or circle can satisfy secondary element, less busy
yet gets the brand across. \\ | <br></td></tr>
            <tr><td class="diff-snipped" >...<br></td></tr>
    
            </table>
    </div>                            <h4>Full Content</h4>
                    <div class="notificationGreySide">
        <p>I am proposing a new icon set for AOO 4.0 that will make them more usable
and recognizable to users.</p>

<p>Our focus should be to be the best user experience, anywhere we can make an improvement
is important.<br/>
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?"</p>
<div class='table-wrap'>
<table class='confluenceTable'><tbody>
<tr>
<th class='confluenceTh'>&nbsp;</th>
<th class='confluenceTh'> 3.4.1 <br class="atl-forced-newline" /> </th>
<th class='confluenceTh'> 4.0 Proposed <br class="atl-forced-newline" /> </th>
</tr>
<tr>
<td class='confluenceTd'> Shape <br class="atl-forced-newline" />
256px <br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><img src="/confluence/download/attachments/30752728/MIME-Icon-Current-Shape.png?version=1&amp;modificationDate=1360278036000"
style="border: 1px solid black" /></span>&nbsp; <span class="image-wrap" style=""><img
src="/confluence/download/attachments/30752728/3.4.1-ods-256px.png?version=1&amp;modificationDate=1360276456000"
style="border: 1px solid black" /></span><br class="atl-forced-newline" />
This is for documents. <br class="atl-forced-newline" />
<br class="atl-forced-newline" />
The Templates are similarly designed <br class="atl-forced-newline" />
Rather than the page corner in the top right, its in the bottom right. <br class="atl-forced-newline"
/>
As well the top of the page has a solid color designating it as a template.&nbsp; <br
class="atl-forced-newline" /> </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><img src="/confluence/download/attachments/30752728/MIME-Icon-Proposed-Shape.png?version=1&amp;modificationDate=1360278050000"
style="border: 1px solid black" /></span> <br class="atl-forced-newline" />
More Usable? Yes. <br class="atl-forced-newline" />
&#45; Primary Context (Application Designation - Red). Secondary Context (Application
Brand - Green) <br class="atl-forced-newline" />
&#45; Corner And Designator Color (keep from old design), user can identify the file type
quickly by color and designator. <br class="atl-forced-newline" />
&#45; Enlarged Designation, helps color blind and hard of seeing individuals. <br class="atl-forced-newline"
/>
<del>&#45; Mime designation, helps users differentiate file type when the above
two fail to help, include when screen space permits</del>&nbsp; MIME Type is not
important to this audience, brain-spill-over from my technical side, technical files like
.XML &amp; .XSD. &#45;Samer. <br class="atl-forced-newline" />
&nbsp;&nbsp; - Additionally, the color of the MIME type could be different for further
differentiation of template files. <br class="atl-forced-newline" />
&#45; Single gull, or maybe O or circle can satisfy secondary element, less busy yet gets
the brand across. <br class="atl-forced-newline" /> </td>
</tr>
<tr>
<td class='confluenceTd'> 64px </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><a class="confluence-thumbnail-link
256x256" href='https://cwiki.apache.org/confluence/download/attachments/30752728/MIME-Icon-Current-Shape.png'><img
src="/confluence/download/thumbnails/30752728/MIME-Icon-Current-Shape.png" width="64" style="border:
1px solid black" /></a></span>&nbsp; <span class="image-wrap" style=""><img
src="/confluence/download/attachments/30752728/MIME-Icon-Current-Example-64px.png?version=1&amp;modificationDate=1360282148000"
style="border: 1px solid black" /></span><br class="atl-forced-newline" />
Optimal size, great for showing how fabulous and sophisticated our product is. <br class="atl-forced-newline"
/> </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><a class="confluence-thumbnail-link
256x256" href='https://cwiki.apache.org/confluence/download/attachments/30752728/MIME-Icon-Proposed-Shape.png'><img
src="/confluence/download/thumbnails/30752728/MIME-Icon-Proposed-Shape.png" width="64" style="border:
1px solid black" /></a></span><br class="atl-forced-newline" />
At this level we keep the MIME designation but the three characters at a little larger. <br
class="atl-forced-newline" /> </td>
</tr>
<tr>
<td class='confluenceTd'> 32px <br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><img src="/confluence/download/attachments/30752728/MIME-Icon-Current-Shape-32px.png?version=1&amp;modificationDate=1360281932000"
style="border: 1px solid black" /></span> <span class="image-wrap" style=""><img
src="/confluence/download/attachments/30752728/MIME-Icon-Current-Example-32px.png?version=1&amp;modificationDate=1360281920000"
style="border: 1px solid black" /></span><br class="atl-forced-newline" />
At this level we should still be able to see the branding well as well as identifying the
file type quickly <br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><img src="/confluence/download/attachments/30752728/MIME-Icon-Proposed-Shape-32px.png?version=1&amp;modificationDate=1360280913000"
style="border: 1px solid black" /></span><br class="atl-forced-newline" />
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. <br class="atl-forced-newline" /> </td>
</tr>
<tr>
<td class='confluenceTd'> 16px <br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><img src="/confluence/download/attachments/30752728/MIME-Icon-Current-Shape-16px.png?version=3&amp;modificationDate=1360281994000"
style="border: 1px solid black" /></span> <span class="image-wrap" style=""><img
src="/confluence/download/attachments/30752728/MIME-Icon-Current-Example-16px.png?version=1&amp;modificationDate=1360281868000"
style="border: 1px solid black" /></span><br class="atl-forced-newline" />
At 16px, space is limited, we want to be the lease busiest. <br class="atl-forced-newline"
/> </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><img src="/confluence/download/attachments/30752728/MIME-Icon-Proposed-Shape-16px.png?version=1&amp;modificationDate=1360280929000"
style="border: 1px solid black" /></span><br class="atl-forced-newline" />
Might need to drop the branding to make less busy. (Green) <br class="atl-forced-newline"
/>
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. <br class="atl-forced-newline" /> </td>
</tr>
<tr>
<td class='confluenceTd'> Legend <br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> Green - Branding (Twin Gulls) <br class="atl-forced-newline"
/>
Red - Application Designation <br class="atl-forced-newline" />
Orange - Page Corner (Colored) <br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> Green - Branding (Approx 1/8 icon) <br class="atl-forced-newline"
/>
Red - Application Designation (Approx 1/2 icon) <br class="atl-forced-newline" />
Orange - Colored Page Corner (Approx 1/8 icon) <br class="atl-forced-newline" />
Blue - MIME Designation (Approx 1/8 icon) <br class="atl-forced-newline" /> </td>
</tr>
</tbody></table>
</div>


<h2><a name="AOO4-DesktopIcons-ToolsToCompleteTask"></a>Tools To Complete
Task</h2>

<p>GIMP - Free - Can exports icon files with varying sizes. Tutorial on layer sizing
and exporting: <a href="http://www.gimp-tutorials.net/How-to-make-an-icon-from-a-picture"
class="external-link" rel="nofollow">http://www.gimp-tutorials.net/How-to-make-an-icon-from-a-picture</a></p>






<div class='table-wrap'>
<table class='confluenceTable'><tbody>
<tr>
<th class='confluenceTh'> Description </th>
<th class='confluenceTh'> Current 3.4.1 <br class="atl-forced-newline" />
256px (click to enlarge) <br class="atl-forced-newline" /> </th>
</tr>
<tr>
<td class='confluenceTd'> Base - .odb Database Document </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><a class="confluence-thumbnail-link
256x256" href='https://cwiki.apache.org/confluence/download/attachments/30752728/3.4.1-odb-256px.png'><img
src="/confluence/download/thumbnails/30752728/3.4.1-odb-256px.png" width="100" style="border:
1px solid black" /></a></span><br class="atl-forced-newline" /> </td>
</tr>
<tr>
<td class='confluenceTd'> Calc - .ods Spreadsheet </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><a class="confluence-thumbnail-link
256x256" href='https://cwiki.apache.org/confluence/download/attachments/30752728/3.4.1-ods-256px.png'><img
src="/confluence/download/thumbnails/30752728/3.4.1-ods-256px.png" width="100" style="border:
1px solid black" /></a></span><br class="atl-forced-newline" /> </td>
</tr>
<tr>
<td class='confluenceTd'> Calc - .ots Spreadsheet Template </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><a class="confluence-thumbnail-link
256x256" href='https://cwiki.apache.org/confluence/download/attachments/30752728/3.4.1-ots-256px.png'><img
src="/confluence/download/thumbnails/30752728/3.4.1-ots-256px.png" width="100" style="border:
1px solid black" /></a></span><br class="atl-forced-newline" /> </td>
</tr>
<tr>
<td class='confluenceTd'> Draw - .odg Drawing </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><a class="confluence-thumbnail-link
256x256" href='https://cwiki.apache.org/confluence/download/attachments/30752728/3.4.1-odg-256px.png'><img
src="/confluence/download/thumbnails/30752728/3.4.1-odg-256px.png" width="100" style="border:
1px solid black" /></a></span><br class="atl-forced-newline" /> </td>
</tr>
<tr>
<td class='confluenceTd'> Draw - .otg Drawing Template </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><a class="confluence-thumbnail-link
256x256" href='https://cwiki.apache.org/confluence/download/attachments/30752728/3.4.1-otg-256px.png'><img
src="/confluence/download/thumbnails/30752728/3.4.1-otg-256px.png" width="100" style="border:
1px solid black" /></a></span><br class="atl-forced-newline" /> </td>
</tr>
<tr>
<td class='confluenceTd'> Impress - .odp Presentation </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><a class="confluence-thumbnail-link
256x256" href='https://cwiki.apache.org/confluence/download/attachments/30752728/3.4.1-odp-256px.png'><img
src="/confluence/download/thumbnails/30752728/3.4.1-odp-256px.png" width="100" style="border:
1px solid black" /></a></span><br class="atl-forced-newline" /> </td>
</tr>
<tr>
<td class='confluenceTd'> Impress - .otp Presentation Template </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><a class="confluence-thumbnail-link
256x256" href='https://cwiki.apache.org/confluence/download/attachments/30752728/3.4.1-otp-256px.png'><img
src="/confluence/download/thumbnails/30752728/3.4.1-otp-256px.png" width="100" style="border:
1px solid black" /></a></span><br class="atl-forced-newline" /> </td>
</tr>
<tr>
<td class='confluenceTd'> Math - .odf Formula Document </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><a class="confluence-thumbnail-link
256x256" href='https://cwiki.apache.org/confluence/download/attachments/30752728/3.4.1-odf-266px.png'><img
src="/confluence/download/thumbnails/30752728/3.4.1-odf-266px.png" width="100" style="border:
1px solid black" /></a></span><br class="atl-forced-newline" /> </td>
</tr>
<tr>
<td class='confluenceTd'> Writer - .odm Master Document </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><a class="confluence-thumbnail-link
256x256" href='https://cwiki.apache.org/confluence/download/attachments/30752728/3.4.1-odm-256px.png'><img
src="/confluence/download/thumbnails/30752728/3.4.1-odm-256px.png" width="100" style="border:
1px solid black" /></a></span><br class="atl-forced-newline" /> </td>
</tr>
<tr>
<td class='confluenceTd'> Writer - .odt Text Document </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><a class="confluence-thumbnail-link
256x256" href='https://cwiki.apache.org/confluence/download/attachments/30752728/3.4.1-odt-256px.png'><img
src="/confluence/download/thumbnails/30752728/3.4.1-odt-256px.png" width="100" style="border:
1px solid black" /></a></span><br class="atl-forced-newline" /> </td>
</tr>
<tr>
<td class='confluenceTd'> Writer - .ott Text Template </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><a class="confluence-thumbnail-link
256x256" href='https://cwiki.apache.org/confluence/download/attachments/30752728/3.4.1-ott-256px.png'><img
src="/confluence/download/thumbnails/30752728/3.4.1-ott-256px.png" width="100" style="border:
1px solid black" /></a></span><br class="atl-forced-newline" /> </td>
</tr>
<tr>
<td class='confluenceTd'> Writer - .oth Web Template </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><a class="confluence-thumbnail-link
256x256" href='https://cwiki.apache.org/confluence/download/attachments/30752728/3.4.1-oth-256px.png'><img
src="/confluence/download/thumbnails/30752728/3.4.1-oth-256px.png" width="100" style="border:
1px solid black" /></a></span><br class="atl-forced-newline" /> </td>
</tr>
</tbody></table>
</div>

<p>Existing references and resources for icons:</p>

<p><a href="http://www.openoffice.org/ui/VisualDesign/ODF_icons4print.html" class="external-link"
rel="nofollow">http://www.openoffice.org/ui/VisualDesign/ODF_icons4print.html</a></p>






<p><a href="http://www.openoffice.org/ui/VisualDesign/OOo30MimeType4print.html" class="external-link"
rel="nofollow">http://www.openoffice.org/ui/VisualDesign/OOo30MimeType4print.html</a></p>






<p><a href="http://www.openoffice.org/ui/VisualDesign/OOo_galaxy_mimetype.html" class="external-link"
rel="nofollow">http://www.openoffice.org/ui/VisualDesign/OOo_galaxy_mimetype.html</a></p>



<h2><a name="AOO4-DesktopIcons-AOO.nextFlatDesktopIconExploration"></a><b>AOO.next
Flat Desktop Icon Exploration</b></h2>

<p>Submitted by Kevin Grignon <span class="image-wrap" style=""><img src="/confluence/download/attachments/30752728/AOO-4.0-Logo-Product-Icons-with-new-flat-logo.jpg?version=1&amp;modificationDate=1372313613000"
style="border: 1px solid black" /></span></p>

<p>Palette is based on AOO blue as key colour.</p>

<h2><a name="AOO4-DesktopIcons-AOODesktopIconExplorationSamerMansour%21JustIcons.pngborder%3D1%21"></a>AOO
Desktop Icon Exploration - Samer Mansour <span class="image-wrap" style=""><img src="/confluence/download/attachments/30752728/Just+Icons.png?version=1&amp;modificationDate=1373032623330"
style="border: 1px solid black" /></span></h2>

<p>Improvement in icons to emphasize file type (enlarged application icon and colours,
decrease in birds and black styling taking up space.)</p>
    </div>
        <div id="commentsSection" class="wiki-content pageSection">
        <div style="float: right;" class="grey">
                        <a href="https://cwiki.apache.org/confluence/users/removespacenotification.action?spaceKey=OOOUSERS">Stop
watching space</a>
            <span style="padding: 0px 5px;">|</span>
                <a href="https://cwiki.apache.org/confluence/users/editmyemailsettings.action">Change
email notification preferences</a>
</div>
        <a href="https://cwiki.apache.org/confluence/display/OOOUSERS/AOO4+-+Desktop+Icons">View
Online</a>
        |
        <a href="https://cwiki.apache.org/confluence/pages/diffpagesbyversion.action?pageId=30752728&revisedVersion=10&originalVersion=9">View
Changes</a>
                |
        <a href="https://cwiki.apache.org/confluence/display/OOOUSERS/AOO4+-+Desktop+Icons?showComments=true&amp;showCommentArea=true#addcomment">Add
Comment</a>
            </div>
</div>
</div>
</div>
</div>
</body>
</html>

Mime
View raw message