Neurodiveristy in Albertopolis

A new website for a network of neurodiverse staff and students from colleges and museums on Exhibition Road, London SW7.

Screenshot of NDIA website. A header illustration, site menu, and a list of upcoming and past events is visible.

The main activity of Neurodiversity in Albertopolis is to run talks and workshops at the Royal College of Art (RCA), Imperial College, and other participating institutions.

These events are usually advertised on an institution's own website - for instance by the RCA or Imperial. That's a problem for people looking to go to these events (it's easy to the announcement) and those organising them (it's hard to get an announcement online, especially at an institution other than your own).

The new website solves both of these problems by giving the public a single, well-organised source for all of the network's events, and by giving contributors direct editing access. In addition, the site contains information about NDIA and its contributors and a collaborative list of resources.

Design notes

The goal of the design is to make the information on the site accessible to as many people as possible. The result is a simple, single-column layout with a clear hierarchy, highly readable type, and strong colour contrast. In addition, we built a set of access tools that let people adjust the type sizes, spacing, and colours of the site.

IBM Plex

The word 'Illicit' is set in the Helvetica, Roboto, GT Cinetype, and IBM Plex typefaces. The latter is most readable.

Character differentiation in sans-serif typefaces

We decided to replace GT Cintetype, which the group had been using for some of its materials, with IBM Plex Sans. There were a few reasons for that:

I do miss one feature of Cinetype: the exagerated diacritics and punctuation marks. They're especially useful in distinguishing i, j, and ! from the other vertical characters. If I ever get a type design workflow together, I might fork Plex and try adjusting it in that respect - and I'll be allowed to do that thanks to the open-source license.

Access tools

Screenshot of buttons to adjust font size, spacing, and colours.

We decided to add a set of access tools to the site for a couple of reasons. One is practical: It's hard (if not impossible) to find a set of typographic parameters that will make the site pleasant to read for absolutely everyone. While one person might need large type to read comfortably, another might prefer small type to be able to read a whole paragraph in context.

The access tools address that problem by opening up a parameter space of many different type sizes, spacing options, and colour themes that hopefully encompasses the requirements of a wider group of people.

The other reason is that putting tools like these in a prominent location sends a message: We're aware of people's diverse needs, we think they're valid, and we're working toward addressing them. It's a small extension of the bigger political project NDIA is engaged in.

The adjustments you make with these tools aren't purely mechanical - I adjust the type scale, font width, weight, and spacing at many points in the design space. In earlier writing on this idea, I called this process shaping the design space.

I took care to describe the individual options in a way that doesn't imply a distinction between "normal" and "accessibility" modes - I see each of the 48 possible combinations as equally valid.

Tech notes

Credits

View the live site at ndia.co.uk