MAGI 2016

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

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.

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.

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 forget 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.

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?

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 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?

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.

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.

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.

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.

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.

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.

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.

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 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.

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.”

Thank you for reading!