Huisstijl en beeldplan intranet / internet VUmc

Transcriptie

1 1 Huisstijl en beeldplan intranet / internet VUmc

2 2 Inhoudsopgave 1 De huisstijl van de VUmc web- en intranetsite 1.1 Beschrijving huisstijl 1.2 Bewaking huisstijl van de website en intranet 2 Fotomateriaal voor de verschillende onderdelen van de website en intranet 2.1 Concept 2.2 De verschillende soorten beeldmateriaal 2.3 Uitvoering 3 Kleurgebruik 4 De opmaak van de teksten op de website 5 Het menu 6 Werken met gerelateerde items en banners 6.1 Gerelateerde items 6.2 Banners 7 Het gebruik van links in de website 8 Voorbeelden

3 3 1. De huisstijl van de VUmc web- en intranetsite 1.1 Beschrijving huisstijl Er zijn vier aspecten te onderscheiden aan de webhuisstijl: vormgeving, navigatie, tekst, gerelateerde items/ banners en links. De webhuisstijl geldt voor alle onderdelen van de website van het VUmc en het intranet. Per subwebsite zijn er een aantal vormgevingselementen die af kunnen wijken van andere subwebsites. De volgende onderdelen kunnen afwijken: De foto-uitsnede boven aan elke pagina van ieder subweb De naam van het subweb midden in de bovenbalk Het menu (alhoewel de opbouw zoveel mogelijk overeenkomstig zal zijn) De navigatie-elementen zijn voor elke subwebsite echter steeds hetzelfde evenals de plaatsing van de diverse elementen op de pagina, de functieknoppen, het lettertype, de lettergroottes, de kleuren etc. Ook voor het omgaan met links gelden overal dezelfde regels. Zo ontstaat één herkenbare VUmc huisstijl. 1.2 Bewaking huisstijl van de website en intranet Aangezien alle organisatie onderdelen van VUmc deel uitmaken van dezelfde website en intranet dient de eenheid van vorm en navigatie bewaakt te worden om er zodoende zorg voor te dragen dat bezoekers de website ervaren als kwalitatief hoogstaand, eenvormig en duidelijk. De bezoeker treft zo steeds dezelfde elementen aan en ook de navigatie is steeds hetzelfde. Verwarring wordt zodoende voorkomen. De huisstijl van de website worden bewaakt door de webcoördinatoren van VUmc en door de verschillende subwebredacteuren.

4 4 2. Fotomateriaal voor de verschillende onderdelen van de website en intranet 2.1 Concept Op de bovenbalk van elke overzichtpagina en subwebsite van het intranet en internet van VUmc worden foto s geplaatst die als branding gaan dienen voor de hoofdpijlers van de beide sites en de diverse organisatie onderdelen. De foto s zijn zoveel mogelijk een close-up van twee mensen die interactie hebben met elkaar. Hierbij is het belangrijk dat er van elk van de twee personen een of meer van de ogen zichtbaar in de uitsnede die gemaakt gaat worden. Dit heeft als reden dat de ogen betrouwbaarheid uitstralen. Het onderwerp van de foto dient aan te sluiten op het organisatie onderdeel of op de pijler. De pijlersoverzichtpagina s maken gebruik een pay off welke naast de foto gebruikt wordt. Het heeft de voorkeur dat pay off en foto op elkaar aansluiten. Voor de organisatie onderdelen (subwebsites) is het misschien niet altijd mogelijk een tweetal mensen op de foto te plaatsen en dit dan ook nog een eigen gevoel mee te geven. Alleen hiervoor kan er ook gekozen worden voor een close-up van producten of een setting die met het onderwerp te maken heeft. 2.2 De verschillende soorten beeldmateriaal Er zijn zeven verschillende foto s voor de drie hoofdpijlers van het internet, de drie hoofdpijlers van het intranet en de algemene homepage van intranet. We kennen de volgende pijlers op de VUmc website: zorg, opleidingen en onderzoek. De beelden van deze drie pijlers komen in een drietal verschijningsvormen voor op de website. Als grote foto in de branding balk. Als verkleinde foto in de branding balk op de pijlervervolgpagina s. En als banner op de startpagina s van de diverse pijlers (zie bijgeleverde voorbeelden). Op het intranet kennen we een algemene startpagina en drie pijlers: organisatie, P&O en services. De startpagina heeft voor het beeld een eigen verschijningsvorm. Op de overige pijlerpagina s worden de beelden maar in één vorm getoond (zie bijgeleverde voorbeelden). Alle organisatie onderdelen (afdelingen, instituten, themasites etc etc) hebben op de VUmc web- en intranetsite een eigen omgeving waarbij op elke subwebsitepagina hetzelfde eigen beeld getoond wordt in de bovenbalk. Dit verhoogt de herkenbaarheid van het desbetreffende organisatie onderdeel. Deze foto s worden, in overleg met de subwebredacteuren, gemaakt door een fotograaf aangewezen door de VUmc webcoördinatoren. Dit om zoveel als mogelijk is de fotografiestijl van de gehele internet- en intranet site te bewaken. Voor het maken van deze portalfoto worden geen fotokosten in rekening gebracht. Voor de foto s die gebruikt gaan worden in het contentgedeelte van intranet en internet is het wenselijk om bovengenoemde fotografiestijl te continueren, maar dit is geen harde eis. Hier geldt de minimale eis dat de foto technisch van goede kwaliteit is en dat de personen op de foto (met name patiënten) toestemming hebben gegeven voor gebruik voor de VUmc website en/of intranet. Als hier niet aan voldaan is, zijn de webcoördinatoren bevoegd om de foto verwijderen. 2.3 Uitvoering De bovenbalk foto s moeten aan de volgende randvoorwaarden voldoen: Voor de 3 hoofdpijler foto s van de website binnen de uitsneden geen witte aflopende vlakken gebruiken, dit geldt voornamelijk voor de banners omdat het de vorm verstoord

5 5 Zoveel mogelijk de donkerblauwe (of kleuren met een vergelijkbare densiteit) vermijden aan de randen van de te maken uitsneden. Dit verstoort de vorm. Hier en daar een klein stukje kan geen kwaad (denk aan haarkleur ed) Waar mogelijk felle intense kleuren gebruiken (zie voorbeeld met kweekschaaltjes) Wees voorzichtig met teveel details Close up fotografie, mensen mogen afgesneden worden

6 6 3. Kleurgebruik Alleen de kleuren zoals afgebeeld op het hoofdpalet mogen gebruikt worden voor de VUmc website. Voor het intranet wordt de corporate kleur geel (pms 3965) vervangen door de medewerkerkleur turquoise (pms 313).

7 7 4. De opmaak van de teksten op de website De opmaak van de teksten is een integraal onderdeel van de voorgeschreven huisstijl van de website. De belangrijkste elementen worden hier onder opgesomd: Elke menulaag betekend een apart stuk samenhangende tekst bestaande uit: een informatieve titel en eventueel een subtitel (maak naast een lange titel, om het cms goed te kunnen gebruiken, ook een korte titel). De titel mag niet in kapitalen worden geschreven. een bodytekst opgebouwd uit korte alinea's met witregels (hoe langer de alinea, hoe meer moeite de bezoeker moet doen om zich een idee van de inhoud te vormen. Alinea's van meer dan 5 tot 10 regels lezen lastig). Bij iets langere teksten wordt boven aan een alinea geplaatst waarin kort omschreven wordt welke informatie men op de betreffende pagina zal aantreffen (Wie, wat, waar, wanneer, waarom en hoe). informatieve tussenkopjes van maximaal drie woorden Als teksten langer zijn dan een paar alinea's, heeft de bezoeker tussenkopjes nodig om zich snel een idee te vormen van de inhoud (afhankelijk van de hoeveelheid tekst wordt in Morello gebruik gemaakt van het algemene tekstitem of algemene tekstitem met subnavigatie ). Een samenhangende tekst kan maximaal 8 tot 10 tussenkopjes bevatten anders kan beter de tekst weer worden opgedeeld in samenhangende teksten voor volgende menulagen. Eventuele puntsgewijze opsommingen Deze zijn ideaal voor een snel overzicht en veel gemakkelijker te bekijken dan doorlopende tekst. Bovendien zorgen zij voor 'lucht' in de tekst, wat het bekijken een stuk prettiger maakt. Bij opsommingen wordt gebruik gemaakt van de mogelijkheden die Morello biedt. Schrijf ook een teasertekst van maximaal 275 woorden (één teasertekst per samenhangende tekst). Deze tekst is bedoeld om de webbezoeker te verleiden om de tekst te gaan lezen. Een teasertekst wordt niet in de tekst zelf getoond, maar op overzichtspagina s en andere plaatsen waar naar de tekst verwezen wordt (gebruik hiervoor het speciale invulveld van het gekozen item). De schrijfwijzer van het VU medisch centrum wordt gebruikt voor een eenduidige schrijfwijze van namen van organisatieonderdelen en bijvoorbeeld gebouwen (zie Teksten dienen links te worden uitgelijnd. Uitvullen is niet toegestaan. De huisstijlletter voor de website en intranet is Arial 10 pt. De letter kan door de bezoeker via speciale buttons, op iedere pagina aanwezig, vergroot worden. Het overmatig gebruik van vet dient zoveel mogelijk vermeden te worden. Het totale beeld wordt er onrustig van Hetzelfde geldt voor het gebruik van cursief. Cursieve letters zijn bovendien moeilijker te lezen via een beeldscherm Het gebruik van tabellen om een afwijkende opmaak (b.v een inspringeffect ) te realiseren is niet toegestaan. Gebruik de inspringmogelijkheid die Morello biedt.

8 8 Subwebredacteuren, auteurs en redacteuren wordt aangeraden literatuur met als onderwerp schrijven voor het web te raadplegen (vb: Schrijven voor het beeldscherm van Willem Hendrikx (ISBN ). 5. Het menu De volgorde van hoofdmenu onderdelen, maar ook de naamgeving voor gelijksoortige menuonderdelen is zoveel conform de afspraken die daarover gemaakt worden met de webcoördinatoren. Op die manier ontstaat duidelijkheid voor de bezoeker. Via het homepage afdeling item kunnen de menu-items afdeling, opleiding, ziektebeelden en specialismen aangevinkt worden om zichtbaar te zijn in de menustructuur. Zij verwijzen naar doorzoekbare overzichten. Via de templates overzichten kunnen de menu-items agenda, nieuws, klinische studies, publicaties, medewerkers en standaard aangemaakt worden. De eerste vijf mogelijkheden zijn specifiek bedoeld voor deze onderdelen ( agenda en nieuws verwijzen naar doorzoekbare overzichten, klinische studies, publicaties en medewerkers zijn (gecategoriseerde) overzichten. Standaard is vrij invulbaar. Daarnaast is het mogelijk om de items algemene tekst en algemene tekst met subnavigatie direct via een referentie vanuit de Content Verkenner in de menustructuur op te hangen als menu-item. Lees meer hierover in de handleiding voor het gebruik van Morello VUmc CMS, Morello van Mediasurface die op de Morello cursus wordt uitgereikt. Het gebruik van Engelstalige en Nederlandstalige menu items en teksten door elkaar is niet toegestaan. Nederlandstalige tekst dient alleen ingevoerd te worden op de Nederlandse site en op de Engelse site alleen Engelstalige informatie. Uitzondering zijn Engelstalige teksten op het gebied van onderzoek. Deze mogen ook geplaats worden bij de Nederlandstalige menu items.

9 9 6. Werken met gerelateerde items en banners De rechterkant van de meeste webpagina s is bedoeld voor gerelateerde items, de linkerkant voor banners. 6.1 Gerelateerde items Gerelateerde items verwijzen naar andere content gerelateerde informatie. Het kan hier gaan om achtergrondinformatie die elders in de site geplaatst is, PDF files of anderszins. 6.2 Banners Banners dienen er voor om extra aandacht te vragen voor bepaalde informatie door middel van een plaatje of foto met een onderschrift, eventueel aangevuld met een link. De banners hebben een vast format. Lees meer hierover in de handleiding voor het gebruik van Morello VUmc CMS, Morello van Mediasurface die op de Morello cursus wordt uitgereikt. NB: gerelateerde items en banners zijn nog in de ontwikkelfase ( )

10 10 7. Het gebruik van links in de website In het webplatform zijn twee hoofdelementen aanwezig om de bezoeker behulpzaam te zijn bij het navigeren: het al eerder besproken sectiemenu en de links. Een algemeen gebruikscriterium is om zo min mogelijk navigatie-elementen op te nemen in de broodtekst, de content. Indien een link naar een site buiten het webplatform verwijst, dan wordt deze site geopend in een nieuw venster, zodat de bezoeker niet ongemerkt de site van VUmc verlaat. Indien vanuit Nederlandstalige content wordt gelinked naar Engelstalige informatie dan wordt achter de link vermeld: (Engels). Idem indien vanuit Engelstalige tekst wordt gelinked naar Nederlandstalige informatie (Dutch). Gebruik de in Morello aanwezige mogelijkheid om downloads toe te voegen aan items om te verwijzen naar Officedocumenten.

11 11 8. Voorbeelden Voorbeeld startpagina van de pijler onderzoek. Rechtsboven in de afbeelding de grote variant van de fotografie. Rechts onderaan de uitsneden voor de banner fotografie. De vorm van het beeld is voor elk van de 3 hoofdpijlers op het VUmcweb gelijk.

12 12

13 13 Voorbeeld van een vervolgpagina waarbij de foto een andere uitsnede heeft gekregen. Deze vorm is voor elke vervolgpagina binnen de 3 pijlers gelijk.

14 14 Voorbeeld van een voorwerp detail foto voor een organisatie onderdeel pagina. De vorm van de uitsnede is voor elk van de organisatie onderdelen gelijk. Deze onderdelen kennen geen verkleinde vorm van de fotografie. Deze vorm van fotografie wordt ook voor voor Thema s gebruikt.

15 15 De homepage van het intranet heeft links een grote foto welke alleen op de homepage gebruikt zal worden. Ook de vorm waarin de foto gegoten wordt komt alleen op de homepage voor. Let ook op de afwijkende kleurstelling van het intranet.

16 16 Een voorbeeld van een vervolgpagina op het intranet. Elke foto afbeelding in de branding balk heeft hier dezelfde vorm. In tegenstelling tot de website. Maar voor elke hoofdpijler moet er een andere foto geschoten worden.