The presentation was given at the EGIN Conference 2019 in Copenhagen. The topic was twofold. Defining what I mean by Coded Design and a presentation of the design-didactic model I use at Interactive Design at the Danish School of Media and Journalism (DMJX) for the Everlearning designer.

1. Coded
Design
Everlearning
Designer
and the

2. production exploration teaching
1998 2006

3. A note on WordPress
Source: W3Techs
No use of CMS
WordPress sites
0,00
10,00
20,00
30,00
40,00
50,00
60,00
70,00
80,00
90,00
2011 2012 2013 2014 2015 2016 2017 2018 2019
Top 10 million websites

4. Source: YouTube
https://www.youtube.com/watch?v=YrERmaDZNl0

5. Design
Intentional change for a desired end

6. User Experience
Digital Design
Motion Design
Coded Design
Interactive Design

7. language
of form
order
variety
symmetry
contrast
balance
tension
light
shade
color
shape
space
texture
scale
Graphic design is the process of visual
communication and problem-solving
through the use of typography,
photography and illustration.

8. language
motion
Source: Jorge Roland Canedo Estrada and Google
a subset of graphic design in that it uses graphic
design principles in a filmmaking or video
production context (or other temporally evolving
visual medium) through the use of animation or
filmic techniques.

9. Source: Ordinary Folk
https://vimeo.com/316840817

10. language
code
object
state
memory
variable
function
condition
repetition
variation
creating
deleting
sensing
acting
transforming
Coded Design is the process of using code and
algorithms as the primary means to explore
and solve communication problems.

11. fill(192, 0, 0);
ellipse(0, 0, 60, 60);
presentation promise

12. let numCircles = 5;
let count;
let x = 50, y = 100;
for (count = 0; count < numCircles; count++) {
fill(192, 0, 0);
ellipse(x * count, y, 40, 40);
}
presentation promise

13. var ctx = createCanvas("canvas1");
var sample_size = 50;
function draw(){
ctx.drawImage(video, 0, 0, w, h);
var data = ctx.getImageData(0, 0, w, h).data;
for (var y = 0; y < h; y+= sample_size) {
for (var x = 0; x < w; x+= sample_size) {
var pos = (x + y * w) * 4;
var r = data[pos];
var g = data[pos+1];
var b = data[pos+2];
ctx.fillStyle = rgb(r, g, b);
ctx.fillRect(x, y, sample_size, sample_size);
}
}
}
presentation promise

14. Selected
domains
Identities
Generative Design
Infographics
Motion Design
Digital Experiences
Gaming
Intelligent Design

15. https://studiodumbar.com/work/jeugdfonds-sport-cultuur

16. https://www.behance.net/gallery/6701
015/Flow-Csoport-Dynamic-Identity

17. Selected
domains
Identities
Generative Design
Infographics
Motion Design
Digital Experiences
Gaming
Intelligent Design

18. Identities
Generative Design
Infographics
Motion Design
Digital Experiences
Gaming
Intelligent Design
an iterative design process that involves a
program that will generate a certain number of
outputs that meet certain constraints. A designer
will fine tune the feasible region by changing
minimal and maximal values, in order to reduce or
augment the number of outputs to choose from.

19. https://onformative.com/work/actelion-imagery-wizard

20. https://www.patrik-huebner.com/portfolio-item/schwanensee/
Interactive demo: https://www.patrik-huebner.com/webExperiments/Schwanensee/

21. Selected
domains
Identities
Generative Design
Infographics
Motion Design
Digital Experiences
Gaming
Intelligent Design

22. https://rndr.studio/projects/good-government/

23. http://data-illustrator.com/

24. Selected
domains
Identities
Generative Design
Infographics
Motion Design
Digital Experiences
Gaming
Intelligent Design

25. https://vimeo.com/63398483

26. https://www.youtube.com/watch?v=GXI0l3yqBrA

27. Selected
domains
Identities
Generative Design
Infographics
Motion Design
Digital Experiences
Gaming
Intelligent Design

28. http://tangible.media.mit.edu/project/inform/

29. https://vimeo.com/44338220

30. Selected
domains
Identities
Generative Design
Infographics
Motion Design
Digital Experiences
Gaming
Intelligent Design

31. source: Bunchball

32. Selected
domains
Identities
Generative Design
Infographics
Motion Design
Digital Experiences
Gaming
Intelligent Design

33. https://www.youtube.com/watch?v=S1OwOd-war8

34. Everlearning
Designer
“My Best Friend is a person who will give me a book I
have not read.”
— Abraham Lincoln
The

35. Definition
who learns unceasingly; especially who refuses to
be content with their current level of knowledge,
and always strives to learn more

36. “You have
to do this
until you
are 70!”
source: WikiMedia

37. category
mindset
knowledgeset
skillset
toolset
focus
design studies
design practice
design exploration
Harold Nelson &
Erik Stolterman Daniel Fallman

38. design didactic
Design Study Design Practice Design Exploration
Mindset
Introspection
(aesthetics/ethics)
Character
(conceive and motivate)
Philosophy
(creativity)
Knowledge Set
Build knowledge
(alter or reinforce)
Informing decisions
(reasoning)
Critical questions
(what if …?)
Skillset
Empirical insight
(Transfer)
Materialize design
(knowing hand)
Challenge solution
(inspiration/how might we …?)
Toolset
Defining affordances
(what is this good for)
Utilize skill
(predicted practice)
Change purpose/domain
(abstracting qualities)

39. Design Study Design Practice Design Exploration
Mindset
Introspection
(aesthetics/ethics)
Character
(conceive and motivate)
Philosophy
(creativity)
Knowledge Set
Build knowledge
(alter or reinforce)
Informing decisions
(reasoning)
Critical questions
(what if …?)
Skillset
Empirical insight
(Transfer)
Materialize design
(knowing hand)
Challenge solution
(inspiration/how might we …?)
Toolset
Defining affordances
(what is this good for)
Utilize skill
(predicted practice)
Change purpose/domain
(abstracting qualities)
programmed unprogrammed

40. Design Study Design Practice Design Exploration
Mindset
Introspection
(aesthetics/ethics)
Character
(conceive and motivate)
Philosophy
(creativity)
Knowledge Set
Build knowledge
(alter or reinforce)
Informing decisions
(reasoning)
Critical questions
(what if …?)
Skillset
Empirical insight
(Transfer)
Materialize design
(knowing hand)
Challenge solution
(inspiration/how might we …?)
Toolset
Defining affordances
(what is this good for)
Utilize skill
(predicted practice)
Change purpose/domain
(abstracting qualities)
plasticity

41. plasticity
the ability to see yourself learning
something new as a part of the solution

42. Design Study Design Practice Design Exploration
Mindset
Introspection
(aesthetics/ethics)
Character
(conceive and motivate)
Philosophy
(creativity)
Knowledge Set
Build knowledge
(alter or reinforce)
Informing decisions
(reasoning)
Critical questions
(what if …?)
Skillset
Empirical insight
(Transfer)
Materialize design
(knowing hand)
Challenge solution
(inspiration/how might we …?)
Toolset
Defining affordances
(what is this good for)
Utilize skill
(predicted practice)
Change purpose/domain
(abstracting qualities)
plasticity

43. “Compare yourself
to who you were
yesterday, not to
who someone else
is today.”

44. Coded Design and the Everlearning
Designer sees advantage in
dynamic nature of media
free flow of information
solution space
promises and uncertainty

45. kv@dmjx.dk
@ockley (Twitter, Instagram)