| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" |
| content="text/html; charset=ISO-8859-1"> |
| <title>Visual Design</title> |
| <link href="sts.css" rel="stylesheet" type="text/css" media="screen"> |
| <style type="text/css"> |
| <!-- |
| .Stil4 {font-size: 10pt} |
| .Stil7 {font-size: 12px} |
| .Stil8 {color: #3262a6} |
| .Stil10 {color: #3262a6; font-size: 12pt; } |
| --> |
| </style> |
| </head> |
| <body> |
| <table width="63%" border="0" cellspacing="2" cellpadding="5"> |
| <tr> |
| <td colspan="3"><a href="http://ui.openoffice.org/VisualDesign/"><img src="gifs/visualdesign.png" width="753" height="49" border="0"></a></td> |
| <td width="17%"><div align="right"></div></td> |
| </tr> |
| <tr> |
| <td> </td> |
| <td colspan="3" valign="bottom"><div align="right"><span class="Stil7"><a href="index.html">Visual |
| Design</a> | <a href="OOo_brand.html">Brand</a> | MimeType </span></div></td> |
| </tr> |
| <tr> |
| <td><img src="gifs/nada.gif" width="20" height="50"></td> |
| <td colspan="3" valign="bottom"> </td> |
| </tr> |
| <tr> |
| <td><img src="gifs/nada.gif" width="20" height="33"></td> |
| <td colspan="3" valign="bottom"><span class="head1_black Stil8">The Brand |
| of OpenOffice.org 3.0 </span></td> |
| </tr> |
| <tr> |
| <td> </td> |
| <td colspan="3" class="body_black"><span class="Stil10"><img src="gifs/blue_new_next.png" width="18" height="19" border="0" align="absmiddle"> Branded |
| MimeType icons:: <a href="#idea">visual brand identifier</a> | unique |
| elements | unique |
| color language | </span></td> |
| </tr> |
| <tr> |
| <td><img src="gifs/nada.gif" width="20" height="99"></td> |
| <td colspan="3" class="body_black"> </td> |
| </tr> |
| <tr> |
| <td> </td> |
| <td colspan="3"><table width="80%" border="0" cellspacing="2" cellpadding="5"> |
| <tr> |
| <td><strong><a name="idea"></a>The branding idea </strong></td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td width="69%"><p>From the very first the <a href="OOo_seagull.html">seagull</a> is |
| the main brand element of Openoffice.org. </p></td> |
| <td width="31%"> </td> |
| </tr> |
| <tr> |
| <td><img src="gifs/Images/OOo30_brand_idea.png" width="573" height="142"></td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td>It makes sence to communicate this brand element in all mime type |
| icons, too. The <a href="OOo30MimeType.html">mime type icons</a> of |
| OpenOffice.org are: the applications (main and sub application), |
| documents and templates. The <a href="OOo_seagull.html">seagull</a> appears |
| in every single type.</td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td><img src="gifs/nada.gif" width="20" height="30"></td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td><img src="gifs/Images/OOo30_brand_brand.png" width="573" height="142"></td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td><p> </p> |
| <p><br> |
| </p></td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td> </td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td><img src="gifs/nada.gif" width="20" height="800"></td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td>work in progress... </td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td> </td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td>information</td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td> </td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td><p><br> |
| An icon transports information and should be easy to recognize.</p> |
| <p>Make a clear difference between the applications and their files<br> |
| OpenOffice.org has single applications. It is important to see |
| clearly which document comes from which single application. |
| We have to differentiate between: application, document and |
| template. The application is the main icon of them. The form |
| of the application icon is the biggest one, too. The document |
| and the template icons are smaller and less colorful and have |
| a look like "a bit of the application".</p></td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td><img src="gifs/OOo20brand_shape.png" width="290" height="161"></td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td> </td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td><p>Use application identifier<br> |
| </p> |
| <p>Use clear and simple symbols to make it easy to recognize an |
| appliaction. It is helpful for color blind people to differ the |
| icons, too.<br> |
| All icons of one single application (application, document and |
| template) have the same symbol. The symbol at the application |
| icon looks a little bit invers to the document and template icon. |
| This effect give them a look like "a bit of the application", |
| too.<br> |
| See all symbols for OpenOffice.org icons. For designing use the |
| vektor file. </p></td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td><img src="gifs/OOo20brand_identifier.png" width="290" height="91"></td> |
| <td>-> all symbols </td> |
| </tr> |
| <tr> |
| <td> </td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td><p>Colors</p> |
| <p><br> |
| Colors are a great way to distribute the emotions and the look |
| of the branding. Sun reach a harmonic, corporate look when |
| all applications use the same color table!<br> |
| See more about the new branding colors.</p> |
| <p>The color language<br> |
| The color language of OpenOffice.org is based on the color language |
| of MS Office. This color code is very popular by Office users. |
| Do not confuse users with a new color mapping.<br> |
| </p></td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td><img src="gifs/OOo20brand_color-language.png" width="382" height="204"></td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td> </td> |
| <td> </td> |
| </tr> |
| <tr> |
| <td> </td> |
| <td> </td> |
| </tr> |
| </table></td> |
| </tr> |
| <tr> |
| <td> </td> |
| <td colspan="3"><img src="gifs/nada.gif" width="50" height="32"></td> |
| </tr> |
| <tr> |
| <td width="4%"><img src="gifs/nada.gif" width="20" height="50"></td> |
| <td colspan="3"><div align="right"><span class="body_black"><span class="Stil4"><font face="Arial, Helvetica, sans-serif" color="#666699"><font color="#000000">Last |
| change: |
| <!-- #BeginDate format:Am3 -->02/10/2009<!-- #EndDate --> |
| by</font> </font></span><font face="Arial, Helvetica, sans-serif"><a href="mailto:stella.schulze@sun.com?subject=VisualDesign">sts</a></font></span></div></td> |
| </tr> |
| </table> |
| <p align="right" class="Stil3"> </p> |
| </body> |
| </html> |
