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


Week 24 Literature review

Something I think I have mentioned before, but it is worth repeating, because I really like the concept and the style. The map is the focal point of the website and easily links. The cool tones of the website are interesting, and that you can filter different types of the attraction. Each dot has a thorough description of the event/installation and photos, and occasionally multimedia too. The UI is slick and the curved corners (which I think is naff, usually) are cool. A great example of datafed and 3 column design. I wish I could design this well!


In a similar vein, this is an interactive map of cultural and foody places in Bucharest. Again, I like this (not as much as the line) and it shows information concisely and cleanly. I wonder how to present the information I have, where sometimes there are lots of dots concentrated in a small place. I have around 400 photos on my current map, but I haven’t written descriptions of them all. But I could categorise them, and perhaps make some walks based on a certain theme, in the style of Filo’type.

Alice Neve and Stuart directed me to this lovely exhibition in Tokyo: a created exhibition! Visitors decorate sea creature templates, have it scanned in and then see the image on the project walls. The website describes the project as so:

Color in a fish on the paper provided. See the picture you have drawn come to life in the massive aquarium in front of you, swimming together with the fish drawn by other people. If you touch the swimming fish, they will swim away. If you touch the food bags, you can also feed the fish. The tuna you draw will transcend the boundaries of the artwork and swim out into the Sketch Aquariums and Sketch Oceans of exhibitions around the world. And the tuna drawn in other parts of the world may appear and swim in the Sketch Aquarium right in front of you.

How amazing! The bridge between low-tech drawing and hi-tech projection is well thought out and worked really well. The scanner looks hi-tech, but I’ve seen notebooks that you can scan in your notes without lines being scanned in too, and have made a DIY version myself. I’m not saying it would be easy to implement, but it is very effective. That your artwork can become part of something bigger, and be around the world is magic and a real draw, whether adult or child.

How could I make this work with letters? I could use the drawn letters and project them in the gallery, scanning them in one at a time, and also using LED screens.

Saw Type Development III

Previous post here.

Over the weeks I have been working on the glyphs for the saw tooth typeface:

These are super rough, and it’s my first typeface! I transported them into the Glyphs app:

And here is a Zoom in:

At this stage, I decided to contact Anne-Marie Geals, who I had a conversation with earlier in the module. She has kindly agreed to give me feedback on my typeface. While I did this, she suggested that I:

What I think will be important for you to do is a ‘Short Project Description’ for the typeface aspect. It will help you enormously.
I think that it is vital in terms of assessment that you show conclusively (evidenced) that you have thought about the typeface in terms of;
• What do you wish to convey with it – e.g.. emotions, feelings, a message, and does the end product communicate what you intended?• Who is it for – target audience. Have you tested it in the target audience?• How do you intend/envision it will it be used – e.g. headlines, body text, editorial, printed, online.
To give you an example, I had to write one for my MA, and it was so useful. I referred back to it every day;

A new typeface inspired by, and designed for, Wales and the Welsh to help facilitate the use of the declining language. Its aesthetics will be culturally expressive, yet practical and include the full set of glyphs required for bilingual typesetting. It will be designed for long, immersive reading in both print and screen-based media.

You can see the description clearly states what I was aiming for, who it is for, what it is for, and how it is intended to be used. I had to evidence that I had considered the needs of screen and print based media in my designs, and whether my typeface functioned as well as I hoped in these environments (evidence of testing). I also had to evidence how my Celtic visual theme/style had been inspired by my research. I also evidenced that I had tested the working font on Welsh people and had received feedback.

Nadine Chahine, whose Font li Beirut project I have previously covered, describes a typeface brief as such:

Type design is equal parts suffering and euphoria. It is a walk along a winding road that goes on for many weeks and months before it’s done. A type design brief is like a charter path: It asks you questions, and the answers will guide you to where you want to be.

Nadine Chahine

So, what do I want this typeface to be/do? Here’s an unstructured list of my thoughts:

  • Personal response to the area of Walthamstow
  • Embody the history of varied industry in the area
  • The saw tooth roofs and the Warner house arches used to inspire the shapes represent everyday people
  • Variable typeface with axes on width, weight and roundness
  • Display typeface rather than for long passages of text
  • Showcase the ethnic diversity of the area
  • San-serif font

There is also a difference between what the typeface is now and what it could be. At the moment it is just an uppercase, and doesn’t have a full set of glyphs. It only caters for the Latin font, and doesn’t include characters needed for European languages. To make it truly represent Walthamstow it needs to cater for Tamil, Bengali and Devanagari scripts too. I haven’t tested it either, or considered the difference between print or screen.

I’m going to copy Geal’s statement directly, pasting in my details in order to construct something myself.

A new variable typeface inspired by the architecture of Walthamstow to embody the innovation powered by the community. Its aesthetics will be geometric to represent the community’s burgeoning awareness of typographic style. Its will shift its appearance on weight, width and roundness axes and include the full set of glyphs in Latin and European scripts. It will be designed for eye-catching display type in both print and screen-based media and for free personal use by the community.

Next post here.

Week 24 Overview

What I did

What I need to do

  • Develop typeface more
  • Redevelop website using Adobe XD
  • How would I incorporate the tool into a launch?
  • How can I grab people’s attention to get more submissions on launch?

Launch development Exhibition

If I want to get more people to contribute to the project, I think the best idea will be to run events during the E17 Art Trail at the start of July. I’d like to have an exhibition space where people can come and find out about the project.

In Walthamstow there are a few different options to host:

Vestry House

We Are Here exhibition

Vestry House Museum has a rich history and great exhibits on social issues – for example the We Are Here exhibiton showcasing the stories of the Windrush generation in Waltham Forest. The space is a little small for having people in and out and not well-ventilated. The museum is also out of the way for a lot of people and I want to attract lots of through traffic, not necessarily tourists to the area.

Walthamstow Central Library

I’ve never seen an exhibition in the library, and it is very Central. I would have liked to have something set up in the entrance lobbies which are much more modern and open, but these spaces aren’t available for hire. Overall, good location, but not the right feel.

The Mills

I really like the Mills Community Space because it has such an artsy feel, and it has a few spaces available, like this room which has huge windows onto the street to get people in. There is also space on the walls to host people’s work. But, it is slightly small and I want to host an event here so to get coverage over the area, I’m thinking about another location.

Winn’s Gallery

Winn’s Gallery

In the lovely Lloyd’s Park, Winn’s Gallery is a white-walled exhibition space at cheap rates for local people. There are multiple windows and doors for a breezy, well-ventilated time, and it’s on the main avenue of the park and next to the cafe and children’s area. There will be plenty of local people around to take part. We have a winner!


I can’t find official layout plans of the gallery which is very annoying, and as a consequence of the pandemic layoffs, my requests to the council for more information about it have gone unanswered. Using my mapping and sleuthing skills, I think I’ve found rough dimensions of the gallery:

Let’s call it 27 x 8 metres. From photos, I can estimate where the doors are I would want to use:

This way, I can get cafe visitors from the south entrance, and park visitors from the north. I can create a one way system too if needed, plus it will have great ventilation.

At the south entrance I want to have a large table where people can do the activities and will be enticing to the children if they want to do some colouring in. There will be crayons, colour pencils, arts materials for people to use and activity sheets people can do at the time or take away with them. The doors are large and glass so no matter the weather people will be able to see in.

At the north entrance I want people to see the Walthamstow is … activity. A wall full of bits of paper in the breeze will hopefully entice people in to see what is being written there! Also near the north entrance will be information about the project so far, and a place to have a go at the online tool.

I’ve just thought that I can have a scanner like at the Aquarium so that people can fill in their letters and glyph ideas and I can have a record of them while they take their creations home. Using a projector at the Eastern end, I can show people’s contributions live.

The pink circles are hand sanitisation stations that are everywhere so that people are always close! The art materials will have to be sanitised after every use, so maybe I should have another table so I clean things between people coming in.

Visual Experiments: Logo II

Previous post

As you know, this project came from a previous module, and so I have a fair amount of branding already done. Still, I think it’s good to test out a few things to make sure I can make the best out of it.

The top line has been drawn over with felttip pen to give a pleasing ragged edge then scanned.

I wanted to experiment with the thickness and density of the scribbles making up the letters, so used different pens, pencils, crayon and charcoal with varying strokes to achieve this. Here are my experiments and notation about what worked and what didn’t.

I also found that I like the ‘e’ tilted so that the crossbar is pointing upwards rather than horizontal.

I do really like the current logo because Stowe has a pleasing weight and neatness that I didn’t achieve in the new experiments whilst still retaining a craftiness. I don’t like writing the Framework underneath – I’d rather have it typed – because it provides contrast and looks more polished.

From this stage, I’ve gone onto tinker with the logo some more and used the experiments above to refine the look.

I used Illustrator to create a vector file and touched up the letters.

Playing around with a website logo and favicon using different weights of Archia.

After consultation with my esteemed cohort, I am go with logo 5 as it has a nice balance between the two elements:

As you can see, the Framework in the new logo is now justified under the Stowe and with a bolder version of the typeface. The t in Stowe is more defined too. A good result!

For the favicon, I’ve decided on this one:

It will work at a small size and on light and dark backgrounds, as shown above.

Saw Type Development II

Previous post here.

Over the weeks I have been working on the glyphs for the saw tooth typeface:

I’ve changed some of the glyphs from the previous – the F, E and I. I did think that the Emigre E was cool, but distracted from other features.

I’ve been working through Designing type by Karen Cheng (978-1-78277-544-8) as it provides a usual step by step for each glyph set and gives existing examples. For a san-serif uppercase, it recommends starting with an O and an E, with a W and M one of the last characters to design. Because this typeface is so inspired by the saw tooth roofs, I’ve had to work backwards a bit.

Next post here.