edenspiekermann_ hva Stijlgids HvA responsive website

edenspiekermann_ hva Stijlgids HvA responsive website

April 2014 Versie 1.0

HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0

Inhoud Introductie3

Responsive Design > Evenementenlijst

25

Actieblokken desktop > 1/4 kolom en 1/3 kolom

47

Responsive Design > Subwebsite

26

Actieblokken > 1/2 kolom

48

Actieblokken > kleurvarianten

49

Concept webstijl

4

3-koloms grid homepage desktop

5

Vormgeving27

Basisgrid en layout actieblokken (mobiel)

50

4-koloms grid subpagina’s desktop

6

Basiskleuren28

Filtercomponent + info-popup

51

1-koloms grid op mobiel

7

Fonts29

Fold-outs52

Basisgrid en layout superhome (desktop)

8

Tekststijlen30

Filterlijst53

Basisgrid en layout

9

Tekststijlen31

Footer54

Basisgrid en layout

10

Knoppen > primaire call-to-action

32

Breedte footer

55

Basisgrid en layout

11

Knoppen > primaire call-to-action

33

Header subwebsite

56

Basisgrid en layout subwebsite header (desktop)

12

Knoppen > primaire en secundair call-to-action

34

Basisgrid en layout navigatie (mobiel)

13

Hyperlinks35

Basisgrid en layout superhome (mobiel)

14

Iconenstijl36

Basisgrid en layout opleidingen (mobiel)

15

Basisgrid en layout opleidingen detail (mobiel)

16

Componenten37

Basisgrid en layout opleidingenfilter (mobiel)

17

Hoofdmenu38

Basisgrid en layout agendalijst (mobiel)

18

Breedte header

Basisgrid en layout subwebsite (mobiel)

19

Headerbeeld40

39

Inspiratiebeelden Header

41 42

Responsive Design

20

Homepage

Responsive Design > Superhome

21

Opsommingslijstjes43

Responsive Design > Opleidingenpagina

22

Nieuwslijsten44

Responsive Design > Opleidingenpagina detail

23

Banners45

Responsive Design > Opleidingenpagina overzicht

24

Bannervoorbeelden46

Paginavoorbeelden57

2


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.

3


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.

4

Concept webstijl


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 minimaal 10px

20px

300px 940px

20px

300px minimaal 10px

5

Concept webstijl


4-koloms grid subpagina’s desktop

220px minimaal 10px

20px

220px

20px 940px

220px

20px

220px minimaal 10px

6

Concept webstijl


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

7

Concept webstijl


Basisgrid en layout superhome (desktop)

28px 28px 50px

106px

580px 50px 12px 50px 12px 50px 12px 50px 34px 60px 15px

224px

100px

212px

75px

8

Concept webstijl

28px 28px 50px

106px

55px

Basisgrid en layout homepage (desktop) 328px

60px 15px

418px

44px 25px

100px

212px

383px

75px

9

Concept webstijl

28px 28px 50px

106px

55px

Basisgrid en layout contentpagina (desktop)

272px 216px

75px 50px 50px

36px

36px

22px

22px

10

28px 28px 50px

Concept webstijl

106px

55px

Basisgrid en layout contentpagina > lokaties (desktop)

272px 216px

75px 25px

15px 15px 15px

345px 15px 15px 15px 15px 700px 14px

20px

75px 25px

34px 345px

34px

700px

20px

11

Concept webstijl


Basisgrid en layout subwebsite header (desktop) 28px 28px

134px

78px 55px

328px

60px

383px

12

Concept webstijl


13

Basisgrid en layout navigatie (mobiel)

45px

45px

45px

45px

68px

45px

45px 45px

68px

45px

45px 45px 45px 45px 45px 45px 45px

Concept webstijl


14

Basisgrid en layout superhome (mobiel)

45px

50px 190px 32px 40px 319px 4px 40px 4px 40px 4px 374px

40px 4px 47px 64px 80px

80px

80px

80px

15px

32px

Concept webstijl


Basisgrid en layout opleidingen (mobiel)

25px 45px 20px 15px 40px 22px 32px 15px 189px

32px 25px

50px

15

Concept webstijl


16

Basisgrid en layout opleidingen detail (mobiel)

50px 45px 20px 15px

32px 75px

50px

18px

10px

32px 18px

32px 32px 50px 18px

Concept webstijl


17

Basisgrid en layout opleidingenfilter (mobiel)

45px 45px 20px 15px 40px 13px 19px 10px 19px 13px

88px

45px 45px

15px

45px

40px

45px

50px

45px

45px

60px

45px

45px

45px 45px

60px 45px 45px 13px

60px

45px

Concept webstijl


Basisgrid en layout agendalijst (mobiel)

10px 70px

45px 20px

10px 10px 15px 70px

40px 13px 19px 10px 19px 13px

10px 10px 70px

45px

10px 10px

10px 50px 70px

10px 10px

10px 10px 90px

70px

10px 10px

10px 10px 40px

18

Concept webstijl


Basisgrid en layout subwebsite (mobiel)

45px 55px

175 px

32px

40px 15px 32px

19

Concept webstijl


Responsive Design Afhankelijk van de schermgrootte verandert de layout van de site door

Logo + zoeken

Logo + zoeken

Header

Header

gebruik van stylesheets. Voor bezoekers op een smartphone moeten functies die passen bij mobiel gebruik

>

een primaire positie krijgen.

Banner

Behoeften van mobiele Nieuws

gebruikers zijn vaak anders. Daarom is het ontwerp van een speciale mobiele site aan

Nieuws

Agenda

Banner

Snel naar Agenda

te bevelen. Voor de mobiele layout wordt alle content teruggebracht naar 1 kolom. Footer

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

Superhome desktop 4-Koloms Breedte 960 px en breder

pagina staat bovenaan. Sommige navigatie-elementen zijn voor het mobiele formaat anders vormgegeven.

Superhome mobiel 1-Koloms Breedte 320 tot 720 px

20

Concept webstijl


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.

>

21

Concept webstijl


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)

22

Concept webstijl


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.

>

23

Concept webstijl


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.

>

24

Concept webstijl


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.

>

25

Concept webstijl


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.

>

26


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.

27

Vormgeving


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

HvA zwart

HvA paars

Wit

en valt op naast de basiskleuren.

R000 G000 B000

R037 G022 B122

R255 G255 B255

LET OP: deze kleur heeft een donkere variatie voor teksten op

#000000

#25167A

#ffffff

wit zoals linkjes, zodat deze beter leesbaar zijn. Deze kleur mag alleen gebruikt worden voor teksten en niet voor volvlakken.

Ondersteunende kleur

Verder gebruiken we neutraal grijs in verschillende tinten om structuur en niveaus aan te geven.

Call-to-action

Call-to-action (tekst)

R000 G186 B159

R000 G140 B116

#00ba9f

#008c74

Grijs 1

Grijs 2

Grijs 3

R242 G242 B242

R204 G204 B204

R102 G102 B102

#f2f2f2

#CCCCCC

#666666

28

Vormgeving


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

29

Vormgeving


30

Tekststijlen 1

H1 H1

1 Bodytekst

Font: Open Sans Regular Caps

Font: Open Sans Regular

Fontgrootte: 26 pt Regelafstand: 33 pt

H2

Spatiëring: 0.03 em Fontkleur: #25167A

Fontgrootte: 15 pt Regelafstand: 22,5 pt Kleur: #000000

H3

2

H2

2 Introtekst



Fontgrootte: 20 pt Regelafstand: 25 pt

H4

Spatiëring: 0.03 em Fontkleur: #666666

Fontgrootte: 18 pt Regelafstand: 26 pt Kleur: #25167A

H5

3 Kruimelpad normal

H3



Fontgrootte: 13 pt

Fontgrootte: 15 pt

Kleur: #666666

Regelafstand: 22,5 pt

Kleur pijltje: #CCCCCC

3

4 14px 14px 14px

Spatiëring: 0.03 em

5

4 Kruimelpad focused

Fontkleur: #666666

14px 14px

50px

Font: Open Sans Regular Caps H4

H5

Font: Open Sans Semibold


Fontgrootte: 13 pt

Fontgrootte: 15 pt

Fontgrootte: 15 pt

Kleur: #666666



Kleur pijltje: #666666

Fontkleur: #000000

Fontkleur: #666666

Underlined

5 Block Quotes Font: Open Sans Regular Fontgrootte: 26 pt Regelafstand: 39 pt Kleur: #25167A Kleur pijltje: # CCCCCC

14px

14px

50px

14px

Vormgeving

31

Tekststijlen voorbeeld H1 H2

1

H2

H2

H4 H2

H3 H2

H4

H2

Vormgeving


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)

Primaire call-to-action (aangepast aan kolombreedte)

Paars

Groen (ondersteunende kleur)



Fontgrootte: 15 pt

Fontgrootte: 15 pt

Fontkleur normal: #FFFFFF

Fontkleur normal: #FFFFFF

Achtergrond normal: #25167A

Achtergrond normal: #00bA9f

Fontkleur pressed: #FFFFFF

Fontkleur pressed: #FFFFFF

Achtergrond pressed: #665BA2 (transparantie: 70%)

Achtergrond pressed: #4ccfbc (transparantie: 70%)

Fontkleur disabled: #FFFFFF

Fontkleur disable: #FFFFFF

Achtergrond disabled: #DDDDDD

Achtergrond disable: #DDDDDD

Vormgeving


Knoppen > primaire call-to-action Call-to-action knoppen kunnen ook op gekleurde achtergronden (banners) geplaatst worden.

Paarse banner

Groene banner

Grijze banner




Fontgrootte: 15 pt

Fontgrootte: 15 pt

Fontgrootte: 15 pt




Fontkleur normal: #25167A

Fontkleur normal: #008C74

Fontkleur normal: #666666

Achtergrond normal: #FFFFFF



Fontkleur pressed: #25167A

Fontkleur pressed: #008C74

Fontkleur pressed: #666666

Achtergrond pressed: #BDBAD7

Achtergrond pressed: #B3EAE2

Achtergrond pressed: #D1D1D1

(transparantie: 70%)



Fontkleur disabled: #D1D1D1



Achtergrond disabled: #FFFFFF



33

Vormgeving


Knoppen > primaire en secundair call-to-action Primaire call-to-action (aangepast

Primaire call-to-action 20px

aan tekstbreedte)

20px


40px

Fontgrootte: 15 pt Spatiëring: 0.03 em 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

Groen

Grijs

Fontgrootte: 15 pt





Pijlkleur normal: #25167A

Pijlkleur normal: #00bA9F

Pijlkleur normal: #666666




Pijlkleur pressed: #665BA2

Pijlkleur pressed: #7FDCCF

Pijlkleur pressed: #CCCCCC







Pijlkleur disabled: #D1D1D1



34

Vormgeving


Hyperlinks 14px

Hyperlinks Font: Open Sans Regular Fontgrootte: 15 pt

14px 15px

Linkjes in de tekst

Paars

Groen

Grijs




Pijlkleur normal: #25167A

Pijlkleur normal: #00bA9F

Pijlkleur normal: #CCCCCC







Pijlkleur pressed: #665BA2

Pijlkleur pressed: #7FDCCF

Pijlkleur pressed: #CCCCCC






Pijlkleur disabled: #D1D1D1 Kleur linkje: #000000

Font: Open Sans Regular Fontgrootte: 15 pt Kleur linkje: #BDBAD7

Kleur linkje: #666666

Kleur linkje: #BDBAD7

35

Vormgeving

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.


36


Componenten Voor de opmaak van de pagina’s zijn verschillende componenten ontworpen. Deze staan in de volgende pagina’s omschreven.

37

Componenten


38

Hoofdmenu

1

28px

170px

2

37px

26px

26px

60px

28px

9

48px

7 4

3

26px

26px

50px 12px

5

10 38px

38px

55px

38px

35px

6 7 8 25 px

25 px

14px

25px

1 Navigatie niveau 1 (normal)

3 Navigatie niveau 1 (focused)



8 Navigatie niveau 3 (Focused)

10 Paarse menubalk


Font: Open Sans Bold




Kleur: #25167a

Fontgrootte: 13 pt

Fontgrootte: 18 pt

Fontgrootte: 15 pt

Underlined

Transparantie: 60%


Fontgrootte: 13 pt


Fontkleur: #000000

Fontgrootte: 15 pt

Fontkleur: #000000


Fontkleur: #FFFFFF

Pijlkleur: #666666

Fontkleur: #000000

Caps Underlined

Fontkleur: #000000 2 Navigatie niveau 1 (active)

Pijlkleur: #25167a Navigatie niveau 2 (Focused)

7 Navigatie niveau 3 (active)

Font: Open Sans Bold Caps


In de ‘focused’ state van


9 Inloggen studenten /

Fontgrootte: 13 pt


navigatie niveau 2 beweegt

Fontgrootte: 15 pt

medewerkers


Fontgrootte: 18 pt

het uitklapmenu mee met het

Fontkleur: #25167a


Fontkleur: #000000


menuitem waar men op dat

Pijlkleur: #25167a

Fontgrootte: 15 pt

Fontkleur: #FFFFFF

moment overheen gaat.

Fontkleur: #666666

106px

Componenten

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.


39

Componenten


Headerbeeld De afbeelding moet een afmeting hebben van (bXh) 1316px X 382px (72dpi) om ook bij schermen met een hoge resolutie goed weer te

382px

worden gegeven. De afbeelding schaalt in de oorspronkelijke beeldverhouding mee met de browser. 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.

1312px

40

Componenten

HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 Studenten Medewerkers HOME

ONDERWIJS

OPLEIDINGEN

Inspiratiebeelden Header

HOME

ONDERWIJS

OPLEIDINGEN

ONDERZOEK EN SAMENWERKING

STUDEREN

OVER DE HVA

Studenten CONTACT

Medewerkers

PRAKTISCHE ZAKEN


STUDEREN

STAGES EN WERKGEVERS


PRAKTISCHE ZAKEN

OVER DE HVA

CONTACT

Het gekozen bannerbeeld moet naast de juiste dpi ook een

- Amsterdam-gevoel in de foto (grootstedelijk)

- Heldere kleuren

gepaste afbeelding bevatten. Bij het selecteren van de

- Bij de opleidingen: beroepspraktijk (door de ogen van de

- Creating Tomorrow / innovatief

afbeelding moet o.a. gelet worden op:

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

OPLEIDINGEN HOME

ONDERWIJS

OPLEIDINGEN


STUDEREN


STUDEREN


OVER DE HVA

Studenten CONTACT

Medewerkers

PRAKTISCHE ZAKEN


PRAKTISCHE ZAKEN

Studenten HOME

ONDERWIJS

OPLEIDINGEN HOME

ONDERWIJS

OPLEIDINGEN


STUDEREN

OVER DE HVA

Studenten CONTACT

Medewerkers


PRAKTISCHE ZAKEN

ONDERWIJS

OPLEIDINGEN HOME

ONDERWIJS

OPLEIDINGEN


STUDEREN

Medewerkers


OVER DE HVA

Studenten CONTACT

Medewerkers

PRAKTISCHE ZAKEN


STUDEREN

OVER DE HVA

CONTACT

Studenten HOME

Medewerkers


PRAKTISCHE ZAKEN


STUDEREN

OVER DE HVA

CONTACT


PRAKTISCHE ZAKEN

CONTACT

OVER DE HVA

41


Homepage

1

2

106 px

3

580 px

4 5




4 Tekstvlak banner

5 Call to action knoppen




Kleur: #000000

Kleur: #25167a

Fontgrootte: 13 pt

Fontgrootte: 13 pt

Transparantie: 30%

Transparantie: 70%



Fontgrootte: 13 pt

Focused: Transparantie: 60%

Focused: Transparantie: 100%

Fontkleur: #000000

Fontkleur: #000000


Caps Underlined

Fontkleur: #000000

42

Componenten


43

Opsommingslijstjes H2

H2

H2

H3

L1

In de website komen verschillende soorten

25px

H4

opsommingslijstjes voor.

25px

H4

10px

Op deze pagina staan de eigenschappen van deze lijstjes beschreven.

1

10px 10px

20px

20px

10px

L2 L3 L4

20px

14px

20px

20px 20px

14px 14px

14px

L1 Lijst (navigatie)

L3 Lijst active


Font: Open Sans Semibold

Fontgrootte: 15 pt

Fontgrootte: 15 pt

H2

H3

H4






Fontkleur: #000000

Fontkleur: #000000

Fontgrootte: 20 pt

Fontgrootte: 15 pt

Fontgrootte: 15 pt

Kleur pijl: #CCCCCC

Kleur pijl: #666666

Regelafstand: 25 pt





Fontkleur: #000000

L2 Uitklap lijst (navigatie)

L4 Focused

Fontkleur: #666666

Fontkleur: #666666



1 Meta informatie

Fontgrootte: 15 pt

Underlined



Fontgrootte: 15 pt

Fontgrootte: 13 pt

Fontkleur: #666666


Fontkleur: #666666

Kleur pijl: #E6E6E6

Fontkleur: #666666 Kleur pijl: #666666

Componenten


Nieuwslijsten Ook komen op verschillende

4 Tijd event

pagina’s nieuws- en agenda


25px

lijsten voor. Deze bevat

Fontgrootte: 13 pt

bijvoorbeeld een afbeelding,

Fontkleur: #FFFFFF

15px 15px 4

titel en lead tekst. Hier staat

50px

1 1 2

5

de opbouw van deze lijsten beschreven.

90px

1 Zoekresultaten en titel

15px 15px


3

Fontgrootte: 15 pt Regelafstand: 22,5 pt

140px

Spatiëring: 0.03 em Fontkleur: #666666 2 Metadata Font: Open Sans Regular Fontgrootte: 13 pt

25px


15px 15px

Fontkleur: #666666 3 Body

1 1 2

140px

3

Font: Open Sans Regular Fontgrootte: 15 pt Regelafstand: 22,5 pt Fontkleur: #000000 4 Datum event Font: Open Sans Regular

15px 15px

140px

Fontgrootte: 15 pt Fontkleur: #FFFFFF

140px

20px

44

Componenten


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.

EERST VOLGENDE OPEN DAG: 9 NOVEMBER 2013




SCHRIJF JE IN

SCHRIJF JE IN

SCHRIJF JE IN

SCHRIJF JE IN

Eventueel in combinatie met een call-to-action button.

Meer informatie

Banners kunnen in

Meer informatie

Meer informatie

Meer informatie

verschillende formaten en kleuren voorkomen.

Vlak

Vlak

Vlak

Vlak

De koppen hebben een

HvA Paars: #25167A

HvA Steunkleur: #00BA9F

Donkergrijs: #666666

Lichtgrijs: #F2F2F2

minimale grootte en kunnen





eventueel aangepast worden

Fontgrootte: 20 pt

Fontgrootte: 20 pt

Fontgrootte: 20 pt

Fontgrootte: 20 pt

naar het formaat van de





banner.

Wit: #FFFFFF

Wit: #FFFFFF

Wit: #FFFFFF

Wit: #FFFFFF

CTA button

CTA button

CTA button

CTA button

Wit: #FFFFFF

Wit: #FFFFFF

Wit: #FFFFFF

HvA Paars: #25167A





Fontgrootte: 15 pt

Fontgrootte: 15 pt

Fontgrootte: 15 pt

Fontgrootte: 15 pt





HvA Paars: #25167A

LET OP

Donkergrijs: #666666

Donkergrijs: #FFFFFF

Link Font: Open Sans Regular Fontgrootte: 15 pt Fontkleur: #FFFFFF


Donkergroen: #008C74 Link Font: Open Sans Regular Fontgrootte: 15 pt Fontkleur: #FFFFFF


Componenten


Bannervoorbeelden Banners met kolombreedte 3/4

Banner met kolombreedte 2/4

Banner met kolombreedte 1/3

46

Componenten


Actieblokken desktop > 1/4 kolom en 1/3 kolom Naast de banners, zijn er ook

1/4 kolom

actieblokken om bepaalde

Een actieblok heeft

onderwerpen onder de

altijd een witruimte van

aandacht te brengen.

15 pixels.

De blokken kunnen

200 px

verschillende onderdelen bevatten. 220 px

De breedte van een actieblok op desktopformaat hangt af van het aantal kolommen

1/3 kolom

waarin het blok geplaatst wordt, net als de hoogte.

260px

300px

47

Componenten


Actieblokken > 1/2 kolom

225px

460px

Vlak

Vlak

Kleur: #F2F2F2

Afbeelding Laag transparant: #000000 > 30%

Kop Kleur: #666666

Kop


Kleur: #FFFFFF

Fontgrootte: 20 pt



Fontgrootte: 20 pt Spatiëring: 0.03 em

CTA button Kleur: #666666

CTA button Kleur: #FFFFFF

48

Componenten

Actieblokken > kleurvarianten


49

Componenten


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

Een actieblok heeft

device is altijd de gehele kolombreedte. De

altijd een witruimte van 15 pixels.

hoogte is altijd 210 pixels.

50

Componenten


51

Filtercomponent + info-popup

3 1

10px 10px 10px 10px

15px

4

220px 14px

3 Pop-up kop

4 Pop-up body

Popup schermen hebben altijd

1 Filterlijst



een vaste breedte van 220px.


Fontgrootte: 13 pt

Fontgrootte: 13 pt

De hoogte variëert afhankelijk

Fontgrootte: 15 pt



van de inhoud.



Fontkleur: #FFFFFF

Kleur: #666666

Kleur: #FFFFFF

Voorbeeld

Voorbeelden

Componenten


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 50px

6px

75px 28px 28px

1 1 Drop down Font: Open Sans Regular Caps Fontgrootte: 20 pt Regelafstand: 25 pt Spatiëring: 0.03 em Fontkleur: #666666 2 Body tekst Font: Open Sans Regular Fontgrootte: 15 pt Regelafstand: 22,5 pt Fontkleur: #000000 Regelafstand: 22,5 pt

2

52

Componenten


53

Filterlijst 220px 120px

1 Filters

Checkbox

5

1

Fontgrootte: 15 pt

53px

Regelafstand: 19 pt

2px 32px

Fontkleur: #25167A 2 Body tekst

15px

2

3


Fontkleur: #000000

4 Opleidingen dubbele regel

15px

Opleidingen enkele regel

15px 15px 15px

60px

Fontgrootte: 15 pt Regelafstand: 22,5 pt

40px

3


15 x 15 px

1

3 Aantal opleidingen Font: Open Sans Regular Caps Fontgrootte: 15 pt Regelafstand: 29 pt Spatiëring: 0.03 em Fontkleur: #666666 4 Opleidingen Font: Open Sans Regular Fontgrootte: 15 pt Regelafstand: 22,5 pt Fontkleur: #666666 5 Vergelijk button Font: Open Sans Regular Fontgrootte: 15 pt Fontkleur: #FFFFFF 14 px

38px

Componenten


Footer De footer maakt gebruik van een 3-koloms grid en bevat een aantal vaste componenten. H5 Font: Open Sans Regular Fontgrootte: 15 pt Regelafstand: 22,5 pt Fontkleur: #666666

300px

minimaal 10px

20px

300px

20px

300px

940px

minimaal 10px

18px

H5

30px 30px 30px 30px 30px 15px 15px 15px 15px 15px

54

Componenten

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.


55

Componenten


56

Header subwebsite

28px

4

48px

28px

170px

1

134px

96px 78px

2

3 35px

35px

35px

35px

35px

35px

Voor subwebsites van de HvA is er een aangepaste vormgeving.

1 Titel subwebsite


De titel van de pagina staat iets prominenter in beeld en



de menu balk kan aangepast worden naar bijvoorbeeld een

Fontgrootte: 26 pt

Fontgrootte: 18 pt

domeinkleur. Verder staat er in het submenu bovenin de pagina



een extra verwijzing naar de homepage.

Fontkleur: #000000

Fontkleur: #FFFFFF


4 Inloggen studenten /


medewerkers

Fontgrootte: 18 pt



Fontgrootte: 15 pt

Fontkleur: #FFFFFF

Fontkleur: #666666

Het uitklapmenu werkt hetzelfde als op de homepage.

55px

HvA, Stijlgids responsive website - Januari 2014 - Versie 1.0

Paginavoorbeelden

57

Voorbeelden

58

Voorbeelden

59

Voorbeelden

60

Voorbeelden

61

Voorbeelden


62

Voorbeelden


63

Voorbeelden


64

Voorbeelden


65

Voorbeelden


66

Voorbeelden


67

Voorbeelden


68

Colofon Titel

Stijlgids HvA responsive website

Auteurs

Linda Tetteroo (Edenspiekermann)

Opdrachtgever

Hogeschool van Amsterdam

edenspiekermann_ hva Stijlgids HvA responsive website

Recommend Documents