Interaction Design - Book Of Proof 2017

book of proof

Yoerdan de Rijke (77953) Klas: v2i3 Innovaties Vak: INTER2 Tutor: Christine Booij Datum: 26 juni 2017 Grafisch Lyceum Rotterdam

TABLE

OF

CO

ONTENTS

Innovatie 1 1.1 Web Design Trends 2017

04-05

1.2 Cinemagraphs

06-07

1.3 Swift

08-09

Innovatie 2 2.1 Adobe XD

10-11

2.2 STRP BIĂ‹NNALE 2017

12-13

2.3 Bootstrap (Studio)

14-15

Innovatie 3 3.1 User Experience Design

16-17

3.2 Spring Fair 2017

18-19

3.3 Grafische Vakbeurs 2017

20-21

Innovatie 4 4.1 Wireframing

22-23

4.2 Sketch

24-25

4.3 Search Engine Optimalisation

26-27

1.1 INNOVATIE

Web Design Trends 2017

Witruimtes & Grids Pagina

04

De eerste innovatie waar ik voor heb

In het magazine staan de laatste

gekozen is om een boek/magazine

trends. Hierin kan je lezen over:

te maken over de web design trends

* Gradients

van 2017. Dit heb ik bewust gekozen

* Typografie

om er zelf meer van op te steken en

* Wit Ruimtes & Grids

natuurlijk zelf op terug te kijken. Het

* Flat Design

is ook erg handig om inspiratie op

* Split Content

te doen door de onderzoek van de

* 3D & Cinemagraphs

trends in webdesign.

* Contrast & Geometrische Shapes

Cover

Ook heb ik er bewust voor gekozen om bijna alle pagina’s wit te laten zodat de content die er wordt tentoongesteld er beter uit springt. Zelf heb ik ook geprobeerd om zoveel mogelijk plaatjes te integreren, zodat je minder hoeft te lezen en het meer als inspiratie gebruikt.

Ik probeer dit zelf in de toekomst, elk jaar een keer een boek te maken over de (web)design trends. Zodat ik ‘gedwongen’ naar inspiratie zoek, maar dan op een goede manier zodat ik er zelf altijd bij ben wat de laatste trends zijn.

Typografie Pagina

WEB DESIGN TRENDS 2017

Geometrische Shapes Pagina

05

1.2

Cinemagraphs

INNOVATIE

The Nature Conservancy - Vallende druppels water

Cinemagraphs, een vrij nieuw onderwerp in de design wereld. Ik vond dit ontzettend intressant om te onderzoeken, wat dit nou eigenlijk is en hoe het wordt gemaakt. Ik zie dit zelf steeds vaker voorbij komen, en ik moet zeggen, het is echt iets wat bedrijven kan helpen om dingen te realiseren of om goede reclame te maken vooral voor web/digitaal.

Pour over coffee - Schenkende water in koffie filter

Zelf denk ik dat dit in de toekomst zich steeds verder uit zal breiden, vooral omdat je nu al ontzettend veel gelijk bestaanden soorten media ziet zoals GIFjes. Je ziet het steeds meer op websites komen van bedrijven, reclames en advertenties. Ik denk dat je hiermee in het kort een klein verhaal kunt meegeven aan je klanten, en ga dit zelf zeker in de toekomst gebruiken!

06

Cinemagraphs zijn levende foto’s: een mix van statisch beeld en video die blijft loopen. Door het gebruik van deze stijl kunnen ontwerpers elementen bewegen in een foto en zo makkelijker een verhaal vertellen.

Het zijn dus eigenlijk microvideo’s die niet langer zijn dan 8 seconden, dit wordt gedaan zodat er makkelijker een loop ontstaat. Ook voor de grootte van bestanden kan dit tever oplopen.

De uitdaging bij het maken van een cinemagraph is het zo bewerken dat je geen ‘zichtbare’ loop hebt. Je maakt het dus als het ware oneindig. Je probeert de kijker niet het begin

Bewegende insecten op sinaasappels

en eind te laten zien.

Cinemagraphs zijn vooral te gebruik bij; * Social Media * Emails * Digitale Displays * Websites * Banner advertenties

CINEMAGRAPHS

Milk & Cookies - Vallende druppels melk & vuur in openhaard

07

1.3 INNOVATIE

Swift

Swift Oefeningen

Zelf ben ik ontzettend geintresseerd in het ontwikkelen en ontwerpen voor apps, daarom leek het mij heel erg leuk om eens te gaan duiken in de appdevelopment van iOS: Swift.

Playground Basics op Xcode

Swift is een krachtige programmeertaal. Schrijven met Swift code is interactief en leuk, de syntax is concreet maar expressief, en Swift bevat moderne eigenschappen en ontwikkelaars liefde. Swift code is veilig door het ontwerp, maar produceert ook software die razendsnel loopt.. Deze codetaal wordt geschreven in het programma Xcode.

08

BoogieBot (zelf gemaakt!)

Hierboven zie je de BoogieBot. De BoogieBot is een opdracht die je bij een van de tutorials aangeboden krijgt. Dit vond ik zelf een van de leukste opdrachten, omdat je zelf je eigen code typt die je daarvoor hebt geleerd en deze ook echt tot leven komt! De BoogieBot is een loopende-dansende robot.

Voor de toekomst is deze innovatie erg handig, steeds meer handelingen gaan Swift Playground in Xcode

via de telefoon en niet iedereen zit meer achter zijn computer om bijvoorbeeld iets op te zoeken. En daarom vind het erg fijn om er wat van te weten, zodat ik er zelf binnekort ook mee aan de slag kan gaan. Ook als designer vind ik het fijn om er iets meer van te weten, zodat ik gemakkelijker kan communiceren met developers en uiteindelijk mijn eerste

SWIFT

app te ontwikkelen!

09

2.1 INNOVATIE

Adobe XD

Opstartscherm Adobe Experience Design

Ik was zelf ontzettend blij toen ik dit programma ontdekte, dit programma van Adobe heeft mij ontzettend veel tijd bespaard (en hogere cijfers!)

Zelf heb ik dit programma vanaf de eerste versie meegemaakt en zich zien ontwikkelen naar het programma dat het nu is geworden.

XD Design (Koelkast App)

10

XD Prototype (Koelkast app)

Adobe XD heeft verschillende ma-

Ingebouwde iOS Material Kit in Adobe XD

terial-paketten zoals iOS, Android & Google User Interfaces, zodat het makkelijker wordt gemaakt voor designers om bepaalde elementen te gebruiken van een bestaand UI.

Adobe XD is ontzettend eenvoudig, je leert er snel mee werken en er zijn ontzettend veel tutorials online.

Zelf heb ik voorgesteld bij mijn stage (OFFF) om dit programma te introduceren (en nog andere programma’s/ skills) en hun hiermee te laten werken.

Zodat zij makkelijker als designers kunnen communiceren met hun developers door gemakkelijk een prototype te maken.

Zoals je ziet zijn er twee ‘standen’ in XD waar je mee kan werken; design & prototyping. Bij design kan je aanpassingen brengen aan het ontwerp en bij prototyping kun je jou ontwerp interactief maken door ze te linken met bijvoorbeeld een druk op een button.

ADOBE XD

Opsekops App Design/Prototyping (Beroep opdracht)

11

2.2

STRP BIĂ‹NNALE

INNOVATIE

STRP BIENNALE

We zijn met de interactieve klassen op woensdag 29 maart naar een expositie geweest genaamd STRP BIENNALE. Deze expo liet verschillende interacties zien in alle vormen en maten. Hierbij kon je kiezen om een code-workshop te doen of een virtual-reality workshop.

Ik heb gekozen om een VR-workshop te doen omdat ik het zelf graag wilde ervaren hoe het is. Zelf vond ik de workshop best tegen vallen door de dingen die we moesten doen, maar om zo’n VR-bril op te hebben was erg gaaf om mee te maken.

12

STRP Biënnale behoort met zo’n 30.000 bezoekers in tien dagen tijd qua bereik tot de top tien van toonaangevende festivals voor creatieve technologie ter wereld. Bezoekers komen inmiddels net zo gretig af op de installaties, performances, lezingen en workshops, als op de muziek. Talentvolle jonge makers presenteren zich naast baanbrekende grote namen. STRP biedt kunstenaars in alle disciplines opdrachten voor nieuw werk en daagt haar publiek uit om niet alleen te kijken en luisteren, maar ook zelf te experimenteren.

STRP onderscheidt zich door eigentijdse thema’s te koppelen aan nieuwsgierig publiek en zo de toekomst voelbaar te maken in het nu.

Het hybride programma maakt STRP Biënnale uniek voor jong en ouder, leek en professional.

STRP kenmerkt zich door een lage drempel, een uitdagend aanbod, een nieuwsgierige aanpak en een internationale uitstraling. STRP is de supergeleider tussen creativiteit en tech-

STRP BIËNNALE

nologie in het DNA van Eindhoven.

13

2.3

Bootstrap Studio

INNOVATIE

Bootstrap Studio is een desktop applicatie die je helpt om mooie websites te maken. Het wordt geleverd met een groot aantal ingebouwde componenten, die je kunt slepen en neerzetten om websites samen te stellen. Het is gebouwd op de top van de populaire Bootstrap, en natuurlijk HTML. Duizenden ontwikkelaars en ontwerpers gebruiken het elke dag.

Om Bootstrap Studio te gebruiken heb je wel enige kennis nodig over bijvoorbeeld HTML, CSS en een beetje Javascript. Gelukkig heb ik deze kennis onder de knie door de lessen van mevrouw Booij. Door het programma wordt design en coderen veel meer bij elkaar gebracht, omdat als je een component in je project sleept, de code gelijk te zien krijgt (hoe het is opgebouwd)

Club Famiglia Website - gemaakt in Bootstrap Studio

14

Voor sommige dingen is slepen en neerzetten niet genoeg. Dit is de reden waarom Bootstrap Studio volledige controle geeft over aanpassen van codes. Je kunt CSS en Javascript importeren en bewerken in een soort Sublime-Text editor.

‘Sublime-Text-editor’ van Bootstrap Studio Startscherm van Bootstrap Studio

Doordat je de code gelijk te zien krijgt, leer je ook veel meer te werken met codetalen zoals HTML, CSS en Javascript.

In Bootstrap zitten al bepaalde elementen geNette code-structuur door Bootstrap Studio

bouwd, bijvoorbeeld een contactformulier, login of zelfs achtergrond video’s! Je zou in principe van dit programma de code kunnen pakken als je zelf er niet uit komt. Je kunt er dus hele websites mee maken, maar ook kleine componenten.

In het programma zoals ik net al zei, zitten al componenten ingebouwd. De bedoeling hiervan is dat je die zelf kan aanpassen naar je eigen zin, met bijvoorbeeld een aanpassing van de CSS geef jij er een eigen draai aan.

Ook genereert Bootstrap Studio ontzettend BOOTSTRAP STUDIO

nette code, die je zelf in een andere code editor kan aanpassen. Door deze code te kunnen gebruiken kan je deze ook uploaden naar je eigen domeinnaam.

15

3.1 User Experience Design

INNOVATIE

De visie van een User Experience Designer

Ik ben altijd al geintresseerd geweest in de psychologie achter een interactie/ontwerp.

Het leek mij dus tijd om zelf meer te weten te komen over dit onderwerp, dus ben ik op onderzoek uitgegaan. En heb ik zoveel mogelijk info tot mijzelf opgenomen, en hoop dit zo te verwerken in mijn eigen ontwerpen en ervaringen.

Voorbeeld van UX in wireframes

User Experience is natuurlijk een van de belangrijkste onderdelen van een website, met aan haar zijde een stukje marketing en design. Uiteindelijk komt het allemaal neer op UX, hoe ervaart de gebruiker jou product.

16

Een User Experience Designer is voor-

Voorbeeld van Thumb Range

namelijk bezig met de gebruiker. Het betekent letterlijk Gebruikers Ervaring. De ontwerper hiervan probeert het navigeren en de ervaring van de gebruik zijn vlekkeloos te laten verlopen. Doormiddel van A/B testen uit te voeren (twee groepen, twee concepten), proberen de UX-designers inzicht te krijgen in hun ontwerp.

Een UX-designer werkt heel nauw samen met een UI-designer (User Interface). Zo werken ze veel samen aan bijvoorbeeld de wireframes en (micro) animaties.

Om een voorbeeld te geven van goede User Experience Design...

Een UX-designer is dus kortom meer

Waar denk je dat vaak op een website/app op je

bezig met de interactie en de gebrui-

telefoon het menu aan de rechterkant zit?

ker en voegt dit toe aan het product.

Juist.. omdat als je een telefoon normaal zou vast-

Door vele onderzoeken, statistie-

houden je anders niet linksboven in de hoek komt

ken en analyses te bekijken, kan de

met je duim. Zie het voorbeeld hierboven!

UX-designer als het ware ‘de kers op de taart’ doen en een mooie gebrui-

Wat is nou eigenlijk het verschil tussen UI- en

kerservaring aan gebruikers meege-

UX-design?

ven.

Ondanks ze goed samen werken, hebben ze verschillende rollen. UX design richt zich meer op het

USER EXPERIENCE DESIGN

analystische & technische vlak. UI design komt meer in de buurt van wat we grafisch ontwerp noemen, alleen dan voor online producten.

Illustratie duidelijk verschil tussen UX-design & UI-design

17

3.2

SPRING FAIR 2017

INNOVATIE

SPRINGFAIR - Birmingham

Ik ben samen met mijn vader, zijn bedrijf en het bedrijf waar hij mee samen werkt meegeweest naar Spring Fair 2017. Mijn vader werkt als grafisch vormgever en ontwerp kaarten voor Quire & Hallmark (die daar op de beurs stond). Zelf vond ik het een ontzettende gave ervaring om eens op een van de grootste design beurzen te staan, waar mensen over de hele wereld komen.

Zelf heb ik veel nieuwe connecties gemaakt met mensen over de hele wereld, Engeland, Amerika, Duitsland, Noorwegen noem maar op. Mijn vader stond al langer op de beurs en ben zelf een dag heen en weer gevlogen, om te kijken hoe dat in zijn werking gaat en vooral om inspiratie op te doen.

18

Spring Fair is een ontzettend grote beurs waar de allerlaatste trends worden geshowt door ontzettend veel bedrijven. Mensen van over de hele wereld komen om hier naartoe contacten te leggen en te onderhandelen. Met

Springfair Plattegrond Quire Beursstand

ongeveer 60,000 bezoekers, laten alle bedrijven natuurlijk zien wat ze in hun mars hebben in een beursstand.

Ondanks alle gave ontwerpen/designs die ik langs heb zien komen, wordt er op de beurs ook erg veel onderhandelt. Zelf zat ik een keer tijdens een onderhandeling met mensen uit Noorwegen bij mijn vader, hoe raar eigenlijk de business wereld is. Mensen nemen elkaar soort van in de maling, doen ontzettend aardig tegen elkaar om alsmaar de prijzen omlaag te krijgen. Zelf vond ik dit erg intressant om mee te maken.

Voor de rest heb ik ontzettend veel gezien, paar hebbedingetjes meegenomen en tegen mijn vaders klanten alvast uitgenodigd voor over een paar jaar als ik ben afgestudeerd.

Quire Beursstand

SPRINGFAIR 2017

(beetje brutaal mag toch?)

19

3.3

Grafische Vakbeurs 2017

INNOVATIE

Op 14 maart zijn wij met onze klas v2i3 naar de Grafische Vakbeurs 2017 geweest in Gorinchem, wat het eigen idee was van de klas om daar heen te gaan met mevrouw Booij.

Uitleg over Adobe-mobile pakketten

De vakbeurs is vooral gericht op nieuwe signen printtechnieken. Zo stond hier Tony’s Chocolonely en Canon en nog vele anderen.

Op deze beurs vormt de gehele grafische en signindustrie bij elkaar. Van gratis drank(jes), tot gratis eten, het was kortom een hele leuke dag in Gorichem!

Geprojecteerde pratende vrouw van karton trekt de aandacht

20

Ookal studeer ik Interaction Design waar veel online geproduceerd wordt, vind ik print- en signmaken nog steeds erg intressant. Ook komt er een groot gat tussen online & printen, je merkt ook snel dat de technologie verbeterd, maar zelf merk ik ook dat het printen toch weer

Gedetailleerde printer met patronen

de voorkeur wordt voor mensen. Zo willen namelijk iets vast kunnen houden en daarom blijft de printindustrie zich ontwikkelen.

Je hebt natuurlijk ook technologie in de printen signwereld. Zo vond ik hier de nieuwste printtechnieken, ontzettend grote 3D printers die ontwerpen printen groter dan ik, en nieuwe Printer bij Canon stand

technieken om printjes te maken op kleding.

Het was zo bizar om te zien dat je op zo ontzettend veel dingen kan printen.

Ik neem dit erg goed mee voor in de toekomst, het is altijd goed om te weten wat er gebeurd met jou ontwerp bij een drukkerij, maar het is vooral intressant om te zien wat er nog meer is dan alleen de online-wereld. Als vormgever-in-opleiding-zijnde, moet je dit een keer ge-

GRAFISCHE VAKBEURS 2017

zien hebben.

Zeker door de nieuwe technieken die hier werden getoond, weet ik waar ik later zeker mee te maken krijg als ik mijn eigen bedrijfje verder ontwikkel en meer te maken krijg met de printen signindustrie.

21

4.1 INNOVATIE

Wireframing

App wireframe

Wat iedereen vaak vergeet is dat wireframes & schetsen ontzettend belangrijk zijn in een ontwerp. Bij deze innovatie heb ik onderzoek gedaan naar wireframes en leg ik uit wat wiOpsekops App Wireframing

reframes zijn, wat voor nut ze hebben en waar je het allemaal voor kan gebruiken.

Zelf had ik altijd een hekel aan schetsen maken, maar ben steeds meer gaan inzien wat het nut van een wireframe is en dat het je echt helpt om een ontwerp te ontwikkelen.

22

Geschetste wireframe

Uitleg wireframes in 1 zin Het doel van wireframes is om snel en gemakkelijk het ontwerp aan de klant te kunnen laten zien zonder veel moeite te doen om een werkend prototype te maken.

Wat zijn wireframes?

Wireframes zijn een visueel hulpmiddel bij het ontwikkelen van een website of applicatie. Ze kunnen gezien worden Wireframe van Club Famiglia website

als de bouwtekening van een website, waarin een overzicht wordt gegeven van de verschillende onderdelen die op een website aanwezig zullen zijn.

Met wireframes kan je ook goed communiceren tussen designers en developers, zo kan je tekenen wat je wilt en laat je aan een developer zien welke richting je wilt opgaan. Als dit niet gebeurd kan het uiteindelijke product er heel anders uitkomen dan de designer heeft bedacht.

Het mooie van wireframes is dat je hier-

WIREFRAMING

mee snel een concept kan uitwerken. Je kunt laten zien of het ontwerp voldoet aan bepaalde eisen en natuurlijk of het op het gebied van gebruiksvriendelijkheid voldoet.

23

4.2 INNOVATIE

Sketch

Launch van Sketch

Tijdens de happening van onze richting Interaction Design kwam Pieter Omvlee, de maker van Sketch, vertellen over zijn programma die heel erg succesvol op de markt ligt bij mobile/web-designers. Ook al was de presentatie wat minder, ik vond het erg intressant om het programma te gebruiken.

Icon Design in Sketch

24

Sketch is een programma voor desig-

Notificaties uitprobeersel

ners om hun ontwerp hier uit werken.

Verder is het ook erg handig om precies te werken, bijvoorbeeld met het voorbeeld van icoontjes linksonderin.

Dit is dus ook het grote verschil tussen Adobe XD en Sketch, dat je makkelijker op de pixel kan werken en heel precies.

Hier zijn een paar features van Sketch:

- Snap tegen Pixel: Je kunt gemakkelijk shapes tegen bepaalde pixels ‘snappen’ zodat het werken sneller gaat.

Sketch VS Photoshop Photoshop is van oorsprong een beeldbewer-

- Pixel Zoom

kingsprogramma, dat lange tijd ook de meest

Precies op de pixel werken als het no-

geschikte tool was voor het ontwerpen van onli-

dig is (ontzettend geweldig voor mij

ne projecten. Ooit was Fireworks even de hoop

als pixelperfect-persoon)

in bange dagen voor ons type ontwerpers, maar Adobe stopte met die ontwikkeling.

- Beautiful Text Sketch laat tekst zien hoe het uitein-

Photoshop is een tool die eigenlijk bedoelt is voor

delijk echt op de app/website te zien

fotografen, hier heb je dus minder online functio-

komt.

naliteiten.

SKETCH

Artboards in Sketch

25

4.3

Search Engine Optimalisation

INNOVATIE

SEO vs SEA

SEA

SEO

Tijdens de Happening 2017 van onze opleiding Interaction Design, kwam er een spreker een presentatie geven over SEO (Search Engine Optimalisation).

Ik vind zelf de marketing-kant van design altijd al heel intressant. Zelf wist ik niet dat je gewoon banen hebt die je website hoger op in Google proberen te zetten door verschillende technieken, zodat andere bedrijven meer klanten krijgen en ze sneller gevonden worden.

Proces van een SEO

26

SEO Illustratie

Een SEO optimaliseert dus de websites voor

Wat is het verschil tussen SEO en SEA?

bedrijven die sneller gevonden willen worden.

Omdat niet iedereen in de top tien kan staan

Hierbij een paar voorbeelden wat ze doen om

heeft Google een alternatief verzonnen en dat

een website hoger op de lijst te laten zetten:

is zoekmachine adverteren, het zogenaamde

SEARCH ENGINE OPTIMALISATION

Search Engine Advertising (SEA). Bij zoek• Trefwoorden in headingtags

woorden waarmee het niet lukt om natuurlijk

• Verbeteren van laadtijden voor een betere

bovenaan te komen, maar waar wel veel op

gebruikerservaring

wordt gezocht door klanten, kun je met een

• Responsive; betere positie in Google

Google Adwords-advertentie een link naar je

• Afbeeldingen in een blog

website tonen.

• Trefwoorden in URL en domeinnaam • Trefwoorden in de titel van een pagina • Linkbuilding

27

geschreven door yoerdan de rijke