TU Delft TU Delft Web Huisstijlrichtlijnen
Index 1
Broodtekst
2
Titels
3
Template homepage
4
Template vervolgpagina’s
5
Hoofdmenu
6
Submenu
7
Headers
8
Tabblad
9
Tabblad varianten
10
Tabblad nieuws / agenda
11
Tabblad quote / reactie
12
Vaandel
13
Opsommingen
14
Formaten fotografie en video
15
Kleur
1 Broodtekst De Broodtekst van de website wordt getoond in het lettertype Tahoma en is 11px normaal. Enige uitzondering hierop is de eerste alinea in de content, die wordt getoond in 13px en bold.
Tahoma 11 px normaal abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !@#$%^&*()
Tahoma 13 px vetgedrukt abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !@#$%^&*()
2 Titels De titels in de pagina worden getoond in het lettertype Bookman Old Style. In de website worden 3 soorten titels gebruikt. De H1, H2 en H3. De H1 en H3 zijn altijd zwart en de H2 is altijd blauw.
3 Template homepage Er bestaan 2 soorten templates. Een voor de homepage en 1 voor de vervolgpagina’s. De breedte van de templates zijn altijd 960px en gecentreerd.
Homepage: 60px
Meta + zoek + logo
240px / 180px / 120px
Header
Menu
Content
450px
30px
Footer
960px
30px
Content
Content
225px
225px
30px
4 Template vervolgpagina’s
Vervolg pagina: 60px
Meta + zoek + logo
240px / 180px / 120px
Header
Menu
Submenu
30px
Content
180px
Content
465px
30px
225px
30px
Footer
960px
5 Hoofdmenu
Het hoofdmenu bestaat uit tabbladen (zie hoofdstuk 7). Als een menu-item niet geselecteerd is, staan het tabblad altijd omhoog en vallen over de header heen. In geselecteerde staat valt het tabblad naar beneden en verandert in een wit tabblad. Bij mouse-over heeft elke tabblad een uitklapmenu. De menuitems in het uitklap menu zijn in Tahoma 12px zwart. De hoogte van de menubalk is 30 px zoals aangegeven in hoofdstuk 3 en 4. De ruimte tussen de menuitems is flexibel en moet altijd vallen binnen 465px en uitgelijnd zijn op het content vl;ak van de vervolgpagina’s.
Niets geselecteerd: 10px
465px
Menuitem op een een geselecteerde subpagina: 10px
Mouse-over menuitem op de homepage:
Mouse-over menuitem op een subpagina:
20px
border = 1px
6 Submenu Het submenu vormt zich als een kruimelpad. Nadat er gekozen wordt voor een subniveau wordt het hoofdniveau verlaten en wordt het subniveau automatisch een hoofdniveau. Het actieve hoofdniveau heeft altijd 90% opacity van cyaan. Voorgaande hoofdniveaus beginnen bij 70% opacity en lopen in stappen van 10% naar beneden. Bij mouse over verandert de witte tekstt in zwarte tekst en de blauwe pijl in een witte pijl. Bij het subniveau wordt de reeds zwarte tekst underlined.
Niets geselecteerd:
Niets geselecteerd:
10px 10px 10px
10 10 10 px px px
Niets geselecteerd:
30px
180px
Mouse-overs:
7 Headers
De header bestaat in 3 verschillende hoogtes. Een 90 pixel versie, een 60 pixel versie en een 30 pixel versie. De 90 pixel versie mag alleen gebruikt worden op de homepage. De 60 pixel is ontworpen voor landingpagina’s en de 30 pixel versie voor de diepst gelegen pagina’s. Enige uitzondering is dat als een diep gelegen pagina extra aandacht verdient de 60 pixel versie gebruikt mag worden. De tekst in het zwarte vlak is altijd Bookman Old Style 18px wit. De 90 pixel versie heeft 3 regels, de 60 pixel versie 2 regels en de 30 pixel versie 1 regel tekst.
Header “90 pixels” 30px
90px 180px
Header “60” 90px 30px
30px
240px 780px
Header “60 pixels” 30px 60px 180px 60px 30px
20px 20px
Header “30 pixels” 30px 30px 30px 30px
10px
8 Tabblad Het tabblad heeft geen vaste breedte. De breedte wordt gevormd door een witruimte aan te houden aan de linker- en rechterkant van de tekst van 10px. De hoogte is altijd 30px. De titel in het tabblad is Bookman Old Style 14px zwart.
Het tabblad:
Witruimtes: 10px 20px
10px
10px
10px 10px
totale hoogte 30px
9 Tabblad varianten Er bestaan 2 soorten blokken. Een blok dat meerdere items bevat en een blok dat bestaat uit 1 item. Wanneer een blok uit meerdere items bestaat dan worden de items gescheiden door middel van een lijn. De eerste lijn begint altijd 10px vanaf het tabblad en wordt afgesloten met een vlak van 30px hoog waarin een link staat om naar een overzicht te gaan.
Tabblad blok met meerdere items:
Witruimtes:
10px 10px
10px 30px 10px 10px
Tabblad blok met 1 item:
225px
Opinie/Blog/Huh? tabblad blok op homepage altijd 60px hoog:
60px
480px
10 Tabblad Nieuws en Agenda De tabbladen nieuws en agenda zijn altijd vaste blokken met vaste hoogtes en breedtes. Het blok bestaat uit een tabblad, een informatiegedeelte en 5 items. Een actief item wordt getoond in het informatiegedeelte en krijgt een groene arcering + tekst om aan te geven dat het item actief is. Als er minder dan 5 items zijn dan blijft de hoogte gelijk en zullen er minder items getoond worden.
Tabblad Nieuws en Agenda:
10px
90px
10px actief
10px 50px 10px
30px
225px
11 Tabblad quote / reactie Dit blok heeft een afwijkende vormgeving dan de rest van de blokken en heeft als karakteristiek de ‘ tekst ballon’. Dit blok is bedoeld als mensen een mening geven op de site.
10px
Quote / reactie blok margins:
10px
30px
Quote / reactie blok foto afmeting:
70px
70px
12 Vaandel
De vaandel is naast het tabblad het tweede stijlelement in de TU website en komt op verschillende plekken terug.
Zoek button 20px
20px
Submit button 20px
20px
Promobanner in content 30px
10px 10px
Promobanner in rechterbalk
Actieve blogger in blogblok
13 Opsommingen Er zijn 2 soorten opsommingen. Een statische- en een dynamische opsomming. De statische opsomming bestaat alleen uit een lijst met een blauw icoon ervoor. De dynamische opsomming kenmerkt zich door een zwart icoon met een plus of min teken erin wat aangeeft dat er content in en uitgeklapt kan worden.
Statische opsomming
Dynamische opsomming
14 Formaten fotografie en video Het gebruikte beeldmateriaal en videomateriaal bij bepaalde onderdelen in de site zijn gebonden aan vaste formaten. Hieronder staan de verschillende formaten beschreven per onderdeel.
Projecten- en nieuwsoverzicht:
Medewerkersprofiel foto:
90px 150px
180px
Nieuws-, agenda-, blog blok: 150px 70px
Zoekresultaat medewerker:
70px
100px
Faculteitsgebouw:
100px
200px
Video: 70px
120px
200px
15 Kleur
In de website worden de kleuren gebruikt uit de offline huisstijl. Hier worden de heximale codes gegeven voor online gebruik.
Hoofdkleuren:
# 1c9dd9
# 000000
# ffffff
Steunkleuren:
# 233e81
# 015152
# 0a4a7b
# 068691
# 099eb6
# b84f95
# bbc732
# 769bb7
# 6dbea9
# 7ebfd0
Arcering:
