Every designer, and most artists, should understand the rudimentary basics of how web pages and web sites are built. Unfortunately, far too many students leave Bachelors and even Masters design programmes without a basic handle on the fundamental triad of content (HTML) + presentation (CSS) + interactions (Javascript).

We cannot insist enough on the importance of a basic understanding of web tools. While we enthusiastically explore and encourage the continued exploration of physical interactions with the world — do not throw out your books, keep your rulers, continue to use protractors, and always have a caliper on hand — the world itself has nevertheless shifted. The web, and more importantly phone-oriented web sites, are very much the starting point for even the most basic form of communication.

Again — and this is important: do not oppose the physical world to the online world. Think of it more as a continuum. AFK is a more accurate descriptor than IRL. Objects will often be an excellent entrypoint into all forms of design, and a hands-on understanding of print tools and print workflows gives a deeper understanding of the history of visual thinking. But these worlds will more often than not extend from and back into some form of electronic communication and collaboration.

If you accept this basic proposition, then web continues to be the best place to start, because of its fundamentally open nature. Indeed, many of the tools listed here (Twine, P5, even VS Code itself) are built on top of the fundamental languages, tools, and technologies that underpin the web.

Website

There are a gazillion solutions for making a website. There are also services like Squarespace, WordPress, or Adobe Portfolio for making a website via a drag-and-drop interface.

Kirby

Kirby is a solution for making websites that is based off of an extremely clean, well-designed-and-engineered minimalist approach to handling modular content, design, and interaction. It is a “flat”, file-based solution, i.e. it does not require the installation of a database; instead it builds your website out of a simple collection of folders containing sub-folders and files in those folders. If you know how to make a folder and put files into folders, you know how to make websites using Kirby.

Kirby

Web App

A fast way to make an app is to build a web page and then to build an app around it, and install that app onto your iPhone, iPad, or Android phone/tablet.

Many of the creative coding tools here generate HTML5 webpages: Twine narratives, P5 interactive/generative sketches, etc.

Here is a tutorial for Creating a WebView App in XCode. This is an iOS/macOS-only solution. The idea is to create a local folder containing your P5 sketch or Twine story’s index.html file and associated assets (images, sounds, whatever), then to create an app around that folder in xCode.

  • Todo: add Android .apk webapp solution.