Op de website spreekt Universiteit Antwerpen met de moederstem, of spreekt ze als moeder in naam van een dochter via bv. kleuraccenten op faculteits-, onderzoeks- en opleidingspagina’s.
De website van de Universiteit Antwerpen is uitgewerkt volgens het ‘mobile first principe’.
Enkele belangrijke designprincipes van de website
- Gebruiksvriendelijkheid en gebruikerservaring staan voorop.
- Eenvoud en helderheid dragen bij tot een krachtige uitstraling.
- Grafische elementen komen sterk naar voren.
- Modulair: geen vaste templates meer, maar modules waarmee je op één webpagina een verhaal kan opbouwen.
- Eén component kan verschillende gedragingen vertonen volgens het toestel waarmee de bezoeker surft.
- Typografie: het gekozen basislettertype geeft rust en zekerheid aan de gebruikers.
- Het design houdt rekening met de voorschriften van Anysurfer, het label voor toegankelijke websites. Dit zijn richtlijnen rond lettergrootte, contrasten en kleurgebruik.
Logo
Ergens op de pagina (bij voorkeur bovenaan links) staat het UAntwerpen moederlogo.
We gebruiken bij voorkeur het Nederlandstalige logo, tenzij de tool 100% Engelstalig gebruikt is.
We gebruiken bij voorkeur de vectoriële .svg-file van het logo. Die schaalt het best mee bij inzoomen. Indien dat technisch niet kan, gebruiken we de .png-versie of de .jpg-versie. Download de logopakketten.
Bij een lichte achtergrond wordt de versie met de blauwe letters gebruikt.
Bij een donkere achtergrond wordt de versie met de witte letters gebruikt.
We gebruiken steeds de versie met de gekleurde (rode) ‘U’, geen negatieve (witte) ‘U’.
Kleuren
Naast wit en zwart maken we gebruik van het UAntwerpen-blauw (hex code: #002e65) en het UAntwerpen-rood (hex code: #ea2c38) als kenmerkende kleuren.
Het gebruik van andere kleuren is enkel functioneel. Je kan hiervoor geïnspireerd worden door de facultaire kleuren.
Tekst en lettertype
Voor (web)toepassingen gebruiken we het officiële huisstijlfont van UAntwerpen: ITC Officina Sans.
Dit lettertype kan geïmplementeerd worden door in de <head>-sectie van de toepassing te verwijzen naar de bijhorende stylesheet. Hiervoor kan je deze code gebruiken:
<link rel=”stylesheet” href=”https://use.typekit.net/jam4hxk.css”>
Om de leesbaarheid en toegankelijkheid van onze toepassingen te vergroten, wordt gewone <p>-tekst bij voorkeur getoond op 1rem (16px), conform de UAntwerpen-website en het UAntwerpen-studentenportaal.
URL’s
Webtoepassingen worden maximaal gehost op subdomeinen van uantwerpen.be.
Voorbeelden hiervan zijn:
- https://stroom.uantwerpen.be
- https://aandeslag.uantwerpen.be/
- https://nexustool.uantwerpen.be/
Verwar dit niet met verkorte url’s van uantwerpen.be zoals bijvoorbeeld
https://www.uantwerpen.be/scholen.
Dit zijn snelle links naar pagina’s op de UAntwerpen-website, maar deze worden niet gebruikt om losstaande webtoepassingen op te hosten.
Mobile First
(Web)Toepassingen gericht op externen (studiekiezers, alumni, ouders, …) en studenten worden steeds mobile first ontwikkeld.
(Web)Toepassingen die enkel op personeel gericht zijn, worden bij voorkeur mobile first ontwikkeld. Voor zeer technisch/administratieve (werk)taken kunnen deze ontwikkeld worden met de bedoeling ze op een desktop of laptop te gebruiken.