UX elementen
De Excerpt wordt de inleiding van de pagina. De inleiding is een korte samenvatting van de belangrijkste informatie van de pagina. De eerste twee zinnen van de excerpt is wat Google toont in zoekresultaten onder de paginatitel.
Tekst en koppen
Nadat je een titel en excerpt hebt ingevuld, kun je tekst gaan toevoegen. Gebruik de textmodule om tekst te plaatsen en gebruik enkel 1 of twee kolommen (in de row: 4e icoontje van links).
Om de teksten beter leesbaar te maken (om beter te scannen) gebruik je kop 2 en kop 3. Op detailpagina’s worden hiermee ook de inhoudsopgave automatisch toegevoegd.
Je hoeft geen lettertype, -grootte en kleuren te kiezen, dit wordt (middels het thema-pakket van de website) al voor jou ingesteld. Wel moet je hier rekening mee houden als je naast de Library website een andere webomgeving inricht. Meer informatie over lettertypes, -groottes en kleuren vind je verderop op de pagina.
Accentblok oranje (call-to-action)
Een accentblok is optioneel. Deze zet je in twee scenario’s in:
- Om de belangrijke ‘click’ uit te lichten, bijvoorbeeld een link naar de tool waar de pagina over gaat.
- Om een belangrijke, vaak tijdelijke, mededeling uit te lichten.
Een accentblok staat daarom in de regel altijd bovenaan de pagina. Gebruik het accentblok spaarzaam. Hoe vaker toegepast in de site, des te minder deze opvalt.
Buttons en hyperlinks
Een pagina heeft meestal maar één primaire call-to-action. Maak hiervan een oranje call to action (zoals hierboven) of een button. Zijn er meerdere links die je wilt uitlichten, gebruik dan een primaire of secundaire button-stijl, gewone hyperlinks of maak er een lijst van, zoals op landingspagina’s.
Linklijsten bestaan uit knoppen, met de linklijst preset. Wil je nog een link toevoegen om te verwijzen naar een andere landingspagina of een overzicht van meer links, dan gebruik je de linklijst more button preset.
Accentblok blauw (call-to-action)
Dit accentblok zet je alleen in als tweede accentblok, dus als er al een oranje accentblok aanwezig is. Dit blauw accentblok staat verderop de pagina. Je zet nooit een blauw accentblok dicht bij een oranje blok. Vuistregel: er is altijd maar één accentblok in beeld, ook als je scrollt.
Tekst highlight
Gebruik de grijze achtergrond achter tekst om een of twee paragrafen tekst te accentueren. Doe dit alleen op pagina’s met veel tekst. Korte pagina’s hebben deze accentuering niet nodig. Vuistregel: er staat altijd maar één aandachttrekkend onderdeel in beeld terwijl je scrollt: een accentblok, een primaire button, een tekst higlight.
Toggles
Hoe gebruik je toggles?
Gebruik een Toggle voor veelgestelde vragen of om veel informatie compact weer te schrijven. Plaats de toggles onderaan je pagina.
Titel bij de toggles
Hoe gebruik je toggles?
Gebruik een Toggle voor veelgestelde vragen of om veel informatie compact weer te schrijven.
Zet minimaal drie toggles in
Zet minimaal drie toggles in en begrens het tot circa acht. Toch meer toggles? Overweeg toggles onder te verdelen met een kop erboven.
Ik moet veel informatie kwijt
Vermijd het opsluiten van lange stukken tekst in een toggle, dat is niet gebruiksvriendelijk. Verwerk de informatie in de pagina, kort het in of zet het op een andere pagina.
Lettertype en -grootte
Binnen de UM worden drie lettertypes gebruikt: De Thesis Sans (van de Nederlandse letterontwerper Lucas de Groot) voor al het druk- en printwerk en de UM website, de Verdana voor alle andere digitale uitingen en brieven en de Calibri voor PowerPoint presentaties. Voor meer uitleg, kun je terecht op de UM huisstijlpagina over typografie.
De basiselementen van de UM-huisstijl, zoals het logo, de endorsed A-merken en de namen van de organisatieonderdelen zijn standaard in dit lettertype uitgevoerd. Het is aan te bevelen om de Thesis Sans zo veel mogelijk te gebruiken want zoals het logo en de kleurstelling voor directe herkenbaarheid zorgen, veroorzaakt typografie een soort onderliggende overal aanwezige UM herkenbaarheid. Aan typografie dient minstens zoveel aandacht te worden besteed als aan vorm, kleur en beeld. Daarom hebben we er voor gekozen om voor de Library website een lettertype te gebruiken dat overeenkomt met Thesis Sans en voldoet aan de webstandaarden: Open Sans van Google.
Standaardteksten en koppen
Het is aanbevolen om een minimale grootte van 16px te hanteren, ook om er voor te zorgen dat de teksten (en andere delen van de website) goed worden weergegeven in mobiele browsers. Daarnaast hanteren we een lijnhoogte van 1.4em.
Voor de koppen (H1, H2, enz.) hanteren we volgende formaten:
(1.200 Minor Third scale op typescale)
H1 Kop
font-weight: 600
font-size: 2.98rem
color: #001c3d
line-height: 1em
H2 Kop
font-weight: 600
font-size: 2.48rem
color: #001c3d
line-height: 2em
H3 Kop
font-weight: 600
font-size: 2.07rem
color: #001c3d
line-height: 1em
H4 Kop
font-weight: 600
font-size: 1.72rem
color: #001c3d
line-height: 1em
Quotes
Wanneer je quotes van anderen wilt gebruiken in je tekst heb je een tweetal mogelijkheden:
Alleen de quote
Dit is een stuk tekst, die je mbv de visual editor kunt voorzien van een blockquote (of met <blockquote> html code). Je typt de quote tussen aanhalingstekens en je voegt de naam (en functie) toe, gescheiden door een – van de quote. Dergelijke quotes kun je ook in lopende teksten zetten.
“Whitespace is like air: it is necessary for the design to breathe.” – Wojciech Zieliński, product designer at Adobe
Quote met foto
Dit is een aparte module, de “testimonial”. Vul de betreffende velden in
- de auteur (diegene die de quote gaf)
- zijn/ haar functie
- zijn/ haar werkgever
- in de body zet je de quote, ook weer tussen aanhalingstekens
“Whitespace is like air: it is necessary for the design to breathe.”
Kleuren
De standaardkleuren van de UM huisstijl voldoen niet aan het aanbevolen contrast (WCAG richtlijnen/ contrastchecker), daarom hanteren we binnen de UB aangepaste kleuren op basis van de huisstijl.
Tekstkleur
Voor de bodytekst
Hex: #333
RGB: 51, 51, 51
Donkerblauw
Hoofdkleur, ook te gebruiken als kleur voor titels
Hex: #001c3d
RGB: 0, 28, 61
Oranje
Accentkleur, voor knoppen, tekstblokken
Hex: #D2460F
RGB: 210, 70, 15
Lichtblauw
Accentkleur 2
Hex: #007FAD
RGB: 0, 127, 173
Logo
Webform test
Canvas support
PebblePad support
Mediasite support