1

Digitale Vormgeving

Webdesign en

Social Media

2

Digitale Vormgeving

Productpresentatie Om een product als afbeelding goed te presenteren in een webshop, een banner of op een andere manier, is het van belang het product goed uit te snijden. Hiervoor kun je gebruik maken van meerdere selectiegereedschappen. Het meest nauwkeurige gereedschap hiervoor is de selectiepen. Omdat je met de Pen een pad om het object maakt zullen er geen pixels ontstaan maar strakke lijnen. Het is echter geen snelle manier van selecteren en je moet er even op oefenen om het onder de knie te krijgen.

Selecteren met Pen

Opdracht 1 Gereedschap Pen

Maak een selectie met het gereedschap Pen van een Kopje met een oor. Kopje met oor Zoek op internet een afbeelding van een kopje met een oor zonder schotel. Open de afbeelding in Photoshop en kopieer deze laag. Kies het Pengereedschap uit de gereedschapsbalk. Ga naar de optiebalk en kies rechtsboven Pad (staat tussen Vorm en Pixels).

Begin links boven en werk met de klok mee. Klik één keer op je kopje, er ontstaat een ankerpunt. Laat de muis los. Klik daarna op een volgende plek.

Laat nu de muis niet los, maar trek hem opzij zodat je een bocht kunt maken. Laat de muis los

als je tevreden bent. Klik op het middelste punt van de as met de Alt-toets ingedrukt, het rechtse deel verdwijnt.Maak een volgend punt op dezelfde wijze. Punt zetten, muis ingedrukt, loslaten als de boog goed is, met Alt klikken op het middelste punt.

3

Digitale Vormgeving

Selecteer nu met de Pen het hele kopje tot je weer bij het beginpunt bent. Je ziet voor het sluiten een 0 naast de pen, het pad zal daarna gesloten worden

Als je met het gereedschap Direct Selecteren op de lijn van het pad klikt komen alle ankerpunten en hendels tevoorschijn. Je kunt het pad dan nog aanpassen, ankerpunten verplaatsen en de padlijnen verbeteren.

Overlappende vormen uitsluiten Om het rondje uit het oortje te halen klik je boven in de optiebalk op Padbewerkingen. Kies daar voor Overlappende vormen uitsluiten. Teken nu ook een pad in het oor.

Selectie maken Klik met de Rechtermuis en kies voor Selectie maken. Geef aan of je een Doezelrand / Feather wilt. Probeer uit hoe groot deze moet zijn. Voor een product met een strakke buitenrand zoals metaal, glas en in dit geval het kopje kies je voor 0. Voor een product met een zachte buitenrand zoals stof of vacht, kies je voor 5 meer. Kopieer het product met Ctrl + J in een nieuwe laag. Kijk voor meer informatie op de site: www.digitalevormgeving.wordpress.com op de pagina Tutorial, Pengereedschap.

4

Digitale Vormgeving

Banner De inhoud Een banner is een reclame-uiting (met doorklik-mogelijkheid) op internet. Meestal een combinatie van afbeeldingen en teksten. De banner kun je gebruiken om te adverteren voor bijvoorbeeld een product of een evenement. Wat de inhoud is van je banner is afhankelijk van je doel. Een banner plaats je op een plaats waar de beoogde doelgroep actief is. Het plaatsten van banners op externe sites is meestal niet gratis. Bannerformaten Er zijn een aantal verschillende maten waarin banners gemaakt worden om ze op verschillende manieren te kunnen inzetten. Voor 1 bannerset gebruik je uiteraard dezelfde stijl. De teksten en afbeeldingen krijgen een andere maat en andere positie ten opzichte van elkaar. In de infographic van Adcrowd, de meest voorkomende bannerformaten. Bannersformaten.nl geeft een overzicht van formaten en de verschillende posities op een site.

5

Digitale Vormgeving

Opdracht 2 Banners Maak 2 verschillende banners: Eén met de nadruk op het product en de prijs. Eén met de nadruk op het product en de sfeer. Gebruik voor beide banners dezelfde ingrediënten: een product en een persoon. Kies vervolgens voor één van de twee en maak daarvan nog een banner in een afwijkend formaat.

Opdracht 2a Maak een selectie van een product uit een foto met een drukke achtergrond.

Zoek een foto met een product. Bijvoorbeeld een flesje parfum, een koptelefoon, een duikbril of een handtas. Je bent vrij in de keuze van je onderwerp maar moet je wel houden aan de volgende criteria: -De foto moet groter dan 2 MB zijn. -De foto moet copyright-free zijn. -Het product moet opgaan in een drukke achtergrond. Selectie met het toverstafje of snelle selectie mogen niet mogelijk zijn.

Maak een selectie van het product met behulp van het Pengereedschap. Check je in de optiebalk of het pengereedschap staat op Pad in plaats van op Vorm of Pixels

Teken een pad om het product en maak een selectie zoals in de vorige opdracht beschreven. Canvas vergroten Het is de bedoeling dat zowel de oorspronkelijke foto als het uitgesneden product naast of onder elkaar te zien zijn. Maak het bestand groter (breder of hoger). Ga hiervoor naar Afbeelding – Canvasgrootte – Vink aan Relatief – Typ de maat van de extra ruimte die je nodig hebt in. Met de pijltjestoetsen kun je aangeven of de extra ruimte er links, rechts, boven of onder bijkomt. Verplaats de afbeeldingen zodat ze beide te zien zijn. Sla het bestand op als eigennaam-productselectie.psd éneigennaam-productselectie.jpg

6

Digitale Vormgeving

Opdracht 2b Maak een selectie van een persoon uit 2 foto’s met een drukke achtergrond. Zoek een foto van een persoon. Je bent vrij in de keuze van je persoon maar moet je wel houden aan de volgende criteria: -De foto moet groter dan 2 MB zijn. -De foto moet copyright-free zijn. -De persoon moet opgaan in een drukke achtergrond. Selectie met het toverstafje of snelle selectie mogen niet mogelijk zijn. Maak een selectie van een persoon met behulp van het Pengereedschap. Check je in de optiebalk of het pengereedschap staat op Pad in plaats van op Vorm of Pixels. Teken een pad om het product en maak een selectie zoals in de vorige opdracht beschreven. Let op: Omdat het hier niet gaat om een object met een harde strakke, rand maar om een persoon met haren, kleding en huid, kies je voor een doezelaar / feather van meer dan 0 pixels. De hoeveelheid pixels is afhankelijk van de grootte van de foto. Hoe groter de foto hoe hoger het aantal pixels. Rand verfijnen van de haren Om ook de ruimtes tussen de haren te kunnen verwijderen kies je in de Optiebalk voor het gereedschap Selecteren - Rand verfijnen / Refine edge. Dit gereedschap werkt alleen als het object geselecteerd is. Een object kun je selecteren door tegelijk op het laag-icoon en CTRL te klikken. Kies bij Refine edge voor Overlay. Je hebt nu een roze achtergrond.

Klik in het menu Rand verfijnen op de knop links gereedschap Straal verfijnen. Schilder met Straal verfijnen over de randen van het haar. Photoshop selecteert nu de fijne details. Klik op OK. Kopieer en plak vervolgens de gemaakte selectie in een nieuwe laag (Ctrl + J). Verwijder de oude laag.

met rand verfijnen zonder rand verfijnen

Canvas vergroten Ook voor dit document vergroot je het canvas. Afbeelding – Canvasgrootte – Vink aan Relatief – Typ de maat van de extra ruimte die je nodig hebt. Geef met de pijltjestoetsen aan of de extra ruimte er links, rechts, boven of onder bijkomt. Verplaats de afbeeldingen zodat ze beide te zien zijn. Sla het bestand op als eigennaam-persoonselectie.psd én eigennaam-persoonselectie.jpg

7

Digitale Vormgeving

Opdracht 2c Maak een banner van de 2 selecties uit opdracht 2a en 2b met de nadruk op product en prijs. Maak een nieuw document: Formaat: 600 px breed en 315 px hoog, 72 pixels/inch, RGB. Plaats zowel het product als de persoon in het document. Vul dit aan met:

- Naam van het product - Call to action - Prijs - Actietermijn

Aandachtspunten voor de banner zijn Compositie, Aandacht voor prijs, voordeel en product. Sla het bestand op als: eigennaam-banner.psd én eigennaam-banner.jpg.

8

Digitale Vormgeving

Opdracht 2d Maak een banner van de 2 selecties uit opdracht 2a en 2b met de nadruk op de persoon en de omgeving.. Maak een nieuw document: Formaat: 336 px breed en 280 px hoog, 72 pixels/inch, RGB. Plaats zowel het product als de persoon in het document.. Vul dit aan met:

- Naam van het product - Sfeervolle achtergrond - Call to action - Bewerk de afbeelding door het gebruik van effecten en filters.

In het voorbeeld is gebruik gemaakt van: Ctr+U – verzadiging minimaliseren (zwart-wit maken). Filter – Rendering – Zon / Lens flare. Aandachtspunten voor dit sfeerbeeld zijn Compositie, Kleurgebruik en Eenheid. Sla het bestand op als: eigennaam-sfeerbeeld.psd én eigennaam-sfeerbeeld.jpg

Opdracht 2e Kies één van de twee banners en maak daarvan nog een banner in een afwijkend formaat. Kies 1 van de formaten uit de infographic van Adcrowd.

9

Digitale Vormgeving

Iconen Steeds vaker wordt binnen (web)design gebruik gemaakt van iconen. Informatie wordt op deze manier gevisualiseerd. Hierdoor is het mogelijk op een snelle, duidelijke en vaak ook mooie manier te communiceren.

Voordelen van goede iconen Het zijn goede ‘targets’: je kunt ze makkelijk aanraken op een touchscreen, maar ook met een muis. Ze besparen veel ruimte op het scherm(pje). Ze zijn in één oogopslag herkenbaar (of zouden dat moeten zijn). Ze zijn universeel, dus je hoeft ze niet te vertalen voor internationale gebruikers. Ze zijn meestal aantrekkelijk om naar te kijken en voegen echt iets toe aan het ontwerp van een pagina of interface. Ze vergroten de herkenbaarheid van een productgroep of merk als dezelfde iconen en stijl worden gebruikt op verschillende plekken.

Veschillende iconen

Knop: Zoals home, contact, shop, producten, programma of agenda. Social media –button: Twitter, Facebook, LinkedIn, Instagram, etc. Avatar: Een plaatje dat als gebruikersafbeelding op het internet gehanteerd wordt. Favicon: Een klein icoontje voor een website dat vaak te zien is in de adres- of titelbalk.

Aandachtspunten

Eigenheid en herkenbaarheid Door consequente toepassing van een bepaalde stijl ontstaat eigenheid en herkenbaarheid. In het voorbeeld uit de huisstijl van Rijksoverheid is gebruik gemaakt van een specifieke ‘keep’.

Gestileerd of geometrisch De vorm van een icoon kan wordt worden opgebouwd vanuit - een gestileerde waarneming (een realistisch beeld dat grafisch is gemaakt) - geometrische vormen (zoals een rechthoek en een cirkel)

10

Digitale Vormgeving

Rond of rechthoekig De afgeronde hoeken geven de iconen een vriendelijk en toegankelijk karakter. Door een object dat dichterbij staat een andere hoekradius te geven dan een object in de verte wordt op subtiele wijze diepte gesuggereerd. Binnenvormen zijn meestal voorzien van rechte hoeken.

Begrijpelijkheid en samenstelling De begrijpelijkheid van het icoon gaat te allen tijde voor vorm. Het heeft de voorkeur een icoon op te bouwen vanuit één element. Maar soms kan het voor de begrijpelijkheid of context wenselijk zijn om een combinatie te maken van meerdere objecten of onderwerpen.

Tekstuele toevoeging Uiteraard is uitgangspunt dat iconen voor zich spreken en een tekstuele toevoeging overbodig is. Vaak blijkt de betekenis van iconen vanzelf uit de context waarbinnen deze toegepast worden. Soms is een tekstuele toevoeging onvermijdelijk, waar het gaat om organisatienamen bijvoorbeeld.

Kleurgebruik De iconen worden opgezet in één kleurvariant (meestal zwart) en kunnen in elke kleur van het huisstijlkleurenpalet gebruikt worden. Er kan ook gebruik gemaakt worden van tinten, arcering en gradients. Let wel op voldoende contrastwaarde tussen de kleur van het icoon en de achtergrond kleur.

Diapositief Voor witte objecten is een alternatief icoon nodig voor diapositieve toepassing. Belangrijk is dat het icoon geen lijnicoon is maar opgebouwd uit vlakken en optisch dezelfde uitstraling en grootte heeft als de positieve versie ervan.

11

Digitale Vormgeving

Opdracht 3 Iconen Maak een eigen iconenserie bestaande uit: a 1 avatar b 1 favicon c 2 buttons (home – contact –shop – producten – programma – etc) d 2 social media follow-buttons (Twitter – Facebook – LinkedIn – Instagram – etc)

Criteria Eenheid

De iconen moeten gezamenlijk 1 serie vormen, in één stijl worden ontworpen. Dit betekent dat je

consequente keuzes moet maken voor gestileerd of geometrisch, rond of rechthoekig, arcering, gradiënt,

kleurgebruik, lijndikte, tekenstijl, etc.

Oorspronkelijkheid / originaliteit

Probeer een specifiek eigen element te verwerken in je ontwerp wat je uiteraard ook weer consequent

toepast.

Duidelijkheid

Liefst vanuit 1 element en zonder tekstuele toevoeging moet duidelijk zijn wat met het icoon bedoeld

wordt. Voldoende contrast en een minimum aan details moeten ervoor zorgen dat het icoon in klein

formaat nog duidelijk is.

Kwaliteit

Een icoon van 2,5cm – 2,5cm met een resolutie van 300 dpi moet 100% haarscherp (niet vaag of pixelig)

zijn. Uiteraard heeft vector de voorkeur.

12

Digitale Vormgeving

Paginastructuur website

Met paginastructuur wordt bedoeld de elementen waaruit en de manier waarop de webpagina is

opgebouwd. Elementen die je kunt tegenkomen.

1 Logo Mag niet ontbreken. Staat vaak op de belangrijkste plaats links boven. Is meestal ook de homebutton. 2 Eyecatcher The 5 Second Rule: 5 seconde de tijd om een bezoeker een reden te geven om niet weg te gaan. Bijvoorbeeld door antwoord te geven op een vraag, iets interessants aan te bieden of te laten zien. 3 Navigatie Kan in de vorm van iconen, rollovers of afbeeldingen. Steeds vaker met een (hidden) uitklapmenu waardoor de informatie al gecategoriseerd wordt. Voor mobiele devices wordt het hidden menu weergegeven met het hamburgericoontje. 4 Zoekvenster Hulp bij (specifieke) navigatie. 5 Welkomstekst Belangrijk als startpunt, versterkt de navigatie en wekt vertrouwen. 6 Social media Like- en sharebuttons maar ook Twitter-, Instagram-accounts, etc. rechtstreeks op een website. Er wordt gebruik gemaakt van knoppen in een oorspronkelijk design of een variaties in de stijl van een site. 7 Call to action Zet een bezoeker aan om iets te doen. Bijvoorbeeld iets te kopen of iets te bekijken. De plaats van een call to action is boven de ‘fold’ (de vouwlijn vanaf waar je gaat scrollen). 8 Widget Ruimte in kolommen voor social media, links,

afbeeldingen, extra menuutjes, etc. De term widget wordt ook voor applicatiemenuutje gebruikt. Maar dat bedoelen we hier niet. Kolommen staan meestal links en rechts van een pagina maar kunnen ook in header en footer staan. 9 Contactgegevens Liefst op iedere pagina. Staan daarom vaak in de footer. 10 Banner Meestal een JPEG of GIF met standaard afmetingen. Door gebruik te maken van kleur en animaties wordt (vaak door een externe adverteerder) geprobeerd de aandacht van mensen te trekken. 11 Slider Kan een visueel overzicht geven van de mogelijkheden binnen de website of van de producten en diensten die er geboden worden. 12 Video Een embedded (ingesloten) video is een snelle en aantrekkelijke manier om een verhaal te vertellen. Belangrijk voor SEO. 13 Afbeelding Ter illustratie of verduidelijking en ook weer belangrijk voor de zoekmachines door te kiezen voor afbeeldingen die met een zoekwoord te maken hebben. 14 Titel en tussenkopje Belangrijk als tags voor zoekwoorden en accent in informatie. 15 Keurmerk – 16 Review – 17 Voordeel- of weggeefactie – 18 Newsitem Zie voor uitleg de tekstkaders.

13

Digitale Vormgeving

Building trust Bijvoorbeeld door het benoemen van de mogelijkheid om gratis te verzenden, of terug te sturen, door reviews, contactmogelijkheden maar ook door het plaatsen van keurmerken.

Leadership = sharing Marktleider is niet langer een geweldige positie bij een gerespecteerd bedrijf. Het betekent steeds vaker actief zijn in het delen van praktische ervaring met anderen. Het delen van praktische adviezen en kennis met anderen laat zien dat jij en je bedrijf weet waar je het over hebt. Delen gebeurt vaak door het weggeven van een whitepaper of ebook.

Keep it fresh Houd een site actueel bijvoorbeeld door het plaatsen van een newsitem of recente twee. Een site die recent geüpdate is suggereert ook up tot date te zijn met de nieuwste ontwikkelingen in de branche.

14

Digitale Vormgeving

Layout De manier waarop de verschillende elementen geplaatst zijn. Het is van belang dat er goed wordt omgegaan met de ruimte op het scherm. Over elke millimeter van een resolutie moet nagedacht worden. Dat betekent niet dat er geen witruimte in mag voorkomen. Te veel informatie op één pagina kan ondervangen worden met linkjes naar andere pagina’s maar ook met

korte alinea’s en opsommingen. Aandachtspunten zijn: typografie, tekstgrootte, interlinie, kleurgebruik, duidelijke knoppen voor conversie. In het Westen zijn we gewend van links naar rechts te lezen… en van boven naar beneden. Hierdoor wordt door onze hersenen eigenlijk automatisch een prioriteit gegeven aan de content bovenaan en links op een pagina. Dat is de reden, dat een menu jarenlang links stond en dat een website in F vorm van boven naar beneden werd bekeken. Inmiddels is men tot het inzicht gekomen, dat een menu links blijvend de aandacht weghaalt van de belangrijkste content. De beste layout voor de pagina op een goede website is een menu

aan top, niets links en rechts uitsluitend secundaire informatie. Tot wellicht over vijf jaar de inzichten opnieuw zijn aangepast.

Trends 2016 Bron: Frankwatching / Desiree Batties en Andre Iterson

1. Van flat naar material Het is nog steeds flat design wat de klok slaat maar de suggestie van diepte en hoogte is terug. Driedimensionaal kan helpen bij het gebruik van een website of app. Een rechthoekig vlak is een rechthoekig vlak, maar zodra je er een schaduw onder zet, wordt het een knop. Material design noemt

Google het. Meestal nogal grafisch vormgegeven: geen kleurverloop en stevige contrasten. De schaduw onder de knop is net zo plat als de knop zelf, alleen in een tintje donkerder.

Voorbeeld van material designs van Douwe Egberts en Gmail.

2. Micro-interactie Subtiele animatie om de gebruikservaring te verbeteren zie je overal. Of eigenlijk: vaak zie je hem niet eens, je merkt alleen dat een website of een app lekker voelt. Jouw actie – klikken, swipen, tappen of ‘muishooveren’ – heeft een resultaat. Je wéét dat je op een knop gedrukt hebt, je ziet dat het formulier verzonden is, je voelt dat het einde van een lange pagina-swipe eraan komt.

Voorbeeld micro-interactie Rabobank

F

15

Digitale Vormgeving

3. Mobiele elementen op desktop Het feit dat we met z’n allen de hele dag tappen en swipen op kleine schermen, maakt dat we aan mobiele designelementen gewend raken en dat we ze gaan waarderen. En dus gaan designers mobiele elementen ook voor desktop gebruiken. Bijvoorbeeld het hamburgermenu.

Voorbeeld van een hamburgermenu op de desktop van On the grid

Verder zien we veel mobiele elementen op de desktop die mooi en goed zijn. De smalle zetspiegel/tekstbreedte en fikse witruimtes bij contentpagina’s . Voor petieterige knopjes op een telefoonscherm zijn onze vingers te dik, dus raakten stevige knoppen in zwang. Dat vinden we fijn. Dat swipen van lange pagina’s vanzelfsprekend maakte, zorgde ervoor dat we minder bang werden voor scrollen en dus een scheutiger gebruik van witruimte zijn intrede deed.

4. Hero image op homepage In de homepageslider worden in een stuk of vijf beelden producten, diensten of een hele organisatie aan het publiek gepresenteerd. En eigenlijk weet iedereen wel dat geen websitegebruiker ooit alle beelden achter elkaar gaat bekijken, maar het is zo moeilijk om het in één beeld te zeggen. Toch zien we steeds vaker dappere pogingen om het in één foto, illustratie, video of zelfs woord te zeggen. Met aandacht wordt een veelzeggend beeld gekozen, een illustratie gemaakt of video geschoten. Een korte stevige tekst maakt de boodschap compleet. Hulde aan de hero image!

Voorbeelden van ‘hero images’ van Medium en Think Apart.

16

Digitale Vormgeving

5. Editorial design Waar vroeger alle tekstpagina’s op elkaar leken, dansen koppen, foto’s, quotes, illustraties en broodtekst vrolijk om elkaar heen. We zien de krantenopmaak, maar er zijn ook sites die zich voordoen als een damesglossy. Een opvallend detail is de vaak bijzondere uitlijning. Als je goed kijkt, zie je dat er wel degelijk uitgelijnd is, maar veel speelser dan we tot nu toe deden.

Voorbeelden van editorial design van De Correspondent en Weblounge.

6. Fonts galore Qua letters mag alles, als het maar rijk en veel is. Braafheid is verboden. Het combineren van een schreef en een schreefloze letter behoort tot de basics dit seizoen. Voor de koppen kies je rijke fonts met een uitgesproken karakter. Zelfs als je een bank of een verzekeringsmaatschappij bent.

Fonts-voorbeelden van While we’re young, The Forecaster, ING en Aegon.

17

Digitale Vormgeving

7. Niemands lievelingskleur Het kleurpalet is edgy. Op frisheid lijken we uitgekeken, helderheid schijnt ons oppervlakkig toe. De kleuren voor 2016 zijn vuil, ze schuren. Als je over een kleur kunt zeggen dat het niemands lievelingskleur is, weet je dat je goed zit het komende jaar.

V

Voorbeelden van het kleurenpalet voor 2016.

8. One-size-fits-all Mooie trend: websites die op elk scherm passen, zonder witrandjes of snijverlies. Websites die elk scherm vullen, of ze zich nu vertonen op een brede laptop, een lel van een designerscreen of iets wat tussen telefoon en tablet in zit. We hebben het hier niet over ‘gewoon’ responsive met verschillende versies voor verschillende devices. De one-size-fits-all-site zonder maximale breedte is veel schaalbaarder.

One-size-fits-all voorbeeld van Croptrust.

18

Digitale Vormgeving

9. Het toefje geel Geel is het pepertje van 2016. Alles wat een beetje meer pit kan gebruiken, voorzien we van een toefje geel. Heeft je zwart-wit site wat nodig? Kies voor een geel menu-item. Te weinig spanning? Een geel half-transparantje over een foto doet wonderen. Zit je om een eye-catcher verlegen? Kleur knop of tekst knalgeel. Mooi dat-ie opvalt!

Gele toefjes van Arte, Webydo en Ecap.

10. Draadmodellen Ineens ging het ons opvallen: overal lijntjes. We komen ze voortdurend tegen: draadmodellen, schematische verbinding tussen punten en aardrijkskundige hoogtelijnen. We kunnen deze trend niet verklaren, maar vinden hem wel tof. We voelen het helemaal na, een prettig, hip, computer-animatie technisch dingetje. Daar willen we meer van.

Voorbeelden van Ecap, WNF, Ava, Baku, Lincoln en CRM

Opdracht 4 structuur homepage Ontwerp een homepage voor een desktop website. a Formaat: breedte 1920 pixels, hoogte vrij te kiezen (scrollen mag), resolutie 72 pixels per inch. b Plaats in je ontwerp minimaal 12 van onderstaande site- elementen:

1 Logo 2 Eyecatcher 3 Navigatie 4 Zoekvenster 5 Welkomstekst 6 Social media 7 Call to action 8 Widget 9 Contactgegevens 10 Banner 11 Slider 12 Video 13 Afbeelding 14 Titel en tussenkopje 15 Keurmerk 16 Review 17 Voordeel- of weggeefactie 18 Newsitem.

c Maak gebruik van de aandachtspunten zoals omschreven bij de tekst Layout. d Verwerk in je ontwerp minimaal 5 van onderstaande trends:

1 Material design 2 Micro-interactie 3 Mobiele elementen 4 Hero image 5 Editorial design 6 Fonts galore 7 Niemands lievelingskleur 8 One size fits all 9 Het foefje geel 10 Draadmodellen

19

Digitale Vormgeving

Seductive Design Productverkoop en de kunst van het verleiden.

Een plaatsje boven de lijn is een kwestie van

Verleiden. Consumenten moeten worden verleid door meer dan alleen de functionaliteit van het product. In de wijze waarop je het product presenteert moet je de aandacht trekken en je onderscheiden van de concurrent.

By SaraSoueidan

Een beetje wel … je moet grappig zijn, ook

anders, onverwacht uit de hoek kunnen

komen, een klein beetje mysterieus,

betrouwbaar overkomen, er goed uitzien,

actueel en maatschappelijk

betrokken zijn, de ander uitdagen,

toegankelijk, zorgen voor interactie, en als

iemand anders een positief verhaal over je

vertelt is het al helemaal te gek.

20

Digitale Vormgeving

Grappig / Creatief

Opvallend

Opvallen op het web, tussen de concurentie.

Onverwacht Guerilla-advertising Op een onverwachte, ludieke manier reclame maken om op deze manier publiciteit en sympathie te verkrijgen voor het product.

21

Digitale Vormgeving

Mysterieus Inspelen op nieuwsgierigheid.

Betrouwbaar Bekende Nederlander + expert.

Veel gebruikte termen: technologie – doorbraak - wetenschappelijk bewezen - (onafhankelijk) onderzoek - aangetoond effect - werkzaam dermatologisch getest.

Voorbeeld http://www.youtube.com/watch?feature=endscreen&NR=1&v=xx- 1_a3rvX0

Speciaal voor jou De presentatie is gericht op bijvoorbeeld: kinderen, zwangere vrouwen, professionals etc.

22

Digitale Vormgeving

Mooi

Apple watch 2016

Status

Woorden als premium, excelent, gold en silver geven een extra waarde en gevoel van exclusiviteit.

Extra waarde geven

23

Digitale Vormgeving

Erbij horen Door middel van productplacement (sluikreclame) worden producten gekoppeld aan favoriete personen en situaties. Met het kopen van het product associeert de koper zich met de persoon en de situatie.

Verantwoord Nadruk op :duurzaam, milieuvriendelijk, mens- diervriendelijk, fair trade, dicht bij de natuur, gezond, basic.

24

Digitale Vormgeving

Toegankelijk

Nadruk op prijsvoordeel. Goedkope materialen en kleurencombinaties staan centraal. Kernwoorden zijn: prijspakker, korting, extra inhoud en koopje.

Actueel Nadruk op een populair televisieprogramma, een actuele gebeurtenis, of een speciale viering. Bijvoorbeeld Sinterklaas of Koningsdag, maar ook wintertijd of K3.

De ander uitdagen

Tell me and I will forget - Show me and I will remember - Engage me and I will understand

25

Digitale Vormgeving

Een positief verhaal vertellen

User Generated Content staat voor informatie die wordt aangeleverd en/of geproduceerd door gebruikers van het product. Been bepaald medium. De informatie kan in de vorm bijvoorbeeld door er over te praten op social media. Sharing is caring

Opdracht 5 Seductive design Ontwerp twee verschillende presentaties voor een bestaand product. Maak uit onderstaande uitgangspunten twee verschillende keuzes:

- Grappig - Anders (Opvallen t.o.v. de concurrent) - Onverwacht (guerrilla advertising) - Betrouwbaar (archetype – bekende Nederlander – wetenschappelijk bewezen, etc.) - Mysterieus (nieuwsgierigheid opwekken) - Verantwoord - Speciaal voor jou - Actueel - Uitdagend (Interactief) - De gebruiker een goed verhaal laten vertellen (usergenerated)