MAGI 2016

Show map

Foreword

This is the text accompanying my master project at Oslo National Adacemy of the Arts (KHiO). The project as a whole was undertaken in the spring of 2016. The main focus of the project was the practical part, which is a web based game for playing with basic CSS code. This text and complementary website should be viewed as a supplement, and describes the conceptual framework and process behind the creation of the game. I have tried to collect my thoughts and initial questions, some of which I have been able to answer, and some I have tried to rephrase into more clever ones. There are still many gaps in my knowledge, but I hope I can still offer som valuable viewpoints.

I’ve had fun, and I hope you will too.

Elise Jakobsen
Oslo National Academy of the Arts
Friday the 13th of May 2016

Hi! Click the blue links in the text to see additional notes in the margin.
KHiO is Norway's largest college of higher education in the field of arts. I'm attending the MA design programme, with a specialisation in graphic design and illustration (MAGI). My main focus throughout my MA has been on web design and development.
Cascading Style Sheets (CSS) is the language used for styling elements in Web documents.
Visit my online home at elisejakob.no or get in touch with me at hei@elisejakob.no

TL;DR

Coming from a graphic design and illustration background, I began diving into web development about four years ago. What initially fascinated me about coding was this idea of writing letters, number, and symbols, and then seeing them turn into visual shapes as you click save.

I enjoyed getting more intimate with the machine that is such a big part of my life. Interacting with the computer at the level of code offers a freedom to experiment, and reduces the illusion of immateriality that is tied to digital technology. Code is simply a representation of the switches being flipped inside the hardware.

There is an untapped potential in the Web as a medium for interactive storytelling, which became apparent to me once I got to know its material. I question the divide between designers and developer in today's field, and argue that designers should view coding as a craft, and learn to work with the affordances and limitations of the medium.

While learning how to code, I went through several online resources and tutorials. Although helpful, I found them lacking in one important aspect; the ability to get to know the content through play. Playfulness is important in learning and a requirement for doing good creative work.

My intention with this project has been to create a way in for designers to learn how to code, recreating the experience I myself had when starting out of having «magic powers» over the computer. The result is a web based game where you get to explore a selection of CSS code.

Magic as metaphor

Coding is a bit like magic. I’m serious. Let me explain: I began diving into web development about four years ago. What initially fascinated me about coding was this idea of writing letters, number, and symbols, and then seeing them turn into visual shapes as you click save. I realised pretty quickly that learning how to code does not require you to be a math wizard. However, it does make you feel a little bit like a magician. After all, what you are doing when coding is talking to the computer in a language it can interpret, and telling it what to do, thereby manipulating the digital environment.

The idea of words manifesting reality is nothing new, just think of the old magic spells. The first verse of the gospel of John reads: «In the beginning was the Word». For this project I looked at how the coding languages of today have their origin in the esoteric traditions of the past. The binary number system, used in just about every computer today, was formalised by the German mathematician and philosopher Gottfried Leibniz in the late 1600s. Leibniz was a student of esotericism and his work was inspired by ancient Chinese philosophy and the I Ching.

Being familiar with the world of coding, and having a childhood deeply impacted by Harry Potter, these discoveries make me excited. But seeing digital technology as something magical has its downsides. A lot of people feel overwhelmed and intimidated by it already, and this illusion of the digital as something immaterial makes it seem even harder to learn, leading people to become passive. It doesn’t help that the words used to describe what you see on the computer screen are mostly metaphors: the desktop, files and folders, the trash can. These words give an illusion of making what is happening in the machine more tangible, but actually add to the confusion about what is really going on, in addition to putting unnecessary constrains on how we treat our information digitally. Only recently have digital designers moved away from the long lasting trend of skeumorphism; visual design mimicking the qualities of real life objects.
On the other hand there are expressions that only increase the abstraction, making what is going on less tangible; «the installation wizard» working behind the curtain, your data saved in «the cloud».

This knowledge has made me want to create a way in for people who are complete beginners at coding, to allow them to experience this sense of having magic powers. It has lead me through themes of storytelling, games, and pedagogy.

“Magick is the Art and Science of causing change to occur in conformity with will”
Aleister Crowley, English occultist and magician
“Words are, in my not-so-humble opinion, our most inexhaustible source of magic”
Albus Dumbledore, headmaster at Hogwarts
“Executable code existed centuries before the invention of the computer in magic, Kabbalah, musical composition and experimental poetry. These practices are often neglected as a historical pretext of contemporary software culture and electronic arts. Above all, they link computations to a vast speculative imagination that encompasses art, language, technology, philosophy and religion. These speculations in turn inscribe themselves into the technology. Since even the most simple formalism requires symbols with which it can be expressed, and symbols have cultural connotations, any code is loaded with meaning.”
Florian Cramer in Words Made Flesh
“In the late 1600s Leibniz decided there was a need for a new, purer arithmetic than our common decimal system. Leibniz discovered the model for this new arithmetic in the five-millennia-old book that is at the heart of Chinese philosophy: the I-Ching, or Book of Changes.”
The ancient book of wisdom at the heart of every computer, article in The Guardian by Damien Walter
The I Ching is an ancient Chinese divination text. It contains a system to represent the binary poles of reality as Yin and Yang.
“Any sufficiently advanced technology is indistinguishable from magic”
Arthur C. Clarke
Timo Arnall writes about the myth of immateriality enforced through the design of invisible interfaces in his essay No to No UI.
This game by Intacto lets you join the battle between skeumorphic and flat design.

Coding as a craft

Many graphic designers might think that coding is something completely removed from our line of work, and what we do in terms of design craft. However, coding has a lot in common with craft traditions. Based on my own experience, I’m thinking specifically about that of letterpress. You have these «puzzle pieces» that you put together in certain ways to create your end result, and every little detail counts. With coding as with letterpress work, you are not shaping it directly, and you do not see the end result until you do the actual printing or run the code.

It does not take long to familiarise yourself with code as material. Once you know the basics, you will be able to play with it. A resistance in the material awakens imagination, and invites you to experiment and make your own discoveries about what it can do. This is a part of what characterises craftsmanship; knowing the material well enough to have the courage to take risks, and being able to learn from your mistakes. It’s always good to be slightly uncomfortable and challenging yourself to keep learning.

Code as material invites experimentation in that it allows for practically infinite iteration. You can make as many copies as you like of any file, and it takes up no noticable space in the world, nor does it produce any significant waste. The process of working and iterating can be very quick, and you can even have multiple coders working on the same project file simultaneously thanks to version control systems like Git.

Interacting with the computer at the level of code offers a freedom to experiment, an independence and autonomy, even if the tools at your disposal are limited. In my opinion, working directly with the material of the medium feels more «physical» somehow, compared to working with graphics software. After all, code is what literally everything you see on the screen is made up of. All of the different code languages is just representations of the same on/off signals being transmitted inside the hardware of the computer.

As designers we should not simply accept the capabilities given to us by others, because these become limitations that shape our work. The code languages used on the web are still evolving, and we can have a say in what gets included in the next version. The CSS Working Group, who develop the standards and specifications for the CSS language, keeps all communication open to the public and invites our participation.

“The craft of programming is helping to further traditional craft aesthetics and production in present-day culture. Experiment and play are vital in craft practice. Play lets you learn, which is why it still lies at the heart of art and design education. And the computer can very effectively introduce play; digital media, with their instant reversibility and ability to simulate, can withstand sustained experimentation where other formats would disintegrate.”
Magic Box, article from Eye Magazine
Git is a version control system created by software engineer and superhero Linus Torvalds, also the creator of the free and open source operating system Linux.
Eric Hu writes about the dematerialisation of design in the digital age and working with a medium’s affordances and limitations in his thesis Form Upon Platform, Platform Upon Form
Cascading Style Sheets (CSS) is the language used for styling elements in Web documents. In the CSS Zen Garden you can get an impression of the power of CSS.
The CSS Working Group develop the CSS language. They have a mailing list and blog, where all working drafts for future changes are published.

Fun and games

Even though it may not be obvious, our tendency for play has an evolutionary purpose, like all our genetic traits. Play aids in the development of our cognitive and physical functions, and helps us learn. We get to know our environment by playing around with it, and a greater understanding of our environment increases our chances of survival. What inspires curiousity to make us want to play with something, and what sustains our interest? Are some people just inherently more curious about how stuff works?

When designing information, it’s important to find a way to inspire curiousity in people. It’s not just about communicating something to a reader in the simplest way possible, but to awaken in them a willingness to put in the effort required to understand a complex idea. I believe games and game thinking should increasingly be used for this purpose.

I will not take on the difficult task of defining what games are, but I think what can be said for all of them is that they are based on systems of rules which facilitate play. These kinds of systems can be used to package information and allow for learning about it in a playful way, to awaken curiousity and motivation to explore the content. What many video games do well in this regard is the way tasks are sequenced. They are built to always acommodate your level of ability, and players work through appropriate challenges toward a comprehensive goal at the end. This makes the content seem more approachable, and not overwhelming.

Genuine fun is not what is found in escapist games. Hard work and learning is fun, when structured in a way that gives you a sense of accomplishment. Games that are either too easy or too difficult will eventually lead to boredom.

For a generation of gamers, real life is often either too easy or too difficult. In video games we have a sense of purpose, of being in control, contributing to a community and getting continuous, unambiguous feedback on our efforts. We feel disillusioned with the real world; there is little sense of wonder, and nothing motivating us to perform beyond what is absolutely necessary. It seems like what remains to be figured out about our world is too difficult for most people. We can’t all become brilliant scientists. The awe of making a great contribution seems only achievable in video games, where we save the world. It’s easy to that the real world is just as wonderful and mysterious, and that as in any MMORPG our collective effort can bring us closer to an understanding of the world and an improvement of our lives.

“We learn through playing, and only through playing: this is one of Plato's leading themes.”
Gavin Ardley in The Role of Play in the Philosophy of Plato
George Loewenstein writes about the information gap theory in The Psychology of Curiosity, 1994: “Curiosity happens when we feel a gap in our knowledge”; when we become aware of it, there arises in us a desire to close that gap.
“We become particularily interested in things we can change”
Richard Sennett in The Craftsman
“Playing a game is the voluntary attempt to overcome unnecessary obstacles.”
Bernard Suits
Jesse Schell writes in The Art of Game Design that there is no unified theory of game design; no simple formula to make good games. “We are in a position something like the ancient alchemists”, he says, awaiting their Mendeleev; the guy who discovered the periodic table.
“Fun from games arises out of mastery. It arises out of comprehension. It is the act of solving puzzles that makes games fun. In other words, with games, learning is the drug.”
Raph Koster in A Theory of Fun for Game Design
“Livet er en dans på asfalt”
Tobias Pettersen Nordermoen
“The mysteries are what makes life worth living and I would be sad if the day comes when we can no longer find answerable questions that have yet to be answered, and puzzles that can be solved.”
Lawrence M. Krauss
Massively multiplayer online role-playing games (MMORPGs) are games where people from all over the world play together.
“My goal is simple. It is a complete understanding of the universe.”
Stephen Hawking

Should graphic designers learn to code?

I think a lot of designers lack faith in their abilities to learn to code. One guess is that this stems from the false division between left- and right brained thinking, the left being the rational, logical side, and the right being creative and spontaneous. Many talk about their nonexistent math skills, and say they are more creative and not prone to logical thinking. However, designing and coding are both exercises in creative problem solving. In the spring of 2015 I taught my first course in web development to graphic designers, and one student called it «graphic design sudoku». Others were more skeptical in their abilities to learn and claimed it was «just like magic». For the record, every student left the course with a basic understanding of HTML and CSS, and several have continued to learn more on their own.

I wonder why web development isn’t a bigger part of graphic design education. Surely, most of us will go on to work with developers and programmers, and being able to communicate our ideas effectively requires an understanding of each other’s fields. But not only that; it makes more sense to learn how to work directly with the material of the medium we are designing for, than to create our designs outside of their intended context, sending them on for the developer to translate. By understanding how it works, we learn about its affordances and limitations, so that we can work with and not against them.

I’ve heard developers say, as well as experienced this myself while working as a developer on collaborative projects with other designers, that graphic designers have a tendency for overly static thinking. They work on mockups in Photoshop, and storyboards for how interactions are going to happen. This separation between designer and developer does not seem beneficial for the evolution of the medium. Development is design.

A web designer not knowing how to code might be able to create satisfying dynamic interactions, because they know about the possibilities from having seen it done somewhere else. There’s no need to reinvent the wheel, but what if the wheel in this instance has not been invented yet? The Web as a medium is still evolving very rapidly, both in terms of content and technology, and we don’t really know where it’s going. Right now it is borrowing a lot of its design solutions and vocabulary from print. We should learn to let these go, because the computer is so much more than just a fancy TV that we can put books into.

Ethan Marcotte, who coined the term responsive web design and whose ideas revolutionised the field, makes a case for exploring the inherent qualities of the Web in order to create a sustainable platform for further growth, in his talk «The map is not the territory». He argues that we should embrace its fragility and fluidity, and redefine beautiful design on the web to what is accessible.

Will the designer of the future be a UX/UI/graphic/web/designer/developer hybrid, or should we keep the roles split?

Quote by KHiO student Christa Barlinn Korvald
“An architect does not need to know everything the carpenter knows, but an architect must know everything the carpenter is capable of”
Jesse Schell in The Art of Game Design
This is also the title of a blog post by Brad Frost.
The first website ever made is still online, if you want to have a look.
“As we enter the third decade of the web’s existence, we should be gaining a sense of what works, and what doesn’t. We should now have the confidence to choose which aspects of other media and platforms to take inspiration from, and which to ignore. We should be inspired by the conventions of other media, but no longer governed by them.”
Paul Robert Lloyd in A Web Aesthetic
The responsive design concept is an attempt to embrace the flexibility of the web, using fluid grids and media queries. It was kicked off by Ethan Marcotte's article in A List Apart.
The talk can be viewed on Vimeo.

Flow

Some people like to think of themselves as perfectly rational beings, but none of us are. Our ability to understand complex logical systems is limited, and coding is very much about working within these systems. This makes coding, although fun, the kind of fun that requires effort. When starting out, a lot of time is spent looking for that one missing semicolon, or whatever else you might have done wrong that keeps your code from running properly. These searches can however, when they don’t take too long, be what keeps you learning. Once you find your mistake you get rewarded with the joy of having solved a problem, and the awareness of having learned something. It’s similar to what happens in a lot of games; appropriate challenges are presented in a sequence, and you are always made conscious of your progress through feedback systems. The gaming environment is created with an intent for you to have confidence in your ability to play, and the isolated system offers a space where making mistakes have no real consequences. This makes it easier to achieve a state of flow.

Being in this state can make you forget about your environment. It is closely linked with play, but I'd like to consider play not as something contrasting work, but rather something that is enjoyable in and of itself, without concern for the consequences. While reading about this, I came across the term autotelic experiences, which describes activities done for their own sake. Work could very well be play, in my experience; I do my best work when I'm having fun.

“The human brain isn't particularly good at basic logic and now there's a whole career in doing nothing but really, really complex logic. Vast chains of abstract conditions and requirements have to be picked through to discover things like missing commas. (…) You immerse yourself in a world of total meaninglessness where all that matters is a little series of numbers went into a giant labyrinth of symbols and a different series of numbers or a picture of a kitten came out the other end.”
Peter Welch in Programming Sucks
“To be a hacker, you have to get a basic thrill from solving problems, sharpening your skills, and exercising your intelligence.”
Eric Raymond in How to become a hacker
Flow, also known as the zone, is the mental state of operation in which a person performing an activity is fully immersed in a feeling of energized focus, full involvement, and enjoyment in the process of the activity.” (from Wikipedia)
auto: self
telos: goal
“It refers to a self contained activity, one that is not done with the expectation of future benefit, but simply because the doing itself is the reward.”
Mihaly Csikszentmihalyi in Flow: The Psychology of Optimal Experience

The WWW and the age of distraction

The Web has developed and become an integral part of all of our lives in a relatively short time. Born in the 90’s, I hardly remember a time when my life did not include some kind of Web presence. I’ve been a consumer of web based content for twenty years, but for most of that time it’s been passive, and I never really saw myself as potentially becoming actively engaged in the production of what was going on. Sometimes I even forget that everything was produced by people, and either way thinking that I would be insignificant in the Web’s rapid development.

Many people feel trapped and lost in the digital world, and with the technology taking over our lives, with very few of us knowing how to control it. There is a lack of transparency and openness in how data detailing our digital lives is being saved by the big companies that are gradually taking control of the Internet. Douglas Rushkoff writes in his book Program or be Programmed, that we need to take charge of the technology which is now such a big part of our lives, instead of allowing others to set the constraints, and have the Web medium be reduced to a surface that big corporations use for manipulation and profit.

The original vision of Tim Berners-Lee, the mastermind who conceived the idea for the World Wide Web, was to create a virtual library of human knowledge and experience, a platform of free information. It was born out of a desire for openness and sharing.

There is a potential magic in using this as a platform for communication and information exchange. The collective intelligence fostered on the Web is building a stronger society through the natural selection of memes. For this development to be beneficial for us all, however, it requires our active engagement. Unfortunately the massive amounts of information online can become overwhelming and lead some people to apathy and a feeling of being insignificant.

We call this the «information age», but we could also call it the age of distraction, because the actual amount of information we’re taking in is small compared to the amount of sources fighting for our attention.

The competition for attention has lead to the dumbing down of information, often to the point where important parts of the original message is lost. It’s become common practice to state at the beginning of an article the estimated time it will take to read. I’m guessing it’s only a matter of time before online newspapers and journals start adding a TL;DR.

Acquiring new knowledge used to require at least a little effort. Actually having to search for answers in the real world leads to learning through experience, and allows for making your own discoveries; this contrasts searching through google and getting the answer immediately, in a simplified form.

We don’t yet know to what extent our attention spans have been damaged by this practice. Being able to win the attention of the reader and convince them that the content you’re presenting is worth spending time on is harder than ever. What makes us reach the decision that something is worth pursuing and spending time on?

“This was all inevitable. It is the cycle of capitalism. The story of industrial revolutions, after all, is a story of battles over control. A technology is invented, it spreads, a thousand flowers bloom, and then someone finds a way to own it, locking out others. It happens every time.”
Chris Anderson in The Web is Dead. Long Live the Internet
“We are intimidated by the whole notion of programming, seeing it as a chore for mathematically inclined menials rather than a language through which we can recreate the world on our own terms.”
Douglas Rushkoff in Program or Be Programmed
“Communicating and sharing is bad for business”
Douglas Rushkoff
British computer scientist Tim Berners-Lee invented the World Wide Web in 1989. Read more about the history of the Web on the website of the WWW Foundation.
The World Wide Web Virtual Library was started by Tim Berners-Lee in 1991 as an index of content on the Web.
The «memetic hiveminds» created by the Web “may well make literal the alchemists’ dream of erasing the gap between matter and spirit, by making the material world immediately and infinitely malleable by the whims of the human imagination”
Jason Louv in Robert Anton Wilson’s Cosmic Trigger, and the psychedelic interstellar future we need
“By creating millions of networked people, financially exploited but with the whole of human intelligence one thumb-swipe away, info-capitalism has created a new agent of change in history: the educated and connected human being.”
Paul Mason in The End of Capitalism Has Begun
During my research I read the famous essay by Vannevar Bush, As We May Think from 1945, and this quote struck me as equally true today, even though parts of Bush’s vision has become reality:
“Science has improved human life in many ways, but now we are becoming stuck because we cannot notice and apply the whole knowledge that has been reached and constantly grows [...] Truly significant attainments become lost in the mass of the inconsequential.”
“The Internet is a miraculous tool, but all too often, it affects us like a drug. Many of its popular apps, news websites, and social networks have been carefully designed to addict and distract, so they can harvest human attention like the natural resource it is. 'Keep searching and you will discover,' these services seem to proclaim, but the deepest truths cannot be found by searching — and you will not find them in data, in videos, or in images of other people’s lives.”
Network Effect, website by Jonathan Harris and Greg Hochmuth
“A society that looked at the internet as a path toward highly articulated connections and new methods of creating meaning is instead finding itself disconnected, denied deep thinking, and drained of enduring values.”
Douglas Rushkoff
TL;DR or TLDR (Too long, didn’t read) is used mostly in internet forums, either by itself in response to a long and/or boring message, or to indicate that what follows is a helpful summary of said message; can be used not only for text but for anything that will demand your attention for more than ~20 seconds.
“How many children today are becoming Socrates' nightmare, decoders of information who have neither the time nor the motivation to think beneath or beyond their googled universes?”
Maryanne Wolf in Socrates' Nightmare

Interactive storytelling and narrative structures

Before I became a design student, what I dreamed of doing was to be an illustrator, and tell stories visually. During my education I learned to code and saw the enormous potential for interactive storytelling, which I think is far from being fully reached on the Web today. There is an «interactive bandwidth» offered by this medium unlike anything we’ve had before. This is increasingly being taken advantage of by information designers, in visualisations of difficult concepts and systems, and infographics portraying data and statistics. Making these things interactive may help more people understand their message.

As designers, we are never able to completely control how a message is transmitted, because so much depends on the user and the context in which our designs are received. With the Web, we don't even have full control of how our designs will appear to the user visually, because it depends on their browser and device of choice. As with any medium, for there to be effective communication, there needs to be a cooperation with the user. Their interpretation depends on their history, perspective, and even their mood.

Just as thoughts and feelings are not separate, but affect each other, visual design, aesthetic and usability need to be taken into consideration to create a good user experience. This is also true of game mechanics, which shouldn’t be thought of as something separate from the aesthetics of a game. The narrative and the interactive elements are not separate things, they should be in symbiosis. When playing a game, we are building a story through the actions we take. Constructing stories also help us understand and remember our experiences.

When playing games as a child, I never really thought of it as an artform. I now realise the enormous expressive potential of games and find it sad to see so much of it wasted on escapist entertainment.

Wording by Jonathan Blow (creator of Braid and The Witness) from the documentary Indie Game: The Movie
As an example, see this website with beautiful visualisations of theories from physics, made to accompany the book Seven Brief Lessons in Physics by Carlo Rovelli.
“In fiction writing, there is this concept that you want every sentence to do more than one thing: you want to describe the setting and set the mood and introduce the character. You want to say what happened and show how a character feels about it and foreshadow a later consequence. For some reason game designers never got this memo.”
Jonathan Blow in his Reddit AMA
“To me, games are like the ultimate artform. It’s the ultimate medium. It’s the sum total of every expressive medium of all times, made interactive. It’s awesome!”
Phil Fish (creator of Fez) in Indie Game: The Movie
“Writers and people who had command of words were respected and feared as people who manipulated magic. In latter times I think that artists and writers have allowed themselves to be sold down the river. They have accepted the prevailing belief that art and writing are merely forms of entertainment. They’re not seen as transformative forces that can change a human being, that can change a society. They are seen as simple entertainment – things with which we can fill twenty minutes, half an hour, while we’re waiting to die.”
Alan Moore

21st century education

The traditional analogue classroom is not equipped for generation Z. First of all, curriculums are still very much based on the memorisation of facts, which they can just google. Secondly, the knowledge of these little pieces of information does not deepen their understanding of the underlying idea. I remember being annoyed with teachers who did not seem to have a grasp of our digital reality when I was in school. There is a movement to make learning resources accessible online, but what they are mostly doing is making a video of the same lecture that would be done in an analogue classroom situation, and then maybe adding a multiple choice quiz at the end. The move towards this accessibility and sharing is very much in line with the original vision for the World Wide Web.

I believe there is a huge potential for making interactive learning resources online, more effectively using visual communication and allowing the learner to explore the content on their own, moving away from the top-down approach of lecturing them. Instead of having the learner memorise facts, they need to learn the skills to navigate new content; learning how to learn. Games have been said to prepare for future learning in this way, because a good game requires you to build your own understanding as you play and discover the rules for yourself, developing your intuition. School teaches with facts, while games teach with stories. So much time and effort is being put into game worlds today, that could instead be utilized to make the real world a better place.

“By the time a boy is 21 years old, he has spent 10 000 hours playing video games alone”
Philip Zimbardo in The Secret Powers of Time
“Gamers expect that media are subject to player control”
Katie Salen in Ecology of Games
“Experience is the best teacher”
Unknown
“Why should we waste the power of games on escapist entertainment?”
Jane McGonigal in Reality is Broken

Autodidacticism

You can learn about anything on the Web, and in several different ways; through reading books or forum posts, watching a video, and in some cases even by playing a game. You also have access to people all over the world, willing to answer questions and share their knowledge with you in an instant. It’s a little bit ironic, then, how it can also make people feel so passive; overwhelmed with the amount of information, unable to filter what is important and what is not.

This accessibility of information allows us to be charge of our own development, and thereby our own world; we can all be designing our own game. We can make our own choices about how we want to develop our intellect, vision, and imagination; to make us feel like we’re in charge. Modern schooling is often teaching you with facts, and not leaving much room for you to experience it on your own terms. Online learning resources and the Web as a whole is helping us move away from the top-down approach of teaching, reducing the commodification of knowledge. Multiple viewpoints on any topic is available more easily than ever. The way information is hyperlinked allows you to dig deep into what interests you.

I’ve been through several resources online on my quest to learn coding. They tend to have a lot in common. Most have tutorials that give you step-by-step instructions, either by text or video, and then either let you input the code they’ve given you, or ask you to do a multiple choice quiz. What bothers me is the lack of play and possibility for experimentation. There isn’t really any room to do your own thing. Isn’t that how you learn? The playful and creative aspect is important to become a successful coder. It’s not enough to memorise the syntax. Also, in learning web development, it’s helpful to be able to see the effects on the changes you make in the code on the visual result. Many of us are mainly visual learners, and I’m guessing this is especially true for graphic designers. Not everyone will know how to find a suitable code editor program, create their own files, and start trying things out at an early point in the learning process, so I think the learning tool should cater to this need.

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. They’re often overwhelming and inaccessible. People are super helpful and it’s a great environment to learn, it’s finding your way in when starting out that’s hard.

“We have a power to improve our own experience”
Jane McGonigal
“Undistracted by schooling, one studies best during vacations.”
Carlo Rovelli, Seven Brief Lessons on Physics

Rethinking gamification

Gamification has been defined as «the process of using game thinking and mechanics to engage audiences and solve problems». I think this sounds like a brilliant idea. However, most occurences of gamification today consist of adding things like points and achievements to boring content in an attempt to make it more «fun». These are hollow and empty structures, and if the content is interesting and inherently valuable, it is not necessary to drag the player along with false motivation. I admit my knowledge of game theory is limited, but I would even argue that these types of feedback systems by themselves are not game «mechanics». Aren’t game mechanics more closely related to the actual gameplay? As in the rules that you play within, which create the game experience, and relate to the content being transmitted through the activity of playing?

Games relying on the hunt for points and achievements to keep people playing are often created mainly with the intention of making money, and offer nothing of value to the player in return for their time, except mindless escapism. They are manipulating our natural instincts, taking advantage of our desire for instant gratification and creating a compulsion in us. Playing for these superficial, fleeting rewards seem to me like a waste of time, and in my opinion this kind of gamification has the wrong focus.

The same ethics apply to game design as to graphic design. We both have the tools to manipulate people, but should we? And to what end? The power to harvest people’s attention and influencing their behaviour requires us to think about whether or not we are giving them something of value in return.

Gabe Zichermann uses this definition in his talk Fun is the Future: Mastering Gamification from 2010.
“Rewards motivate people to get rewards”
Alfie Kohn
“Capture what’s already fun about learning, and make that central to the game”
MIT professors Scott Osterweil and Eric Klopfer talk about educational games in this article

The initial idea

This project is multi layered. On the one hand, I wanted to explore the possibilities of what I could create using only the most fundamental languages of front end web development, namely HTML, CSS, and JavaScript. I used jQuery for simplicity, but other than that stayed away from plugins and frameworks.
Secondly, I wanted to question the divide between designers and developers, seeing how I myself found it to be a false one.

When I started coding, I found it hard to see what would be the right way in for me, coming from a design background. I tried several resources online for learning how to code, but I always felt there was something missing. I was afraid of trying things out on my own computer in case I would break something. After all, everything going on in the computer is based on code, and all code is just a representation of the same tiny switches being turned on or off. I didn’t know about the distinction between different coding languages; where my HTML-file stops and the operating systems begins. I recognise that many beginners might feel the same way, and associate coding with an anxiety and fear of making mistakes, in case what they write will ruin something in their computer. I set out to create a safe space that allows you to get familiar with a limited set of tools from the CSS language.

With the skills I had acquired in web development, I saw an untapped potential for interactive storytelling, and it was important for me to choose a project I would be able to have fun with. All of this brought me to the idea of creating a game to introduce coding to designers.

HTML (HyperText Markup Language) is used for creating the structural elements on a website.
CSS (Cascading Style Sheets) is used for styling the elements on a website. Colours, fonts, positioning, etc.
JavaScript is what makes websites interactive. It's the only one of these three languages that is actual programming.
jQuery is a JavaScript library. It simplifies a lot of common tasks and makes the process of writing JavaScript more efficient.

The goal

I wanted to create an experience to show the playfulness of coding; recreating the feeling of having «magic powers» over the computer that I experienced and was fascinated by when I finally had the courage to try things out. I aimed it mainly at other designers, focusing only on allowing them to manipulate the visual elements. CSS is very straightforward and has very little to do with actual programming or maths. Writing CSS code is closer to using paragraph styles in InDesign, which is a concept graphic designers already understand very well, than it is to writing scripts.

I’m not showing the entire code at once, as this might be overwhelming to beginners. During the playthrough you are given access to individual lines of code, relevant to what is being shown in screen at that moment. Then, as the game progresses and the player gets comfortable, I gradually give access to more ways of manipulating the shapes on screen. The game ends with you being able to see all of the code that you’ve written during the course of game.

I decided to silence the pedagogical aspect of the game; I think the more explicit it is that the game is supposed to teach you something, the less interesting it becomes. We (or at least I) have this aversion to educational material that I think comes from starting our lives with ten years of boring schooling.

This also lead to my decision to not have a clear goal of what a playthrough is supposed to teach you. You will not, in the end, have the ability to make a website from scratch. It is simply a channel for familiarising yourself with three essential concepts and how they are used in CSS; the colour system, pixel sizing, and the coordinate system of the browser window.

The game

I’ve spend a big chunk of my life playing video games, and I’ve often thought: How much of this stuff I’m learning is actually applicable in the real world? How are the skills I’m acquiring here useful, and giving me value in my life? Wouldn’t it be great if I could learn the periodic table in the same way that I learned the name of every single pokemon? It has nothing to do with the periodic table being inherently boring, but rather the way it is usually presented.

Coding, once you know the basics, is a bit like a game; it allows for playing around, but there is a goal at the end; that something which you want to create. There are strict rules you need to follow in the syntax of whatever language you’re using, and within these constrains, you can achieve a state of flow. As you’re playing, working, and developing, you are guaranteed to meet challenges, and have to make choices for how to solve these using the limited tools available. As you test your code you experience feedback loops; seeing the results each time you run it, then going back and making the necessary changes. You learn how to solve problems that appear and get rewarded with a feeling of accomplishment, which eventually leads to mastery as you reach the end goal; a complete, funcitonal program or website. All of this takes place in the artificial world we’ve created for ourselves inside the computer.

In my game, writing CSS is the game mechanic. Adding pieces of code together can be viewed as a puzzle, and in the game I present the player with a series of puzzles, gradually increasing the difficulty. I'm attempting to sequence the information in order to make sure they will get each concept before moving on.

I learned about SVG, because my goal was to create everything in code, with no image files for illustrations; this way all of the visual elements on the site are available for the player to manipulate, at least in theory.

Making the game in the browser means that what you learn is instantly applicable, not just in a simulated environment; what you write in the game is proper CSS and gets added directly to the code making up the website as a whole. It allows you to learn new skills in the context which they will be used.

Video games often play with themes of magic and myth. Coding is strange and mysterious and inaccessible to beginners, but maybe that is part of what makes it interesting and exciting to try? I don’t think it has been deliberately made so, but this illusion of secrecy doesn’t hurt its image. It does require effort to learn to code. What I wanted to do was not to take away the mystery, but to create a way in, one that sparks curiousity and is genuinely fun, offering appropriate challenges.

Scalable Vector Graphics (SVG) is a markup language for creating 2D vector graphics. These graphics can be made interactive and used in animation on websites.

“It’s hidden there, waiting to be discovered. We just need more creative minds to start playing with it.”
Lea Verou on the untapped potential of SVG
“The greatest appeal of magic is not in its application, but in its esoteric meanderings. The element of mystery which so heavily enshrouds the practice of the black arts has been fostered, deliberately or out of ignorance, by those who often claim the highest expertise in such matters. If the shortest distance between two points is a straight line, then established occultists would do well as maze‐makers.”
Anton LaVey in The Satanic Bible
The term glamour was originally used to refer to a witches’ spell, a magic charm; creating illusory attractive or fascinating qualities not in line with reality, and used to manipulate.

Process images

The highly complex game interface of my first attempt was significantly reduced as the project progressed. Some of these initial drafts are available online, if you'd like to click around.

My first attempt, inspired by old flash-based room escape games. The idea came from the fact that many people feel trapped by complex digital technology, and that they would escape this feeling by learning about code. The interface included many simulations of real world phenomena; doors with keyholes, a clock, an RGB switchboard, and a clock. I imagined an Escape the Room game based in a curiousity cabinet, with lots of objects drawing the player's attention. This first draft can be viewed here. The spellbook on the right contained all CSS code relating to elements that the player has interacted with, and input fields were activated on click. Here my friend Kit has been trying out the game, changing background colours. Through user testing, I began to realise that the interface was way too complex; my goal was to make code seem less intimidating, and here I had created an interface that people described as overwhelming even before realising it was about code. The irony slowly dawned on me. In early April, I started from scratch. I reduced the game interface to its essentials, and abandoned the many simulations I had so much fun creating.
(I made an editable picture frame, and my tutor changed it to Elvis while trying the game. He got to stay there for a while.)
For a while I was unsure of how to communicate instructions to the player. I didn't want there to be step-by-step instructions as in the coding tutorials I was used to. I was inspired by games I played as a teenager that had companion NPCs (Non Playable Characters) guiding you through the game. I especially like the ones that are rude. The spider came to be as a kind of spirit guide during the work on the room escape game. In West African folklore, the spider is a trickster god, associated with creation, wisdom and storytelling.
(It's also a pretty good web developer.)
In this draft for the game, the spider character talks to the player through lines appearing at the top of the game interface. It got increasingly rude and sarcastic. I thought of the spider as a personification of the inner critic. My idea was that by separating it from your self and observing it, you would realise it is not necessarily you talking. Being aware of its presence helps to silence it. The spider works as identifying the negative thoughts you might have about your own capability, perhaps even before they come into your mind. At one point I unintentionally created a bug that made nearly everything you click turn into that picture of Elvis. Of course I kept it. Go ahead. The idea for the spider as the inner critic came during a period where I started doubting my own abilities after having run into a series of challenges in the programming work. It went a bit over the top, and I eventually got over it. In the end, the game turned into an initiation process into the world of coding. The community of coders online are very helpful and sharing, but for a beginner, finding a way in may seem difficult. Through the idea of coding as magic, I saw a parallell to the initiation processes of secret societies, and how this also fits with the way games are sequenced, and how knowledge is presented in levels.

During the project I kept an online journal (warning: content heavy!) where I collected all my research. There you will find some of my unedited notes and more images documenting the process.

The challenges

I wanted to use what CSS I know, create appropriate puzzles based on the code, and make it easy enough for a beginner to understand, without much instruction. It was surprisingly difficult to communicate these things at the right level, because I know them all too well myself. My initial game ideas were very complex, with puzzles that required the player not only to understand the code being presented, but to use this code to manipulate simulations of real world objects.

It took me a while to realise the potential for play focusing only on the most essential code parts, but this really is more in line with what I originally wanted to achieve.

As I’m new to game design and theory, the process took a lot longer than expected because even though there are many similarities, a lot of it is very different from the graphic design projects that I’m used to. I had to come to terms with the fact that I wasn’t going to be able to do several rounds of user testing like I originally wanted, but I can still test the game today and learn from the feedback.

The outcome

I have attempted to create a way in to the coding world for people who lack faith in their own ability, making it more approachable by only giving a small taste of what’s in store. It is an attempt at a synthesis between a code tutorial and a game.

It turned out successful as an experiment in what can be done with the available tools in web development. I still find it hard to question the existing norms in web design because my idea of what a website should be is so ingrained in me, but this project has lead me to an increased understanding of my medium of choice, and how it can be used to better the transmission of valuable information.

I feel nowhere near done with this subject. I’m actually a little bit annoyed at how little I’ve accomplished. It's called a «master's degree» but I have my doubts about this being something one can ever truly master. I think I’ve only scratched the surface, and I look forward to the continuation.

On KHiO

The graphic design programme at KHiO is focused on craft traditions. I’ve learned about letterpress, bookbinding, and silk screen printing, and I think these lessons have fed my practice as a web developer as much as the work I’ve done digitally. In the bachelor programme at KHiO there is an equal mix of graphic design and illustration courses, which has shaped how I think about design and what my role can and should be.

When I started coding in the second year of my BA, I discovered what I love about the process; something that I don’t find when working with Adobe programs, but that I experienced when doing letterpress work. There’s something about working with the material directly, the sense of craft, and how I feel that it's making me more independent. I taught myself coding through a series of self initiated projects, and found great joy in getting to know the technology that has been such a big part of my life, but with which I have been a passive consumer up until now.

Graphic design is somewhat based on rules that stem from experience of what works in visual communication, but a lot of it is tacit, and cannot easily be put into words. I was drawn to it partly because of this mystery; sometimes you just «know» when it «feels right». For me, pairing this with the purely logical world of coding creates the perfect balance. Coding allows me to be a perfectionist, it demands order to work. At the same time, it is forcing me to let go of control, because once my work is online I have no way of knowing how it will be viewed by users, as it all depends on what browser and device they are accessing it from, and whether or not the work allows for user generated content.

There is a tendency at the KHiO graphic design programme for taking risks, doing things we don’t know and which are not taught as part of the programme or traditionally a part of our field; music, animation, sculpture, furniture and stage plays. We trust we can do it, in our own way. This should also apply to coding, and it increasingly does. We just have to realise that it, too, can be an artistic craft.

In the film Helvetica, type designers Jonathan Hoefler and Tobias Frere-Jones talk about how they describe the qualities of a typeface: “This has that ‘Saturn V rocket, early NASA’-quality; it needs to have that ‘orange plastic Olivetti typewriter, Roman holiday espresso’-feeling”, “This feels kind of Eric Satie, it need to be Debussy”, “This has a kind of belt-suspenders-look, it needs to be much more elegant; hand lasted shoe”
You can watch it on youtube
“Life is very messy and chaotic, but when you’re building a computer program, it’s incredibly orderly. You know where everything goes and you can obsess over every little detail, so you can live in this perfect, imaginary universe. You can engineer a reality and then live in that reality for most of your days. That reality can be free of conflict, free of complexity and emotions.. It’s very utopian.”
Jonathan Harris, interviewed by The Great Discontent

Designer's statement

In this project I’ve found my path; what I have to offer as a designer/developer and what I thoroughly enjoy. What drives me is the sense of wonder and curiousity, the desire to understand what’s actually going on here, even though I might never find out. My wish is to be an eternal student, and have the opportunity to explore the world through my work. I love it when I experience personal development parallell to the design process, and when the work allows for experimentation and play.

During my design education, my focus has gradually shifted from that of creating beautiful designs to the effect of those designs on people. What I want to do is use my skills to influence behaviour through fun, playful experiences. I think my strength lies in clarifying the complex; understanding systems and translating them into visual representations to provide insight; making information accessible and appealing. I want to curate information in a way that is both delightful and meaningful.

I don’t want to create objects or take part in the industry that is about manipulating people into buying them; simply decorating to enforce consumer culture. As designers we have a potential, which I choose see as an obligation, to do good.

“The less of a division I can have between work and pure learning, the happier I am”
Kelli Anderson, interviewed by The Great Discontent
“(Graphic) Design is about making sense of complexity and disorder and making that usable and useful to people.”
Ije Nwokorie
“Design is losing its essential values because it's being used for the wrong purposes.”
+
“Design has become the cover for unnecessary consumption.”
Peter Saville

The unicorn

The unicorn has become a metaphor for the hybrid graphic designer and coder, established by those claiming it is so rare that it might as well be a myth.

Print designers usually possess many skills outside of the purely visual. To be a good book designer involves working on the user interface and user experience, and requires technical knowledge of the material used in making a book. I don't think it is too much to ask of digital designers that they develop a corresponding skillset.

The unicorn has been used in Christianity as a symbol of Christ. The story goes that a unicorn is a wild creature that can only be tamed by a virgin. It signifies the incarnation; the word made flesh.

I think unicorns are real.

“If you’re looking for a designer who can come up with your identity, design your site, create UIs with great user experience for your web and mobile apps, and on top of that code his or her work in HTML/CSS (and why not throw in Javascript in the mix!), then I’m sorry to inform you that you’re hunting unicorns.”
Sacha Grief in Why Can't Sartups Find Designers?
“Many believe they exist, some know someone who hired one, few claim they saw one in the past, always in strange circumstances.”
Katherine Martinez in The Unicorn: Hybrid Designer + Developer
“It’s too bad unicorns don’t exist. [...] I have never met a designer who is an expert in all those skill areas.”
Braden Kowitz in Hiring a designer: hunting the unicorn
“Design is already not a single skill” and the components “function as part of a holistic system, where they work together to achieve an outcome”; “If you accept the holistic view, then you have to accept that design itself is just a piece of a larger effort, which is to build something that changes the world.”
David Cole in The Myth of the Myth of the Unicorn Designer

Bibliography

Acknowledgements

  • My tutors:
  • Martin Lundell

    a source of endless support and childlike enthusiasm, whose vision and openness continues to make KHiO a better place for graphic designers and illustrators
    Thank you for the constant encouragement.
    “Being a little philosophical, one might say that EVERYTHING is code”
    (Martin's words of wisdom during our first tutorial)

    Maziar Raein

    the patronising arse who helped me believe in myself by repeatedly telling me to get therapy, and by sending me to the mysterious far away land full of secrets and surprise
    Thank you for asking the right questions.
    “It’s not like giving birth to triplets or whatever”
    (Maziar weighing in on the difficulty of completing an MA project during a preparatory course)
  •  
  •  
  • Andreas Berg
  • Theodor Barth
  • Josef Leupi
  •  
  •  
  • My classmates:
  • Ida Christensen
  • Dorte Walstad
  • Audun Lønning Gjerdi
  • Stian Tranung
  • Anna Prestsæter
  • Malin Kleiva
  •  
  •  
  • External guidance and moral support:
  • Thor Merlin
  • Rosa Hernandez
  • Ronaldo Gonzalez
  • Maria Engell
  • Lotte Jakobsen
  • Tobias Nordermoen
  •  
  •  
  • All of the brilliant people I have quoted, whose work have contributed greatly both to this project and my personal growth
  •  
  • The online community of web developers, always willing to help each other out, answer questions and share their code
  •  
  •  
  • For literally giving me life, and supporting me both emotionally and financially through everything:
  • Mamma
  • Pappa
  • Mormor
  •  
  •  
  • And most importantly Jonas Braathen, the love of my life, without whom none of this would have happened.

The end

“Regard everything that you are doing as play, and don’t imagine for one minute that you have to be serious.”
Alan Watts

Thank you for reading!