📱 🖥 🌐

Mobile, Desktop and Multiple Dimensions

Print design can be seen as a two dimensional practice, or three dimensional if we consider time. Designing websites goes beyond two or three dimensions into multiple dimensions — up, down, left, right, forwards, backwards in time and into the unknown — therefore, a different kind of approach and thinking is required.

This course will introduce participants to a number these approaches and methods of design thinking for websites, through the use of various tools, concepts and theoretical ideas. It will also provide an overview of the historical and contemporary digital landscape. The course will be lead by a programming first approach, with introductions to HTML, CSS and JavaScript.

The course will focus on designing and building a responsive website that uses an API or multiple APIs to curate a collection. While it’s true that a content management system (like WordPress) could be used in a similar way to organise content, APIs are more frequently becoming the standard with which we interact with online services and get data. Even WordPress now has it’s own API that can be used to get data from it’s database.

What is an API?

“The term API stands for Application Programming Interface. The term can be used to describe the features of a library, or how to interact with it. Your favourite library may have "API Documentation" which documents which functions are available, how you call them, which arguments are required, etc.

However, these days, when people refer to an API they are most likely referring to an HTTP API, which can be a way of sharing application data over the internet. For example, Twitter has an API that allows you to request tweets in a format that makes it easy to import into your own application. This is the true power of HTTP APIs, being able to "mashup" data from multiple applications into your own hybrid application, or create an application which enhances the experience of using someone else's application.”

Project: Collections of Known Knowns and Known Unknowns Intro

In response to questions about the government of Iraq possessing weapons of mass destruction, the US secretary of defence Donald Rumsfeld infamously said:

“That there are known knowns, there are things we know we know. We also know there known unknowns; that is to say we know there are some things we do not know. But there are also unknown unknowns — the ones we don’t know we don’t know”

Designing and building a website could be considered a similarly uncanny process to this statement. There are parts of the process that we know exactly, namely the global design and functionality of the website, and the majority of the HTML and CSS structure, these are the known knowns. Then there are the parts of the process that we know more or less, for example what the content will be, but we don’t know exactly the quantity or size of this content. Or a small piece of JavaScript to make something move, but we don’t know exactly to where it will move, these are the known unknowns. Finally there are the unknown unknowns, this is the part of the process when we go to stackoverflow.com


Design and programme a website that will contain a collection.

One part the website must contain content that will continuously change, or be randomly generated. This means that there will be “unknowns” when designing the website. You must anticipate the maximum and minimum amount of possible content that could be included here. For this you will use one of the data APIs listed below.

One of part that website must contain a selection of content curated by you, that you will upload to an online service (for example Google Drive, DropBox, or Possibly WordPress).

The design of the website must be entirely responsive, i.e it must work across screens of all sizes.

The website must include at least one form of interaction, i.e what happens when you click on of your pieces of curated content?

Due the the varying level of programming knowledge that I anticipate amongst you, I strongly encourage that you adapt the design and overall concept of your website accordingly. I want you to be ambitious, but not to the point of thinking that everything can be made to work with some magic JavaScript.

Structure of the Class

To begin with the classes will follow the structure of a morning session of codecademy, where you will work through programming exercises, and an afternoon session where we will work on the design and concept of your websites.

Between each class you will be expected to use the programming that you learnt in order to progress with the build your website.

In the weeks that I am not here I will dedicate Thursday afternoons to answering any programming questions you have by email, on a first come first served basis : )

Examples of Collections

— Sinkhole Audio
A collection of audio files (from James Langdon).

— The Serving Library
A collection of PDFs.

—Dot Dot Dot
The predecessor of The Serving Library.

— Göldin & Bit-tuner
A collection of songs.

MOMA Exhibitions
A collection of exhibitions.

— Labour Zero Labor
A collection of videos (done by me).

— VVatch
A collection of user updated videos.

— Things Magazine Pelican Archive
A collection of book covers (oldie but goodie).


— http://www.andrewhavens.com/posts/20/beginners-guide-to-creating-a-rest-api/
— https://ustwo.com/blog/open-sourcing-our-website
— https://en.wikipedia.org/wiki/The_Fog_of_War (not related but good, related to Donald Rumsfeld)
— https://validator.w3.org

List of APIs

Some APIs require authentication. This means that you need some kind of special key (like a password) or to actually login to the service to use the API. The following APIs don’t require a login, and therefore are easier and more practical to implement for your projects.

— YouTube API
Allows to you get any videos from YouTube and automatically embed them. For example you can get videos from a specific user or playlist. You could can also get random videos. With advanced use you can add videos to playlists.

— Google Custom Search API
Allows you incorporate a Google search directly into your website. Alternatively, you can set up search parameters and then include the results in your website. This is particularly interesting for including image search results.

— Google Maps API
Allows to you generate maps on a website. Using the API you can also control and change each map.

— Speech Synthesis API
Speech synthesis is an API built into web browsers that allows you to capture audio and convert speech to text, and also allows you to convert text to speech.

An API to get all kinds of information about Iceland.

— Football Data
An API for getting European football match results.

An API for getting information about films.

— Wikipedia API
Allows to you access all content from Wikipedia.

— More APIs here: https://shkspr.mobi/blog/2016/05/easy-apis-without-authentication/

More complicated APIs that require authentication. If you already know some PHP you might considering use these: — Twitter API — Instagram API


01 — 2.11.2016, 9am
02 — 15.11.2016, 9am
03 — 6.12.2016, 9am

04 — 20.12.2016, 9am

05 — 10.01.2017, 9am

06 — 24.01.2017, 9am

07 — 7.02.2017, 9am

Presentations — 14.02.2017