De basiselementen zorgen voor de juiste merkuitstraling. Door gebruik te maken van onderstaande elementen wordt de website herkenbaar als UGent.
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.
Hieronder een opsomming van de verschillende kleuren en functies
UGent corporate blauw
(standaard)
UGent corporate geel
(standaard tenzij voor faculteiten)
UGent corporate lichtblauw
(bijvoorbeeld achtergrond button, quote, uitklapelement)
UGent corporate lichtgeel
(bijvoorbeeld meldingen)
Tekst kleur zwart
Datum notatie donkergrijs
Border kleur grijs
Border kleur lichtgrijs
Inactieve elementen grijs
(bijvoorbeeld in datumprikker)
Faculteit Letteren en Wijsbegeerte (LW)
Oranje
Faculteit Recht en Criminologie (RE)
Warm Rood
Faculteit Wetenschappen (WE)
Aqua
Faculteit Geneeskunde en Gezondheidswetenschappen (GE)
Zalm roze
Faculteit Ingenieurswetenschappen en Architectuur (EA)
Mediumhemelsblauw
Faculteit Economie en Bedrijfskunde (EB)
Licht groen
Faculteit Diergeneeskunde (DI)
Paars
Faculteit Psychologie en Pedagogische Wetenschappen (PP)
Warm oranje
Faculteit Bio-ingenieurswetenschappen (BW)
Turquoise
Faculteit Farmaceutische Wetenschappen (FW)
Licht paars
Faculteit Politieke en Sociale wetenschappen (PS)
Groen
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):
Het webfont van de UGent is 'UGent Panno Text'. Zie 4.1 Primair: UGent Panno Text
Gebruik online de volgende gewichten:
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.
Gebruik een H2 om de verschillende onderdelen van een pagina duidelijk van elkaar te onderscheiden en zo de pagina beter 'scanbaar' te maken.
Gebruik H3 om binnen een H2-paragraaf verdere structurele onderverdelingen te maken.
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.
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.
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 lager).
Het is niet mogelijk om nog van studierichting te veranderen eens je hebt gekozen!
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 hoger).
‘Op deze manier kan er een langere quote geplaats worden’
Noteer de datum in Nederlands met volgorde dd-mm-jjjj
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
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.
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)
Hieronder een voorbeeld van de volgende/volgende buttons, deze kunnen ook een inhoudelijke tekst krijgen.
De button-opmaak wordt ook gemaakt om bladeren doorheen pagina's mogelijk te maken.
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 |
Hieronder een voorbeeld van een (on)geordende lijst en een linklijst.
Lijst zonder links:
Link items in een lijst zijn standaard blauw. Ze zijn worden enkel onderlijnd bij mouseover:
Een linklijst met geneste links.
Hieronder voorbeelden van verschillende afbeelding met bijschrift.
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.
Pictogrammen worden ingezet op basis van de Bootstrap Glyphicons set. Voor de bestandstypes gebruiken we pictogrammen van FontAwesome.
Voor aanduiding van bestandstypes (zoals *.docx, *.pdf, *.pptx, *.xlsx) gebruiken we pictogrammen van FontAwesome.
UGent gebruikt Bootstrap glyphicons: http://getbootstrap.com/components/#glyphicons
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).
