Thesis draft
-> new page
Magic as metaphor
The feeling of having magic powers that I experienced when I first started coding; writing letters, numbers, and symbols, and seeing them turn into visual shapes by one click of the mouse; how I can learn a simple language to talk to the computer and have it do cool things
Like a magical language to communicate with machines! Coding languages of today have their root in ancient esoteric traditions; the binary number system used in every digital computer today, formally put together by Leibniz, was originally inspired by the I Ching
(Myth storytelling)
(Magic themes in games)
(Digital technology seen as something magical; the installation wizard, invisible interfaces)
What is fun? The evolutionary purpose of play
Understanding of our environment increases our chances of survival
We learn about it by playing around, learning by doing
Games are systems of rules that facilitate play
I want to use game mechanics in information design to awaken curiousity and motivation; seductive interaction design
(My illustration background? Storytelling, visual communication, visual learners)
(Online code learning resources and tutorials do not/rarely cater to visual learners)
(«the business of learning is inseparable from that of living your life» quote)
(Homo Ludens)
What is playful about coding, the ideas generated out of the craft, knowing the material well and being able to play around with it and experience a kind of flow
I want to create an experience mainly for designers to show them that coding is not necessarily maths and programming, CSS is closer to paragraph styles in InDesign which is a concept graphic designers already understand
(Relating code to craft and what graphic designers are already familiar with)
(Letterpress)
My illustration background; originally wanting to tell stories through images, coding allows me to combine a lot of my original interests from before I got into design. I think found my purpose as a designer; I think my strength lies in understanding complex systems and translating them into visual representations; I’d like to work with educational material/technology; games for learning
(Kelli Anderson quote on learning while working)
(My thoughts on wanting to explore the world through my work and not get stuck «decorating», making pretty logos)
The reasons graphic designers don’t get into coding? It’s intimidating, if you’re not familiar with it it’s hard to know the huge differences that exist between different programming languages; web development is called markup language, CSS is not programming per se. The false division between left/right brained thinking, the creative vs analytical; because of these divisions some seem to have a lack of faith in their own abilities because they are «more creative» and were never good at maths
(Graphic design sudoku)
(Math wizards)
I think more graphic designers should be getting into coding; learning to use coding as a design tool and treating it as a craft. It makes more sense to learn to work directly with the material of the medium we are designing for, than to create static mockups and storyboarding how interactions are going to happen; I think designing for the web we should at least have an understanding of what’s possible and be able to communicate effectively with the developers
(The architect and the carpenter - Schell)
(My experience working as front-end developer for other graphic designers)
The separation between designer and developer in the field today and the graphic designers’ tendency for static thinking. The Web is a medium still evolving, borrowing a lot of design traditions from print that we should learn to let go; it has its own afforances and limitations that we should work with, not against.
(The Web’s Grain)
(Pixel perfection to graceful degradation to progressive enhancement and full reponsivity/fluidity)
There is an untapped potential in web design; the «interactive bandwidth» of the web that static PDF designs are not taking advantage of; a different type of designer, a new categorisation?
(The unicorn designer and my own feeling that people expect me to pick one direction and specialise)
Infographics are increasingly being made interactive, but this way of communicating information visually should not be limited to data and statistics, it seems to me like there is still so much potential!
(Link to good examples I’ve found during my research? «What is code»-article)
Participatory design?
Game mechanics used in infographics, interactive information design, illustration
Gamification; ideas from games (not even game mechanics) like points and achievements, being added to boring things to make them more fun; it’s empty and manipulative, often used by companies to make more money off users
Games in 21st century education; time put into gaming worlds (McGonigal)
The game as preparation for future learning («learning how to learn»); a good game allows you to build your own understanding as you play and discover the rules of the gameplay for yourself, developing your intuition. I wanted to create a game-like experience in the sense that you feel like you brought yourself to the point of «I understand!» instead of being instructed to do something until you get to the point of «Ok, please stop, I get it»
(«Experience is the best teacher»)
Code learning resources today; the lack of play on codecademy.com; tutorials that give you step-by-step instructions, but when you try to do your own thing you get a red error message. Not everyone know how to open a code editor to create their own files and start trying stuff out at that point in their learning, so it’s better if the learning tool caters to this need. Most (all?) resources today are missing the playful and creative aspect which is so important for being a successful coder. It’s not enough to learn the syntax.
Code learning resources seem to mostly have been created by people who know what they’re teaching very well, and therefore might not understand the starting point and needs of a beginner (what do I wish had existed when I started out); they’re overwhelming and inaccessible (like secret societies for magicians? ILLUMINATI!!!)
_ _ _
ADD:
The WWW and Berners-Lee original vision for it as a platform of free information, a virtual library
created for the purpose of sharing information
The free software movement and open source(ry)
Program or be programmed; taking charge of technology which is such a big part of our lives
Democratisation of the medium
21st century education and generation Z learning
Coding more creative, freedom to experiment, than what we do through Adobe programs; raw material
SVG; making the entire game in only html/css/js/svg for it to be only code and in theory the player can influence everything on the page through code; also showing the potential of CSS (csszengarden?)
Games as artform
Jonathan Blow
Not «make learning fun» but identify what’s already fun about learning this topic and make that central to the game (MIT course)
——————————————————————————
28/3 from Theo template:
INTRO:
WHAT (preview and synopsis of the project)
Graphic designers and code
Intimidating digital technology
The feeling of having magic powers
Code turning into form
Like a puzzle
WHY (rationales for selection of project)
What if I could learn the periodic table the way I learned the name of every single pokemon without even trying
My original wish to become an illustrator, storyteller; coding allowing me to become a facilitator/curator of experiences rather than just one-way visual communication
«The less of a division between work and learning, the happier I am»: Information design allowing me to explore the world and not be stuck
What is fun?
How do I awaken curiousity? Motivation?
HOW (structure and methodology of the following)
Strategy, conceptual framework, research, analysis, literature
Critical questions (my own or from research?)
Method and process («relational»)
Design as learning (Dorst)
Synthesis of code learning resources (css tutorials) and puzzle games (escape the room) (+ sandbox/simulator/adventure game inspired)
Target audience: me 4 years ago
Test group: BA students (1, 2, 3) in graphic design and illustration
Semi-structured interviews with practitioners in the field (css-teacher, graphic design students, computer scientists)
My own personal experience with learning to code, and briefly with teaching front end development to graphic designers («programming is like magic», «coding is like graphic design sudoku»)
Observing peers using existing code learning resources vs observing peers playing games
Experiencing peers’ aversion to coding and lack of faith in their own abilities because «coding is for math wizards»
—
BACKGROUND:
THE LARGER PICTURE (locate your idea in your field, relevant history)
Graphic designers and coding
The state of the field today; the separation between designers and developers, designers’ tendency for static thinking, print traditions that we can let go of in web development, a new medium with its own affordances and limitations, still evolving
The unicorn designer
(SHOULD designers code?)
New kind of thinking required for interactive graphic design?
Untapped potential in web design
Infographics and edutainment
Informotion and participatory design
Gamification and what’s wrong with it
Games as artform, interactive illustration, storytelling; different from a book or a movie
Games for learning
The state of games today (games for money, manipulative games, escapist games)
The WWW and Berners-Lee original vision for it as a platform of free information, a virtual library
The free software movement and open source(ry)
Program or be programmed; taking charge of technology which is such a big part of our lives
Democratisation of the medium
21st century education and generation Z learning
THE SMALLER PICTURE (survey the research relevant to your field)
My own experience and journey into web development from a craft-based education in graphic design
The feeling of expectations for me to pick a direction (code OR design, not both)
Am I becoming a game designer now? What’s the difference? Using game mechanics in interactive information design and illustration
—
DESIGN THINKING/CONCEPTUALISATION:
OBSERVATIONS/DISCOVERIES
Coding experiments very fitting as game mechanic («spells», like having magic powers, a magical language for communication with machines)
The game as preparation for future learning («learning how to learn»); building your own understanding and discovering the rules of the game(play) for yourself
Sequential/holistic learning (also relational) vs modular
The lack of play in code learning resources
The similarity between coding and letterpress
Coding as a craft, more so than whatever us graphic designers these days are doing in InDesign or Illustrator, more creative, freedom to experiment
TESTS/EXPERIMENTS/PARTIAL PROJECTS
Getting to know SVG
Realising the potential of CSS
LEARNING OUTCOMES (back to a for as many rounds as you need to demonstrate your design thinking, and eventually your project)
Ideas generated through working directly with code as material
Learning by teaching
—
DISCUSSION/DEBATE
HONE YOUR DESIGN CONCEPT (learning outcome from the previous section)
Game as tool for learning
Curating an experience, a curriculum
"Experience is the best teacher"
What could I have done better? What should be different? What did I do well?
MAKE A CRITICAL REVIEW OF OTHER RELEVANT DESIGNERS
Kelli Anderson (information design, infographics, playfulness and work/play/learning balance)
Jonathan Blow (The Witness, non-verbal learning, discover the rules through playing; ethics of game development)
Linda Liukas (Hello Ruby, teaching kids about coding through character driven storytelling, «the poetry of programming»: it’s not magic!)
Codecademy (code tutorials)
Lea Verou (playful CSS/SVG, encouraging creative use of existing web development technologies)
BRING ATTENTION TO INTERESTING DETAILS (learning outcome from previous section)
Lots of interesting stuff yeah
—
CONCLUSION (a matured version of the introduction; should not tell us anything new, but surprise us with the lucidity of its synthesis)
Reflections
What have I learned?
How was this project relevant?
———
Uncategorised:
- Take advantage of the web’s «interactive bandwidth»
- Treating code as a craft and a design tool, working directly with the raw material
- How do games help us learn
- So much time put into gaming worlds instead of the real world (McGonigal)
- Learning through play, facilitating play
- Using game mechanics to curate information as a graphic designer
- Teaching coding: magic and «graphic design sudoku»
- Learning code from a graphic designer perspective; visual learning
- Untapped potential in web development techniques
- The unicorn designer, so rare it might as well be a myth
- Myths as a way of telling a story about something else; teach or explain some phenomenon
- The web was created for sharing information
- Online resources for learning to code often seem overwhelming and/or inaccessible to beginners
- Not «make learning fun» but identify what’s already fun about learning this topic and make that central to the game (MIT course)
- Giving the player the ability to immediately apply the skills and knowledge they have accumulated
- Developing my own skills in experimenting with the web’s inherent qualities, taking advantage of the possibilities and limitations that it offers (Hu)
- Creating static designs for the web in 2016 is fucked up. Not just because of the fluidity required for responsive websites that work on all kinds of devices, but because of the amazing potential for interactivity! Micro interactions, too! The medium isn’t going to evolve if we don’t learn how to use it properly!
START WITH THE METAPHOR
- Binary code and the I Ching
- Game designers and the ancient alchemists before the periodic table (Schell)
- Code to form; the immaterial and material with unclear separation, the physical and the psychic
——————
PREVIOUS DRAFTS & KEYWORDS
——————
Pippi Langstrømpe
Pokemon og Harry Potter
Zelda
The Witness
Enhjørningsdesigneren
Internett (WWW)
Programmering er magisk
PUNKTER FOR TEKSTDEL 8/3:
games as artform
games for learning
game mechanics in information design
untapped web potential; interactive bandwidth
css secrets
code as design craft; development is design
the unicorn designer
similarities between code and design thinking
accessibility of resouces for learning code
intimidating technology
programming as magic
code to form, words made flesh
the virtual library and the original www vision
the library as the universe, the universe as code, the mind as a computer
the library game
escape the library
environment governed by logical systems
but you can manipulate it through magic powers
manifested through words and symbols
LAST EDIT 1/1/2016
Collected notes from .rtfd
PLAY
in learning
learning made more fun with interactive web apps
remembering more when it’s learned through play
(händelse; what makes an event memorable?)
the more immersed you are in the subject (immersion through play)
learning by doing (playing) vs simply seeing/hearing
play vs hard work; the same?
increased openness when playing; no fear of failure when there is no end goal with consequences for your life
sparking curiousity and imagination
modern humans are out of touch with the playful world of myths and fantasies
thinking by doing
what is the joy in hard work? («work is more fun than fun»)
what is it that makes something «feel like work»?
GAMES
cmputer games rewarding, teaching and inspiring in a way reality is not
sense of accomplishment, purpose, power, community, focus, engagement
rules; limitations that unleash creativity and foster strategic thinking; challenging
«playing a game is the voluntary attempt to overcome unneccesary obstacles» (bernard suits)
nothing makes us happier than good, hard work; the hard work we hate is only the work we HAVE to do
meaning; curiousity, awe, and wonder about things that unfold on epic scales
hacking: creatively tinkering with technology and programming
SELF-LEARNING
online learning resources (list?)
autodidacticism
learning by doing and interacting with the material over time
value of the free internet in society, free education, accessibility of information
the less of a division I can have between work and pure learning, the happier I am
arousing the desire for learning; what causes curiousity? puzzles, systems, «we become interested in what we can change» (sennett)
the ignorant schoolmaster
the element of surprise as a technique for memory
fascination -> curiousity -> the will to understand
what is the reason we bother to make an effort? and the reason we so often do not?
it’s the puzzles that make us interested (lawrence m. krauss)
rational/intellectual curiousity
getting comfortable with being uncomfortable
what is worth spending our time and effort doing? the fear of wasting time; opportunity cost(?); what is every worth pursuing? search for purpose
frustration is motivation!(?) you have to get comfortable with being uncomfortable (walsh) to learn how to code, because you’re going to be uncomfortable for a while. the more you learn, the less you know, and not knowing is uncomfortable.
CODING AS CRAFT
the future craft of designers or a waste of time?
practicing logic, maths and patience
discovering design solutions that wouldn’t be visible to me working outside the coding environment
ability to make quick changes and experiment without waste or otherwise occupying physical space
the immediate nature of working with code as material changing the way I work as a graphic designer (how exactly?)
technology advancing visual expression
exploring the potential of the inherent qualities of the medium (‘biases’, rushkoff)
development is design (frost)
working directly with the raw material of the medium for which you are designing
parallells between coding and letterpress; not directly shaping the result / not knowing what the finished result will look like until you save/print; puzzle pieces and very limited options
individuality when expressing yourself in code as a language; maker’s marks (disagreeing with some points in Ane’s thesis on analogue craft)
coding is a craft, but most people who treat it that way are computer scientists, not designers (lea verou)
a good sense of craftsmanship when coding: comment cleanly, give good variable names, use consistent formatting, etc
INFOGRAPHICS
information design
show, don’t tell
design of information: «cognitive art» (philip morisson, tufte)
the intersection of word, image, number, art
to explain concepts through visual representations, not just visualise data
forklaringer på ting vi egentlig ikke greier å forklare med ord
the advantages of interactive/dynamic vs static
interactive infographics are more effective(?)
21_21
graphic design to make information more accessible and communicate/translate (‘director of information’, provider of clarity)
in an era of constant evolution of knowledge, habits and experience
simplifying and removing the noise in the stream of information to show what’s really important; regaining concentration and focus and moving away from constant distraction
(untapped potential in digital technology: code used to visualise complex ideas and mathematical concepts)(SVG, verou)
what makes people interested? beauty making content more appealing/inviting
Maryanne Wolf: Socrates’ nightmare (Beveger vi oss fra å være lesende mennesker til å bli tolkere av informasjon, som ikke har tid eller motivasjon til å tenke lenger enn det vi kan google oss fram til? – Julius)
Å bruke designerrollen som sosial tilrettelegger (srvd) («jeg vil gi folk muligheten til å innta viktig informasjon på en måte som gjør dem varme i hjertet»)
help make technology more transparent
the web/digital technology’s bias towards a ‘sharing culture’ and sharing information (rushkoff)
utnyttelse av mulighetene krever kunnskap om mediets råmateriale(?)
TECHNOLOGY AS MAGIC
open sourcery
magic logic
the use of metaphors and symbols to describe things that are actually very complex (like «the cloud») (skeumorphism)
the magic of letters and symbols turning into visual form
the ability of the internet to create memetic hiveminds that can exercise levels of intelligence beyond the individuals (jason louv on wilson)
invisible interfaces/design propagates the myth of immateriality and entails a loss of understanding (timo arnall)
good design makes a product understandable (dieter rams)
what awakes the curiousity and willingnes to find out how something works, when it is perceived as magic?
CODE TO FORM
the website we see on the screen is made both by humans and machines
fascination with the complexity created by simple 1/0, on/off, yes/no (neurons)
GRAPHIC DESIGN
giving voice to content through form
Good design should seamlessly integrate the beautiful and the useful (Paul Rand)
Graphic design, no matter what else it achieves, is not good design if it is irrelevant.
«The designer is primarily confronted with three classes of material: a) the given material: product, copy, slogan, logotype, format, media, production process; b) the formal material: space, contrast, roportion, harmony, rythm, repetition, line, mass, shape, color, weight, volume, value, texture; c) the psychological material: visual perception and optical illusion problems, the spectators’ instincts, intuitions, and emotions as well as the designer’s own needs.»
«As the material furnished him is often inadequate, vague, uninteresting, or otherwise unsuitable for visual interpretation, the designer’s task is to re-create or restate the problem. This may involve discarding or revising much of the given material. By analysis (breaking down of the complex material into its simplest components… the how, why, when and where) the designer is able to begin to state the problem.»
Thoughts on design, p. 12
The symbol is the common language between designer/artist and spectator; a powerful means of communication
«The designer’s capacity to contribute to the effectiveness of the basic meaning of the symbol, by interpretation, addition, subtraction, juxtaposition, alteration, adjustment, association, intensification, and clarification, is parallel to those qualities which we call «original».»
Interesting graphic design engages the mind of the reader; makes you wonder or think; it is in a way INTERACTIVE
John Dewey:
«Great original artists take a tradition into themselves. They have not shunned but digested it. Then the very conflict set up between it and what is new in themselves and in their environment creates the tension that demands a new mode of expression.»
SHU-HA-RI
«Even if it is true that the average man seems most comfortable with the commonplace and familiar, it is equally true that catering to bad taste, which we so readily attribute to the average reader, merely perpetuates that mediocrity and denies the reader one of the most easily accessible means for esthetic development and eventual enjoyment.» — Paul Rand
designer på mine egne premisser
WEB STANDARDS
development is design
graceful degradation vs progressive enhancement
content first design
the fluid web
Ethan Marcotte, CAP & Design:
We’ve made our own restrictions
the web is naturally flexible
«the map is not the territory»
a naked website (html-file) is naturally responsive: http://motherfuckingwebsite.com/