Menu

Naar inhoud

Websites

Inloggen NL - EN

3. Basiselementen

De basiselementen zorgen voor de juiste merkuitstraling. Door gebruik te maken van onderstaande elementen wordt de website herkenbaar als UGent.

3.1 Kleur

Kleur is een belangrijk element binnen onze identiteit.

Het kleurenpalet van UGent bestaat primair uit 2 kleuren: UGent corporate blauw en geel.

Gebruik standaard de donkere kleuren en pas in 2e instantie de lichtere variant.

Daarnaast heeft elke faculteit zijn eigen ondersteunende kleur. Die vervangt de corporate gele kleur.

Zwart en grijswaarden werken functioneel en aanvullend.

KLEURSTALEN

Hieronder een opsomming van de verschillende kleuren en functies

 

#1E64C8

UGent corporate blauw

(standaard)

#FFD200

UGent corporate geel

(standaard tenzij voor faculteiten)

#e9f0fa

UGent corporate lichtblauw

(bijvoorbeeld achtergrond button, quote, uitklapelement)

#fffae5

UGent corporate lichtgeel

(bijvoorbeeld meldingen)

#202020

Tekst kleur zwart

#646464

Datum notatie donkergrijs

#CCCCCC

Border kleur grijs

#DDDDDD

Border kleur lichtgrijs

#B4B4B4

Inactieve elementen grijs

(bijvoorbeeld in datumprikker)

#F1A42B

Faculteit Letteren en Wijsbegeerte (LW) 

Oranje 

#DC4E28

Faculteit Rechtsgeleerdheid (RE) 

Warm Rood 

#2D8CA8

Faculteit Wetenschappen (WE)

Aqua 

#E85E71

Faculteit Geneeskunde en Gezondheidswetenschappen (GE) 

Zalm roze 

#6F71B9

Faculteit Ingenieurswetenschappen en Architectuur (EA) 

Grijs blauw

#AEB050

Faculteit Economie en Bedrijfskunde (EB) 

Licht groen 

#825491

Faculteit Diergeneeskunde (DI) 

Paars 

#FB7E3A

Faculteit Psychologie en Pedagogische Wetenschappen (PP) 

Warm oranje 

#27ABAD

Faculteit Bio-ingenieurswetenschappen (BW) 

Turquoise 

#BE5190

Faculteit Farmaceutische Wetenschappen (FW) 

Licht paars

#71A860

Faculteit Politieke en Sociale wetenschappen (PS) 

Groen 

VOORBEELD VAN FACULTAIRE KLEURVARIANT

Een facultaire steunkleur kan ofwel uitgebreid aan bod komen (bijvoorbeeld op facultaire homepagina) ofwel als accentkleur (bijvoorbeeld in een pictogram van een kalender).

Hieronder een voorbeeld van de Faculteit Politieke en Sociale Wetenschappen (PS):

3.2 Typografie

Het webfont van de UGent is 'UGent Panno Text'. Zie 4.1 Primair: UGent Panno Text

Gebruik online de volgende gewichten:

  • UGent Panno Text SemiLight
  • UGent Panno Text Normal
  • UGent Panno Text Medium
  • UGent Panno Text SemiBold

HEADER H1 (PAGINA TITELS)

Gebruik een H1 bij een paginatitel, zoals op een contentpagina of een nieuwsartikel.

De H1 wordt door Google getoond als link op pagina's met zoekresultaten.

Bachelor­opleidingen

HEADER H2 (SUBTITELS)

Gebruik een H2 om de verschillende onderdelen van een pagina duidelijk van elkaar te onderscheiden en zo de pagina beter 'scanbaar' te maken.

Lerarenopleiding

HEADER H3

Gebruik H3 om binnen een H2-paragraaf verdere structurele onderverdelingen te maken.

Wanneer?

INTRODUCTIETEKST

Gebruik op detailpagina’s waar nodig een introtekst om de inhoud van de pagina kort samen te vatten. Dit helpt de gebruiker om te kiezen om al dan niet verder te lezen.

Bacheloropleidingen bestaan uit 180 studiepunten en duren 3 jaar. Aan de universiteit worden enkel academische bachelors aangeboden.

BODY TEKST

Doorlopende tekst is 17px met een regelafstand van 21px.

Dit diploma geeft je rechtstreeks toegang tot de aansluitende master. Wie al een diploma van professionele bachelor heeft, kan via een specifiek schakelprogramma overgaan naar de masteropleidingen.

MELDINGEN

Via de Melding-opmaak kun je een stuk van een tekst of nieuwsbericht subtiel uitlichten.

Om een stuk tekst sterker uit te lichten gebruik je de Quote-layout (zie hoger).

QUOTE

Via de quote-opmaak kun je een stuk van een tekst of nieuwsbericht heel sterk uitlichten.

Om een stuk tekst minder sterk uit te lichten gebruik je de Melding-layout (zie onder).

‘Op deze manier kan er een langere quote geplaats worden’

2-KOLOMS OPSOMMING

Voor wie
Alumni, Studenten, Peroneel
Wanneer
Donderdag 25-05-2015, van 11:00u tot 12:00u
Waar
Het Pand, Onderbergen 1, 9000 Gent
Voertaal
Nederlands
Organisator
Vakgroep Letterkunde, Faculteit Letteren en Wijsbegeerte
Contact
joachim.vanwalleghem@ugent.be
Website
www.taalenletterkunde.ugent.be/permanentevorming

DATUMNOTATIE NL

Noteer de datum in Nederlands met volgorde dd-mm-jjjj

DATUMNOTATIE EN

Noteer de datum in Engels met maand voluit: dd Month jjjj

Links zijn standaard blauw en onderlijnd. De onderlijning verdwijnt bij mouseover.

Links in een lijst na opsommingstekens worden enkel onderlijnd bij mouseover: zie 3.6 Lijst

[Geen tekst]

Links in een link-box

In de rechterkolom van de website kan een link-box komen te staan.

Deze heeft een blauwe achtergrond en om wille van de leesbaarheid zijn de links in de box standaard niet blauw maar zwart. Bij on hover worden ze blauw en onderlijnd.

3.4 Buttons

Er zijn twee varianten. Probeer het aantal (secundaire) buttons op een pagina zo veel mogelijk te beperken.

Primaire button (donkerblauw met witte tekst)

Secundaire button (lichtblauw met donkerblauwe tekst)

BUTTONS

Hieronder een voorbeeld van de volgende/volgende buttons, deze kunnen ook een inhoudelijke tekst krijgen.

PAGINANUMMERING

De button-opmaak wordt ook gemaakt om bladeren doorheen pagina's mogelijk te maken.

3.5 Sorteerbare tabel

Hieronder een voorbeeld van een sorteerbare tabel. Tabel 1 en 2 in dit voorbeeld zijn met elkaar verbonden (A in tabel 1 komt overeen met 2 in tabel 2).

Sorteer op Titel 1 Sorteer op Titel 2
sorteerbaar item B sorteerbaar item 4
sorteerbaar item D sorteerbaar item 3
sorteerbaar item A sorteerbaar item 2
sorteerbaar item C sorteerbaar item 1

3.6 Lijst

Hieronder een voorbeeld van een (on)geordende lijst en een linklijst.

Lijst zonder links:

Ongeordende lijst

  • Eerste lijst item
  • Volgende lijst item
  • Volgende lijst item
  • Volgende lijst item
  • Volgende lijst item
  • Volgende lijst item
  • Volgende lijst item
  • Volgende lijst item
  • Volgende lijst item

Geordende lijst

  1. Eerste lijst item
  2. Volgende lijst item
  3. Volgende lijst item
  4. Volgende lijst item
  5. Volgende lijst item
  6. Volgende lijst item
  7. Volgende lijst item
  8. Volgende lijst item
  9. Volgende lijst item
  10. Volgende lijst item
  11. Volgende lijst item
  12. Volgende lijst item
  13. Volgende lijst item

Link items in een lijst zijn standaard blauw. Ze zijn worden enkel onderlijnd bij mouseover:

3.7 Afbeeldingen

Hieronder voorbeelden van verschillende afbeelding met bijschrift.

Hier is plek voor een bijschrift voor bovenstaande afbeelding.
Hier is plek voor een bijschrift voor bovenstaande afbeelding.
Hier is plek voor een bijschrift voor bovenstaande afbeelding.
Hier is plek voor een bijschrift voor bovenstaande afbeelding.
Hier is plek voor een bijschrift voor bovenstaande afbeelding.

3.8 Uitklapelement

Uitklapelementen worden gebruikt wanneer de gebruiker slechts één of enkele delen van de content van een pagina nodig heeft.

Met uitklapelementen houdt je de pagina beknopt en beter scanbaar. Geef in de titel van het uitklapelement duidelijk aan wat er achter zit. 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

3.9 Pictogrammen

Pictogrammen worden ingezet op basis van de Bootstrap Glyphicons set. Voor de bestandstypes gebruiken we pictogrammen van FontAwesome.

3.10 Favicon

Bovenin het browservenster tonen we het beeldmerk van UGent zonder de letters 'Universiteit Gent'. Dit is een uitzondering op het logo dat anders als één geheel geldt (zie 2.3 Logo).

Naar boven