Web. TU Delft. Huisstijlrichtlijnen

Maat: px

Weergave met pagina beginnen:

Download "Web. TU Delft. Huisstijlrichtlijnen"

Anja Wouters
10 jaren geleden
Aantal bezoeken:

1 TU Delft Web TU Delft Huisstijlrichtlijnen

2 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

Tabblad varianten 10 Tabblad nieuws / agenda 11 Tabblad quote /

3 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 Tahoma 13 px vetgedrukt abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

Enige uitzondering hierop is de eerste alinea in de content, die wordt getoond in 13px en bold.

4 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.

5 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: Meta + zoek + logo 60px Header 240px / 180px / 120px Menu Content Content Content 450px 225px 225px Footer 960px

De breedte van de templates zijn altijd 960px en gecentreerd.

6 4 Template vervolgpagina s Vervolg pagina: Meta + zoek + logo 60px Header 240px / 180px / 120px Menu Submenu Content Content 180px 465px 225px Footer 960px

7 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: 465px Menuitem op een een geselecteerde subpagina: Mouse-over menuitem op de homepage: Mouse-over menuitem op een subpagina: 20px border = 1px

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.

8 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: px px px Niets geselecteerd: 180px Mouse-overs:

Het actieve hoofdniveau heeft altijd 90% opacity van cyaan.

9 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 Header 60 90px 90px 180px 240px 780px Header 60 pixels 60px 180px 60px 20px 20px Header 30 pixels

Enige uitzondering is dat als een diep gelegen pagina extra aandacht verdient de 60 pixel versie gebruikt mag worden.

10 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. De hoogte is altijd. De titel in het tabblad is Bookman Old Style 14px zwart. Het tabblad: Witruimtes: 20px totale hoogte

linker- en rechterkant van de tekst van. De hoogte is altijd.

11 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 vanaf het tabblad en wordt afgesloten met een vlak van hoog waarin een link staat om naar een overzicht te gaan. Tabblad blok met meerdere items: Witruimtes: Tabblad blok met 1 item: 225px Opinie/Blog/Huh? tabblad blok op homepage altijd 60px hoog: 60px 480px

De eerste lijn begint altijd vanaf het tabblad en wordt afgesloten met een vlak van hoog waarin een link staat om naar een

12 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: 90px actief 50px 225px

Een actief item wordt getoond in het informatiegedeelte en krijgt een groene arcering + tekst om aan te geven dat

13 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. Quote / reactie blok margins: Quote / reactie blok foto afmeting: 70px 70px

ballon. Dit blok is bedoeld als mensen een mening geven op de site.

14 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 Promobanner in rechterbalk Actieve blogger in blogblok

15 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

De dynamische opsomming kenmerkt zich door een zwart icoon met een plus of min teken erin

16 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

Hieronder staan de verschillende formaten beschreven per onderdeel.

17 15 Kleur In de website worden de kleuren gebruikt uit de offline huisstijl. Hier worden de heximale codes gegeven voor online gebruik. Hoofdkleuren: # 1c9dd9 # # ffffff Steunkleuren: # 233e81 # # 0a4a7b # # 099eb6 # b84f95 # bbc732 # 769bb7 # 6dbea9 # 7ebfd0 Arcering:

Hoofdkleuren: # 1c9dd9 # 000000 # ffffff Steunkleuren: # 233e81 # 015152

Vergelijkbare documenten

edenspiekermann_ hva Stijlgids HvA responsive website

edenspiekermann_ hva Stijlgids HvA responsive website April 2014 Versie 1.0 HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 2 Inhoud Introductie 3 Concept webstijl 4 3-koloms grid homepage