Ponitie

Alle social media uitingen van de politie uniformeren? Dat kan! Met Livecharts…

Met Livecharts maak je in een paar minuten een strakke uiting voor social. Het liefst laat ik dat zien door een echte uiting te nemen van een organisatie en deze in een Livecharts-template te vatten. In het geval van de politie heb ik ervoor gekozen om een template te maken die precies niet in de huisstijl van de politie is. Aangezien de politie heel duidelijk heeft aangegeven het niet te waarderen als derden haar huisstijl gebruiken.

Begin januari 2024 kwam ik deze post tegen. Een animatie die de aandacht trekt en uitnodigt om de rest van de post te lezen, uiteraard netjes in de huisstijl van de politie. Het hoofd Instagram-account van de politie kent een aantal verschillende typen posts en dit format is er één van. Samen vormen de posts een coherent en herkenbaar geheel. En het resultaat is er naar: veel engagement en overwegend positief.

Op lokaal niveau is er minder samenhang, bijna ieder bureau heeft zijn eigen social media kanalen daarnaast posten ook wijkagenten zelfstandig content. Hoe mooi zou het zijn als op regionaal en lokaal niveau de kwaliteit van de posts net zo hoog was als op nationaal niveau?

Alle social media uitingen van de politie uniformeren? Dat kan! Met Livecharts…
(alle video’s zijn YouTube video’s omdat is gebleken dat embedded video’s niet altijd worden afgespeeld op het intranet van de politie)

Een demo en keurig precies niet in de huisstijl van de politie: andere kleuren, ander font en een ander logo. Ik noem het de ponitie-huisstijl.

Bovenstaande animatie is in een paar minuten gemaakt. Kijk maar eens op deze Livecharts-pagina (liefst op een computer) waar je de animatie kan aanpassen naar jouw wensen en stel je dan voor dat alle op social media actieve politiemensen net zoveel uitingen kunnen maken als ze willen. Door gewoon wat te typen in een browser, een paar settings aan te passen, een video te genereren en klaar is Herman.

… en stel je dan voor dat alle op social media actieve politiemensen net zoveel uitingen kunnen maken als ze willen.

Als je geen tijd hebt om het zelf te proberen, de volgende video laat zien hoe het werkt.

De Instagram posts van de politie hebben na de intro animatie (die ik hierboven heb laten zien) ook nog een aantal pagina’s met tekst. Die zien er als volgt uit en kan je hier uitproberen als Livechart (liefst op een computer).

Een ander soort post is de volgende. Dit type begint met een video met daaroverheen een quote, een naam en functie. We hebben dit type ook als voorbeeld uitgewerkt en wel in twee varianten. De eerste waarbij een foto kan worden gebruikt, omdat foto’s veel eenvoudiger zijn te maken dan video. En de tweede variant waarbij een overlay kan worden gemaakt die vervolgens met een video editing programma over een andere video heen gelegd kan worden. Hieronder een filmpje zoals gepost door de politie met twee echte ponitie filmpjes ernaast. De eerste is gemaakt met een foto, de tweede is een transparante Livechart over een video heen gelegd.

En tot slot, je kunt er ook voor kiezen om gebruik te maken van onze standaard templates. Uiteraard, passen we ze aan op jouw huisstijl: logo, kleuren, fonts maar zijn de animaties en mogelijkheden niet op maat. Dat scheelt de helft in de kosten en ziet er zo uit:

Ik hoop dat je een beeld hebt gekregen van wat Livecharts is en kan. Als je enthousiast bent geworden stuur dan een mailtje naar jorma@livecharts.nl of bel naar +31 (0)6 2612 4422, ik kom graag live laten zien hoe het precies werkt.

Lagen

Huisstijlen hebben soms hele specifieke maar vrij complexe elementen. De Sustainable Development Goals hebben bijvoorbeeld een wiel én per doel een vierkant met een nummer en een icoon. Deze elementen zijn specifiek voor de SDG’s, worden veel gebruikt in hun uitingen, ze zijn relatief complex maar wel altijd hetzelfde. Voor deze gevallen kunnen we een ‘laag’ programmeren, deze laag bevat alle complexiteit van het huisstijlelement, kan eenvoudig in een template worden opgenomen en kent een beperkt aantal parameters of settings die aan de gebruiker van de Livechart aangeboden kunnen worden.

Wij zijn weliswaar aan de voorkant even bezig met het programmeren van zo’n laag, maar eenmaal gemaakt is het toevoegen en stylen van het betreffende element kinderlijk eenvoudig.

Hieronder een paar voorbeelden:

  • Rekenkamer munten
  • SDG wiel
  • SDG icoon
  • Provincies Nederland 3D

Grafieken

Grafieken hebben ongelooflijk veel elementen die gestyled kunnen en dus moeten worden. Een x-as bijvoorbeeld heeft een lijndikte en -kleur, maar de ticks op de as (de kleine lijntjes bij iedere waarde) hebben die ook, plus een lengte, vervolgens hebben de labels naast de as een font, kleur, grootte, dikte en afstand tot de as, de labels hebben een bepaald aantal decimalen en soms een eenheid (% of € bijvoorbeeld). Dit geldt voor beide assen maar een grafiek heeft nog veel meer elementen: de lijnen en de bars met hun labels, de legenda, titels, een eenheid naast de as, as-lijnen in vertical en/of horizontale richting. Het is een enorme waslijst!

Gebruik maar eens een generieke oplossing voor grafieken zoals Excel en kijk eens door alle verschillende settings heen. Stel je nu eens voor dat je jouw huisstijl wil implementeren in zo’n oplossing, hoeveel settings moet je aanpassen om de grafiek precies zo te krijgen als de ontwerper het bedacht heeft? En wat is de kans dat een bepaald detail van het ontwerp simpelweg niet kan worden geïmplementeerd omdat het niet wordt aangeboden als een setting?

Daarom hebben wij onze eigen grafieken-bibliotheek gebouwd. Met deze bibliotheek kunnen we ieder onderdeel van de grafiek aanpassen en als het nodig is zelfs helemaal vervangen door een onderdeel speciaal voor jou geschreven. Verder zetten we alle settings alvast voor je op de instellingen die passen bij jouw huisstijl en bieden we alleen die settings aan die je mogelijk nog wil kunnen aanpassen. Dat betekent dat enerzijds dat als je niets aanpast de grafiek er al uitziet zoals hij eruit hoort te zien én het betekent dat het aantal settings waar je doorheen moet waden als je iets wil aanpassen veel kleiner is dan bij een generieke oplossing.

Centraal bureau voor de Statistiek

Uitingen

Hieronder een aantal uitingen van het CBS die in de afgelopen jaren zijn gepost op LinkedIn, Instagram, X (toen nog Twitter) en Facebook.

Interface

Livecharts is met opzet zo simpel mogelijk gehouden. Aan de linkerkant kan je aanpassen wat aangepast kan worden, aan de rechterkant zie je de animatie en bovenin bedien je de playback en dat is het wel zo’n beetje. In onderstaande video laten we zien hoe je een animatie creëert.

De templates zijn zo gemaakt dat kleuren, fonts, marges, iconen en alle andere huisstijlelementen zijn ingebakken. Gebruikers moeten écht hun best doen om uitingen te maken die niet voldoen aan de huisstijl.

De Algemene Rekenkamer

Voor de Rekenkamer hadden we een omgeving gemaakt in de eerste versie van Livecharts. Het kwam zo uit dat de Rekenkamer een nieuwe huisstijl had laten ontwikkelen nadat wij de tweede versie van Livecharts hadden gemaakt. Dit was een goed moment om in de nieuwe versie van Livecharts de nieuwe huisstijl van de Rekenkamer in templates te vatten.

De nieuwe huisstijl was uitgewerkt in een grote verscheidenheid aan uitingen en media, denk aan: social media posts, rapporten, grafieken en video. Voor ons een aanleiding om voor al deze media templates te ontwikkelen en de features van de nieuwe omgeving uit te proberen.

Hieronder een selectie van de verschillende templates die we hebben ontwikkeld. Alle teksten en waarden zijn ‘dummy-teksten’.

Animaties voor social

Rapportage covers

Naast bovenstaande animatie-templates hebben we templates gemaakt voor de covers van rapportages.

Afbeeldingen voor social

Templates voor afbeeldingen voor social.

Video-overlays

Animaties met transparante achtergrond in Apple ProRes formaat, een hoogwaardig video-formaat dat speciaal is ontwikkeld voor het efficiënt editten van video. De titels in onderstaand voorbeeld zijn relatief eenvoudig, maar deze kunnen zo complex gemaakt als gewenst en uiteraard met logo en animaties.

Muntjes

In de nieuwe huisstijl waren meerdere patronen met ‘muntjes’ ontworpen welke in 5 verschillende grids konden worden toegepast. In een uiting kon een gedeelte van het grid worden toegepast, in solide kleuren of met een gradient (verloop). Daarnaast was het mogelijk om indien gewenst één of meerdere muntjes uit het grid weg te laten. Al met al een complex stukje ontwerp.

Om de muntjes eenvoudig aan te kunnen bieden in de templates hebben we een extra optie voor Livecharts gemaakt: ‘layers’.

In een layer programmeren we een heel stuk complexe logica dat vervolgens in meerdere templates kan worden aangeboden met relatief eenvoudige controls. Het gaat te ver om hier precies uit te leggen hoe het werkt maar als je naar de demo-pagina met de Rekenkamer templates gaat dan kan je het zelf uitproberen:

Het exporteren van uitingen is uitgezet om misbruik te voorkomen.

Statbel

Voor het Belgische statistiekbureau Statbel hebben we in totaal 7 templates ontwikkeld voor gebruik op (met name) Twitter / X. Hieronder een aantal voorbeelden:

Aangezien Statbel nog geen duidelijke ontwerptaal had voor social, hebben we op basis van bestaande huisstijl-elementen een set met uitingen ontworpen en deze in templates gevat. Uiteraard staat voor een statistiekbureau het presenteren van cijfers centraal dus hebben we een tweetal geanimeerde grafieken gemaakt.

Het exporteren van uitingen is uitgezet om misbruik te voorkomen.

Livecharts

Standaard maar niet standaard

Normaal gesproken maken we alle templates op maat, zodat ze exact passen in de huisstijl van de klant. Onlangs zijn we naast deze maatwerk templates ook begonnen met het ontwikkelen van meer standaard templates, deze bieden we aan voor de helft van de normale prijs. Alle templates in onze demo-omgeving (behalve sommigen onder het tabje ‘demo’) zijn standaard templates.

We noemen deze templates ‘standaard’ maar dat betekent natuurlijk niet dat we ze niet kunnen aanpassen aan jouw huisstijl. Als we een standaard template implementeren dan krijg je deze met:

  • jouw huisstijlkleuren
  • jouw logo
  • jouw fonts
  • jouw iconen

Wat is er dan standaard aan? De animatie. Je kunt net als in alle templates de timing aanpassen en kiezen uit de animaties die we in templates hebben gestopt, maar als je meer dan deze dingen wilt kunnen aanpassen dan maken we graag een maatwerk template voor je.

Grafieken met een verhaal

Op dit moment hebben we twee standaard grafiek-templates: een lijngrafiek en een staafgrafiek. Aangezien alleen een grafiek (zonder tekst) geen verhaal vormt, hebben we deze templates zo vormgegeven dat je kunt beginnen met een slide met een icoon, titel en tekst, gevolgd door een slide met een titel en de geanimeerde grafiek, en ten slotte af een afsluitende slide jouw logo en een pay-off.

Hiermee kan je een zeer bondig maar compleet verhaal vertellen en jouw grafiek de context geven die hij nodig heeft.

Standaard op maat

Onderstaande animaties zijn gemaakt met onze standaard templates maar in de huisstijl van bol.com.

Wil je bovenstaande templates zelf uitproberen kijk dan eens op onze demo-pagina.

Bij alle templates in een andere huisstijl dan die van onszelf is de export mogelijkheid uitgezet om misbruik te voorkomen. Livecharts werkt het beste op een computer.