Richtlijnen Social Networks: Linkedin

Rijksoverheid

Social Network Richtlijnen Internet en intranet Ontwerp Instructie

Studio Dumbar Studio Dumbar

Versie Datum

1.0 Juni 2009

Rijksoverheid | Social Networks in Rijkshuisstijl | Studio Dumbar | Versie 1.0 | Juni 2009

2 van 65

Inhoudsopgave Voorwoord — 3

Implementatie (3/4) — 36 Implementatie (4/4) — 37

Introductie — 4 Youtube — 5 Voorbeeld — 6 Voorbeeld — 7 Implementatie Implementatie Implementatie Implementatie

(1/4) — 8 (2/4) — 9 (3/4) — 10 (4/4) — 11

LinkedIn.com — 12 Specificaties — 13 Analyse (1/3) — 14 Analyse (2/3) — 15 Analyse (3/3) — 16 Voorbeeld — 17 Implementatie — 18 Facebook.com — 19 Specificaties — 20 Analyse (1/2) — 21 Analyse (2/2)  — 22 Voorbeeld — 23 Implementatie (1/6) — 24 Implementatie (2/6) — 25 Implementatie (3/6) — 26 Implementatie (4/6) — 27 Implementatie (5/6) — 28 Implementatie (6/6) — 29 MySpace.com — 30 Specificaties — 31 Analyse — 32 Voorbeeld — 33 Implementatie (1/4) — 34 Implementatie (2/4) — 35

Ning.com — 38 Specificaties — 39 Analyse (1/2) — 40 Analyse (2/2) — 41 Implementatie (1/3) — 42 Implementatie (2/3) — 43 Implementatie (3/3) — 44 Twitter.com — 45 Specificaties — 46 Analyse — 47 Voorbeeld — 48 Implementatie (1/3) — 49 Implementatie (2/3) — 50 Implementatie (3/3) — 51 Chi.mp — 52 Specificaties — 53 Analyse — 54 Voorbeeld — 55 Implementatie (1/3) — 56 Implementatie (2/3) — 57 Implementatie (3/3) — 58 Hyves.net — 59 Specificaties — 60 Analyse — 61 Voorbeeld — 62 Implementatie (1/3) — 63 Implementatie (2/3) — 64 Implementatie (3/3) — 65

Rijksoverheid | Social Networks in Rijkshuisstijl | Studio Dumbar | Versie 1.0 | Juni 2009

3 van 65

Voorwoord Aan: Werkgroep Implementatie Van: Fiona Atighi Datum: 19 mei 2009 Betreft: richtlijnen Social networks Beste werkgroepleden, Voor jullie liggen de richtlijnen hoe om te gaan met de rijksshuisstijl binnen social networks. In dit document is voor acht veel gebruikte social networks (YouTube, LinkedIn, Facebook, MySpace, Ning, Twitter, Chi.mp en Hyves) beschreven wat aan vormgeving kan worden aangepast en hoe de rijksshuisstijl hierop wordt toegepast. De huisstijl voorbeelden van deze social networks dienen tevens als inspiratie voor andere social networks. Uiteraard denken we hier graag in mee. We wensen jullie veel plezier en succes met het inrichten van social networks in de rijkshuisstijl. Namens project 1 Logo, Fiona Atighi

Rijksoverheid | Social Networks in Rijkshuisstijl | Studio Dumbar | Versie 1.0 | Juni 2009

4 van 65

Introductie Tijdens de analyse van de verschillende social networks is vastgesteld dat voor vrijwel alle networks geldt dat het toevoegen van een ‘eigen’ huisstijl maar op een aantal plaatsen mogelijk is. In elk network kan een logo afbeelding worden geplaatst, de tekst kan altijd bewerkt worden maar kleur kan slechts bij een aantal networks aangepast worden. Ook is er een klein aantal networks waar juist alles aangepast kan worden; door gebruik te maken van eigen CSS, is de pagina eenvoudig op te maken naar wens. In deze richtlijnen wordt per social network aangegeven welke elementen wel en niet aangepast kunnen worden en hoe dat dan het meest eenvoudig kan worden gedaan. Naast dit document worden logo afbeeldingen en CSS beschikbaar gesteld om het inrichten van social networks te faciliteren.

Rijksoverheid | Social Networks in Rijkshuisstijl | Studio Dumbar | Versie 1.0 | Juni 2009

12 van 65

LinkedIn.com LinkedIn is een social network dat gericht is op professionele netwerken. Er zijn twee manieren om op LinkedIn kenbaar te zijn: ‘company’ of ‘group’ Een groepspagina kan door iedereen opgezet worden, ook kan iedereen hier lid van worden (soms is een goedkeuring nodig van de groupeigenaar). Een group kan over alles gaan en functioneert meer als een discussieplatform. Een bedrijfspagina kan door een medewerker worden opgezet en laat de huidige en voormalige werknemers zien.

Rijksoverheid | Social Networks in Rijkshuisstijl | Studio Dumbar | Versie 1.0 | Juni 2009

13 van 65

Specificaties In LinkedIn is er alleen de mogelijkheid om het logo toe te voegen. Andere elementen als kleur en typografie kunnen niet gewijzigd worden. Groepspagina Er kunnen twee formaten logo’s worden geplaatst die elk op verschillende pagina’s door de site heen getoond worden. De eerste is het zogenaamde ‘large logo’, dit is het primaire logo en staat hier in het geel aangegeven. Het tweede is een ‘small logo’ en staat hier in het rood. Beide logo’s zijn noodzakelijk om een grouppagina te kunnen vullen. Bedrijfspagina Hiervoor bestaat er maar één logo, het ‘company logo’, dit is iets groter dan de andere twee. Het company logo staat hier in het blauw aangegeven.

Referentie kleur

Naamgeving

Grootte

Formaten

Max File grootte

Verkleining*

Afsnijden

Noodzakelijk

Large logo

100px x 50px

PNG/JPEG/GIF

100kb

-

nee

ja

Small logo

60px x 30px

PNG/JPEG/GIF

100kb

-

nee

ja

Company Logo

100px x 60px

PNG/JPEG/GIF

100kb

-

nee

nee

Group Pagina

Company Pagina

Rijksoverheid | Social Networks in Rijkshuisstijl | Studio Dumbar | Versie 1.0 | Juni 2009

14 van 65

Analyse (1/3) Op deze afbeeldingen zijn de lokaties van de logo’s te zien in de pagina’s. Het ‘small logo’ staat hierbij als een icoon in de topbalk op de volgende lokaties: Afbeelding: 1. Zodra een nog niet ingelogde bezoeker de grouppagina bezoekt is er een login pagina te zien. 2. Zodra een ingelogde bezoeker die nog geen lid is van de grouppagina de pagina bezoekt. 3. Zodra een ingelogd lid van de grouppagina de pagina bezoekt. Het ‘large logo’ is alleen te zien op de overzichtspagina bij een ingelogde gebruiker die nog geen lid van de grouppagina is.

1. LinkedIn login pagina, tijdens browsen kom je direct op een grouppagina aan

3. Grouppagina, lid

2. Grouppagina, geen lid

Rijksoverheid | Social Networks in Rijkshuisstijl | Studio Dumbar | Versie 1.0 | Juni 2009

15 van 65

Analyse (2/3) In lijstpagina’s zijn zowel het ‘small logo’ als het ‘large logo te zien. In de ‘my group’ pagina staat het ‘small logo’ en in de group zoekresultatenpagina staat het ‘large logo’.

1. My Group overzicht

2. Groups search result pagina

Rijksoverheid | Social Networks in Rijkshuisstijl | Studio Dumbar | Versie 1.0 | Juni 2009

16 van 65

Analyse (3/3) Bij een companypagina wordt de inhoud voornamelijk automatisch gegenereerd. Men zal wel eerst een companypagina moeten aanmaken en opzetten. Het ‘company logo’, hier te zien als een blauwe box, is niet verplicht om te plaatsen en is alleen zichtbaar op de homepagina. Zodra hier niets geplaatst is zal de gereserveerde ruimte worden weggelaten. Andere social network sites hebben standaard afbeeldingen bij ontbrekende ‘company logos’, maar LinkedIn niet. Op pagina’s zoals zoekresulaten en profielpagina wordt er helemaal geen logo weergegeven.

1. Company pagina overzicht

2. Company search results pagina (Company logo is hier nooit zichtbaar)

3. Profiel pagina (Company logo is hier nooit zichtbaar)

Rijksoverheid | Social Networks in Rijkshuisstijl | Studio Dumbar | Versie 1.0 | Juni 2009

Voorbeeld In LinkedIn kan gebruik worden gemaakt van twee logoversies, small en large. Omdat het complete logo onleesbaar wordt als dit wordt gebruikt, is er gekozen voor het plaatsen van alleen het beeldmerk. In tegenstelling tot het logo ‘omgeving derden’ (met hanglijn waar het logo onder staat), wordt in dit geval gebruik gemaakt van wit vlak met het beeldmerk erop.

1. Voorbeeld LinkedIn pagina

17 van 65

Rijksoverheid | Social Networks in Rijkshuisstijl | Studio Dumbar | Versie 1.0 | Juni 2009

18 van 65

Implementatie Om de logo’s te implementeren op LinkedIn hoef je maar op één lokatie te zijn. Als eerste log je als user in om een nieuwe group aan te maken. Dit is te vinden in de linkerkolom, hier aangegeven met nummer 1. In de My Group overzichtspagina kun je alle groepen zien waarvan je lid bent. Vervolgens klik je op ‘Create a Group’ (nummer 2) aan de rechterzijde van de pagina.

1

4

Nu verschijnt er een formulierpagina (afbeelding 4) waarin het ‘Large logo’ en het ‘Small logo’ geplaatst kunnen worden (nummer 4 en 5), ook moeten er de volgende gegevens worden ingevuld. 1. 2. 3. 4. 5. 6.

5

Groepsnaam Groepstype Samenvatting Volledige omschrijving Email van de groepsbezitter Goedkeuring (bevestiging geven dat je de Term of Service gelezen hebt en hiermee akkoord bent).

2

1. My Groups overzicht

2. Large Logo

3. Small logo 4. Create a group