New York City Times (nyctim.es) is the second in an ongoing series of digital travel zines following the 2019 project “eightdaysin.tokyo”. At its heart, it is an exploration of digital editorial design and interaction in a single page scrolling format, combining candid photography, illustration, animation, type experiments and writing.
When the pandemic hit, I realised I wouldn’t be travelling any time soon, and that I have a huge back catalogue of photos and some illustrations sitting unused. I embarked on what would become a nearly 2 year project to bring together material from various previous trips to New York, as well as creating new illustrations; these would be combined into a designed-from-the-ground-up website containing a series of mini articles. It is intentionally overflowing with content, with an attempted balance of personal, nerdy and more generally relatable observations in the hope that at least some will find an audience.
As well as being a not-so-subtle play on words with the New York Times newspaper, navigation was conceptually inspired by the historical “stacked” headlines on its front page. In this case a variety of contemporary sans serifs were chosen to allow for some variation while still keeping a clean modern feel. Thematically, the XX Condensed and Wide Druk could represent the highs and lows of the city, with GT America extended providing the solid backbone of body type (the design with both European and American influences I feel is a good parallel for the project).
I wanted to convey the feeling of each article through title treatments combined with animations and interactions that the user can control at their pace—i.e. the flight path of a helicopter, raising of prison bars, radar scope, dragging old images around. For the ATM section, a variable font of 5 weights was created and animated based on the variety of type found on the machines (the machines themselves illustrated in a glyph).
Even though the site has a heavy focus on visuals, I have tried hard to make the site enjoyable for those with vision impairment, with sometimes overly descriptive alt descriptions for screen readers that might even give other insights behind the images that may not be initially obvious. All text is accessible and care went into implementing curved titles with svg paths, rather than using flattened vectors.
A fully fluid design means that content is presented appropriately all the way from the smallest smart phone to largest cinema display, and technically, I have attempted to implement the latest React, Next JS and Tailwind CSS techniques.