edenspiekermann_ hva Stijlgids HvA responsive website April 2014 Versie 1.0
HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 2 Inhoud Introductie 3 Concept webstijl 4 3-koloms grid homepage desktop 5 4-koloms grid subpagina s desktop 6 1-koloms grid op mobiel 7 Basisgrid en layout superhome (desktop) 8 Basisgrid en layout 9 Basisgrid en layout 10 Basisgrid en layout 11 Basisgrid en layout subwebsite header (desktop) 12 Basisgrid en layout navigatie (mobiel) 13 Basisgrid en layout superhome (mobiel) 14 Basisgrid en layout opleidingen (mobiel) 15 Basisgrid en layout opleidingen detail (mobiel) 16 Basisgrid en layout opleidingenfilter (mobiel) 17 Basisgrid en layout agendalijst (mobiel) 18 Basisgrid en layout subwebsite (mobiel) 19 Responsive Design 20 Responsive Design > Superhome 21 Responsive Design > Opleidingenpagina 22 Responsive Design > Opleidingenpagina detail 23 Responsive Design > Opleidingenpagina overzicht 24 Responsive Design > Evenementenlijst 25 Responsive Design > Subwebsite 26 Vormgeving 27 Basiskleuren 28 Fonts 29 Tekststijlen 30 Tekststijlen 31 Knoppen > primaire call-to-action 32 Knoppen > primaire call-to-action 33 Knoppen > primaire en secundair call-to-action 34 Hyperlinks 35 Iconenstijl 36 Componenten 37 Hoofdmenu 38 Breedte header 39 Headerbeeld 40 Inspiratiebeelden Header 41 Homepage Opsommingslijstjes 42 43 Nieuwslijsten 44 Banners 45 Bannervoorbeelden 46 Actieblokken desktop > 1/4 kolom en 1/3 kolom 47 Actieblokken > 1/2 kolom 48 Actieblokken > kleurvarianten 49 Basisgrid en layout actieblokken (mobiel) 50 Filtercomponent + info-popup 51 Fold-outs 52 Filterlijst 53 Footer 54 Breedte footer 55 Header subwebsite 56 Paginavoorbeelden 57
HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 3 Introductie In dit document wordt de visuele stijl beschreven van de pagina s en componenten van de nieuwe responsive website van de HvA. De basiselementen die beschreven staan in dit document kunnen gebruikt worden als bouwstenen en richtlijnen voor de visuele huisstijl voor online toepassingen voor de HvA.
HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 4 Concept webstijl De HvA website is een informatierijke omgeving die optimaal toegankelijk moet zijn voor alle beoogde doelgroepen. Het visueel ontwerp draagt hier in belangrijke mate aan bij. Er is daarom een heldere, consistente en moderne webstijl ontwikkeld, die uitnodigt tot interactie en bijdraagt aan een prettige en onderscheidende merkbeleving.
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 5 3-koloms grid homepage desktop De templates van de HvA website op desktopformaat maken gebruik van twee grids: Een ruim opgezet 3-koloms grid speciaal voor homepages met grote bannerafbeelding. Een compacter 4-koloms grid voor alle overige pagina s. Beide grids hebben tussenruimtes van 20 pixels. In beide grids heeft de content dezelfde maximale vaste breedte van 940 pixels. Inclusief de minimale kantlijn van 10 pixels aan de linkeren rechterzijde komt deze breedte op 960 pixels. De pagina s worden gecentreerd in de browser. 300px 20px 300px 20px 300px minimaal 10px 940px minimaal 10px
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 6 4-koloms grid subpagina s desktop 220px 20px 220px 20px 220px 20px 220px minimaal 10px 940px minimaal 10px
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 7 1-koloms grid op mobiel De meeste componenten en fonts op de website hebben dezelfde maten en verhoudingen voor desktop als op mobiel formaat. 10px 300px 10px
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 8 Basisgrid en layout superhome (desktop) 28px 28px 50px 106px 580px 50px 12px 50px 12px 50px 12px 50px 34px 60px 15px 75px 224px 100px 212px
28px Concept webstijl 28px 106px 9 50px Basisgrid en layout homepage (desktop) 55px 328px 383px 60px 15px 75px 418px 44px 25px 100px 212px
Concept webstijl Basisgrid en layout contentpagina (desktop) 28px 28px 50px 55px 216px 106px 10 272px 75px 50px 50px 36px 36px 22px 22px
Concept webstijl Basisgrid en layout contentpagina > lokaties (desktop) 28px 28px 50px 55px 216px 106px 11 272px 75px 15px 25px 15px 15px 15px 15px 3 15px 15px 700px 14px 20px 75px 25px 34px 34px 3 700px 20px
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 12 Basisgrid en layout subwebsite header (desktop) 28px 28px 78px 134px 55px 328px 383px 60px
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 13 Basisgrid en layout navigatie (mobiel) 68px 68px
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 14 Basisgrid en layout superhome (mobiel) 50px 190px 32px 40px 4px 319px 40px 4px 40px 4px 40px 374px 4px 32px 47px 64px 80px 80px 80px 80px 15px
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 15 Basisgrid en layout opleidingen (mobiel) 25px 20px 15px 40px 22px 32px 15px 189px 32px 25px 50px
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 16 Basisgrid en layout opleidingen detail (mobiel) 50px 20px 15px 75px 50px 10px 32px 18px 32px 18px 32px 32px 50px 18px
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 17 Basisgrid en layout opleidingenfilter (mobiel) 20px 15px 40px 13px 19px 10px 19px 13px 88px 60px 15px 40px 50px 60px 60px 13px
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 18 Basisgrid en layout agendalijst (mobiel) 20px 40px 70px 70px 15px 13px 19px 10px 19px 13px 10px 10px 10px 10px 10px 70px 70px 70px 50px 90px 40px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 19 Basisgrid en layout subwebsite (mobiel) 55px 175 px 32px 40px 15px 32px
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 20 Responsive Design Afhankelijk van de schermgrootte verandert de layout van de site door gebruik van stylesheets. Logo + zoeken Header Logo + zoeken Header Voor bezoekers op een smartphone moeten functies die passen bij mobiel gebruik een primaire positie krijgen. Behoeften van mobiele gebruikers zijn vaak anders. Daarom is het ontwerp van een speciale mobiele site aan te bevelen. Voor de mobiele layout wordt alle content teruggebracht naar 1 kolom. Nieuws Agenda Banner Footer Snel naar > Banner Nieuws Agenda Footer + snel naar De hiërarchie van de responsive pagina s wordt bepaald door het belang van de content. De meest belangrijke content van de pagina staat bovenaan. Superhome desktop 4-Koloms Breedte 960 px en breder Sommige navigatie-elementen zijn voor het mobiele formaat anders vormgegeven. Superhome mobiel 1-Koloms Breedte 320 tot 720 px
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 21 Responsive Design > Superhome Van desktop naar mobiel: - Verdwijnt de hoofdnavigatie onder het menu icoon rechtsboven. - Vervalt de groter banner op de headerafbeelding. - Extra component met snel naar items. - Alle content wordt hiërarchisch gestapeld in 1 kolom. >
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 22 Responsive Design > Opleidingenpagina Van desktop naar mobiel: - Vervalt het bannerbeeld. - Verdwijnt de hoofdnavigatie onder het menu icoon rechtsboven. - Het filtercomponent vervalt op mobiel formaat. - Alle content wordt hiërarchisch gestapeld in 1 kolom. > Mobiele menu (hoofdnavigatie)
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 23 Responsive Design > Opleidingenpagina detail Van desktop naar mobiel: - Vervalt het bannerbeeld. - Verdwijnt de hoofdnavigatie onder het menu icoon rechtsboven. - Componenten in de rechterkolom verplaatsen naar het kijk verder lijstje. - Alle content wordt hiërarchisch gestapeld in 1 kolom. >
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 24 Responsive Design > Opleidingenpagina overzicht Van desktop naar mobiel: - Vervalt het bannerbeeld. - Verdwijnt de hoofdnavigatie onder het menu icoon rechtsboven. - Verplaatst het filter van de linker kolom zich onder een knop naast het zoekveld. - De geselecteerde interessegebieden staan naast elkaar. - Alle content wordt hiërarchisch gestapeld in 1 kolom. >
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 25 Responsive Design > Evenementenlijst Van desktop naar mobiel: - Vervalt het bannerbeeld. - Verdwijnt de hoofdnavigatie onder het menu icoon rechtsboven. - Verplaatst het filter van de linker kolom zich onder een knop naast het zoekveld. - De geselecteerde interessegebieden staan naast elkaar i.p.v. onder elkaar. - Alle content wordt hiërarchisch gestapeld in 1 kolom. >
Concept webstijl HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 26 Responsive Design > Subwebsite Van desktop naar mobiel: - Schaalt het bannerbeeld mee naar de breedte van het mobiele scherm. - Komt de titel van de subwebsite op de gekleurde balk te staan. - Verdwijnt de hoofdnavigatie onder het menu icoon rechtsboven. - Alle content wordt hiërarchisch gestapeld in 1 kolom. >
HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 27 Vormgeving Voor vormgeving wordt gebruik gemaakt van een beperkt aantal designelementen om de pagina s hun eigen karakter mee te geven. Deze elementen worden op de volgende pagina s verder beschreven.
Vormgeving HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 28 Basiskleuren Basiskleuren Basiskleuren Zwart, grijs, paars en wit zijn de corporate basiskleuren van de HvA, dit zijn dan ook de kleuren die het meest prominent worden gebruikt op HvAweb. Ondersteunende kleuren Voor banners en expressieve tekstblokken die een call-to-action functie hebben, kan de speciaal gekozen ondersteunende kleur gebruikt worden. Deze groene kleur past goed bij het HvA paars en valt op naast de basiskleuren. LET OP: deze kleur heeft een donkere variatie voor teksten op wit zoals linkjes, zodat deze beter leesbaar zijn. Deze kleur mag alleen gebruikt worden voor teksten en niet voor volvlakken. HvA zwart R000 G000 B000 #000000 Ondersteunende kleur HvA paars R037 G022 B122 #25167A Wit R255 G255 B255 #ffffff Verder gebruiken we neutraal grijs in verschillende tinten om structuur en niveaus aan te geven. Call-to-action R000 G186 B159 #00ba9f Call-to-action (tekst) R000 G140 B116 #008c74 Grijs 1 R242 G242 B242 #f2f2f2 Grijs 2 R204 G204 B204 #CCCCCC Grijs 3 R102 G102 B102 #666666
Vormgeving HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 29 Fonts De Open Sans is de identiteitsbepalende letter van de HvA responsive website. Open Sans wordt gebruikt voor alle tekst in de website, zoals broodteksten, tussenkoppen en links. Om koppen extra aan te zetten en volgens de huisstijlrichtlijnen van de HvA wordt deze ook vaak in kapitalen gebruikt. De Open Sans is een speciaal ontworpen Google Webfont en dus gratis toegankelijk voor iedereen en prima toe te passen in alle online toepassingen. Open Sans Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Open Sans Semibold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Open Sans Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Vormgeving HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 30 Tekststijlen H1 1 H1 Font: Open Sans Regular Caps Fontgrootte: 26 pt Regelafstand: 33 pt Fontkleur: #25167A H2 Font: Open Sans Regular Caps Fontgrootte: 20 pt Regelafstand: 25 pt Fontkleur: #666666 H3 Font: Open Sans Regular Caps Regelafstand: 22,5 pt Fontkleur: #666666 H4 Font: Open Sans Semibold Regelafstand: 22,5 pt Fontkleur: #000000 H2 H3 H4 H5 H5 Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: #666666 1 Bodytekst Font: Open Sans Regular Regelafstand: 22,5 pt Kleur: #000000 2 2 Introtekst Font: Open Sans Regular Fontgrootte: 18 pt Regelafstand: 26 pt Kleur: #25167A 3 Kruimelpad normal Font: Open Sans Regular Caps Fontgrootte: 13 pt Kleur: #666666 Kleur pijltje: #CCCCCC 4 Kruimelpad focused Font: Open Sans Regular Caps Underlined Fontgrootte: 13 pt Kleur: #666666 Kleur pijltje: #666666 5 Block Quotes Font: Open Sans Regular Fontgrootte: 26 pt Regelafstand: 39 pt Kleur: #25167A Kleur pijltje: # CCCCCC 3 4 14px 14px 14px 5 14px 14px 14px 50px 14px 50px 14px
Vormgeving 31 Tekststijlen voorbeeld H1 H2 1 H2 H2 H4 H2 H3 H2 H4 H2
Vormgeving HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 32 Knoppen > primaire call-to-action Er zijn twee soorten call-to-action knoppen: Call-to-action Primair Deze knoppen hebben de vaste breedte van 1 kolom of hebben de lengte van de tekst die erop staat. Call-to-action Secundair A A 40px Primaire call-to-action (aangepast aan kolombreedte) Paars Font: Open Sans Regular Caps Primaire call-to-action (aangepast aan kolombreedte) Groen (ondersteunende kleur) Font: Open Sans Regular Caps Fontkleur normal: #FFFFFF Achtergrond normal: #25167A Fontkleur normal: #FFFFFF Achtergrond normal: #00bA9f Fontkleur pressed: #FFFFFF Achtergrond pressed: #665BA2 (transparantie: 70%) Fontkleur pressed: #FFFFFF Achtergrond pressed: #4ccfbc (transparantie: 70%) Fontkleur disabled: #FFFFFF Achtergrond disabled: #DDDDDD Fontkleur disable: #FFFFFF Achtergrond disable: #DDDDDD
Vormgeving HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 33 Knoppen > primaire call-to-action Call-to-action knoppen kunnen ook op gekleurde achtergronden (banners) geplaatst worden. Paarse banner Font: Open Sans Regular Caps Groene banner Font: Open Sans Regular Caps Grijze banner Font: Open Sans Regular Caps Fontkleur normal: #25167A Achtergrond normal: #FFFFFF Fontkleur normal: #008C74 Achtergrond normal: #FFFFFF Fontkleur normal: #666666 Achtergrond normal: #FFFFFF Fontkleur pressed: #25167A Achtergrond pressed: #BDBAD7 (transparantie: 70%) Fontkleur pressed: #008C74 Achtergrond pressed: #B3EAE2 (transparantie: 70%) Fontkleur pressed: #666666 Achtergrond pressed: #D1D1D1 (transparantie: 70%) Fontkleur disabled: #D1D1D1 Achtergrond disabled: #FFFFFF Fontkleur disabled: #D1D1D1 Achtergrond disabled: #FFFFFF Fontkleur disabled: #D1D1D1 Achtergrond disabled: #FFFFFF
Vormgeving HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 34 Knoppen > primaire en secundair call-to-action Primaire call-to-action (aangepast aan tekstbreedte) Font: Open Sans Regular Caps Primaire call-to-action 20px 20px 40px Fontkleur normal: #FFFFFF Achtergrond normal: #25167A Fontkleur pressed: #FFFFFF Achtergrond pressed: #665BA2 (transparantie: 70%) Secundaire call-to-action 14px Fontkleur disabled: #FFFFFF Achtergrond disabled: #D1D1D1 35px 40px Secundaire call-to-action Font: Open Sans Regular Caps Paars Fontkleur normal: #25167A Pijlkleur normal: #25167A Groen Fontkleur normal: #008C74 Pijlkleur normal: #00bA9F Grijs Fontkleur normal: #000000 Pijlkleur normal: #666666 Fontkleur pressed: #25167A Pijlkleur pressed: #665BA2 (transparantie: 70%) Fontkleur disabled: #D1D1D1 Pijlkleur disabled: #D1D1D1 Fontkleur pressed: #008C74 Pijlkleur pressed: #7FDCCF (transparantie: 70%) Fontkleur disabled: #D1D1D1 Pijlkleur disabled: #D1D1D1 Fontkleur pressed: #000000 Pijlkleur pressed: #CCCCCC (transparantie: 70%) Fontkleur disabled: #D1D1D1 Pijlkleur disabled: #D1D1D1
Vormgeving HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 35 Hyperlinks Hyperlinks Font: Open Sans Regular 14px 14px 15px Paars Fontkleur normal: #25167A Pijlkleur normal: #25167A (transparantie: 70%) Groen Fontkleur normal: #008C74 Pijlkleur normal: #00bA9F (transparantie: 70%) Grijs Fontkleur normal: #000000 Pijlkleur normal: #CCCCCC (transparantie: 70%) Fontkleur pressed: #25167A Pijlkleur pressed: #665BA2 Fontkleur pressed: #008C74 Pijlkleur pressed: #7FDCCF Fontkleur pressed: #000000 Pijlkleur pressed: #CCCCCC Fontkleur disabled: #D1D1D1 Pijlkleur disabled: #D1D1D1 Fontkleur disabled: #D1D1D1 Pijlkleur disabled: #D1D1D1 Fontkleur disabled: #D1D1D1 Pijlkleur disabled: #D1D1D1 Linkjes in de tekst Font: Open Sans Regular Kleur linkje: #000000 Kleur linkje: #BDBAD7 Kleur linkje: #666666 Kleur linkje: #BDBAD7
Vormgeving HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 36 Iconenstijl Gizmo iconen Voor de HvA responsive website wordt de Gizmo iconenset gebruikt. Deze heeft een rijke familie, past goed bij de HvA huisstijl en kunnen voor allerlei webtoepassingen gebruikt worden.
HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 37 Componenten Voor de opmaak van de pagina s zijn verschillende componenten ontworpen. Deze staan in de volgende pagina s omschreven.
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 38 Hoofdmenu 48px 9 1 2 37px 3 60px 26px 26px 26px 74 5 38px 38px 38px 26px 10 170px 12px 28px 28px 50px 55px 106px 6 35px 7 8 25 px 25 px 14px 25px 1 Navigatie niveau 1 (normal) Font: Open Sans Regular Caps Fontgrootte: 13 pt Fontkleur: #000000 2 Navigatie niveau 1 (active) Font: Open Sans Bold Caps Fontgrootte: 13 pt Fontkleur: #000000 3 Navigatie niveau 1 (focused) Font: Open Sans Bold Caps Underlined Fontgrootte: 13 pt Fontkleur: #000000 4 Navigatie niveau 2 (active) Font: Open Sans Bold Caps Fontgrootte: 18 pt Fontkleur: #FFFFFF 5 Navigatie niveau 2 (normal) Font: Open Sans Regular Caps Fontgrootte: 18 pt Fontkleur: #FFFFFF Navigatie niveau 2 (Focused) In de focused state van navigatie niveau 2 beweegt het uitklapmenu mee met het menuitem waar men op dat moment overheen gaat. 6 Navigatie niveau 3 (normal) Font: Open Sans Regular Fontkleur: #000000 Pijlkleur: #666666 7 Navigatie niveau 3 (active) Font: Open Sans Bold Fontkleur: #25167a Pijlkleur: #25167a 8 Navigatie niveau 3 (Focused) Font: Open Sans Bold Underlined Fontkleur: #000000 Pijlkleur: #25167a 9 Inloggen studenten / medewerkers Font: Open Sans Regular Fontkleur: #666666 10 Paarse menubalk Kleur: #25167a Transparantie: 60%
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 39 Breedte header De banner heeft een minimale breedte en kan zich afhankelijk van de breedte van het scherm aanpassen doordat het patroon aan weerszijde blijft doorlopen.
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 40 Headerbeeld De afbeelding moet een afmeting hebben van (bxh) 1316px X 382px (72dpi) om ook bij schermen met een hoge resolutie goed weer te worden gegeven. 382px De afbeelding schaalt in de oorspronkelijke beeldverhouding mee met de browser. 1312px Grafische laag Over de bannerfoto ligt een grafische laag met het HvAgrid. Dit ter versterking van de merkherkenbaarheid. Dit is alleen zichtbaar aan de weerszijde van de foto en blijft altijd hetzelfde, ook als de foto wisselt.
Componenten HvA, Stijlgids responsive website Studenten Medewerkers - Februari 2014 - Versie 1.0 41 HOME ONDERWIJS ONDERZOEK EN SAMENWERKING STAGES EN WERKGEVERS OVER DE HVA Inspiratiebeelden Header Studenten OPLEIDINGEN STUDEREN PRAKTISCHE ZAKEN CONTACT Medewerkers HOME ONDERWIJS ONDERZOEK EN SAMENWERKING STAGES EN WERKGEVERS OVER DE HVA OPLEIDINGEN STUDEREN PRAKTISCHE ZAKEN CONTACT Het gekozen bannerbeeld moet naast de juiste dpi ook een gepaste afbeelding bevatten. Bij het selecteren van de afbeelding moet o.a. gelet worden op: - Amsterdam-gevoel in de foto (grootstedelijk) - Heldere kleuren - Bij de opleidingen: beroepspraktijk (door de ogen van de - Creating Tomorrow / innovatief professional) - Uitsnede van het beeld - De beelden moeten in een documentaire-achtige stijl zijn, - Scherpte / diepte van het beeld authentiek Studenten Medewerkers - Eventueel ruimte voor overliggende tekst HOME ONDERWIJS ONDERZOEK EN SAMENWERKING STAGES EN WERKGEVERS OVER DE HVA Studenten OPLEIDINGEN STUDEREN PRAKTISCHE ZAKEN CONTACT Medewerkers HOME ONDERWIJS ONDERZOEK EN SAMENWERKING STAGES EN WERKGEVERS OVER DE HVA OPLEIDINGEN STUDEREN PRAKTISCHE ZAKEN CONTACT Studenten Medewerkers HOME ONDERWIJS ONDERZOEK EN SAMENWERKING STAGES EN WERKGEVERS OVER DE HVA Studenten OPLEIDINGEN STUDEREN PRAKTISCHE ZAKEN CONTACT Medewerkers HOME ONDERWIJS ONDERZOEK EN SAMENWERKING STAGES EN WERKGEVERS OVER DE HVA OPLEIDINGEN STUDEREN PRAKTISCHE ZAKEN CONTACT Studenten Medewerkers HOME ONDERWIJS ONDERZOEK EN SAMENWERKING STAGES EN WERKGEVERS OVER DE HVA Studenten OPLEIDINGEN STUDEREN PRAKTISCHE ZAKEN CONTACT Medewerkers HOME ONDERWIJS ONDERZOEK EN SAMENWERKING STAGES EN WERKGEVERS OVER DE HVA OPLEIDINGEN STUDEREN PRAKTISCHE ZAKEN CONTACT
HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 42 Homepage 1 2 3 106 px 4 5 580 px 1 Navigatie niveau 1 (normal) Font: Open Sans Regular Caps Fontgrootte: 13 pt Fontkleur: #000000 2 Navigatie niveau 1 (active) Font: Open Sans Bold Caps Fontgrootte: 13 pt Fontkleur: #000000 3 Navigatie niveau 1 (focused) Font: Open Sans Bold Caps Underlined Fontgrootte: 13 pt Fontkleur: #000000 4 Tekstvlak banner Kleur: #000000 Transparantie: 30% Focused: Transparantie: 60% 5 Call to action knoppen Kleur: #25167a Transparantie: 70% Focused: Transparantie: 100%
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 43 Opsommingslijstjes In de website komen verschillende soorten opsommingslijstjes voor. Op deze pagina staan de eigenschappen van deze lijstjes beschreven. H2 H2 H2 25px H4 H3 L1 25px H4 10px 1 10px 10px 20px 20px L2 10px L3 20px 20px L4 14px 20px 20px 14px 14px H2 Font: Open Sans Regular Caps Fontgrootte: 20 pt Regelafstand: 25 pt Fontkleur: #666666 14px H3 Font: Open Sans Regular Caps Regelafstand: 22,5 pt Fontkleur: #666666 H4 Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: #000000 1 Meta informatie Font: Open Sans Regular Fontgrootte: 13 pt Fontkleur: #666666 L1 Lijst (navigatie) Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: #000000 Kleur pijl: #CCCCCC L2 Uitklap lijst (navigatie) Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: #666666 Kleur pijl: #E6E6E6 L3 Lijst active Font: Open Sans Semibold Regelafstand: 22,5 pt Fontkleur: #000000 Kleur pijl: #666666 L4 Focused Font: Open Sans Regular Underlined Regelafstand: 22,5 pt Fontkleur: #666666 Kleur pijl: #666666
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 44 Nieuwslijsten Ook komen op verschillende pagina s nieuws- en agenda lijsten voor. Deze bevat bijvoorbeeld een afbeelding, titel en lead tekst. Hier staat de opbouw van deze lijsten beschreven. 4 Tijd event Font: Open Sans Regular Fontgrootte: 13 pt Fontkleur: #FFFFFF 25px 15px 15px 4 50px 90px 5 1 2 3 1 1 Zoekresultaten en titel Font: Open Sans Regular Caps Regelafstand: 22,5 pt Fontkleur: #666666 15px 15px 140px 2 Metadata Font: Open Sans Regular Fontgrootte: 13 pt Regelafstand: 22,5 pt Fontkleur: #666666 25px 15px 15px 1 2 1 3 Body Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: #000000 140px 15px 15px 3 4 Datum event Font: Open Sans Regular Fontkleur: #FFFFFF 140px 140px 20px
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 45 Banners Een banner heeft altijd een witruimte van 15 pixels Om onderwerpen zoals open dagen extra aan te zetten kan er gebruik gemaakt worden van deze call-to-action banner. Eventueel in combinatie met een call-to-action button. EERST VOLGENDE OPEN DAG: 9 NOVEMBER 2013 SCHRIJF JE IN EERST VOLGENDE OPEN DAG: 9 NOVEMBER 2013 SCHRIJF JE IN EERST VOLGENDE OPEN DAG: 9 NOVEMBER 2013 SCHRIJF JE IN EERST VOLGENDE OPEN DAG: 9 NOVEMBER 2013 SCHRIJF JE IN Banners kunnen in verschillende formaten en kleuren voorkomen. De koppen hebben een minimale grootte en kunnen eventueel aangepast worden naar het formaat van de banner. Meer informatie Vlak HvA Paars: #25167A Font: Open Sans Regular Caps Fontgrootte: 20 pt Wit: #FFFFFF Meer informatie Vlak HvA Steunkleur: #00BA9F Font: Open Sans Regular Caps Fontgrootte: 20 pt Wit: #FFFFFF Meer informatie Vlak Donkergrijs: #666666 Font: Open Sans Regular Caps Fontgrootte: 20 pt Wit: #FFFFFF Meer informatie Vlak Lichtgrijs: #F2F2F2 Font: Open Sans Regular Caps Fontgrootte: 20 pt Wit: #FFFFFF CTA button Wit: #FFFFFF Font: Open Sans Regular Caps HvA Paars: #25167A Link Font: Open Sans Regular Fontkleur: #FFFFFF CTA button Wit: #FFFFFF Font: Open Sans Regular Caps LET OP Donkergroen: #008C74 Link Font: Open Sans Regular Fontkleur: #FFFFFF CTA button Wit: #FFFFFF Font: Open Sans Regular Caps Donkergrijs: #666666 Link Font: Open Sans Regular Fontkleur: #FFFFFF CTA button HvA Paars: #25167A Font: Open Sans Regular Caps Donkergrijs: #FFFFFF Link Font: Open Sans Regular Fontkleur: #FFFFFF
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 46 Bannervoorbeelden Banners met kolombreedte 3/4 Banner met kolombreedte 1/3 Banner met kolombreedte 2/4
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 47 Actieblokken desktop > 1/4 kolom en 1/3 kolom Naast de banners, zijn er ook actieblokken om bepaalde onderwerpen onder de aandacht te brengen. De blokken kunnen verschillende onderdelen bevatten. 1/4 kolom 200 px Een actieblok heeft altijd een witruimte van 15 pixels. De breedte van een actieblok op desktopformaat hangt af van het aantal kolommen waarin het blok geplaatst wordt, net als de hoogte. 1/3 kolom 220 px 260px 300px
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 48 Actieblokken > 1/2 kolom 225px 460px Vlak Kleur: #F2F2F2 Kop Kleur: #666666 Font: Open Sans Regular Caps Fontgrootte: 20 pt CTA button Kleur: #666666 Vlak Afbeelding Laag transparant: #000000 > 30% Kop Kleur: #FFFFFF Font: Open Sans Regular Caps Fontgrootte: 20 pt CTA button Kleur: #FFFFFF
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 49 Actieblokken > kleurvarianten
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 50 Basisgrid en layout actieblokken (mobiel) 210px 300px Titel, link Titel, call-to-action Titel, link, afbeelding Titel, lead, call-to-action, afbeelding De breedte van een actieblok op een mobiel device is altijd de gehele kolombreedte. De hoogte is altijd 210 pixels. Een actieblok heeft altijd een witruimte van 15 pixels.
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 51 Filtercomponent + info-popup 3 15px 1 10px 10px 10px 10px 4 220px 1 Filterlijst Font: Open Sans Regular Regelafstand: 22,5 pt Kleur: #666666 14px 3 Pop-up kop Font: Open Sans Regular Caps Fontgrootte: 13 pt Regelafstand: 22,5 pt Kleur: #FFFFFF 4 Pop-up body Font: Open Sans Regular Fontgrootte: 13 pt Regelafstand: 19,5 pt Fontkleur: #FFFFFF Popup schermen hebben altijd een vaste breedte van 220px. De hoogte variëert afhankelijk van de inhoud. Voorbeeld Voorbeelden
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 52 Fold-outs Op sommige pagina s komen zogenaamde fold-outs voor, waarbij initieel alleen de koppen worden getoond. Door te klikken op de koppen vouwt de tekst zich uit. 12px 6px 50px 75px 28px 28px 1 Drop down Font: Open Sans Regular Caps Fontgrootte: 20 pt Regelafstand: 25 pt Fontkleur: #666666 1 2 2 Body tekst Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: #000000 Regelafstand: 22,5 pt
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 53 Filterlijst 220px 1 Filters Font: Open Sans Regular Regelafstand: 19 pt Fontkleur: #25167A Checkbox 1 53px 2px 32px 2 3 4 5 120px 40px 15px 2 Body tekst Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: #000000 15 x 15 px 3 1 Opleidingen dubbele regel Opleidingen enkele regel 15px 15px 15px 15px 60px 38px 3 Aantal opleidingen Font: Open Sans Regular Caps Regelafstand: 29 pt Fontkleur: #666666 4 Opleidingen Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: #666666 5 Vergelijk button Font: Open Sans Regular Fontkleur: #FFFFFF 14 px
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 54 Footer De footer maakt gebruik van een 3-koloms grid en bevat een aantal vaste componenten. H5 Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: #666666 300px 20px 300px 20px 300px minimaal 10px 940px minimaal 10px H5 18px 30px 30px 30px 30px 30px 15px 15px 15px 15px 15px
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 55 Breedte footer Net als de header kan de footer zich afhankelijk van de breedte van het scherm aanpassen doordat het patroon aan weerszijde blijft doorlopen.
Componenten HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 56 Header subwebsite 48px 4 170px 28px 28px 1 96px 134px 78px 2 3 35px 35px 35px 35px 35px 35px 55px Voor subwebsites van de HvA is er een aangepaste vormgeving. De titel van de pagina staat iets prominenter in beeld en de menu balk kan aangepast worden naar bijvoorbeeld een domeinkleur. Verder staat er in het submenu bovenin de pagina een extra verwijzing naar de homepage. Het uitklapmenu werkt hetzelfde als op de homepage. 1 Titel subwebsite Font: Open Sans Regular Caps Fontgrootte: 26 pt Fontkleur: #000000 2 Navigatie niveau 1 (active) Font: Open Sans Bold Caps Fontgrootte: 18 pt Fontkleur: #FFFFFF 3 Navigatie niveau 1 (focused) Font: Open Sans Regular Caps Fontgrootte: 18 pt Fontkleur: #FFFFFF 4 Inloggen studenten / medewerkers Font: Open Sans Regular Fontkleur: #666666
Paginavoorbeelden HvA, Stijlgids responsive website - Januari 2014 - Versie 1.0 57
Voorbeelden 58
Voorbeelden 59
Voorbeelden 60
Voorbeelden 61
Voorbeelden HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 62
Voorbeelden HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 63
Voorbeelden HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 64
Voorbeelden HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 65
Voorbeelden HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 66
Voorbeelden HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 67
Voorbeelden HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 68
Colofon Titel Auteurs Opdrachtgever Stijlgids HvA responsive website Linda Tetteroo (Edenspiekermann) Hogeschool van Amsterdam