Backend Books

This is a collection of artifacts, created during an interaction design diploma at The Oslo School of Architecture and Design.

The project explored the use of interaction design in a contemporary publishing context, and the demos below are the outcomes of smaller modules in the project. The demos are accompanied by links to references and resources that inspired the project. Please have a look around and enjoy!

If you have anything on your mind, don't hesitate to contact me. You can also visit the old website if you like.

Riso Separation Tool

An RGB-color separation tool for multicolor Risograph printing. It can be used for semi-accurate color matching, or for more creative expressions. Try the Color Magic™ layer treatment for some cool results!

Open Website

GitHub

Tools used:
p5.js, jQuery, HTML, CSS

Digital Risograph

An exploration of color separation for Riso printing. The website is an interactive showcase of three different prints. The left column represents the digital and the right column represents the physical, highlighting different qualities of the media.

Open Website

GitHub

Tools used:
photoshop, risograph printer, jQuery, HTML, CSS

Game of Life

This was an exploration of scripting for InDesign. Four different cellular automata were simulated procedurally in InDesign using basil.js, which resulted in an 800 page book. You can buy the book on Lulu, or try the visualizer to see the cellular automata in action.

Open Website

Buy book

GitHub

Tools used:
basil.js, InDesign, lulu

Concrete Poetry

This project was an exploration of using text as visual content rather than verbal content. It's an in-browser drawing tool for creating concrete poetry, inviting users to play around with letters in a non-traditional way. You can either find a random poem or type in your own text to use as material.

Open Website

GitHub

Tools used:
p5.js, Google Firebase, PoetryDB

Group Show

A digital experiment in the form of a collaborative photo book. The project is an attempt to visualize what kind of imagery people keep stored on their computers and mobile devices and to highlight what they find interesting, funny, weird or in general worth keeping/saving.

The intent is to recontextualize the submissions and open up for reflections around their origin and existence. It gives a glimpse into the mundane, revealing both intimate moments and seemingly random artifacts and screenshots.

See Vol. 1 here, or Vol. 2 below.

Open Website

Buy book

GitHub

Tools used:
firebase, vanilla javascript, HTML, CSS

Our Book

A web interpretation the 1926 essay, Our Book, by El Lissitzky. The project was an exploration of generative expressions, aiming to demonstrate possibilities of digital media as well as visualizing aspects of our contemporary visual culture. The website uses the Pexels stock photo API as a pictographic writing system.

Open Website

Buy book

GitHub

Tools used:
Pexels API, Vanilla JavaScript, HTML, CSS

Vellum

An exploration of interactive text and micro-interactions as narrative device. The text is written by Truls Bauer and deals with a thirteen year old boy with alzheimers.

Open Website

GitHub

Tools used:
vanilla javascript, html, css, splitting.js

Digital Decay

This project was an exploration of transforming qualities from physical to digital media, which resulted in a digital zine. The backdrop of the zine, a painting by Thomas Cole, will gradually deteriorate, depending on the amount of visitors and how they behave on the website.

Open Website

GitHub

Tools used:
p5.js, Vanilla JavaScript

Links

Filter  

Print

Web

Video

Publisher

Shop

Reading

Clear

Resources

basil.js


A "Processing-like" JavaScript library for scripting in InDesign.

Open Website

Bookup


A nice little mockup tool for in-browser 3D-visualizations of books.

Open Website

Firebase


A set of services such as database and storage that's easy to implement in your website or webapp.

Open Website

Internet Archive


"Internet Archive is a non-profit library of millions of free books, movies, software, music, websites, and more."

Open Website

Kirby CMS


A flexible CMS which is still easy to set up and use. It was used to build this website.

Open Website

Lulu


A print-on-demand service. Provides cheap printing with decent results.

Open Website

matter.js


A 2D physics engine for JavaScript / web.

Open Website

Monoskop


A vast wiki for arts, media and humanities.

Open Website

Netlify


Can host websites for free. Great for prototyping.

Open Website

p5.js


A JavaScript library for creative coding in the browser. Great for drawing stuff to a canvas.

Open Website

Pexels API


Free stock photo API – primed and ready for subversion.

Open Website

PoetryDB


Open API of poems. Easy to use and with cool sorting features.

Open Website

Prince XML


Convert HTML to PDF.

Open Website

Riso Colors


An overview of Riso ink colors, with RGB and CMYK codes.

Open Website

Sanity


The headless CMS everyone is talking about.

Open Website

Space Type Generator


In-browser dynamic typographic tool. Really fun to play around with, and can be used to create posters etc.

Open Website

splitting.js


JavaScript library for working with words and characters in HTML. Good for e.g. animating text .

Open Website

Stack Overflow


Find answers to all your programming problems.

Open Website

The Coding Train


Great youtube tutorials on coding – many of them involves p5.js.

Open Website

three.js


A WebGL library for 3D graphics in the browser.

Open Website

Typography on the Web


"The Elements of Typographic Style Applied to the Web".

Open Website

Ubu


Avant-garde art archive.

Open Website