4 2.1 Woord- en beeldmerk Typografie basis Typografie online Constructie vlakken 16

Transcriptie

1 Huisstijlregels

2 Inhoudsopgave hoofdstuk pagina 1 Inleiding Algemeen Contact Uitstraling 3 2 Richtlijnen logo Woord- en beeldmerk Richtlijnen logo Engelstalige logo Logo voor kleine toepassingen en gevels Afzenders 6 3 Pay off 7 4 Kleur 8 5 Typografie Typografie basis Typografie print 10 6 Online richtlijnen Typografie online 11 7 Iconen 13 8 Stramien Constructie vlakken Vlakverdeling A Vlakverdeling B Ontwerpen over meerdere 18 pagina s 9 Fotografie Papiersoorten Papier kant-en-klaar drukwerk Papier halfproducten 20 2

3 1 Inleiding 1.1 Algemeen In dit huisstijlhandboek van Hogeschool Rotterdam vind je alle afspraken over onze visuele identiteit. Uitgangspunt is dat alle vormgevers die voor de hogeschool werken, consequent de richtlijnen van dit handboek toepassen. Op deze manier bouwen we samen aan een krachtig en solide imago van onze hogeschool, met respect voor onderlinge verschillen. 1.2 Contact Heb je tijdens het ontwikkelen van producten vragen, neem dan contact op met de huisstijlcoördinator van de afdeling Communicatie ). De huisstijlcoördinator kan uitzonderingen toestaan voor bepaalde producten. 1.3 Uitstraling De visuele identiteit is ontwikkeld vanuit de positionering van Hogeschool Rotterdam: Hogeschool Rotterdam is een praktijkgericht kennisinstituut met opleidingen, projecten en onderzoek in de meest ondernemende regio van Nederland. Hogeschool Rotterdam onderscheidt zich door de doordachte wisselwerking met deze regio en haar Rotterdamse wortels; daadkrachtig, direct en met lef. In deze setting daagt Hogeschool Rotterdam studenten, medewerkers, bedrijven en instellingen uit zichzelf te overtreffen. Zo verrijken we voortdurend individuen en de Rotterdamse beroepspraktijk. Deze positionering is vertaald naar de volgende criteria voor de visuele identiteit: Bevlogen Krachtig Autoriteit Verbinding levendige en aanstekelijke verbeelding van leven, studeren en werken op Hogeschool Rotterdam. keuzes, samenhang, solide, lef, direct, duidelijk, gestructureerd. geloofwaardig als kennisinstituut, kwalitatief, doordacht, praktijkgericht. met de stad, de regio, organisaties, speerpunten en ontwikkelingen. Dit leidt tot zoveel mogelijk kansen voor alle Rotterdammers. 3

4 2 Richtlijnen logo 2.1 Woord- en beeldmerk Het logo van Hogeschool Rotterdam bestaat uit een aantal elementen: De HR (beeldmerk). De naam Hogeschool Rotterdam (woordmerk). Het herkenbare vlak met afgeronde hoeken en rechtsonder een hoek van 90 graden. 2.2 Richtlijnen logo Logo alleen in rood en wit toepassen. Rood logo met witte letters altijd op een witte ondergrond plaatsen. Wit logo met rode letters altijd op een gekleurde ondergrond of foto plaatsen, let hierbij op voldoende contrast zodat de vorm van het logo goed zichtbaar blijft. De minimale afstand van items tot het logo of het logo tot de rand = 1/3 keer de breedte van het logo. 1/3 keer x x Rood logo in wit vlak Wit logo in gekleurd vlak 4

5 2.3 Engelstalige logo 2.4 Logo voor kleine toepassingen en gevels Voor uitzonderlijke toepassingen, als de naam in het logo te klein en onleesbaar wordt, is er een variant van het logo gemaakt. Dit logo mag ook worden gebruikt op gevels, in mobiele applicaties en op give-aways. 5

6 2.5 Afzenders Om herkenbaarheid van de hogeschool te versterken, worden de afzenders als volgt bij het logo geplaatst: Tekstopbouw van onderaf. De officiële afzenders worden met beginkapitalen geschreven. De afzender mag zowel links als rechts naast het logo geplaatst worden. Afzender is een instituut, dienst, Transfergroep of kenniscentrum. Typografie in het zwart. Uitzondering geldt voor de Transfergroep, waarbij gebruik wordt gemaak van cyaan. En in het Engelstalige logo staat Rotterdam University of Applied Sciences in het rood. Instituut voor Commercieel Management Instituut voor Commercieel Management 1/3 keer x x Kenniscentrum Talentontwikkeling Transfergroep Post-hbo opleidingen, Advies & Onderzoek 6

7 3 Pay off 1/3 keer x 1/3 keer x 1/3 keer x Gebruik de pay off (Overtref jezelf / Exceed Expectations) alleen vanuit de bronbestanden. Op de website vind je een link om de Nederlandse of Engelse pay off te downloaden. De pay off moet verplicht op elk HR-product minimaal één keer geplaatst worden. Let op: logo en pay off mogen alleen gebruikt worden met toestemming van Hogeschool Rotterdam. 7

8 4 Kleur Rood is de primaire kleur en de verbindende factor in alle communicatie van Hogeschool Rotterdam. De secundaire kleuren zijn bedoeld om de uitstraling meer ingetogen (blauw en grijs) of juist jonger en actiematiger (cyaan) te maken. Altijd in combinatie met het rood. Alleen de primaire en secundaire kleuren worden gebruikt om vlakken mee te maken. De accentkleuren worden gebruikt voor kleine tekstaccenten (geel) en markeringen (de afgeleiden van rood en cyaan). Primair PMS 193 R204 G0 B51 C 0 M 100 Y 55 K 12 WEB #cc0033 RAL 3020 Secundair PMS 2748 R0 G51 B153 C 100 M 85 Y 0 K 10 WEB # PMS Cool Gray 8 R153 G153 B153 C 0 M 0 Y 0 K 56 WEB # CYAAN R0 G155 B255 C 100 M 0 Y 0 K 0 WEB #0099ff Accent PMS 109 R255 G204 B0 C 0 M13 Y 100 K 0 WEB #ffcc00 25% van PMS 193 R247 G217 B225 WEB #f7d9e1 25% van Cyaan R197 G231 B241 WEB #c5e7f1 8

9 5 Typografie 5.1 Typografie basis Basis Open sans abcdefghijklm nopqrstuvwxyz Actie en accent Reklamescript (120% horizontaal geschaald) abcdefghijklm nopqrstuvwxyz Web- en schermfont Open Sans abcdefghijklm nopqrstuvwxy z

10 5.2 Typografie print Kop font: Open Sans Bold corps: 15 interlinie: 22,5 kleur: zwart Ondertitel font: Open Sans Regular corps: 10,5 interlinie: 15,75 kleur: zwart Intro font: Open Sans Light corps: 12 interlinie: 18 kleur: zwart, 56% Tussenkop font: Open Sans Bold corps: 10,5 interlinie: 15,75 kleur: zwart witregel toevoegen tussen tussenkop en bodycopy Subkop font: Open Sans Bold corps: 9 interlinie: 13,5 kleur: vrij binnen huisstijlkleurenpalet Body font: Open Sans Light corps: 9 interlinie: 13,5 kleur: zwart Body cursief font: Open Sans Light italic corps: 9 interlinie: 13,5 kleur: zwart Actiematige kopregel Reklamescript regular 120% horizontaal geschaald corps: vrij Markering markering rood: 25% van PMS 193 markering blauw: 25% van Cyaan Opsomming First option Second option Third option Second option A Second option B Fourth option 1. First option 2. Second option 3. Third option 4. Fourth option Quotes font: Open Sans Light Italic corps: 14 interlinie: 21 markering rood: 25% van PMS 193 markering blauw: 25% van Cyaan Markering vlakken van quotes 75% van primaire of secundaire kleur Afzender van quotes font: Reklamescript (120% breder) corps: 13 interlinie: 16 10

11 6 Online richtlijnen 6.1 Typografie online Kop H1 h1 { margin-bottom: 21px; font-family: Open-Sans-Bold; line-height: 42px; color: #242424; Kop H2 h2 { margin-top: 21px; margin-bottom: 21px; font-family: Open-Sans-Bold; font-size: 22px; line-height: 33px; color: #242424; Subkop H2 h2.sub { margin-bottom: 21px; font-family: Open-Sans-Light; font-size: 20px; line-height: 30px; h2.sub.red { color: #F7D9E1; h3.sub.blue { color: #C5E7FL; Tussenkop h3 { margin-bottom: 21px; margin-top: 21px; font-family: Open-Sans-Bold; font-size: 16px; line-height: 24px; color: #242424; Subkop h4 { margin-top: 21px; margin-bottom: 21px; font-family: Open-Sans-Bold; font-size: 14px; line-height: 21px; color: #242424; Body body { margin-bottom: 21px; font-family: Open-Sans; font-size: 14px; line-height: 21px; color: #242424; Body cursief em { font-style: italic; Intro intro { margin-bottom: 21px; font-family: Open-Sans; font-size: 18px; line-height: 27px; color: #242424; 11

12 Arcering Alleen in lopende teksten, niet door elkaar gebruiken red { background-color: #F7D9E1; blue { background-color: #C5E7F1 Unordered list ul { margin: px 0; Links a:link { color: #CC0033; position: relative; text-decoration: none; a:hover { text-decoration: underline; a:active { top: 1px; ul li { list-style: none; padding-left: 25px; background: transparent url(bullet.gif) no-repeat left 5px; line-height: 21px; Ordered list ol { margin: px 0; a:visited { color: #974C5F; Blockquote blockquote { margin-bottom: 21px; margin-top: 21px; font-family: Open-Sans- LightItalic; font-size: 24px; line-height: 36px; ol li { line-height: 21px; blockquote.red { color: #F7D9E1; blockquote.blue { color: #C5E7FL; 12

13 7 Iconen De beeldtaal van de iconen moet altijd robuust zijn. Dikke lijnen en volle vormen typeren deze stijl. Bij de ontwikkeling van nieuwe iconen dient deze stijl dan ook gehanteerd te worden. 13

14 8 Stramien 8.1 Constructie vlakken Vlakken worden geconstrueerd door aan een rechthoek een extra ankerpunt toe te voegen op de horizontale lijnen. Daardoor ontstaat een zeshoek die aan de bovenkant en onderkant een pijl naar de omgeving vormt (wisselwerking). In paragraaf 6.5 staan de richtlijnen voor ontwerp over meerdere pagina s. De ankerpunten kunnen vrij in het vlak worden geklikt, zolang b hoger is dan a en c. En e lager dan d en f. Probeer te voorkomen dat er een te scherpe of te flauwe hoek ontstaat. Plaats b en e zodanig dat de diagonalen niet steiler dan 45 graden en niet vlakker dan 7 graden worden. Zorg dat de punten asymmetrisch geplaatst worden. Posities voor het logo zijn vast: linksboven of rechtsonder. Houd altijd 1/3 keer de breedte van het logo boven en onder het logo vrij. < 7 > 45 b a c d e f 1/3 keer x 14

15 Teksten Teksten niet roteren en niet schuin mee laten lopen met de lijnen van de vlakken. Op voorpagina s en posters mag een gekleurd vlakje worden toegevoegd t.b.v. een accenttekst: een vrije vierhoek met een oppervlakte van maximaal 20% van de foto. Ontwerpen over meer pagina's De vlakverdeling mag ook over meer pagina s worden toegepast. Per pagina op de horizontale lijnen maximaal één punt aan de bovenkant en één punt aan de onderkant van het vlak. Niet twee stijgende of twee dalende lijnen na elkaar. Zorg voor een zaagtandvorm. Richtlijnen voor gebruik foto s in vlakken die doorlopen over meer pagina s: één foto per pagina. Per spread of pagina mag in de foto s één gekleurd vlakje worden toegevoegd t.b.v. een accenttekst: een vrije vierhoek met een oppervlakte van maximaal 20% van de foto. Don't 15

16 8.2 Vlakverdeling A VOORBEELD SUBHEADING VOORBEELD SUBHEADING Teksten niet roteren en niet schuin mee laten lopen met de lijnen van de vlakken. Op voorpagina s en posters mag een gekleurd vlakje worden toegevoegd t.b.v. een accenttekst: een vrije vierhoek met een oppervlakte van maximaal 20% van de foto. 16

17 8.3 Vlakverdeling B VOORBEELD SUBHEADING 17

18 8.4 Ontwerpen over meerdere pagina s Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate. De vlakverdeling mag ook over meerdere pagina s worden toegepast. Per pagina op de horizontale lijnen maximaal één punt aan de bovenkant en één punt aan de onderkant van het vlak. Niet twee stijgende of twee dalende lijnen na elkaar. Zorg voor een zaagtandvorm. Richtlijnen voor gebruik foto s in vlakken die doorlopen over meerdere pagina s: één foto per pagina. Per spread of pagina mag in de foto s één gekleurd vlakje worden toegevoegd t.b.v. een accenttekst: een vrije vierhoek met een oppervlakte van maximaal 20% van de foto. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 18

19 9 Fotografie Er wordt gewerkt aan een nieuw beeldbeleid. Zodra dit gereed is, zal het worden toegevoegd. 19

20 10 Papiersoorten 10.1 Papier kant-en-klaar drukwerk Voor alle gedrukte materialen van Hogeschool Rotterdam waarop niet hoeft te worden geprint, gebruiken we de papiersoort houtvrij silk MC. In principe gebruiken we de volgende gramsgewichten. Omslagen grams. Uitnodigingen 250 grams. Binnenwerk 135 grams. Flyers grams. Folders grams. Programma s grams. Visitekaartjes 250 grams. Let op! Bij producten voor het buitenland heeft de keuze voor het gramsgewicht gevolgen voor het verzenden. In die gevallen kan van deze gramsgewichten worden afgeweken. Verder gelden de volgende regels: Standaard worden alle MC-producten gevernist. 170 Grams papier en hoger moet worden gerild Papier halfproducten Voor alle gedrukte materialen van Hogeschool Rotterdam waarop intern moet worden geprint, maken we gebruik van de de volgende papiersoorten en gramsgewichten: Algemeen 120 grs. Signature Vellum wit, vaste onderdelen bedrukken met lasergeschikte inkten. Briefpapier, Navigator (Proost&Brandt) 90 grams. Enveloppen, Bankpost (Velpa) grams. Readeromslagen, Hermes (Proost&Brandt) 160 grams. 20