Presentation Crossmedia Design

1. visuele communicatie
CROSSmediavormgeven
Raoul Postel
docent CROSSmedia
new media ontwerper
grafisch vormgever
webdesigner / developer
ondernemer
ar
html
css
epub share
pdf
3dvr
dpi
cmyk
rgb px
cms
tijden veranderen…snel
mbo
hbo

2. opdrachtgever vormgeving product consument
zender medium ontvanger
vormgever
visuele communicatie

3. Huisstijl zoals de mediavormgever gewend is te maken
1 2 3 4 5
6
visuele communicatie

4. maar tijden veranderen
en snel ook

5. de vormgever bedenkt concepten
schetst voorstellen
communiceert
geeft vorm aan gedrukte / internet media
weet veel van druktechniek
weet veel van internet techniek en media
weet veel van marketing communicatie
heeft passie voor trends, kunst en beeld
is verkoper van eigen werk
kan in opdracht werken (in dienst of als ondernemer)
visuele communicatie

6. visuele communicatie & crossmedia
dit is een printer dit is een printer

7. visuele communicatie & crossmedia
concept
webdesign
online marketing
storytelling in video-audio
print + web
internet of things
onderwerpen
nb. enkele afbeeldingen bevatten links naar gerelateerde websites

8. het idee
het concept
visuele communicatie
Auteur: Raoul Postel

9. het idee
het concept
eerste gedachte
visuele communicatie | concept

10. het idee
het concept
cliche = saai
visuele communicatie | concept

11. wat is een concept
1. weg van het cliché
2. een creatief en schaalbaar idee
om een doelstelling te bereiken
3. unieke ervaring
4.heilige graal / idee
visuele communicatie | concept

12. voorbeelden: niets is vanzelfsprekend…. of wel?
visuele communicatie | concept

13. visuele communicatie | concept
het doel: een logisch proces naar een verrassend concept / idee
het concept / idee vertalen naar vormgeving en medium
Mindmap / wireframes / designmatrix
1. Moodboard
2. Brainstorm / pingpong
3. Schetsen
4. Vragen stellen
5. Social Media
Bij voorkeur in samenwerking met anderen
technieken:

14. visuele communicatie & webdesign
webdesign

15. visuele communicatie & webdesign
van speels naar zakelijk

16. visuele communicatie & webdesign
van creatief gevarieerd naar flexibiliteit in blokken

17. visuele communicatie & webdesign
van pagina-aandacht naar product-aandacht

18. visuele communicatie & webdesign
van totaal-informatie naar one-liner

19. 1. functioneel ontwerp
2. interactief ontwerp (wire)
3. vormgeving & identiteit
4. html en css
5. content management
6. online zetten
7. ondersteuning/advies
visuele communicatie & webdesign
ontwikkeling van een website/app in stappen:

20. visuele communicatie & webdesign
interactie schema | wireframe

21. zijn responsive
bevatten call-to-action & motion
vertellen een verhaal
zijn ook op social media te vinden
visuele communicatie & webdesign
hedendaagse websites…

22. visuele communicatie & webdesign
responsive design: breedte in % in plaatst van px
denk in kolommen

23. visuele communicatie & webdesign

24. visuele communicatie & webdesign
responsive design:
welke informatie toon je op welk scherm?
desktop / breedbeeld = beleving
smartphone = informatie
—> denk aan de laadtijd van mobile gebruikers
Geen mobile website =
slechtere score in de zoekmachines

25. visuele communicatie & webdesign
heat-map: scherm-aandacht op midden-boven

26. visuele communicatie & webdesign
opensource vormgeving: bijv. Bootstrap of Pure CSS

27. visuele communicatie & webdesign
opensource vormgeving:
zeer veel gebruikt, ook te vinden in WordPress e.a. systemen

28. visuele communicatie & webdesign
Veelal gratis, zelf te beheren en relatief
eenvoudig op te zetten zonder veel webkennis
WordPress Blog/website
Drupal/Joomla voor intranet
Magento of Woocommerce Webshop
Welk opensource CMSysteem?

29. visuele communicatie & webdesign
Nadeel open-source:
code is openbaar
meer kans op spam
meer kans op hack
weinig eigen identiteit

30. visuele communicatie & webdesign
webtypografie: bijv. Google Webfonts, Font Awesome
webteksten leesbaar houden voor zoekmachines

31. visuele communicatie & online marketing
online
marketing

32. visuele communicatie & online marketing
call-to-action & motion graphics (banners)
beleving | beweging | interactie
Motion Graphics bijv.
Bigfish Animatie

33. visuele communicatie & online marketing
(web)content marketing (b2b)
belangrijkste marketing tools 2015

34. visuele communicatie & online marketing
(web)content marketing (b2b)
social link & share = laat gebruikers/klanten aan het woord

35. visuele communicatie & online marketing
maak bij een website
ook gelijknamige
social media accounts
geen social media =
slechte score in de zoekmachines
social media koppelen met website

36. visuele communicatie & online marketing
start ‘social’ gesprekken, deel product-info
koppel een Twitter-feed met Facebook, LinkedIn, Google+, e.a.
[ 1 bericht via Twitter wordt via alle gekoppelde media gedeeld ]

37. visuele communicatie & online marketing
(web)content marketing & SEO
gebruik Google Webmaster + Analytics voor bezoekers-analyse

38. storytelling
in video-audio
visuele communicatie & storytelling

39. visuele communicatie & storytelling
vertel het verhaal…

40. Een verhaal…
1. vermijdt het cliché
2. heeft een duidelijk doel
3. beschrijft een unieke ervaring
4.verbindt product met doelgroep
visuele communicatie & storytelling

41. Een verhaal…
1. vertellen via video (youtube)
2. vertellen via audio (soundcloud)
3. vertellen via tekst (blog)
4. met verschillende lijnen
visuele communicatie & storytelling

42. print + web
visuele communicatie & crossmedia

43. schets als basis voor de layout
visuele communicatie | stramien

44. beheersing van stramien in InDesign
HULPLIJNEN, KOLOMMEN EN MARGES
visuele communicatie | stramien

45. visuele communicatie & crossmedia
(i)PDF voor layout / formulieren
ePub 2.0 voor tekst-boeken
ePub 3.0 voor layout / magazines
folio/app voor interactieve magazines
interactieve bestanden te maken vanuit print

46. visuele communicatie & crossmedia
epup, app, ipdf, pageflip

47. beheersing van typografie / teksthierarchie
visuele communicatie | typografie

48. Maak een letterproef van het gekozen font.
HELVETICA GILL SANS UNIVERS
GARAMOND LUCIDA CASLON PRO
visuele communicatie | typografie

49. visuele communicatie & crossmedia
beleving van papier

50. visuele communicatie & crossmedia
tijden veranderen…

51. internet of things
[ ar vr 3d ]
visuele communicatie & crossmedia
drones die producten thuis afleveren?
3d-product files downloaden en thuis uitprinten?

52. visuele communicatie & crossmedia
Koppel alles! Internet of Things….
een baksteen met wifi
of fruit met geluid

53. visuele communicatie & crossmedia
augmented: koppeling van papier naar web
Praktische toepassing voor:
vergroten doelgroep
als communicatie-laag over de realiteit

54. visuele communicatie & crossmedia
Praktische toepassingen, bijvoorbeeld:
oefenen bij pleinvreesklachten
rondkijken in een huis dat verkocht wordt
virtual: de echte nep wereld —> alles kan

55. visuele communicatie & crossmedia
de 3D printer & 360 graden

56. visuele communicatie & crossmedia
maar papier blijft een prachtig medium!