Partner UI Guideline

diese UI Guideline soll beschreiben, was fuer Informationen fuer eine effiziente Umsetzung des GUI's noetig sind, welche von einem Designer bereitgestellt werden soll.

• Hilfreich wäre, wenn das Design nicht auf Pixelbasis geliefert wird. Allso eher kein .psd file. Warum: für ein gut ausschauendes Design ist es wichtig, dass auf die Browservielfallt und die verschiedenen genuzten Auflösungen Rücksicht
  genommen wird. Ein .psd File als Basis ist dem zu folge suboptimal, da dies stets fixe Breite und Pixel hat, das Web aber nicht.

• Layout
  • Fixed Layout (Fixe Breite des Layouts)
    • Was ist die maximale Groesse? Hangt von vielem ab, je nachdem was jeder Benutzer zu Hause selber hat... und jeder faehrt eine andere Aufloesung, somit sind wir weiterhin auf einer Aufloesung von 1024px, d.h. damit es im Browser trotzdem ohne Scrollbars dargestellt wird -> 990px
    • Hintergrundbilder:
      • Verlaeufe (horizontal, vertikal) werden normalerweise als 1 Pixel slice aufbereitet und anschliessend mittels css repeat x/y abgebildet
      • Muster: je nachdem wie gross, nach dem selben prinzip, mittels css repeat x/y
      • Bilder: hier ist vor allem immer im Hinterkopf zu behalten, wie sieht es aus, wenn die Seite mit unterschiedlichen Aufloesungen von Bildschirmen dargestellt wird, d.h. ein Bild mit der Groesse 1024x768 in einem Browser Fenster, welches viel groesser ist, wie soll da Hintergrundbild positioniert sein... auch z.b. vertikales scrollen!
  • Floating Layout (Ausnutzung des gesamten Browser Fensters) [wird wahrscheinlich sehr selten der Fall sein)
    • Keine besondere Hinweise aktuell bekannt.
• Beecomb verwendet 1 Bereich, welcher fuer den Content frei editierbar ist. (d.h. mehrspaltige Contents/Designs sind weniger geeigent, da die im Content abgebildet werden muessen)
• Erstelltes Design in Beecomb umsetzen, hierzu gibt es 2 Moeglichkeiten, vor allem wenn es starkt gelayert ist (d.h. Text ist ueber Bilder gelegt usw.)
  • 1) Design als Photoshop psd Datei, somit ist es einfach moeglich, die einzelnen Layer zu aktivieren und die Grafiken einzeln auszuschneiden
  • 2) Jegliche Bilder/Gestaltungselemente bereits als PNG/JPG/GIF einzeln bereitgestellt.

Navigation

Jegliche Navigationselement (horizontal/vertikal) werden normalerweise als UL/LI Baum dargestellt und mittels css das Design beeinflusst. Folgende Informationen sind fuer die Navigation noetig:

• Wieviele Levels werden pro Navigationsbereich dargestellt?
• Darstellung der einzelnen Levels, Schriften, Farben, Hintergrund...
• Keine transparente Navigation verwenden
• Darstellung der Navigationselemente in unterschiedlichen Zustaenden: nicht aktiv, aktiv, wenn der Benutzer mit der Maus ueber den Navigationspunkt faehrt (hover)

Schriften

• Grundsätzlich Sans Sérife Schriften
• Jegliche Definitionen aller verwendeten Schriften, d.h. Font Family, Font Size, z.b. in px, Font weight, z.b. bold, usw.
• Vermeide Schriften wie Arrial Narrow
• Definition der Links, d.h. Farbe/Unterstrichen in den verschiedenen Zustaenden.

http://www.codestyle.org/css/font-family/index.shtml

Varia

• Logo für in URL

Checklist:

Fonts

- number (with how many fonts do we work)?
- measure (fixed nr. or percentage)
- Font
- bold/italic/etc.
- H1-H3 (Title or not, Matter because of google robots

Interspace:

Define Interspace (compare Styleguide p. 7+8/15)

• define 3-4 generals and give them names
• horizontal
• vertical

Text-Links

• normal: gelb
• hover: underlined (ev. maybe with yellow background and black font)
• Visited: ignore

Button-Links

i18N compatible / 1 pix( bild)

• normal:silver
• hover: yellow (if not possible (ST) underlinded): text font black
• visited: ignored

Navigation-Link (for both Navi Main and Meta (differs in fonts)

No dropdown
font: TBD by Mario
subnavigation (e.g. content of profile) will be the same as mainnavigation

• normal: grey
• hover: yellow
• current: white