At the beginning of the project, I designed the website using Wix, a web development server. The advantage of doing this is that the UI gives a clean easy way to build a website without too many issues. The only issue is that the UI gets in the way of coding and true design. This is the issue I’ve had with the maps. The first one looks like this:
This map was exported through QGIS, a map building programme, using a third-party plugin that allows the map to be hosted in HTML. However, the code seems somewhat unstable because I can’t get the dots to expand into popups to give the viewer more information.
I’ve also tried with Mapbox:
I think this looks a lot better, because unlike the QGIS map which is completely designer-controlled, the underlay of the map is controlled by Mapbox in a more sustainable way. It just works. The issue that I am having is that I can’t get the HTML, CSS and Javascript to work in the way I want for a demonstration for the hand-in. I have a developer friend working on it for launch.
In the meantime I have decided to work on the rest of the website using Adobe XD. This will give an overview for my friend to work from and show the appearance of all the elements.
The map plugin available doesn’t really do working interactive maps, and this prevents be from building a full website on it, and giving a detailed demonstration anywhere, but it will give a greater gist.
I think a map with fun-pop outs and hovers and filterable features will be good:
Online Tool
Using XD has also given me the chance to work on the tool and how it can be shown online:
Anne-Maria Geals says that: “I feel the online tool for local people to design their own letters is a fantastic idea and would be a lot of fun for the contributors. I’d certainly like to have a try of it, but I’m not from Walthamstow! It’s a pity that this idea was explored late on in the project.”
Yay! It feels nice to get some good feedback, and a little like I should have done this before, but I’ve developed it now.
The online tool gives me an opportunity to include generative art in the project again. I had been a bit lost on how to include it before, but now I can take glyphs made by participants and combine them with data and then remix with participant help:
Glyphs are split up using data from TfL – the more passengers travelling into Walthamstow, the more squares in the grid. The glyphs get mixes up.Mixed up glyph!
Glyphs of the same letter can be drawn up and then distorted further:
Once a threshold for number of letters has been reached, participants can choose to remix letters and distort them. The colour of the letter is decided by the current outside temperature. This tool and function shows how data and community can be merged for satisfying results.
This can then be used as part of the launch with the public …
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 …
As well as showing photos on maps, I would like the website to show submissions from the workshops. After my first submission yesterday, I have created a section of the website to display the outputs. Here is the finished look, which you can also see here:
Current look
Here is how I did it …
I use Wix to host my website and uploaded test images.
Wix has a nifty data collection tool so that you can use a CMS to flow into your website. I started by creating a table with the test images to populate the gallery.
On a new webpage, I created a gallery to link to the dataset.
I connected to the dataset successfully
To create a more full look, I created dummy items based on the template letters. Each letter has a title, image, description, contributor name and tag for filtering.
Here is a mid-point look with the letters populating in any order
To filter, I experimented with choices linked to tags and filled them out. However, it has to be a dropdown feature so I reworked the page.
Here is the final page with the letters in order with a dropdown and an All button to reset the filter.
Here is the filter in action for the letter M.
The gallery allows for each image to be shown in an expanded view with contributor credit and description.
Anna Robinette 