VisualGuidelines

From Wiki.ooo4kids.org
(Difference between revisions)
Jump to: navigation, search
([CONTENT] Creation)
 
(Color Palette)
Line 30: Line 30:
 
|-
 
|-
 
! scope=row | OpenOffice
 
! scope=row | OpenOffice
|<div style="background-color:#3678C0; border:1px solid #ccc; margin:0; padding:2px; height:50px; width:50px; float:left;">&nbsp;</div> #36 78 C0
+
|<div style="background-color:#3678C0;width:75px;padding:10px 5px; float:left;-moz-border-radius: 5px; -webkit-border-radius: 5px;color:white;">#3678c0</div>  
 
|
 
|
 
|
 
|
 
|-
 
|-
 
! scope=row | Writer
 
! scope=row | Writer
|<div style="background-color:#3C6586; border:1px solid #ccc; margin:0; padding:2px; height:50px; width:50px; float:left;">&nbsp;</div> #3C 65 86
+
|<div style="background-color:#3C6586;width:75px;padding:10px 5px;float:left;-moz-border-radius: 5px; -webkit-border-radius: 5px;color:white;">#3c6586</div>
 
|
 
|
 
|
 
|
 
|-
 
|-
 
! scope=row | Calc
 
! scope=row | Calc
|<div style="background-color:#9EBC00; border:1px solid #ccc; margin:0; padding:2px; height:50px; width:50px; float:left;">&nbsp;</div> #9E BC 00
+
|<div style="background-color:#9EBC00;width:75px;margin:0;padding:10px 5px;float:left;-moz-border-radius: 5px; -webkit-border-radius: 5px;color:white;">#9ebc00</div>
 
|
 
|
 
|
 
|
 
|-
 
|-
 
! scope=row | Impress
 
! scope=row | Impress
|<div style="background-color:#F26A00; border:1px solid #ccc; margin:0; padding:2px; height:50px; width:50px; float:left;">&nbsp;</div> #F2 6A 00
+
|<div style="background-color:#F26A00;width:75px;margin:0;padding:10px 5px;float:left;-moz-border-radius: 5px; -webkit-border-radius: 5px;color:white;">#f26a00</div>
 
|
 
|
 
|
 
|
 
|-
 
|-
 
! scope=row | Draw
 
! scope=row | Draw
|<div style="background-color:#FFC726; border:1px solid #ccc; margin:0; padding:2px; height:50px; width:50px; float:left;">&nbsp;</div> #FF C7 26
+
|<div style="background-color:#FFC726;width:75px;margin:0;padding:10px 5px; float:left;-moz-border-radius: 5px; -webkit-border-radius: 5px;">#ffc726</div>
 
|
 
|
 
|
 
|

Revision as of 16:15, 11 May 2009


Visual Guidelines

To maintain a consistent graphical user interface experience we need to set up some guidelines regarding colors, icons, graphics, typos, ....

Font

Typography in design can’t be overestimated. Fonts can help to convey the message in a more convenient way.

Proposal: adopt a different default font for OOo4Kids that the one used in OpenOffice. It's good way to increase the visibility and the message of the product without costing any time or effort as many free quality fonts can be found on the web.

For example the Ubuntu project use the UbuntuTitleFont.

We could use this font for example for:

  • Texts in splashScreen, About box, wizards, etc...
  • Documentation we will provide later (UserGuide, Shorcut Sheet, ...)
  • Buttons, banners, ...

I suggest to use one of the fonts listed in the following document: 40 excellent freefonts for professional design and discuss to make the choice.


Color Palette

OpenOffice Proposal 1 Proposal 2
OpenOffice
#3678c0
Writer
#3c6586
Calc
#9ebc00
Impress
#f26a00
Draw
#ffc726

Gradients variations

DRF Public.png To do

  • check with benBois
  • provide photoshop / gimp Palettes

DRF Star.png Ideas

  • Remark : It could be nice to choose a "dyslexic friendly" font. Let's say : http://www.dafont.com/lexia.font
  • Reply : The idea is not so bad. But the "lexia" proposal can't be accepted the licence is "free for personnal use". Another point to mention is that the font is not very attractive for children.

DRF Globe.png External links

Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox