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.1 - Desktop Icons
Date Sat, 23 Nov 2013 17:31: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.1+-+Desktop+Icons">AOO4.1
- 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 (1)</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" >!logo-w-offset3.png! <br> <br></td></tr>
            <tr><td class="diff-added-lines" style="background-color: #dfd;">h3.
November 23rd !logo-w-offset3.png|border=1! <br></td></tr>
            <tr><td class="diff-unchanged" > <br> <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.1 that will make them more usable
and recognizable to users.</p>

<p>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?"</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.1 Proposed <br class="atl-forced-newline" /> </th>
<th class='confluenceTh'> Comments </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/34834886/MIME-Icon-Current-Shape.png?version=1&amp;modificationDate=1380919264000"
style="border: 1px solid black" /></span>&nbsp; <span class="image-wrap" style=""><img
src="/confluence/download/attachments/34834886/3.4.1-ods-256px.png?version=1&amp;modificationDate=1380919264000"
style="border: 1px solid black" /></span><br class="atl-forced-newline" />
<br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><img src="/confluence/download/attachments/34834886/MIME-Icon-Proposed-Shape.png?version=1&amp;modificationDate=1380919264000"
style="border: 1px solid black" /></span> <br class="atl-forced-newline" />
<br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> This is an example size for document instances.&nbsp;
The Templates are similarly designed. <br class="atl-forced-newline" />
The top of the icon has a solid color differing and designating it as a template file. <br
class="atl-forced-newline" />
<br class="atl-forced-newline" />
4.1 Proposed <br class="atl-forced-newline" />
More Usable? Yes. Why? <br class="atl-forced-newline" />
&#45; Primary Context (Application Designation - Red) has greatest focus. Users don't
care to see Secondary Context (Application Branding - Green aka 'the gulls'), it's nice to
have, but users are fairly familiar that the file will open with Apache OpenOffice, so no
need to remind users everyday/ no value added.&nbsp; On top it complicates shrunk/smaller
icons. A compromise is to drop it from small icons, where its obscure and illegible. <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" />
<br class="atl-forced-newline" />
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>
</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/34834886/MIME-Icon-Current-Shape.png'><img
src="/confluence/download/thumbnails/34834886/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/34834886/MIME-Icon-Current-Example-64px.png?version=1&amp;modificationDate=1380919263000"
style="border: 1px solid black" /></span><br class="atl-forced-newline" />
<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/34834886/MIME-Icon-Proposed-Shape.png'><img
src="/confluence/download/thumbnails/34834886/MIME-Icon-Proposed-Shape.png" width="64" style="border:
1px solid black" /></a></span><br class="atl-forced-newline" />
<br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> Optimal size, great for showing how fabulous and sophisticated
our product is. <br class="atl-forced-newline" />
<del>At this level we keep the MIME designation but the three characters at a little
larger.</del> </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/34834886/MIME-Icon-Current-Shape-32px.png?version=1&amp;modificationDate=1380919264000"
style="border: 1px solid black" /></span> <span class="image-wrap" style=""><img
src="/confluence/download/attachments/34834886/MIME-Icon-Current-Example-32px.png?version=1&amp;modificationDate=1380919264000"
style="border: 1px solid black" /></span><br class="atl-forced-newline" />
<br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><img src="/confluence/download/attachments/34834886/MIME-Icon-Proposed-Shape-32px.png?version=1&amp;modificationDate=1380919264000"
style="border: 1px solid black" /></span><br class="atl-forced-newline" />
<br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> 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" />
<del>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.</del> <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/34834886/MIME-Icon-Current-Shape-16px.png?version=1&amp;modificationDate=1380919263000"
style="border: 1px solid black" /></span> <span class="image-wrap" style=""><img
src="/confluence/download/attachments/34834886/MIME-Icon-Current-Example-16px.png?version=1&amp;modificationDate=1380919264000"
style="border: 1px solid black" /></span><br class="atl-forced-newline" />
<br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> <span class="image-wrap" style=""><img src="/confluence/download/attachments/34834886/MIME-Icon-Proposed-Shape-16px.png?version=1&amp;modificationDate=1380919264000"
style="border: 1px solid black" /></span><br class="atl-forced-newline" />
<br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> At 16px, space is limited, we want to be the least busiest.
<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>
</tbody></table>
</div>


<h2><a name="AOO4.1-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/34834886/3.4.1-odb-256px.png'><img
src="/confluence/download/thumbnails/34834886/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/34834886/3.4.1-ods-256px.png'><img
src="/confluence/download/thumbnails/34834886/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/34834886/3.4.1-ots-256px.png'><img
src="/confluence/download/thumbnails/34834886/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/34834886/3.4.1-odg-256px.png'><img
src="/confluence/download/thumbnails/34834886/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/34834886/3.4.1-otg-256px.png'><img
src="/confluence/download/thumbnails/34834886/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/34834886/3.4.1-odp-256px.png'><img
src="/confluence/download/thumbnails/34834886/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/34834886/3.4.1-otp-256px.png'><img
src="/confluence/download/thumbnails/34834886/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/34834886/3.4.1-odf-266px.png'><img
src="/confluence/download/thumbnails/34834886/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/34834886/3.4.1-odm-256px.png'><img
src="/confluence/download/thumbnails/34834886/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/34834886/3.4.1-odt-256px.png'><img
src="/confluence/download/thumbnails/34834886/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/34834886/3.4.1-ott-256px.png'><img
src="/confluence/download/thumbnails/34834886/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/34834886/3.4.1-oth-256px.png'><img
src="/confluence/download/thumbnails/34834886/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.1-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/34834886/AOO-4.0-Logo-Product-Icons-with-new-flat-logo.jpg?version=1&amp;modificationDate=1380919263000"
style="border: 1px solid black" /></span></p>

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

<h2><a name="AOO4.1-DesktopIcons-AOODesktopIconExplorationSamerMansour%26nbsp%3B"></a>AOO
Desktop Icon Exploration - Samer Mansour&nbsp;</h2>

<p><span class="image-wrap" style=""><img src="/confluence/download/attachments/34834886/Just+Icons.png?version=1&amp;modificationDate=1380919263000"
style="border: 1px solid black" /></span></p>

<p>Improvement in icons to emphasize file type (enlarged application icon and colours,
decrease in birds and black styling taking up space.)</p>

<h2><a name="AOO4.1-DesktopIcons-AOODesktopIconExploration2%28Round%29SamerMansour"></a>AOO
Desktop Icon Exploration 2 (Round) - Samer Mansour</h2>

<p>Rounded to match branding, Went flat, sharper, increased contrast between designator
and background icon. Less busy, dropped the gulls.</p>

<p>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.</p>



<p><span class="image-wrap" style=""><img src="/confluence/download/attachments/34834886/Just+Icons+Roundv2.png?version=1&amp;modificationDate=1380919263000"
style="border: 0px solid black" /></span></p>

<p>Then I thought keep the circle theme going (lines don't scale down as nicely in circle
version because its smaller to start with):</p>

<p>&nbsp; <span class="image-wrap" style=""><img src="/confluence/download/attachments/34834886/Icon+scale+down.png?version=1&amp;modificationDate=1380919263000"
style="border: 0px solid black" /></span></p>

<p>Zipped Icons:</p>


<p><a href="/confluence/download/attachments/34834886/Icon+Set+Round.zip?version=1&amp;modificationDate=1381439708000">Icon
Set Round.zip</a></p>






<p><a href="/confluence/download/attachments/34834886/Icon+Set+Alt.zip?version=1&amp;modificationDate=1381439708000">Icon
Set Alt.zip</a></p>







<p>One more example for comparison on Windows 8 (can be done by Properties-&gt;Shortcut-&gt;Change
Icon... dialog in windows):</p>

<p> <span class="image-wrap" style=""><a class="confluence-thumbnail-link 640x582"
href='https://cwiki.apache.org/confluence/download/attachments/34834886/Win8Start.png'><img
src="/confluence/download/thumbnails/34834886/Win8Start.png" width="200" style="border: 1px
solid black" /></a></span>&nbsp;&nbsp; <span class="image-wrap"
style=""><a class="confluence-thumbnail-link 369x119" href='https://cwiki.apache.org/confluence/download/attachments/34834886/Win8Task.png'><img
src="/confluence/download/thumbnails/34834886/Win8Task.png" width="200" style="border: 1px
solid black" /></a></span></p>

<p>You can see how having a circle or rounded square makes the Icon slightly less readable/less
pixels to work with.&nbsp; BTW The anti aliasing isn't fine tuned.</p>

<h3><a name="AOO4.1-DesktopIcons-Oct15thLogowithoffsetSamerMansour"></a>Oct
15th - Logo with offset - Samer Mansour</h3>


<p><span class="image-wrap" style=""><img src="/confluence/download/attachments/34834886/logo-w-offset2.png?version=1&amp;modificationDate=1381811511000"
style="border: 0px solid black" /></span></p>

<p>Logo with offset (new style of previous icons)</p>

<p><span class="image-wrap" style=""><img src="/confluence/download/attachments/34834886/logo-w-offset3.png?version=6&amp;modificationDate=1385227784594"
style="border: 0px solid black" /></span></p>

<h3><a name="AOO4.1-DesktopIcons-November23rd%21logowoffset3.pngborder%3D1%21"></a>November
23rd <span class="image-wrap" style=""><img src="/confluence/download/attachments/34834886/logo-w-offset3.png?version=6&amp;modificationDate=1385227784594"
style="border: 1px solid black" /></span></h3>



<div class='table-wrap'>
<table class='confluenceTable'><tbody>
<tr>
<th class='confluenceTh'> Icon Ideas <br class="atl-forced-newline" /> </th>
<th class='confluenceTh'> Pros <br class="atl-forced-newline" /> </th>
<th class='confluenceTh'> Cons <br class="atl-forced-newline" /> </th>
</tr>
<tr>
<td class='confluenceTd'> Keep Gulls <br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> Branding (arguable how this is beneficial though) <br class="atl-forced-newline"
/>
(Brand name is on icon tile/start menu and on hover too) <br class="atl-forced-newline"
/> </td>
<td class='confluenceTd'> Makes Icons busier at smaller sizes <br class="atl-forced-newline"
/> </td>
</tr>
<tr>
<td class='confluenceTd'> Square <br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> Looks like an App, user is familiar. <br class="atl-forced-newline"
/>
More space for colour, enforces what app it is. <br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> Tougher to see when small <br class="atl-forced-newline"
/>
This isn't a mobile app, most desktop applications are any shape they want to be. <br class="atl-forced-newline"
/> </td>
</tr>
<tr>
<td class='confluenceTd'> Circle <br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> Looks like logo, consistency is neat idea. <br class="atl-forced-newline"
/>
More space for colour, enforces what app it is. <br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> Toughest to see when small <br class="atl-forced-newline"
/> </td>
</tr>
<tr>
<td class='confluenceTd'> No Background <br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> Easier to see when &lt; 48px, majority of icon's life
is &lt; 48px (Windows). <br class="atl-forced-newline" /> </td>
<td class='confluenceTd'> Can be a shock at first. <br class="atl-forced-newline"
/> </td>
</tr>
</tbody></table>
</div>

    </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.1+-+Desktop+Icons">View
Online</a>
        |
        <a href="https://cwiki.apache.org/confluence/pages/diffpagesbyversion.action?pageId=34834886&revisedVersion=9&originalVersion=8">View
Changes</a>
            </div>
</div>
</div>
</div>
</div>
</body>
</html>

Mime
View raw message