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.
Using QGIS software, I have created a base map with images I have taken over the past year.
18 March
QGIS/GitHub/Wix link successful
Here, you can see that the webmap has all linked up. Yes, there are a lot of features that need to be improved, however, now the link is set-up, I can be sure that what I do is directly sent out.
I went looking for other projects to see what had been done with type for MA projects and came across this one from Daniel Stuhlpfarrer. He created a variable font with masters that mixed to create a unique font based on your personality after you answered a series of questions. His aim was to find “the effect that a cooperation between man and machine has on the design of type and what a future of type design could look like as a result”. I think it’s effective because the user gets a unique font for themselves informed by their own input, and it is like the user, machine, and Stuhlpfarrer create together.
Daniel Stuhlpfarrer’s work isn’t local and seeks to examine a speculative question; mine is very local and has a set question. Does type inform the personality, or personality the type? This is the case of one personality informing one typeface, so what happens when thousands of typefaces are combined to create a culture?
Thinking about online outputs though could be a neat way to present my project.
Online Tools
So with people’s contributions, I could create an online where people can see their letters. It could work with simple glyphs …or the big filled-in letters. It can give details about the letter and contributor.
It could be a neat online way to show people’s contributions rather than printing them all, and the gallery can make a piece of art, like above. I can do this easily using a CMS based gallery and worksheet. I haven’t asked people to design glyphs like this, but if I took the project forward and ran talks about typography, I could launch a new phase of the project.
Anna Robinette 