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 Amsterdam. Ook op UvAweb neemt het een belangrijke rol in. Op de homepage en subhomepages worden foto’s beeldvullend ingezet als drager voor de tekstblokken. Vervolgpagina’s hebben een brede visual bovenaan de pagina, het brievenbusbeeld. De fotokeuze voor deze grote beelden is niet alleen beeldbepalend voor de webpagina’s, maar ook voor de uitstraling van de UvA. Dit document toont voorbeelden van beelden die goed werken binnen de vormgeving van de site en tevens aansluiten bij de kernwaarden van de UvA. Het is een aanvulling op het document ‘Basisrichtlijn UvA-beeld’ waarin deze basiskernwaarden uitgebreid worden beschreven.
UvAweb en fotografie
2
Toepassing fotografie binnen UvAweb
Homepagefoto’s
Brievenbusfoto’s
Klikbare (actie)blokken
Kolombrede sfeerfoto disciplinepagina
Foto’s binnen het tekstvlak
Foto’s in verwijzende componenten
Foto’s in Nieuws en Agenda
Functionele portretten
Locatieafbeeldingen
UvAweb en fotografie
3
Merkbeeld van onderdelen binnen de UvA Onderdelen binnen de UvA kunnen een eigen subsite, of contentgroep hebben. Bijvoorbeeld: Graduate Schools, onderzoeksinstituten, zwaartepunten, programma’s en disciplines. Deze onderdelen hebben één beeld of foto als merkbeeld. Dat betekent dat deze foto terugkomt op verschillende plaatsen in de website als herkenbaar beeld. Een subsite heeft een homepage met een carrousel. Eén foto daarvan vormt hét beeldmerk van het onderzoeksinstituut of de Graduate School. Deze foto hoort bij de tekst die gaat over het instituut of de school. Contentgroepen zoals faculteiten, opleidingen en zwaartepunten hebben als beeldmerk een breed brievenbusbeeld bovenaan de pagina. Deze foto /dit beeldmerk of een uitsnede daarvan wordt ook gebruikt voor klikbare (actie)blokken, of verwijzende componenten die leiden naar de subsite of contentgroep. Het beeldmerk kan maar voor één onderdeel gebruikt worden. Het beeld van een discipline kan niet gebruikt worden voor een Graduate school of programma. Merkbeelden
4
Uitsnedes en sjablonen Je kunt uitsnedes maken in Hippo. Voor Homepages en brievenbusbeeld is de Hippo-uitsnede vaak niet toereikend. Daarvoor zijn photoshop-sjablonen beschikbaar die het maken van de uitsnedes vergemakkelijkt. De sjablonen zijn verkrijgbaar via: http://cf.bc.uva.nl/beeldbank/Homepage-en-Brievenbus-sjabloon.zip
In Hippo kun je dan de uitsnede voor het brievenbusbeeld en voor de homepagefoto overschrijven (apart uploaden).
Homepagefoto’s
5
Homepagefoto’s
Beeldvullend
Liggend formaat: 1280 x 735 pixels
De betekenis van het beeld is gekoppeld aan de site
Aandachtspunten: Contrastrijke, drukke beelden gaan niet altijd goed samen met de tekstblokken die eroverheen getoond worden. Zorg ervoor dat er geen tekstblokken over het belangrijkste focuspunt van de foto vallen. Maak gebruik van uitsnedes. (zie pagina 5)
Homepagefoto’s
6
De hoofdpersonen uit de foto worden niet afgedekt door tekstblokken.
Deze foto heeft een rustig kleurbeeld en vormt daardoor (ondanks dat er veel op te zien is) een prettige ondergrond voor de tekstblokken.
Detailopname met duidelijk focuspunt en onscherpe delen in de achtergrond.
Interieurfoto met rustige kleurvlakken en spannende ‘doorkijkjes’ naar de personen.
Foto’s geschikt zijn als beeldvullend beeld op de homepage
Homepagefoto’s
7
Het linker meisje wordt storend afgedekt door een tekstblok. De meisjes kijken je aan, dat leidt af.
Locatie zonder activiteit. De foto is enkel een sfeerbeeld van Amsterdam.
Gebruik geen zwart-witfoto’s, de beelden moeten altijd full-colour zijn.
De witte tekstblokken vallen weg op de spierwitte delen van de foto.
Foto’s die minder geschikt zijn als beeldvullend beeld op de homepage
Homepagefoto’s
8
Origineel beeld
Als de foto beeldvullend wordt geplaatst dan valt het focuspunt weg onder de tekstvlakken.
Door in te zoomen en iets met het beeld te schuiven ontstaat er een interessantere uitsnede.
Maak gebruik van beelduitsnedes
Homepagefoto’s
9
Origineel beeld
Als de foto beeldvullend wordt geplaatst oogt hij wat rommelig en valt het grote schip weg.
Door in te zoomen en iets met het beeld te schuiven ontstaat er een interessantere uitsnede.
Maak gebruik van beelduitsnedes
Homepagefoto’s
10
Dit tekstblok is onderdeel van de carrousel en is gerelateerd aan de foto. Het kan afhankelijk van het beeld zowel links als rechts in de pagina worden geplaatst.
Tekstblokken dekken een groot deel van van de foto af.
Homepage uva.nl Op uva.nl wisselt de foto automatisch in een carrousel, Het beeld is gerelateerd aan een actueel bericht. De foto’s worden wekelijks vernieuwd.
Homepagefoto’s
11
Balk met de naam van de site en navigatie-items Homepages subsites De homepages van instituten en schools hebben een iets andere indeling dan de uva.nl hompage. Midden over het beeld loopt een brede balk met hierin de naam van de site en navigatie-items. Ook de subsite heeft een carrousel. Eén foto daarvan vormt hét beeldmerk van het onderzoeksinstituut of de Graduate School of Bibliotheek. Die foto of een uitsnede daarvan wordt ook gebruikt voor Klikbare (actie)blokken, of verwijzende componenten die leiden naar de subsite. Dat komt de herkenbaarheid van het instituut of de Graduate School ten goede. Op de Homepage van de subsite hoort deze foto bij de tekst die gaat over het instituut of de school. Homepagefoto’s
12
Voorbeeldfoto voor een onderzoeksinstituut
Voorbeeldfoto voor de bibliotheek
Voorbeeldfoto voor de studentenhome
Voorbeeldfoto’s homepages subsites
Homepagefoto’s
13
Brievenbusfoto’s
Headerfoto over de gehele breedte van het scherm
Formaat: 1280 x 250 pixels
Het brievenbusbeeld heeft altijd een relatie met de inhoud van de pagina. Dat kan op verschillende niveaus ingesteld worden: Een groep pagina's kan hetzelfde brievenbusbeeld hebben. (bijvoorbeeld bij een Zwaartepunt) Onderliggende pagina's hebben dan automatisch hetzelfde beeld. Je kunt ook per pagina het brievenbusbeeld instellen.
Aandachtspunt: niet elk beeld is geschikt om er een brievenbusuitsnede uit te maken. Er zijn sjablonen beschikbaar in Photoshop die het maken van de uitsnedes vergemakkelijkt. De sjablonen zijn verkrijgbaar bij de UvA beeldredactie (
[email protected] en op de UvAweb Communities. Je kunt de uitsnedes ook in Hippocms maken maken. Brievenbusfoto’s
14
Het brievenbusbeeld wordt bovenaan afgedekt door de semitransparante zwarte balk met het kruimelpad.
Het witte navigatieblok hapt aan de onderzijde een deel uit het beeld
Het onderwerp van het brievenbusbeeld heeft altijd een relatie met de inhoud van de pagina
Brievenbusfoto’s
Brievenbusfoto’s
15
Foto’s die geschikt zijn als brievenbusfoto Slechts een smalle horizontale reep van het beeld is zichtbaar. Foto’s waarbij de focuspunten zich op een min of met horizontale lijn bevinden (bijvoorbeeld een groepje mensen) of foto’s van details werken vaak goed.
Brievenbusfoto’s
16
Door de smalle uitsnede valt de betekenis van de foto’s weg. Originele beelden
Foto’s die niet geschikt zijn als brievenbusfoto
Brievenbusfoto’s
17
Originele beelden
Foto’s waar personen groot op staan afgebeeld, hebben te weinig vlees (ruimte rondom de geportretteerde) om er een goede uitsnede van te maken. Ook de context van het beeld gaat vaak verloren.
Foto’s die niet geschikt zijn als brievenbusfoto
Brievenbusfoto’s
18
Onderzoekszwaartepuntenafbeeldingen in brievenbusformaat Onderzoekszwaartepunten hebben geen subsite met homepagefoto, maar een contentgroep met Brievenbusfoto. Voor Onderzoekszwaartepunten is het vaste beeldmerk per zwaartepunt al vastgesteld. Deze foto wordt ook elders in de site gebruikt, op plekken waar er naar het zwaartepunt verwezen wordt.
Brievenbusfoto’s
19
Het beeld van Information Law is nog wel herkenbaar maar de onnatuurlijke weergave sluit niet goed aan met de UvA beeldrichtlijnen.
Dit beeld van Urban Studies werkt erg goed in brievenbusformaat
Door deze foto aan de rechterzijde iets te verlengen is toch nog een deel van het gezicht zichtbaar.
Deze beelden zijn nauwelijks nog herkenbaar.
Onderzoekszwaartepuntenafbeeldingen in brievenbusformaat Veel van de (vaak verticale) onderzoekszwaartepuntenafbeeldingen verliezen hun herkenbaarheid als ze worden uitgesneden in brievenbusformaat.
Brievenbusfoto’s
20
Klikbare (actie)blokken
Geheel klikbaar blokje waarbij de tekst over beeldvullend beeld ligt Formaten op homepages: 1 kolom breed: 220 x 250 pixels 2 kolommen breed: 460 x 250 pixels Formaten op vervolgpagina’s: 1 kolom breed: 232 x 250 pixels 2 kolommen breed: 468 x 250 pixels
Aandachtspunt: Het beeld mag niet te druk of te contrastrijk zijn. Alleen op een rustig beeld is de overliggende tekst goed leesbaar.
Klikbare (actie)blokken
21
Klikbaar actieblok 1 kolom breed Formaat: 232 x 250 pixels
Klikbaar actieblok op de homepage Formaat: 220 x 250 pixels
Klikbaar actieblok 2 kolommen breed Formaat: 468 x 250 pixels Klikbare actieblokken Klikbare fotoblokken komen op veel plekken voor in de website: op contentpagina’s in de rechterkolom, op homepages, maar bijvoorbeeld ook in de overzichtspagina van disciplines.
Klikbare actieblokken
22
Het schoolbord vormt een rustige achtergrond voor de tekst.
Details zijn vaak ook een goede achtergrond voor de tekst in het fotoblok.
Dit beeld is in Photoshop speciaal aangepast voor een actieblok. De mensen zijn geplaatst op een UvA-rode achtergrond, zo is er ruimte gecreëerd voor de tekst.
Aan de onderzijde is het beeld iets donkerder gemaakt, zodat ook de link goed leesbaar is.
Klikbare actieblokken
Foto’s met bewegingsonscherpte en weinig kleurcontrast zijn geschikt om tekst op te plaatsen.
Klikbare actieblokken
Contrastrijke foto’s kunnen niet worden gebruikt. De tekst wordt onleesbaar.
23
Kolombrede sfeerfoto disciplinepagina
Verhouding 3 bij 4 (staand)
1 kolom breed
Vast formaat: 232 x 309 pixels
Kolombrede sfeerfoto disciplinepagina
24
Verhouding 3 bij 4 (staand) Vast formaat: 232 x 309 pixels
Kolombrede sfeerfoto disciplinepagina De kolom rechts naast de introductietekst is gereserveerd voor een beeld dat kenmerkend is voor de discipline.
Kolombrede sfeerfoto disciplinepagina
25
Foto’s binnen het tekstvlak
Voor foto’s in het tekstvlak gelden twee vaste verhoudingen: 3 x 4 of vierkant 4 vaste formaten: Groot liggend beeld Formaat: 438 x 329 pixels Klein liggend beeld Formaat: 217 x 163 pixels Klein staand beeld Formaat: 217 x 289 pixels Thumbnail Formaat: 65 x 65 pixels Foto’s binnen het tekstvlak
26
Klein liggend beeld over 1 kolom (de helft van het tekstvlak) Verhouding: 3 x 4 Formaat: 217 x 163 pixels
Klein staand beeld over 1 kolom (de helft van het tekstvlak) Verhouding: 4 x 3 Formaat: 217 x 289 pixels
Thumbnail 65 x 65 pixels
Groot liggend beeld over twee kolommen (over de gehele breedte van het tekstvlak) Verhouding: 3 x 4 Formaat: 438 x 329 pixels
Foto’s binnen het tekstvlak Volg voor de stijl van deze foto’s zoveel mogelijk de algemene basisrichtlijnen voor UvA-beeld.
Foto’s binnen het tekstvlak
27
Foto’s in verwijzende componenten
Call for action blok - Liggend beeld over 1 kolom Verhouding: 3 x 4 Formaat: 202 x 152 pixels Call for action blok – Thumbnail Vierkant 65 x 65 pixels Klikblok Liggend beeld over 1 kolom Formaat: 202 x 136 pixels
Foto’s in verwijzende componenten
28
Call for action blok Thumbnail 65 x 65 pixels
Klikblok Liggend beeld over 1 kolom Formaat: 202 x 136 pixels
Call for action blok Liggend beeld over 1 kolom Verhouding: 3 x 4 Formaat: 202 x 152 pixels Foto’s in verwijzende componenten
29
Foto’s in Nieuws en Agenda
Thumbnail Liggend beeld 3 x 4 Formaat: 86 x 64 pixels Foto in agenda detailpagina Liggend beeld 3 x 4 Formaat: 202 x 150 pixels
Foto’s in Nieuws en Agenda
30
Thumbnail in agenda-overzicht Formaat: 86 x 64 pixels
Thumbnail in nieuwsoverzicht Formaat: 86 x 64 pixels
Foto’s in Nieuws en Agenda
31
Beeld in agenda detailpagina Formaat: 202 x 150 pixels
Foto’s in Nieuws en Agenda
32
Functionele portretten
Bijvoorbeeld portretten van medewerkers Drie formaten: Staand: 202 x 269 pixels (verhouding 3 bij 4) Vierkant: 217 x 217 Thumbnail: 75 x 75 pixels
Functionele portretten
33
Staand portret op de medewerkerdetailpagina 202 x 269 pixels (verhouding 3 bij 4)
Vierkante portretten naast het organogram 217 x 217 pixels
Lijst van medewerkers met vierkante thumbnailafbeelding 75 x75 pixels
Functionele portretten
34
Origineel beeld
Uitsnede 3 x 4
Uitsnede vierkant
Functionele portretten Bij functionele portretten gaat het om de herkenbaarheid van de geportretteerde. Deze portretten hoeven niet te voldoen aan de beeldrichtlijn dat de achtergrond relevant en herkenbaar moet zijn. Portretten zijn altijd full-colour.
Functionele portretten
35
Locatieafbeeldingen
Beeld dat wordt getoond bij de routebeschrijving en contactgegevens van de locatie
Vierkant formaat: 217 x 217 pixels
Op beelden van UvA-locaties zijn altijd mensen te zien
Locatieafbeeldingen
36
Goed: Deze foto’s tonen activiteit en de locaties zijn herkenbaar in beeld.
De locatiefoto wordt getoond bij de routebeschrijving en de contactgegevens. De foto heeft een vast vierkant formaat van 217 x 217 pixels.
Minder goed: Er zijn geen mensen te zien op deze foto
Locatieafbeeldingen
37
Beeldbeheer
Beheer beelden met restricties in aparte mappen
Beheer overig beeld in de ‘onderwerpmappen’
Voorzie al het beeld de juiste gegevens in bestandsnaam
Voorzie al het beeld van de juiste taxonomie en trefwoorden
Beeldbeheer
38
Beelden met restricties worden in een aparte map gezet om ongewild gebruik te voorkomen.
Beheer beelden met restricties in aparte mappen Er zijn beelden die zijn voorbehouden aan specifieke onderwerpen, opleidingen, Graduate Schools, instituten: dragende beelden voor homepages en brievenbusbeelden. Respecteer die reservering onderling! Om de beelden met restricties te scheiden van algemeen te gebruiken beeld, is er een aparte map 'beelden met restricties'. Daar moeten de beeldredacteuren beelden plaatsen die gereserveerd zijn voor specifiek gebruik. De map is per faculteit onderverdeeld in domeinen / programma’s / Graduate Schools / instituten / enz. Beeldbeheer 39
Mappen voor opslag van beeld gerangschikt op onderwerp.
Beheer overig beeld in de ‘onderwerpmappen’ Beheer de overige beelden die voor algemeen gebruik zijn in de mappen die gerangschikt zijn op onderwerp.
Beeldbeheer
40
Juist gebruik van de bestandsnaam
Voorzie al het beeld van de juiste gegevens in de bestandsnaam Alleen als de bestandsnaam helder is opgebouwd zijn de bron, de redactionele bestemming en eventuele restricties altijd te achterhalen. Het stramien is: restrictie-organisatieonderdeel-onderwerp-fotograaf of stockbureau-databasenummer.jpg Voorbeelden: • merkbeeld-aardwetenschappen-FNWI-HollandseHoogte-3456.jpg • personen-hoogleraar-HermannDürr-FNWI-fotoJeroenOerlemans.jpg Beeldbeheer
41
Selecteer de juiste taxonomie Vermeld altijd de bron van het beeld bij ‘Auteur / Fotograaf’ en ‘Copyright’ (UvA heeft gebruiksrecht, copyright blijft meestal bij fotograaf. Dus Copyright en Fotograaf zijn vaak hetzelfde, behalve bij Campagnebeeld)
Beschrijf de restricties Geef het beeld relevante trefwoorden
Voorzie al het beeld van de juiste credits, restricties, taxonomie en goede trefwoorden Correct invullen en selecteren van metadata maakt de foto vindbaar, bruikbaar en betrouwbaar, voor jezelf en anderen.
Beeldbeheer
42
Colofon Dit document is een bijlage van de Basisrichtlijn UvA-beeld. Het is samengesteld voor door Edenspiekermann_, het ontwerpbureau van het UvAweb, en Bureau Communicatie. Voor vragen kunt u contact opnemen met
[email protected]. Digitaal is dit document beschikbaar op www.uva.nl/beeldrichtlijn.
Colofon
43
