edenspiekermann hva stijlgids hva responsive 2014-10-13آ  hva, stijlgids responsive website -...

Download edenspiekermann hva Stijlgids HvA responsive 2014-10-13آ  HvA, Stijlgids responsive website - Februari

Post on 09-Jun-2020

0 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • April 2014

    Versie 1.0

    edenspiekermann_ hva

    Stijlgids HvA responsive website

  • 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 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

    42

  • 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.

  • HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 5

    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 linker-

    en rechterzijde komt deze

    breedte op 960 pixels.

    De pagina’s worden

    gecentreerd in de browser.

    3-koloms grid homepage desktop

    940px

    300px300px 300px20px20px

    minimaal 10px minimaal 10px

    Concept webstijl

  • HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 6

    4-koloms grid subpagina’s desktop

    940px

    220px220px220px220px 20px20px20px

    minimaal 10px minimaal 10px

    Concept webstijl

  • HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 7

    300px 10px 10px

    1-koloms grid op mobiel

    De meeste componenten en fonts op de website hebben dezelfde

    maten en verhoudingen voor desktop als op mobiel formaat.

    Concept webstijl

  • HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 8

    Basisgrid en layout superhome (desktop)

    100px

    224px

    60px 15px

    34px

    75px

    106px

    580px

    28px 28px 50px

    50px

    50px

    50px

    50px

    12px

    12px

    12px

    212px

    Concept webstijl

  • Basisgrid en layout homepage (desktop)

    28px 28px 50px

    55px

    60px

    15px 75px

    418px

    44px

    25px

    100px

    212px

    106px

    383px328px

    Concept webstijl 9

  • Basisgrid en layout contentpagina (desktop)

    Concept webstijl 28px 28px 50px

    55px

    216px

    75px

    50px

    50px

    22px

    22px

    36px

    36px

    272px

    106px 10

  • Basisgrid en layout contentpagina > lokaties (desktop)

    Concept webstijl 28px 28px 50px

    55px

    216px

    75px

    75px

    345px

    345px

    25px

    25px

    14px

    15px

    15px

    15px

    15px

    15px

    15px

    15px

    20px

    700px

    700px

    20px

    34px

    34px

    272px

    106px 11

  • Basisgrid en layout subwebsite header (desktop)

    Concept webstijl

    28px 28px

    55px

    60px

    78px 134px

    383px328px

    HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 12

  • HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 13

    Basisgrid en layout navigatie (mobiel)

    45px 45px

    45px

    45px

    45px

    68px

    68px

    45px

    45px

    45px

    45px

    45px

    45px

    45px

    45px

    45px

    45px

    Concept webstijl

  • HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 14

    Basisgrid en layout superhome (mobiel)

    45px

    319px

    32px

    32px

    374px

    190px

    40px

    4px

    4px

    4px

    4px

    47px

    15px

    64px

    80px80px80px80px

    40px

    40px

    40px

    Concept webstijl

    50px

  • HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 15

    45px

    20px

    15px

    22px

    189px

    32px

    25px

    40px

    25px

    32px

    15px

    50px

    Basisgrid en layout opleidingen (mobiel)

    Concept webstijl

  • HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 16

    Basisgrid en layout opleidingen detail (mobiel)

    45px

    20px

    15px

    50px

    32px

    32px

    50px

    75px 32px

    18px

    18px

    18px

    50px

    32px

    10px

    Concept webstijl

  • HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 17

    45px 88px

    45px

    50px

    15px

    40px

    45px

    45px

    60px

    45px

    45px

    45px

    45px

    45px

    45px

    45px

    45px

    15px

    20px

    40px

    13px

    10px 19px

    19px 13px

    45px

    60px

    45px

    60px

    45px

    13px

    Basisgrid en layout opleidingenfilter (mobiel)

    Concept webstijl

  • HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 18

    Basisgrid en layout agendalijst (mobiel)

    45px

    15px

    20px

    40px

    13px

    10px 19px

    19px 13px

    45px

    70px

    70px

    10px

    10px

    10px

    10px

    10px

    10px

    10px

    10px

    10px

    10px

    10px

    10px

    10px

    10px

    10px

    10px

    40px

    70px

    70px

    70px

    50px

    90px

    Concept webstijl

  • HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 19

    Basisgrid en layout subwebsite (mobiel)

    45px

    55px

    175 px

    40px

    32px

    15px

    32px

    Concept webstijl

  • HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 20

    Afhankelijk van de

    schermgrootte verandert

    de layout van de site door

    gebruik van stylesheets.

    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