week 24: Website & online development

Previous post

Stuart has mentioned this to me time and time again, and I had fun playing with the tool at the time (and at Pick Me Up!) but I didn’t think that it fitted into my project, until now. The last few months have been me trying to get people involved in the project and receiving nothing back. It has been frustrating.

Now we are coming out of lockdown, it seems like a better time to launch the project. This is going to take efforts on multiple fronts, and one of them is web. Getting people to contribute in a simple way using a tool similar to Paint could be a way to do that. Over the lockdown, I’ve given people the opportunity to report pieces of lettering that they have seen in the area that fits a brief: for example, it looks like a stencil or looks 3D. This tool would allow people to create their own.

Using a tutorial and the p5.js library, I managed to create this simple web paint application:

It’s very simple, and I began to make it more to spec by adding options to draw circles and squares. This is all well and good, but I found myself out of my coding depth very quickly. Instead, I am going to build an example interface to show the examiners that I would commission a developer to make (or learn how to do outside the stress of course deadlines.)

Here is an annotated page of what I would do:

The annotations do show the process pretty clearly, but basically: a participant clicks to take part and then is taken through a tutorial explaining the following: they are given a prompt to follow, for example, they can only use straight lines. They are also given a glyph, such as a capital H, and also a feature, such as it being tall. They can interpret this how they like. If they are unhappy with the prompts they can re-roll, or if they are unsure, they can ask for a tool tip that thoroughly explains the task again.

The canvas has dotted grey lines in the background that can be snapped to so as to provide the participant guidance. The tools on the left of the canvas will differ according to the prompt, for example a curvy line and circle won’t be available for the prompt “can only straight lines”.

Before launch, an example database will be populated to give the participant an idea of what others make of the option combinations. They won’t be the same: the example will show, in this instance, glyphs that are also tall, or an H, or drawn using straight lines, but not all or a combination of these. When sufficient glyphs are drawn, the examples will be from those available. I wonder if the glyphs will become self referential from the first submitted.

The participant can enter their name, and then also submit their letter. the letter will be then human checked so that it doesn’t show anything inappropriate. It seems a little censoring to do this, but given that the tool is open to everyone, and that participants have little restriction about what they draw, it seems prudent to check that drawings of swear words or rude images are not posted.

Here is a workflow showing the process, and a list of prompts I have so far thought of:

The glyphs submitted with be wonky and crude and maybe not make sense, but I want to give free range. The tool will be available on tablets and smart phones so that participants can use fingers if they want to.

When the glyphs are submitted, I’d like to bring them out into the open for people to see and to advertise the project. It might be something similar to the letter grid, or maybe on a presentation stage such as the Sketch Aquarium.

In Week 25 I will figure out how to present this …

Next post

Advertisement

2 thoughts on “week 24: Website & online development

  1. Pingback: Week 24 Overview – Anna Robinette

  2. Pingback: Week 25: Web development – Anna Robinette

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.