Monkeytalk – Christof Capens, Devine – Think design, speak design
•Download as PPTX, PDF•
1 like•229 views
This document contains information about Christof Capens including his background and areas of expertise. It discusses topics like responsive web design, system design, design language systems, emotional design and more. Various quotes are provided around topics like responsive architecture, stopping silo thinking, and designing user experiences simultaneously. Case studies from companies like Airbnb, Uber and Netflix are also mentioned.
Recommended
More Related Content
Similar to Monkeytalk – Christof Capens, Devine – Think design, speak design
Similar to Monkeytalk – Christof Capens, Devine – Think design, speak design (20)
More from Monkeyshot
More from Monkeyshot (20)
Recently uploaded
Recently uploaded (20)
Monkeytalk – Christof Capens, Devine – Think design, speak design
- 1. CHRISTOF CAPENS / DEVINE / MONKEYTALK THINK DESIGN TALK DESIGN
- 2. CHRISTOF CAPENS / DEVINE / MONKEYTALK ‣ About me ‣ About Devine ‣ Digital Product Design ‣ System Design ‣ Design Language System ‣ Emotional Design TOPICS
- 3. ABOUT ME
- 7. ABOUT DEVINE
- 8. CHRISTOF CAPENS / DEVINE / MONKEYTALK EDUCATIONAL VALUES DESIGN USER EXPERIE NCE DEVELO PMENT
- 11. SOFTWARE IS EATING THE WORLD
- 14. CHRISTOF CAPENS / DEVINE / MONKEYTALK ‣ Fluid grids ‣ Flexible images ‣ Media Queries RESPONSIVE WEB DESIGN ‣ + A different way of thinking
- 15. CHRISTOF CAPENS / DEVINE / MONKEYTALK RESPONSIVE DESIGN Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.” Ethan Marcotte - Creator & author Responsive Web Design
- 18. STOP THINKING IN SILO’S
- 19. CHRISTOF CAPENS / DEVINE / MONKEYTALK “The magic trick we’re trying to perform is to get our content ready to go anywhere.” Karen McGrane - Author Content strategy for mobile
- 20. SYSTEMIC DESIGN
- 21. CHRISTOF CAPENS / DEVINE / MONKEYTALK “It’s time to stop making pictures of websites and start designing all aspects of the user experience simultaneously and in a practical way.”Stephen Hay - Author Responsive Design Workflow
- 24. BENEFITS OF AN INTERFACE INVENTORY
- 26. MODULAR SYSTEMS
- 31. AIRBNB
- 32. UBER
- 33. NETFLIX
- 34. FACEBOOK
- 39. CHRISTOF CAPENS / DEVINE / MONKEYTALK THE GUY THAT ADDED AMAZON’S ‘ALEXA’
Editor's Notes
- kort herhalen
- opleiding grafisch vormgever // voorkeur digitale ‘speelse’ media wat we vandaag noemen interactive designer ‘motion graphic design’ & art direction
- freelance designer & consultant nadruk visuele emotionele kant voornamelijk
- freelance designer & consultant nadruk visuele emotionele kant wordt op het einde duidelijk wat ik vooral doe en hoe ik denk vooral actief voor In The Pocket & Showpad
- Kortrijk // buda fabriek // DIGITALE MAKERS // unieke benadering // UX opleiding // nauwe samenwerking industrie geven tools en methodieken aan design thinking
- binnenkort // organisatie vanuit Devine ‘multimediale’ aanpak verschillende disciplines en design/technische gebieden Internationale sprekers
- recent: Digital Product Design // HCI en Interface design > bestaat eigenlijk al heel lang korte schets recent verloop/evolutie > beseffen het niet altijd: mentale shifts op ons als designer
- 2010 // business & bedrijven > volwaardige toekomst = digitaal verlengstuk, integratie of vertaling basically: iedereen een site, een webshop of zelfs een app om overeind te blijven of te groeien veel goeie maar ook veel slechte dingen gemaakt // nieuwe hybride industrieën ontstaan
- snelle technologie shifts sinds 20e E > “singularity” > verdubbeling snelheid ontwikkeling recentste fenomeen: mobile (= smartphone, tablets, wearables, ecosysteem, connected devices,…) grote impact op dagelijks leven maar ook op industrieën!
- antwoord als web/multimedia/interactive designer? design voor alle bestaande toestellen met “schermen” = gekkenwerk M-dot tijdperk > aparte URL & vaak ook aparte content
- 2011 Ethan Marcotte grid, beelden en content dat zich aanpast aan gangbare schermresoluties adv media queries te vaak enkel als dit gedefinieerd // mechanische stricte, technisch gedreven definitie
- bedoeling: intelligent omgaan met media: elementen op een andere manier te schikken + verder finetunen en ervoor zorgen dat target-sizes aangepast worden aan touch “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.”
- wat weinigen weten // boek (interactive architecture) had hem aan het denken gezet architectuurbeweging: fysische ruimtes en elementen laten reageren op context, omgeving en gebruiker bv. reageren op weersomstandigheden, muren verplaatsen,… smartglass meetingrooms
- partner in crime Ethan // KarenMcGrane // “going responsive” & “content strategy” boeken responsive denken = alles, niet enkel die website // kernvisie: invloed op hele business gaat in essentie meer over de content en de boodschap dat je brengt
- oefening VRT // adviserend betrokken // verhuis = mentale shift: “a different way of thinking” nog te vaak “verhalen” naast elkaar // eigen gedachtegoed, budgetten, ect “content anders benaderen” > hoe vertaal je dat dan? technisch, infrastructureel, visueel blijkbaar europees/globaal: they really don’t have a clue…
- voila, alles in 1 quote samengevat legt in haar boek ook uit hoe je hier dan aan kan beginnen top!… maar hoe zit het dan met de representatie “vormelijke aspecten”?
- enter system design aka modular/systemic/atomic
- quote referentie Stephen Hay > Brad enorm beïnvloed afstappen van in “pagina’s” te denken > eerder in “chunks”; systemen, bouwstenen oude metafoor zit ingebakken > referentie vertrouwde bureauomgeving (paginatie, bookmarken,…) zo denken dwingt een statische/onveranderlijke interpretatie > isolatie
- meest toonaangevende theorie en boek van het moment // bedacht door Brad Frost houvast in wereld van diverse schermgroottes veel groter en krachtiger dan Responsive design
- “atomic design is not a linear process” je kan niet enkel op abstract niveau werken > geen overzicht / geen voeling realiteit ook niet enkel op concreet niveau werken > oude aanpak/statisch/tijdrovend/verlies coherentie moet afwisselen detail & groter geheel samen > naar analogie kunstschilder (vb. boek)
- voelt initieel overbodig en tijdrovend // het looft tijd nemen om te organiseren: geheel ander bekijken, realistischer kijk, efficiënter werk systematiek > ordelijker > “ander blijf je in die berg lego-steentjes zoeken”
- is dit principe nieuw? Nee enerzijds architectuur // anderzijds in productie voertuigen en consumentenproducten componenten > wisselstukken
- hergebruik componenten > wisselstukken > kan ook fun zijn maar ook esthetisch en praktisch > componenten > personaliseren & laten passen Vitsoe 606 standard systeem // Braun // ontwerper Dieter Rams // zou ook eerder aan bod gekomen zijn
- Karl Gerstner // Geigy & Swiss design // “designer as a programmer” // diverse boeken inspiratie programmatorische benadering computers & systemen // interessante aspecten geen statische grids maar flexibel > complex > denk patronen > experimenteren
- design systeem // uitingen van een bepaalde indentiteit // stijl van het huis wisselwerking tussen principes en toepassingen
- uiteindelijke goal // systeem = taal = tone of voice = identity huisstijl begint ook niet met een paar kleuren en lijndiktes te kiezen wisselwerking > dingen proberen > ping-pong, zoom-in zoom-uit Alle grote tech bedrijven zoals Google, Facebook, Uber doen het (eigen design sites) noodzakelijk geworden > grote teams, verschillende mensen & samenwerkingen consistency is key
- artikel op Marvel blog // eigenheid // complexity reduction leidt snel/vaak tot eenheidsworst voor elk product anders // niet enkel functioneel ook visueel eigenheid / smoel
- tool/digitaal product > veel meer experience // mens centraal // gevoel
- per land andere regels in vormgeving
- ready to go anywhere alle aspecten // systeem // coherent // meteen herkenbaar
- ander soort product // andere meer praktische benadering zoals Google Material Design of systemen zoals Apple/Microsoft/Android ook resources
- toekomstige/nieuwere uitdagingen // nog maar eerste stap communication in a more human way personalisatie > meer aansluiten op menselijke aspecten
- AR & VR // experiences // natural UI NUI /TUI /OUI /… no interface stuff
- MVP = droge cake // ga voor (visueel) delight valse indruk: design of bep. features maken nog niet zo uit // vaak verzand dit in “het is zo ook goed genoeg” Emotie en verassing > delight > belangrijk in early stage
- Stefan Sagmeister // talk over belang van schoonheid // mag gezegd worden werkershuizen, sociale woningen: seriële kotjes zonder karakter > MVP, net leefbaar dus niemand woonde er graag > customisen > eigen maken > MLP + voorbeeld doorgang onder brug
- beauty > delight