Week 25: Web development

Previous post

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 …

Next post.


One thought on “Week 25: Web development

  1. Pingback: week 24: Website & online 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 )

Twitter picture

You are commenting using your Twitter 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.