Aloha:huisstijl

From AardRock Wiki
Revision as of 16:02, 4 January 2007 by Martien (talk | contribs) (Eerste versie.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search


De Aloha:huisstijl zorgt voor een samenhangende eenduidige uitstraling en bouwt mee aan een sterk merk zodat je je ermee kan identificeren.

Definities, afmetingen en rooster

  • Alle afmetingen in beeldpunten of pixels (scherm) of punten (print), tenzijn anders vermeld.
  • Alle dimensies in BxH.
  • Alle kleurendefinities in RGB (255/255/255) of in drie hexadecimale octetten (#ffffff).
  • Oorsprong is linkerbovenhoek, positieve x naar rechts, positieve y naar beneden.
  • Onderliggend roostereenheid is 24x24 (1x1 eenheid).
  • Onderliggend klikrooster is 12x12 of 6x6 (zodat je een fijnere verdeling hebt).

Beelden

  • Alle beelden hebben afgeronde hoeken met een radius van 6.
  • Beelden moeten een veelvoud zijn van de roostereenheid; afwijkingen altijd in overleg met de redacteur/vormgever.
  • Beelden hebben een natuurlijke, professionele, heldere, vriberende uitstraling en zijn uit het dagelijkse leven gegrepen—natuur, mensen, dieren, architectuur.
  • Geen kunstmatige mis en scences als het u belieft.

Kleurgebruik

  • Standaardtekst in zwart RGB (0/0/0)
  • Tekst op beelden (vistas, panelen, beelden) primair in wit RGB (255/255/255) met een zachte slagschaduw TO DO: specificatie slagschaduw.
  • Randen en horizontale lijnen in #ffd300 (geel).
  • Hyperlinks in #660099 (blauw met een vleug paars).
  • Randen van invoervelden in #cccccc (lichtgrijs).

Fonts

  • Alle fontgroottes in punten.
  • Alle fonts in beelden van de Sun-fontfamilie (Download het Sun-font voor Mac of PC).
  • Font voor schermgebruik (webpagina's) is Verdana 11 (standaard) en Optima 11 (Mac).

Vista

De vista is een horizontaal, panoramisch beeld dat over de volle breedte van de pagina geplaatst wordt. Onder de vista worden optioneel twee tot drie subpanelen geplaatst die gezamelijk—inklusief de tussenruimtes—dezelfde breedte hebben als de vista.

  • Vista afmeting is 672x192 (28x8 eenheden).
  • Titelfont is Sun Black 48.
  • Subtitel (boven de titel) is Sun Regular 24.
  • Boxtekst is Sun Bold 12.
  • Vista heeft afgeronde hoeken met een radius van 6.

Twee kleine subpanelen

  • Subpaneelgrootte is 192x192 (8x8 eenheden).
  • Tussenruimte tussen panelen is 12 (0.5 eenheden).
  • Topstrip is 192x24 (8x1 eenheden). Sommige beelden lopen soms dor in deze ruimte voor visueel effect.
  • Subpaneel heeft afgeronde hoeken met een radius van 6.
  • Witruimte voor tekst is rondom 24 (1 eenheid).
  • Bovenste deel subpaneel:
    • Grootte 192x84 (8x2.5 eenheden).
    • Font is Sun Black 24.
    • Baseline onderste regel en onderkant is 12.
  • Onderste deel subpaneel:
  • Grootte 192x84 (8x2.5 eenheden).
    • Baseline onderste regel en onderkant is 24.


Eén groot subpaneel

  • Grootte is 264x192 (11x8 eenheden).
  • Tussenruimte tussen panelen is 12 (0.5 eenheden).
  • Topstrip is 192x24 (8x1 eenheden). Sommige beelden lopen soms dor in deze ruimte voor visueel effect.
  • Subpaneel heeft afgeronde hoeken met een radius van 6.
  • Witruimte voor tekst is rondom 24 (1 eenheid).
  • Bovenste deel subpaneel:
    • Grootte 264x84 (11x2.5 eenheden).
    • Font is Sun Black 24.
    • Baseline onderste regel en onderkant is 12.
  • Onderste deel subpaneel:
    • Grootte 264x84 (11x2.5 eenheden).
    • Baseline onderste regel en onderkant is 24.

Vermijd het gebruik van HTML

  • Vermijd het gebruik van ruwe HTML in de blog of Wiki omdat dit vaak ernstige layoutproblemen veroorzaakt.
  • Indien je genoodzaakt bent toch HTML te gebruiken:
    • Gebruik correcte en foutloze HTML (verifieer!).
    • Sluit de HTML-tags altijd af.
    • Voorkom layoutproblemen.
    • Gebruik uistsluitend kleine letters voor HTML-code.
    • Gebruik alleen koppen zoals beschreven in de Hulpdocumenten.
    • Gebruik bij beelden altijd de alt, width en height standaarden.
    • Gebruik bij vistas in de weblog de onderstaande en correcte HTML:
<div id="vista">
 <img src="filename" width="672" height="192" alt="description" />
 </div>

Blog

Raadpleeg de WordPress Codex voor hulp inzake het gebruik van Aloha's weblog.

  • Gebruik de ingebouwde editor voor aanmaak en onderhoud van de inhoud.
  • Gebruik uitsluitend h1 en h2 voor kopregels.

Wiki

Raadpleeg de "MediaWiki Help:Starting a new page" voor hulp bij het aanmaken en wijzigen van Wiki-paginas.

  • Gebruik de ingebouwde bewerker voor het bewerken van inhoud.
  • Voorkom ruis in de paginahistorie door Show preview te gebruiken totdat je tevreden bent met het resultaat; sla dan pas de pagina op met Save page.

CSS

  • Containerbreedte is 672 (28 eenheden); alle inhoud moet hierbinnen passen.
  • Containerhoogte is variable, afhankelijk van de inhoud.
  • Centreren optioneel de inhoud met margin 0px auto;.
  • Achtergrondkleur wordt bepaald met een repeterend achtergrondbeeld in img/nav/bg.png, en wel alsvolgt:
    • background-position:top left—begin in de linkerbovenhoek; en
    • background-image:url(img/nav/bg.png)—gebruik deze beelbron en
    • background-repeat:repeat-x;—herhaal dat beeld over de x-as.

Photoshop Document (.PSD) Files

  • Contacteer Martien voor de Photoshop-sjablonen.
  • Alle Photoshop-documenten bieden hulplijnen voor het juist snijden.
  • Gebruik de Control-; snelkoppeling om deze snijhulplijnen te tonen of te laten verdwijnen.
  • Alle Photoshop-bestanden gebruiken benoemde lagen voor eenvoudig onderhoud en begrip.