Oefenweb Style Guide

De Oefenweb Style Guide is een tool om de reproduceerbaarheid en consistentie van alle visuele uitingen mogelijk te maken. De beschreven punten zijn meer richtlijnen dan regels – bij twijfel of vragen kan je contact opnemen met .

Stijl

Uitdrukking

Oefenweb is een spin-off bedrijf van de Universiteit van Amsterdam sinds 2009, en sinds 2013 heeft Cito een minderheidsbelang in Oefenweb. Hoewel het bedrijf een onafhankelijke partij is, zijn de banden met de acedemische wereld sterk aanwezig. Commerciële uitingen mogen direct zijn, maar belangrijk blijft de aandacht voor het academische en onderwijsperspectief.

Dit is Oefenweb. Wij maken webapplicaties voor adaptief onderwijs.

keywords/voice words: adaptief, innovatief, webapplicaties, educatief, e-learning, spin-off, gamification

Koppen/headlines zijn opgebouwd uit twee delen. Het belangrijkste onderdeel is de tagline, die de centrale boodschap van het medium uidraagt. Dit kan een boodschap zijn om een product te omschrijven, maar ook een centraal concept of een specifieke promotie-actie.

Logo

Het Oefenweb logo bestaat uit een beeldmerk (symbool) en een woordmerk met payoff; in principe wordt het logo in volledige vorm gebruikt. Ook het gebruik van alleen het beeldmerk (symbool) wordt toegestaan.

Het logo heeft twee verschijningsvormen: de basisvorm, waarbij het beeldmerk naast het woordmerk is geplaatst; en een alternatieve variant als er weinig horizontale ruimte beschikbaar is, waarbij het woordmerk onder het beeldmerk komt te staan. Om het logo visuele ruimte te geven wordt een minimale afstand tot andere objecten te worden aangehouden: voor het basislogo de x-hoogte van een ‘e’, voor het alternatief de volledige hoogte van de ‘f’, en voor alleen het symbool 25% van de diameter van de cirkel.

Alternatieve versies

Lettertypes

Asap Bold (voor het logo)
Signika (voor titels & grote tekst)
Josefin Sans (alternatief voor titels & grote tekst)
Fira Sans (voor broodtekst)
Brandon Grotesque (drukwerk alternatief voor Josefin Sans)

Asap Bold (700)
Signika
Josefin Sans

Fira Sans
Brandon Grotesque

Kleurenpalet

Oefenweb basis kleurenpalet

Oefenweb thema kleuren

UI kleuren

Kleurenpalet voor de Game UI en andere accenten in visueel ontwerp. Gebaseerd op Flat UI Colors:

flatuicolors.com

Icons

Voor iconen wordt de iconset SS Pika gebruikt; een uitgebreide set van 504 iconen in verschillende categorieen en een duidelijke stijl. Deze iconen zijn beschikbaar als icon font voor gebruik in websites, of als png afbeeldingen voor gebruik op andere plekken.

Bekijk het iconen overzicht Download alle iconen als png (binnenkort)

Layout

Als een opmaak veel elementen of een heldere organisatie nodig heeft, kan gebruik gemaakt worden van het onderstaande gridsysteem. Dit is gebaseerd op 12 kolommen met een modulemaat van 6% en een marge van 2.5% in de breedte. Dit systeem komt voort uit het front-end framework Bootstrap (3.0); gebruik is niet verplicht maar dient als leidraad.

Illustraties

[volgt]

Rekentuin

Productnaam

Rekentuin

Oude logo (deprecated)

Alternatieve versies

Kleurenpalet

Taalzee

Productnaam

Taalzee

Oude logo (deprecated)

Alternatieve versies

Kleurenpalet

Words&Birds

Productnaam

Words&Birds

Oude logo (deprecated)

Alternatieve versies

Kleurenpalet

In gebruik

Email handtekening

Elke medewerker van Oefenweb kan gebruikmaken van dezelfde email handtekening; dit bevat het Oefenweb logo, en 3 knoppen met links naar Oefenweb op sociale netwerken.

Om te handtekening te gebruiken:

Klik op onderstaande knop;
Selecteer alle elementen op de pagina met Ctrl + A (Windows/Linux) of Cmd + A (Mac);
Kopieer alle inhoud met Ctrl + C (Windows/Linux) of Cmd + C (Mac);
In je email programma, ga naar de instellingen voor email handtekening;
Plak alle zojuist gekopieerde inhoud met Ctrl + V (Windows/Linux) of Cmd + V (Mac).
Sla de instellingen op.

Email handtekening