Neurodiveristy in Albertopolis

A new web­site for a net­work of neu­ro­di­verse staff and stu­dents from col­leges and mu­se­ums on Exhibition Road, London SW7.

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

The main ac­tiv­ity of Neurodiversity in Albertopolis is to run talks and work­shops at the Royal College of Art (RCA), Imperial College, and other par­tic­i­pat­ing in­sti­tu­tions.

These events are usu­ally ad­ver­tised on an in­sti­tu­tion’s own web­site - for in­stance by the RCA or Imperial. That’s a prob­lem for peo­ple look­ing to go to these events (it’s easy to the an­nounce­ment) and those or­gan­is­ing them (it’s hard to get an an­nounce­ment on­line, es­pe­cially at an in­sti­tu­tion other than your own).

The new web­site solves both of these prob­lems by giv­ing the pub­lic a sin­gle, well-or­gan­ised source for all of the net­work’s events, and by giv­ing con­trib­u­tors di­rect edit­ing ac­cess. In ad­di­tion, the site con­tains in­for­ma­tion about NDIA and its con­trib­u­tors and a col­lab­o­ra­tive list of re­sources.

Design notes

The goal of the de­sign is to make the in­for­ma­tion on the site ac­ces­si­ble to as many peo­ple as pos­si­ble. The re­sult is a sim­ple, sin­gle-col­umn lay­out with a clear hi­er­ar­chy, highly read­able type, and strong colour con­trast. In ad­di­tion, we built a set of ac­cess tools that let peo­ple ad­just the type sizes, spac­ing, 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 dif­fer­en­ti­a­tion in sans-serif type­faces

We de­cided to re­place GT Cintetype, which the group had been us­ing for some of its ma­te­ri­als, with IBM Plex Sans. There were a few rea­sons for that:

I do miss one fea­ture of Cinetype: the ex­ager­ated di­a­crit­ics and punc­tu­a­tion marks. They’re es­pe­cially use­ful in dis­tin­guish­ing i, j, and ! from the other ver­ti­cal char­ac­ters. If I ever get a type de­sign work­flow to­gether, I might fork Plex and try ad­just­ing it in that re­spect - and I’ll be al­lowed to do that thanks to the open-source li­cense.

Access tools

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

We de­cided to add a set of ac­cess tools to the site for a cou­ple of rea­sons. One is prac­ti­cal: It’s hard (if not im­pos­si­ble) to find a set of ty­po­graphic pa­ra­me­ters that will make the site pleas­ant to read for ab­soul­tely every­one. While one per­son might need large type to read com­fort­ably, an­other might want small type to be able to see a whole text in con­text.

The ac­cess tools ad­dress that prob­lem by open­ing up a pa­ra­me­ter space of many dif­fer­ent type sizes, spac­ing op­tions, and colour themes that hope­fully en­com­passes the re­quire­ments of a wider group of peo­ple.

The other rea­son is that putting tools like these in a promi­nent lo­ca­tion sends a mes­sage: We’re aware of peo­ple’s di­verse needs, we think they’re valid, and we’re work­ing to­ward ad­dress­ing them. It’s a small ex­ten­sion of the big­ger po­lit­i­cal pro­ject NDIA is en­gaged in.

The ad­just­ments you make with these tools aren’t purely me­chan­i­cal - I ad­just the type scale, font width, weight, and spac­ing at many points in the de­sign space. In ear­lier writ­ing on this idea, I called this process shap­ing the de­sign space.

I took care to de­scribe the in­di­vid­ual op­tions in a way that does­n’t im­ply a dis­tinc­tion be­tween normal” and accessibility” modes - I see each of the 48 pos­si­ble com­bi­na­tions as equally valid.

Tech notes

Credits

View the live site at ndia.co.uk