edenspiekermann_ hva Stijlgids HvA responsive website
|
|
- Lucas Abbink
- 8 jaren geleden
- Aantal bezoeken:
Transcriptie
1 edenspiekermann_ hva Stijlgids HvA responsive website April 2014 Versie 1.0
2 HvA, Stijlgids responsive website - Februari Versie 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 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
3 HvA, Stijlgids responsive website - Februari Versie 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.
4 HvA, Stijlgids responsive website - Februari Versie 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.
5 Concept webstijl HvA, Stijlgids responsive website - Februari Versie 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
6 Concept webstijl HvA, Stijlgids responsive website - Februari Versie koloms grid subpagina s desktop 220px 20px 220px 20px 220px 20px 220px minimaal 10px 940px minimaal 10px
7 Concept webstijl HvA, Stijlgids responsive website - Februari Versie 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
8 Concept webstijl HvA, Stijlgids responsive website - Februari Versie Basisgrid en layout superhome (desktop) 28px 28px 50px 106px 580px 50px 12px 50px 12px 50px 12px 50px 34px 60px 15px 75px 224px 100px 212px
9 28px Concept webstijl 28px 106px 9 50px Basisgrid en layout homepage (desktop) 55px 328px 383px 60px 15px 75px 418px 44px 25px 100px 212px
10 Concept webstijl Basisgrid en layout contentpagina (desktop) 28px 28px 50px 55px 216px 106px px 75px 50px 50px 36px 36px 22px 22px
11 Concept webstijl Basisgrid en layout contentpagina > lokaties (desktop) 28px 28px 50px 55px 216px 106px px 75px 15px 25px 15px 15px 15px 15px 3 15px 15px 700px 14px 20px 75px 25px 34px 34px 3 700px 20px
12 Concept webstijl HvA, Stijlgids responsive website - Februari Versie Basisgrid en layout subwebsite header (desktop) 28px 28px 78px 134px 55px 328px 383px 60px
13 Concept webstijl HvA, Stijlgids responsive website - Februari Versie Basisgrid en layout navigatie (mobiel) 68px 68px
14 Concept webstijl HvA, Stijlgids responsive website - Februari Versie 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
15 Concept webstijl HvA, Stijlgids responsive website - Februari Versie Basisgrid en layout opleidingen (mobiel) 25px 20px 15px 40px 22px 32px 15px 189px 32px 25px 50px
16 Concept webstijl HvA, Stijlgids responsive website - Februari Versie Basisgrid en layout opleidingen detail (mobiel) 50px 20px 15px 75px 50px 10px 32px 18px 32px 18px 32px 32px 50px 18px
17 Concept webstijl HvA, Stijlgids responsive website - Februari Versie Basisgrid en layout opleidingenfilter (mobiel) 20px 15px 40px 13px 19px 10px 19px 13px 88px 60px 15px 40px 50px 60px 60px 13px
18 Concept webstijl HvA, Stijlgids responsive website - Februari Versie 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
19 Concept webstijl HvA, Stijlgids responsive website - Februari Versie Basisgrid en layout subwebsite (mobiel) 55px 175 px 32px 40px 15px 32px
20 Concept webstijl HvA, Stijlgids responsive website - Februari Versie 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
21 Concept webstijl HvA, Stijlgids responsive website - Februari Versie 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. >
22 Concept webstijl HvA, Stijlgids responsive website - Februari Versie 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)
23 Concept webstijl HvA, Stijlgids responsive website - Februari Versie 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. >
24 Concept webstijl HvA, Stijlgids responsive website - Februari Versie 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. >
25 Concept webstijl HvA, Stijlgids responsive website - Februari Versie 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. >
26 Concept webstijl HvA, Stijlgids responsive website - Februari Versie 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. >
27 HvA, Stijlgids responsive website - Februari Versie 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.
28 Vormgeving HvA, Stijlgids responsive website - Februari Versie 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 # 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
29 Vormgeving HvA, Stijlgids responsive website - Februari Versie 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
30 Vormgeving HvA, Stijlgids responsive website - Februari Versie 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: # H3 Font: Open Sans Regular Caps Regelafstand: 22,5 pt Fontkleur: # H4 Font: Open Sans Semibold Regelafstand: 22,5 pt Fontkleur: # H2 H3 H4 H5 H5 Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: # Bodytekst Font: Open Sans Regular Regelafstand: 22,5 pt Kleur: # 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: # Kleur pijltje: #CCCCCC 4 Kruimelpad focused Font: Open Sans Regular Caps Underlined Fontgrootte: 13 pt Kleur: # Kleur pijltje: # Block Quotes Font: Open Sans Regular Fontgrootte: 26 pt Regelafstand: 39 pt Kleur: #25167A Kleur pijltje: # CCCCCC px 14px 14px 5 14px 14px 14px 50px 14px 50px 14px
31 Vormgeving 31 Tekststijlen voorbeeld H1 H2 1 H2 H2 H4 H2 H3 H2 H4 H2
32 Vormgeving HvA, Stijlgids responsive website - Februari Versie 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
33 Vormgeving HvA, Stijlgids responsive website - Februari Versie 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: # Achtergrond normal: #FFFFFF Fontkleur pressed: #25167A Achtergrond pressed: #BDBAD7 (transparantie: 70%) Fontkleur pressed: #008C74 Achtergrond pressed: #B3EAE2 (transparantie: 70%) Fontkleur pressed: # Achtergrond pressed: #D1D1D1 (transparantie: 70%) Fontkleur disabled: #D1D1D1 Achtergrond disabled: #FFFFFF Fontkleur disabled: #D1D1D1 Achtergrond disabled: #FFFFFF Fontkleur disabled: #D1D1D1 Achtergrond disabled: #FFFFFF
34 Vormgeving HvA, Stijlgids responsive website - Februari Versie 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: # Pijlkleur normal: # 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: # Pijlkleur pressed: #CCCCCC (transparantie: 70%) Fontkleur disabled: #D1D1D1 Pijlkleur disabled: #D1D1D1
35 Vormgeving HvA, Stijlgids responsive website - Februari Versie 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: # Pijlkleur normal: #CCCCCC (transparantie: 70%) Fontkleur pressed: #25167A Pijlkleur pressed: #665BA2 Fontkleur pressed: #008C74 Pijlkleur pressed: #7FDCCF Fontkleur pressed: # 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: # Kleur linkje: #BDBAD7 Kleur linkje: # Kleur linkje: #BDBAD7
36 Vormgeving HvA, Stijlgids responsive website - Februari Versie 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.
37 HvA, Stijlgids responsive website - Februari Versie Componenten Voor de opmaak van de pagina s zijn verschillende componenten ontworpen. Deze staan in de volgende pagina s omschreven.
38 Componenten HvA, Stijlgids responsive website - Februari Versie Hoofdmenu 48px px 3 60px 26px 26px 26px px 38px 38px 26px px 12px 28px 28px 50px 55px 106px 6 35px px 25 px 14px 25px 1 Navigatie niveau 1 (normal) Font: Open Sans Regular Caps Fontgrootte: 13 pt Fontkleur: # Navigatie niveau 1 (active) Font: Open Sans Bold Caps Fontgrootte: 13 pt Fontkleur: # Navigatie niveau 1 (focused) Font: Open Sans Bold Caps Underlined Fontgrootte: 13 pt Fontkleur: # 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: # Pijlkleur: # Navigatie niveau 3 (active) Font: Open Sans Bold Fontkleur: #25167a Pijlkleur: #25167a 8 Navigatie niveau 3 (Focused) Font: Open Sans Bold Underlined Fontkleur: # Pijlkleur: #25167a 9 Inloggen studenten / medewerkers Font: Open Sans Regular Fontkleur: # Paarse menubalk Kleur: #25167a Transparantie: 60%
39 Componenten HvA, Stijlgids responsive website - Februari Versie 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.
40 Componenten HvA, Stijlgids responsive website - Februari Versie 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.
41 Componenten HvA, Stijlgids responsive website Studenten Medewerkers - Februari Versie 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
42 HvA, Stijlgids responsive website - Februari Versie Homepage px px 1 Navigatie niveau 1 (normal) Font: Open Sans Regular Caps Fontgrootte: 13 pt Fontkleur: # Navigatie niveau 1 (active) Font: Open Sans Bold Caps Fontgrootte: 13 pt Fontkleur: # Navigatie niveau 1 (focused) Font: Open Sans Bold Caps Underlined Fontgrootte: 13 pt Fontkleur: # Tekstvlak banner Kleur: # Transparantie: 30% Focused: Transparantie: 60% 5 Call to action knoppen Kleur: #25167a Transparantie: 70% Focused: Transparantie: 100%
43 Componenten HvA, Stijlgids responsive website - Februari Versie 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: # px H3 Font: Open Sans Regular Caps Regelafstand: 22,5 pt Fontkleur: # H4 Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: # Meta informatie Font: Open Sans Regular Fontgrootte: 13 pt Fontkleur: # L1 Lijst (navigatie) Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: # Kleur pijl: #CCCCCC L2 Uitklap lijst (navigatie) Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: # Kleur pijl: #E6E6E6 L3 Lijst active Font: Open Sans Semibold Regelafstand: 22,5 pt Fontkleur: # Kleur pijl: # L4 Focused Font: Open Sans Regular Underlined Regelafstand: 22,5 pt Fontkleur: # Kleur pijl: #666666
44 Componenten HvA, Stijlgids responsive website - Februari Versie 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 Zoekresultaten en titel Font: Open Sans Regular Caps Regelafstand: 22,5 pt Fontkleur: # px 15px 140px 2 Metadata Font: Open Sans Regular Fontgrootte: 13 pt Regelafstand: 22,5 pt Fontkleur: # px 15px 15px Body Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: # px 15px 15px 3 4 Datum event Font: Open Sans Regular Fontkleur: #FFFFFF 140px 140px 20px
45 Componenten HvA, Stijlgids responsive website - Februari Versie 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: # 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: # 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
46 Componenten HvA, Stijlgids responsive website - Februari Versie Bannervoorbeelden Banners met kolombreedte 3/4 Banner met kolombreedte 1/3 Banner met kolombreedte 2/4
47 Componenten HvA, Stijlgids responsive website - Februari Versie 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
48 Componenten HvA, Stijlgids responsive website - Februari Versie Actieblokken > 1/2 kolom 225px 460px Vlak Kleur: #F2F2F2 Kop Kleur: # Font: Open Sans Regular Caps Fontgrootte: 20 pt CTA button Kleur: # Vlak Afbeelding Laag transparant: # > 30% Kop Kleur: #FFFFFF Font: Open Sans Regular Caps Fontgrootte: 20 pt CTA button Kleur: #FFFFFF
49 Componenten HvA, Stijlgids responsive website - Februari Versie Actieblokken > kleurvarianten
50 Componenten HvA, Stijlgids responsive website - Februari Versie 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.
51 Componenten HvA, Stijlgids responsive website - Februari Versie Filtercomponent + info-popup 3 15px 1 10px 10px 10px 10px 4 220px 1 Filterlijst Font: Open Sans Regular Regelafstand: 22,5 pt Kleur: # px 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
52 Componenten HvA, Stijlgids responsive website - Februari Versie 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: # Body tekst Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: # Regelafstand: 22,5 pt
53 Componenten HvA, Stijlgids responsive website - Februari Versie Filterlijst 220px 1 Filters Font: Open Sans Regular Regelafstand: 19 pt Fontkleur: #25167A Checkbox 1 53px 2px 32px px 40px 15px 2 Body tekst Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: # 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: # Opleidingen Font: Open Sans Regular Regelafstand: 22,5 pt Fontkleur: # Vergelijk button Font: Open Sans Regular Fontkleur: #FFFFFF 14 px
54 Componenten HvA, Stijlgids responsive website - Februari Versie 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: # px 20px 300px 20px 300px minimaal 10px 940px minimaal 10px H5 18px 30px 30px 30px 30px 30px 15px 15px 15px 15px 15px
55 Componenten HvA, Stijlgids responsive website - Februari Versie 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.
56 Componenten HvA, Stijlgids responsive website - Februari Versie Header subwebsite 48px 4 170px 28px 28px 1 96px 134px 78px px 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: # 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
57 Paginavoorbeelden HvA, Stijlgids responsive website - Januari Versie
58 Voorbeelden 58
59 Voorbeelden 59
60 Voorbeelden 60
61 Voorbeelden 61
62 Voorbeelden HvA, Stijlgids responsive website - Februari Versie
63 Voorbeelden HvA, Stijlgids responsive website - Februari Versie
64 Voorbeelden HvA, Stijlgids responsive website - Februari Versie
65 Voorbeelden HvA, Stijlgids responsive website - Februari Versie
66 Voorbeelden HvA, Stijlgids responsive website - Februari Versie
67 Voorbeelden HvA, Stijlgids responsive website - Februari Versie
68 Voorbeelden HvA, Stijlgids responsive website - Februari Versie
69 Colofon Titel Auteurs Opdrachtgever Stijlgids HvA responsive website Linda Tetteroo (Edenspiekermann) Hogeschool van Amsterdam
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 2 Inhoud Introductie 3 Concept webstijl 4 3-koloms grid homepage
Nadere informatieINHOUD. Introductie 3 Kleurenpalet 4 Typografie 5 Grid 6 Marges 7 Intro 8 Naam en functie 10 Bullet points 11 Titelpagina 12 Ondertiteling 13 Outro 14
STIJLGIDS HVA-VIDEO HOGESCHOOL VAN AMSTERDAM RICHTLIJNEN HVA-VIDEO VERSIE 1.0 2 INHOUD Introductie 3 Kleurenpalet 4 Typografie 5 Grid 6 Marges 7 Intro 8 Naam en functie 10 Bullet points 11 Titelpagina
Nadere informatieWeb. TU Delft. Huisstijlrichtlijnen
TU Delft Web TU Delft Huisstijlrichtlijnen Index 1 Broodtekst 2 Titels 3 Template homepage 4 Template vervolgpagina s 5 Hoofdmenu 6 Submenu 7 Headers 8 Tabblad 9 Tabblad varianten 10 Tabblad nieuws / agenda
Nadere informatieNederlandse Organisatie voor Wetenschappelijk Onderzoek
Nederlandse Organisatie voor Wetenschappelijk Onderzoek richtlijnen webstijl version 1.1 Fabrique Merken, Design en Interactie 12.12.2011 1 Fabrique Merken, Design en Interactie Inhoud 3 Introductie Algemeen
Nadere informatieDesign rationale document. Rabobank.com
Design rationale document Rabobank.com Inhoudsopgave 3 4 5 14 Inleiding Design values Algemene rationale Styleguide 2 Inleiding In dit document zijn de ontwerpuitgangspunten vastgelegd voor de vernieuwde
Nadere informatieHandleiding Mijneigenweb.nl
Handleiding Mijneigenweb.nl Inhoud 1 Inloggen 2 Kleurenschema en lettertype 2.1 Kies een standaard kleurenschema 2.2 Kleurenschema en lettertypes aanpassen/ zelf samenstellen 3 Logo 4 Visual 4.1 Eigen
Nadere informatieTitelpagina Styleguide Jij&Overijssel
Huisstijlrichtlijnen Digitaal Titelpagina Styleguide Jij&Overijssel Inhoudopgave Onderwerp Pagina 1 Responsive design 3 2 Tone of voice 4 3 Kleurgebruik 5 4 Typografie 6 5 Formulieren 8 6 Pictogrammen
Nadere informatiestyleguide Albert Slow Styleguide
styleguide 1 Inleiding Albert Heijn wilde voor de ipad app Albert Slow een ontwerp dat echt aansprekend en wervend is zonder dat gebruiksvriendelijkheid en informatie voorziening in het gedrang zou komen.
Nadere informatieInhoudsopgave. Huisstijlhandboek Droomstad 05-06-2014 Versie 1.0 2
Huisstijldocument Inhoudsopgave 1. Logo 3 1.1 Beeld 3 1.2 Naam 4 1.3 Toevoeging stadsnaam 5 1.4 Plaatsing 6 1.5 Achtergrond 7 2. Kleur 8 2.1 Logo 8 2.2 Website 9 3. Typografie 10 4. Knoppen 11 5. Waardering
Nadere informatieNa het inloggen met de gegevens die je hebt gekregen, verschijnt het overzichtsscherm zoals hieronder:
Inhoud van de website invoeren met de ContentPublisher De inhoud van websites kan worden ingevoerd en gewijzigd met behulp van een zogenaamd Content Management Systeem (CMS). De websites van Muismedia
Nadere informatieDennis Wagenaar 19-04-10 v 1.0
Ontwerprapport Save Energy Leiden Dennis Wagenaar 19-04-10 v 1.0 Inhoudsopgave Inleiding...4 1 Grafisch Ontwerp...5 1.1 De website...5 1.2 Header...6 1.3 Menu...6 1.4 Content...7 1.5 Grafieken...7 1.5
Nadere informatieInhoudsopgave. Styleguide Bewust. Pagina 2
Huisstijl Inhoudsopgave Inleiding Logo Logo gebruik Logo misbruik Logo app Kleuren Typografie Grid Beeld gebruik Beeld misbruik Beeld toepassing Buttons & iconen 3 4 5 6 7 8 9 10 11 12 13 14 Pagina 2 Inleiding
Nadere informatieOpdracht 1. 2C_0888632_van_ Ruth_Colin_ Opdracht_1_Compleet
Opdracht 1 2C_0888632_van_ Ruth_Colin_ Opdracht_1_Compleet Deliverable 1 Visuele merk- en concurentieanalyse Merkanalyse 2C_0888632_van_ Ruth_Colin_ Opdracht_1_Analyse_ ING_BANK Concurentieanalyse 2C_0888632_van_
Nadere informatieSWIS Handleiding Webbeheer
1 SWIS Handleiding Webbeheer Inhoudsopgave I. Inloggen in Webbeheer en je wachtwoord resetten... 4 Inlogscherm... 4 Dashboard met toptaken en statistieken... 4 Je wachtwoord vergeten?... 5 II. Modules:
Nadere informatieTemplate instellingen
Template instellingen Bij Vormgeving/Template instellingen vind je alle mogelijkheden om jouw huisstijl door te voeren in je shop. De template instellingen zijn onderverdeeld in diverse tabbladen. In dit
Nadere informatieInhoud van de website invoeren met de ContentPublisher
Inhoud van de website invoeren met de ContentPublisher De inhoud van Muismedia websites wordt ingevoerd en gewijzigd met behulp van een zogenaamd Content Management Systeem (CMS): de ContentPublisher.
Nadere informatieHUISSTIJL GIDS 17/18 VERSIE 1.0
HUISSTIJL GIDS 17/18 VERSIE 1.0 HELVETICA NEUE CONDENSED BLACK ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!@#$%^&*? TYPOGRAFIE Helvetica Neue Condensed Black wordt gebruikt in kapitalen (hoofdletters). Door
Nadere informatieHuisstijlhandboek digitaal van de Bibliotheek. Versie 0.8
Huisstijlhandboek digitaal van de Bibliotheek Versie 0.8 Inhoudsopgave Inleiding 3 Verklarende woordenlijst 4 Basis elementen 5 1. Logo 6 1.1 Beeld 6 1.2 Naam 7 1.3 Toevoeging vestigingsnaam 8 1.4 Grootte
Nadere informatieSUBSITE BEHEREN. 1. Verticale navigatie maken
SUBSITE BEHEREN 1. Verticale navigatie maken In de hoofdnavigatiemappen kunnen subnavigatiemappen worden aangemaakt. Deze mappen worden als ze content bevatten als verticale navigatieknoppen in het linkerschermdeel
Nadere informatieOm het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in 4 kleurvarianten vinden.
Inhoud: 1. Installatie 2. FAQ 3. Thema instellingen 4. Meer hulp nodig? 1.Installatie: Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in
Nadere informatieV.V. WILHELMUS HUISSTIJLHANDBOEK. Naam: Marco Remmerswaal Studentnummer: 12048569 Vak: Visual Communication Lerares: Noortje van Eekeren Versie 1.
HUISSTIJLHANDBOEK V.V. WILHELMUS Naam: Marco Remmerswaal Studentnummer: 12048569 Vak: Visual Communication Lerares: Noortje van Eekeren Versie 1.00 1 / 10 Inhoudsopgave Grid 3 Typografie 4 Kleurgebruik
Nadere informatie4.1 4.2 5.1 5.2 6.1 6.2 6.3 6.4
Handleiding CMS Inhoud 1 Inloggen 2 Algemeen 3 Hoofdmenu 4 Pagina s 4.1 Pagina s algemeen 4.2 Pagina aanpassen 5 Items 5.1 Items algemeen 5.2 Item aanpassen 6 Editor 6.1 Editor algemeen 6.2 Afbeeldingen
Nadere informatieHandleiding Wordpress CMS 4-5-2015
Handleiding Wordpress CMS 4-5-2015 Inhoud 1. Het dashboard.... 3 2. Een pagina of bericht aanpassen.... 5 3. Een nieuw bericht toevoegen... 6 4. Een pagina maken... 7 5. Website met sitebuilder... 8 6.
Nadere informatieBeeldrichtlijnen UvAwebsite Bijlage van Basisrichtlijn UvA-beeld
Bureau Communicatie Beeldrichtlijnen UvAwebsite Bijlage van Basisrichtlijn UvA-beeld Versie 2, juli 2012 UvAweb en fotografie Fotografie is een belangrijk element in de huisstijl van de Universiteit van
Nadere informatieEBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG
EBUILDER HANDLEIDING De Ebuilder is een product van EXED internet www.exed.nl info@exed.nl 1 INHOUDSOPGAVE Inleiding Een korte introductie over het Ebuilder» Navigatie» Snelnavigatie Pagina s Hier vind
Nadere informatieCLOUDSUITE. stijlwijzer. februari 2015
CLOUDSUITE stijlwijzer februari 2015 colofon Aan deze uitgave kunnen op geen enkele manier rechten worden ontleend. Onder voorbehoud van (druk)fouten. Niets uit deze uitgave mag zonder toestemming van
Nadere informatieHvA-beeld richtlijnen
HvA-beeld richtlijnen De Hogeschool van Amsterdam omtwikkelde een eigen beeldtaal en laat daarmee zien waar het voor staat. De hieruit opgestelde richtlijnen zijn een hulpmiddel voor medewerkers van communicatie,
Nadere informatieHet Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010
Het Wepsysteem Het Wepsysteem is een content management systeem, een systeem om zonder veel kennis van html of andere internettalen een website te onderhouden en uit te breiden. Met het Content Management
Nadere informatieHoe maak je een nieuwbrief template met MailChimp? In dit document leg ik je stap voor stap uit hoe je met het drag and drop systeem van MailChimp jouw eigen layout bij elkaar sleept. Je geeft jouw template
Nadere informatieRegels en richtlijnen voor de visuele identiteit >>
Regels en richtlijnen voor de visuele identiteit >> Maart 2010 De visuele identiteit van eherkenning Dit handboek bevat regels en richtlijnen voor de visuele identiteit van eherkenning. Het is voor iedereen
Nadere informatieWeb Presence Builder. Inhoud
Web Presence Builder Inhoud Inhoud... 1 Wat is Web Presence Builder?... 2 Het categoriescherm... 2 De eerste stappen naar een eigen website... 3 Onderwerp selecteren en website naam aanpassen... 3 Vooraf
Nadere informatieVerslag Pencil, Photoshop & InDesign
Verslag Pencil, Photoshop & InDesign Naam: Rob Dekker Studentnummer: 11020067 Vak: MMIO Datum: 07-02-2016 Pencil Bij het ontwerpen van drie verschillende voorstellen voor mijn portfoliosite heb ik gebruik
Nadere informatieDigitale vormgeving 2014 2015. Wordpress deel 1
Digitale vormgeving 2014 2015 Wordpress deel 1 2 Inhoud Site in WordPress... 3 Maak een eigen site in WordPress.com.... 3 Wordpressaccount aanmaken... 4 Opdracht 1... 4 Thema kiezen... 6 Opdracht 2...
Nadere informatieNu maak je een template en exporteert hem later naar de gewenste omgeving.
Gebruik Artisteer Start Artisteer 4 start enigszins anders dan de vorige versies. Vroeger moest je eerst kiezen voor welke omgeving je een template zou maken. Nu maak je een template en exporteert hem
Nadere informatie1. ONTWIKKEL EEN MOBIELE VERSIE
1. ONTWIKKEL EEN MOBIELE VERSIE Het is een misvatting om te denken dat een webshop die ontwikkeld is als desktopsite, ook goed werkt voor mobiele gebruikers. Integendeel, je moet de website optimaliseren
Nadere informatieCMD brand guide. Versie 1.0 oktober 2014
CMD brand guide Versie 1.0 oktober 2014 Inhoud 5 Uitgangpunten 7 Iconen 10 Totems 13 Typografie 16 Kleurgebruik 20 Fotografie 23 Uitingen 27 Powerpoint 29 Online 33 Beeldbank 35 Combinatie met HvA huisstijl
Nadere informatieFunctioneel Ontwerp. digital4u.nl effectief op internet. Klant. Digitale Vaardigheden. Project. Website. April 2013. Datum
Functioneel Ontwerp Klant Project Datum Website April 2013 digital4u.nl effectief op internet 2 Inhoudsopgave 3 4 6 7 8 10 11 13 14 16 18 19 21 22 Introductie Functioneel Ontwerp Homepagina Header, Sidebar
Nadere informatieResponsive Design. Werkwijze en aanlevering Responsive Design. Mach3Builders
Responsive Design Werkwijze en aanlevering Responsive Design Mach3Builders Introductie Door de explosieve stijging van het aantal soorten devices waarop websites bekeken kan worden, is het ontwerpen van
Nadere informatieHandleiding Website beheersysteem
Handleiding Website beheersysteem Inhoudsopgave 1. Inleiding...3 2. Inloggen...4 3. De startpagina...5 3.1. Startpagina menu...5 3.2. Bovenbalk...6 4. Menu en Pagina's...7 4.1. Een nieuwe pagina toevoegen...8
Nadere informatieMilo. Stijlgids 2016
Milo Stijlgids 2016 Inhoudsopgave Inleiding 3 Artiest en essentie branding 4 Logo 5 Stijl 6 Kleurgebruik 7 Typografie 9 Grid en layout 11 Visuals 12 2 Inleiding In deze visuele stijlgids worden de gemaakte
Nadere informatieAFMETINGEN VAN FOTO S
AFMETINGEN VAN FOTO S Hieronder worden per template de relevante afmetingen genoemd, indien mogelijk ook met een aantal gerelateerde tips. De volgende website-templates worden onderscheiden: 1. Website-design
Nadere informatieCasualCMS heeft de volgende structuur: De website: pagina s beheren en algemene instellingen. De gebruiker: bezoekers, bezoekers met toegang tot bev-
CasualCMS Inhoud CasualCMS Website Een nieuwe pagina maken Een pagina later wijzigen Een pagina verwijderen De volgorde van pagina s in het menu wijzigen Website instellingen Gebruikers Inhoud Modules
Nadere informatieDesignbijlage. Ontwerp van de structuur en user interface van de website voor
Ontwerp van de structuur en user interface van de website voor Een initiatief om studenten, bedrijfsleven en hoger onderwijs in Twente te verbinden Designbijlage Bachelor eindopdracht Industrieel Ontwerpen
Nadere informatieHUISSTIJLHANDBOEK LIVING CTIVE
HUISSTIJLHANDBOEK LIVING CTIVE PAGINA 2 STATEMENT Living Active is hét online platform voor mensen met een actieve levensstijl om sporten te verkennen, te ervaren en van deze informatie te leren. Living
Nadere informatieVERSIE BRANDBOOK SPORTBEDRIJF ZAANSTAD. zaans brandbook
VERSIE 2.1 2018 BRANDBOOK SPORTBEDRIJF ZAANSTAD zaans brandbook inhoudsopgave 3 Kleurenpalet en kleurwaardes 14 Gebruik Patronen 4 Logo witruimte 15 Gevel Patroon 5 Schaal en proportie 16 Mosterd Patroon
Nadere informatieHANDLEIDING BEHEER WEBSITE. Vrouwen van Nu
HANDLEIDING BEHEER WEBSITE Vrouwen van Nu Versie 1.3 11 Oktober 2012 VERSIE INFO Versie Datum Auteur Omschrijving 1.0 25 September 2012 Rudi van Es 1.1 2 Oktober 2012 Maarten Rütten 1.2. 3 Oktober 2012
Nadere informatieMonks DESIGN CHECKLIST
EMAIL DESIGN CHECKLIST Merk Optimalisatie Merknaam staat in de Van naam Het verstuur adres is herkenbaar Het Aan-veld is gepersonaliseerd met de naam van de ontvanger De onderwerpregel is informatief kort
Nadere informatieHandleiding Nieuwe versie Wikiwijs Maken. Overzicht van veranderingen en nieuwe functionaliteiten
Handleiding Nieuwe versie Wikiwijs Maken Overzicht van veranderingen en nieuwe functionaliteiten Datum: 3 juni 2013 Wat is er nieuw? Op 3 juni 2013 is er een nieuwe versie van Wikiwijs Maken beschikbaar.
Nadere informatieHandleiding - Styling van OFB Web 4.0
Handleiding - Styling van OFB Web 4.0 Versie: 1.0 Inleiding OFB Web is opgebouwd uit controls. De plaatsing en positionering van de controls wordt vastgelegd in de page.aspx. Dit bestand kan gezien worden
Nadere informatieBibliotheek.nl online styleguide november 2016
Bibliotheek.nl online styleguide november 2016 Index Style basics Logo gebruik....4 Kleur...6 Buttons... 7 Grid / Margins....8 Typografie...9 Componenten Het hoofdmenu.... 13 Catalogus/nbc comp....14 Banners...
Nadere informatieHANDLEIDING E-NEWSLETTER
HANDLEIDING E-NEWSLETTER Werking van de vernieuwde E-newsletter document inhoud: Dit document beschrijft de veranderingen en werking van het vernieuwde E-newsletter systeem versie 1.0.1 DENK INTERNET SOLUTIONS
Nadere informatieChecklist opmaken van een e-mail nieuwsbrief Sendt
sendt Checklist opmaken van een e-mail nieuwsbrief Sendt MailExpert BV Gouw 60 1441 CR Purmerend T 0299 316062 E info@mailexpert.nl W mailexpert.nl Sendt Gouw 60 1441 CR Purmerend T 0299 685572 E info@sendt.nl
Nadere informatieOntwerpdocument responsive verhalenwebsite NS Project web
Ontwerpdocument responsive verhalenwebsite NS Project web Jeroen van Berkum Klas 210 Studentnummer: 500748239 Inhoud Styleguide 4 Belangrijkste schermen 6 Breakpoints 7 Visual research 8 Micro interacties
Nadere informatieInstructies Zitecraft Content Management System (CMS)
Instructies Zitecraft Content Management System (CMS) Inloggen Het CMS wordt geopend via http://zitecraft.com/login of er kan op het icoontje rechtsonder op de zite geklikt worden. Vervolgens dient het
Nadere informatie1. Pagina s. Verwijder pagina: hiermee kun u een pagina van uw website verwijderen. Bewerk pagina: hiermee kunt u de pagina bewerken.
1. Pagina s Wanneer u in het menu op Pagina s klikt, zult u een overzicht zien van de pagina s op uw website. Pagina s kan u toevoegen, verwijderen en bewerken. Ook kunt u ervoor zorgen dat uw pagina s
Nadere informatieHvA-beeld richtlijnen
HvA-beeld richtlijnen De Hogeschool van Amsterdam ontwikkelde een eigen beeldtaal en laat daarmee zien waar het voor staat. De hieruit opgestelde richtlijnen zijn een hulpmiddel voor medewerkers van communicatie,
Nadere informatieBitrix Site Manager gebruikershandleiding BureauZuid
Bitrix Site Manager gebruikershandleiding BureauZuid Introductie Deze gebruikershandleiding geeft gedetailleerde basisinformatie over hoe te werken met Bitrix Site Manager. Deze handleiding is bedoeld
Nadere informatieSIDN Styleguide. Website
Website..6 SIDN Styleguide 6 7 Homepage bovenzijde. Sidewide navigatie - Kleur normal R0/G0/B0. Navigatie - Kleur normal R0/G0/B0 6. Datum - Kapitalen, geen afkorting maand - Regelafstand px 7. Titel -
Nadere informatieHANDLEIDING WEBHARE 1
HANDLEIDING WEBHARE 1 2 INHOUDSOPGAVE HANDLEIDING WEBHARE... 1 Introductie... 4 Inloggen... 5 Publisher... 7 De knoppenbalk... 7 Context Menu... 8 Rotary Word sjabloon... 9 Basis WebHare beheer... 11 Nieuwe
Nadere informatieInhoud. Installatie. Functies
Inhoud Installatie Functies Instellingen Achtergrond Blokken, knoppen Korting Footer Header, left column Main navigation Modules Price categories, Producten Text Contact 3 4 5 5 6 7 8 9 10 11 12 13 14
Nadere informatieSPECIALE VERSIE VOOR LEERKRACHTEN. Inhoud van de website invoeren met de ContentPublisher. 1. Inloggen. 2. Overzicht
SPECIALE VERSIE VOOR LEERKRACHTEN Inhoud van de website invoeren met de ContentPublisher De inhoud van de schoolwebsite wordt ingevoerd en gewijzigd met behulp van een zogenaamd Content Management Systeem
Nadere informatieRelease nieuwe versie 1.9.3
Release nieuwe versie 1.9.3 November 2013 www.siteop.mobi www.siteop.mobi - Kingsfordweg 151-1043 GR Amsterdam Tel: 085 40 123 92 - support.siteop.mob Release Versie Item Versie Datum SiteOpMobi Platform
Nadere informatieProject Het Parool. Media, Informatie en Communicatie. Propedeuse. Ontwerpdocument Beeld
Media, Informatie en Communicatie Ontwerpdocument Beeld Project Het Parool Jerry Leigh Henkes, Demy Verhoogt, Bastiaan Verbeek, Sterre van den Berge, Lucas de Vries, Kathy Gabriel en Hanna Loos. P125 Tutor
Nadere informatieFunctioneel ontwerp. Navigatie
Functioneel ontwerp Het functioneel ontwerp bestaat uit de volgende onderdelen: 1. Navigatie 2. Lijst van alle pagina s 3. Paginaontwerp 4. Formulierontwerp 5. Grafisch ontwerp Navigatie Navigatie wordt
Nadere informatieHvA-beeld richtlijnen
HvA-beeld richtlijnen De Hogeschool van Amsterdam omtwikkelde een eigen beeldtaal en laat daarmee zien waar het voor staat. De hieruit opgestelde richtlijnen zijn een hulpmiddel voor medewerkers van communicatie,
Nadere informatie2. Ontwerp (alleen gebruiken als uw website nog geen huisstijl heeft)
2. Ontwerp (alleen gebruiken als uw website nog geen huisstijl heeft) 2.1. Lay-out U kunt de indeling van uw site zelf kiezen en wijzigen. Er zijn momenteel negen verschillende framesets mogelijk. Voorbeeld:
Nadere informatieHandleiding: OpenEmm nieuwsbrief manager Diergaarde Blijdorp
Handleiding: OpenEmm nieuwsbrief manager Diergaarde Blijdorp Algemeen Deze handleiding beschrijft de werking van OpenEmm gekoppeld aan WordPress. Ondanks het feit dat binnen OpenEmm nieuwsbrieven opgemaakt
Nadere informatieR E S P O N S I V E Documentatie 1
R E S P O N S I V E Documentatie 1 Inleiding Theme Delta Responsive: speciaal ontwikkeld voor uw lifestyle webshop! Het Delta Responsive Theme is speciaal ontwikkeld voor lifestyle webshops. Een strakke
Nadere informatieHandleiding. HetSchoolvoorbeeld.nl. HetSchoolvoorbeeld 2.1. Websites voor het onderwijs. Websites Social media Mediawijsheid Grafisch ontwerp
HetSchoolvoorbeeld.nl Websites voor het onderwijs Handleiding HetSchoolvoorbeeld 2.1 Websites Social media Mediawijsheid Grafisch ontwerp Handleiding HetSchoolvoorbeeld 2.1 Pagina 1 Inhoud 1 Opbouw van
Nadere informatieContentformule website Alzheimer Nederland
Contentformule website Alzheimer Nederland Inleiding Deze contentformule is opgesteld bij de ontwikkeling van het nieuwe Alzheimer-Nederland.nl in 2016. Dit document legt uit welke keuzes zijn gemaakt
Nadere informatieLiesbeth Mantel. Mediacollege webdesign professional
Liesbeth Mantel Mediacollege webdesign professional Juni 2006 Inhoud 1 Inleiding... 3 2 Grid en layout... 4 3 Kleurenpalet... 5 4 Typografie... 6 5 Navigatie... 7 6 Schetsen... 8 7 Stylesheet... 10 1 Inleiding
Nadere informatieDeze week: - Bespreken 2 websites - kleur - MBTI - Opdracht wat moet er voor volgende week af zijn?
Deze week: - Bespreken 2 websites - kleur - MBTI - Opdracht wat moet er voor volgende week af zijn? Vormgeving in relatie tot verschillende doelgroepen Hoe kun je mensen groeperen? oefening [ met z n
Nadere informatieWordpress handleiding LOA Lak B.V.
Wordpress handleiding LOA Lak B.V. Over Wordpress Wordpress is een content management systeem (kortweg CMS). Een CMS is systeem waarmee u de inhoud van uw website kunt beheren. Om Wordpress te kunnen gebruiken
Nadere informatieDe tekstverwerker. Afb. 1 de tekstverwerker
De tekstverwerker De tekstverwerker is een module die u bij het vullen van uw website veel zult gebruiken. Naast de module tekst maken onder andere de modules Aankondigingen en Events ook gebruik van de
Nadere informatieVan AllSolutions QX2 naar AllSolutions10
Van AllSolutions QX2 naar AllSolutions10 Pagina 1 van 11 Inhoud 1. AllSolutions10 gelanceerd... 3 Responsive... 3 Design... 3 2. AllSolutions10 activeren... 4 3. Aangepaste bovenkant... 5 4. Uw website
Nadere informatieRDM ROTTERDAM STIJLWIJZER 2015 VERSIE 1.0
RDM ROTTERDAM STIJLWIJZER 2015 VERSIE 1.0 RDM ROTTERDAM IS DÉ INNOVATIE-ETALAGE VOOR HET ROTTERDAMSE HAVENGEBIED, WAAR TECHNIEK OP EEN AANTREKKELIJKE MANIER ZICHTBAAR WORDT GEMAAKT. LOGO BASISVERSIE Binnen
Nadere informatieSAN v3. Update document 2010. uitgebracht door OCEN
SAN v3 Update document 2010 uitgebracht door OCEN Inhoudsopgave. Inleiding...3 1 Navigatie...4 1.1 Navigatie: het menu...4 1.2 Navigatie: dashboard...4 1.3 Navigatie: kruimelpad...4 1.4 Navigatie: iconen
Nadere informatieEr zijn veel manieren waarop je een site kunt analyseren. We beperken ons hier tot de homepage. In deze opdracht gaan we 2 manieren toepassen:
1 Site-analyse Er zijn veel manieren waarop je een site kunt analyseren. We beperken ons hier tot de homepage. In deze opdracht gaan we 2 manieren toepassen: 1 Analyse van de paginastructuur 2 Analyse
Nadere informatieMaak een vormgeving (geschikt voor meerdere devices), met een duidelijke huisstijl en visual, die aansluit bij jouw doelgroep, waarbij je rekening
Maak een vormgeving (geschikt voor meerdere devices), met een duidelijke huisstijl en visual, die aansluit bij jouw doelgroep, waarbij je rekening houdt met verschillende behoeftes binnen je doelgroep.
Nadere informatieEnoza. Handleiding Versie
Enoza Handleiding Versie 1.3 088 990 7700 support@ccvshop.nl www.ccvshop.nl Inhoudsopgave Inhoudsopgave 2 Changelog 3 1. Inleiding 4 2. Instellingen aanpassen 5 2.1 Tabblad: Start 5 2.2 Tabblad: Achtergrond
Nadere informatieWEBSITE USABILITY. white-paper
WEBSITE USABILITY white-paper Alle rechten voorbehouden Het is niet toegestaan deze white-paper aan derden te verstrekken of te verkopen. Het is niet toegestaan de inhoud van deze white-paper elders te
Nadere informatieReleasenotes grafische aanpassingen & API uitbreiding. 07 september 2016
Releasenotes grafische aanpassingen & API uitbreiding 07 september 2016 Inhoud Nieuwe grafische aanpassingen... 3 Aanpassing e-mail tekstverwerker in dossier... 3 Brieven en formulieren... 3 Overzichtspagina...
Nadere informatieHuisstijlhandboek Internet en intranet. Versie 4.2 Datum Juli 2011
Huisstijlhandboek Internet en intranet Versie 4.2 Datum Juli 2011 2 van 97 Colofon Versienummer 4.2 Datum juli 2011 Locatie http://www.rijkshuisstijl.nl Ontwerp Studio Dumbar Auteur Project 1 Logo Historie
Nadere informatieTeksten op je WordPress site zetten of aanpassen
www.smitloopbaan.nl/beheer/ Teksten op je WordPress site zetten of aanpassen Je kunt met WordPress op 2 manieren teksten en afbeeldingen op je website plaatsen : op een pagina of in een bericht. De vaste
Nadere informatieGrafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase
Mobiel Datanose Op dit moment is mobiel datanose niet goed gedaan; je krijgt gewoon de site te zien zoals je het te zien krijgt op pc's of laptops. Maar vaak heb je het probleem dat je op je mobiel moet
Nadere informatieWHITEPAPER. Wat is een. Responsive website? Voordelen van een. Responsive website? Hoe start je met een. Responsive website? RESPONSIVE WEBSITES
WHITEPAPER RESPONSIVE WEBSITES Wat is een Responsive website? Voordelen van een Responsive website? Hoe start je met een Responsive website? INTRODUCTIE Met het downloaden van deze whitepaper kunnen we
Nadere informatieHandleiding vernieuwde website INDI.nl
Handleiding vernieuwde website INDI.nl Inhoudsopgave Favorietenlijst 3 Merken 3 Speciaal orderverzoek 4 Afbeelding zoomen 4 Sticky header 5 Categorie afbeeldingen 5 Productweergave 6 Direct bestellen vanuit
Nadere informatieZIEN SERVICE BIOSCOOP
OUDE LOGO OVER Service bioscoop is een bedrijf met een erg brede doelgroep. Naast de gangbare films worden er ook Nederlandstalige kinderfilms getoond en er is zelfs een 50+ avond. Kortom een bioscoop
Nadere informatieHANDLEIDING CMS (CONTENT MANAGEMENT SYSTEEM)
HANDLEIDING CMS (CONTENT MANAGEMENT SYSTEEM) ONDERNEMERSWEBSITES.NL Inhoud Inloggen... 2 Paginaoverzicht... 3 Is een pagina wel of niet gepubliceerd en wel of niet zichtbaar in menu?... 3 Subpagina...
Nadere informatieBeginnerstrainin TYPO3 Stap voor stap de website beheren
Beginnerstrainin TYPO3 Stap voor stap de website beheren Programma Uitleg indeling website Achtergrond beheeromgeving TYPO3 Het publiceren Opmaken homepage Het maken van pagina's Het opmaken van pagina
Nadere informatieStartersgids iblox. Inhoudsopgave. Hulp bij het opzetten van uw website.
Hulp bij het opzetten van uw website. Inhoudsopgave Start met uw website Inloggen vanaf BC dashboard Mail account aanmaken 1. Tab Algemeen 2. Tab Doorsturen 3. Tab E-mailaliassen 4. Tab Automatische beantwoording
Nadere informatieHANDLEIDING CMS. Blackbrick.nl. Datum Oktober Versie Online-Marketingmachine, Marco Bouman en Maico de Jong
HANDLEIDING CMS Blackbrick.nl Datum Oktober 2013 Versie 3.24 Auteurs Online-Marketingmachine, Marco Bouman en Maico de Jong INHOUDSOPGAVE 1. INLEIDING 2. AAN DE SLAG 3. TE BEHEREN ELEMENTEN IN DE SITE
Nadere informatieHoe ontwerp je een responsive website? Handleiding voor de ontwerper
Hoe ontwerp je een responsive website? Handleiding voor de ontwerper versie 1-16 oktober 2018 Hoe ontwerp je een responsive website? Handleiding voor de ontwerper versie 1-16 oktober 2018 Inhoud 1. Responsiveness
Nadere informatieWidget Tip van de dag!
Gebruikershandleiding Widget Tip van de dag! Datum Versie Naam Opmerkingen 01-12-2011 0.5 M. Bruinsma Schrijven handleiding J. van Beijnen 05-12-2011 1.0 J. van Beijnen Opmaak en kleine aanpassingen structuur
Nadere informatieOnline banner ontwerp via UBA website www.banners.uba.be
Online banner ontwerp via UBA website www.banners.uba.be Banner Via www.banners.uba.be willen we de UBA secties de gelegenheid geven op een eenvoudige manier zelf een banner te ontwerpen en tegen een gunstige
Nadere informatieWEBSITE MANUAL EZRA BOTTER SELWYN VAN HAAREN
WEBSITE MANUAL EZRA BOTTER SELWYN VAN HAAREN - KORTE INTRODUCTIE - Omdat de website volledig is aangepast en een vernieuwd cms heeft, is het wel handig om hier een kort samengevat papierwerk van te hebben,
Nadere informatieStijlgids mobiele apps Rijkswaterstaat
RWS BEDRIJFSINFORMATIE Stijlgids mobiele apps Rijkswaterstaat Richtlijn voor design en user experience Datum 17 maart 2015 Versie 1.1 Colofon Uitgegeven door Rijkswaterstaat Corporate Dienst Afdeling Corporate
Nadere informatieLeer aan de hand van deze beknopte handleiding te werken met je Dashboard, om jouw persoonlijke website te beheren en naar wensen aan te passen.
Leer aan de hand van deze beknopte handleiding te werken met je Dashboard, om jouw persoonlijke website te beheren en naar wensen aan te passen. Handleiding Aurélie Duriau 02/2018 Inhoud Inleiding... 2
Nadere informatie