Launch Recite Me assistive technology
An animation of a web browser window showing the website for iiii magazine. The screen alternates between a layout of repeated placeholder text reading “(hover)” and “(logo)”, and an “About” page with a detailed text description of the publication.

Studio Hyte's identity for iiii Magazine examines the characteristics of type, code and interaction on the web

—
Date
14 September 2018

“Combining a self-aware sense of humour, with a love of expansive cultural ephemera,” iiii Magazine is an independent arts and culture publication, based in London and Manchester. Started by Jordan Harrison-Twist and Chris Samuel, its content sets no limit on matter or form and it publishes a range of content from incisive criticism, personal essays, humour pieces and “odes to oddities” – all connected by a passion for language.

iiii recently launched with an identity and website created by London-based Studio Hyte. A tongue-in-cheek and highly referential identity, it examines the characteristics of type, code and interaction on the web, answering the question: “What would a graphological website look like?”

Studio Hyte first became involved in the project towards the end of January 2018. “Jordan and Chris approached us with the intention of creating their own independent arts and culture publication,” the studio explains, “we were hooked. From then on, our collaborative relationship became one of insightful discussions, visual challenges and witty wordplay.”

In order to ascertain how it would reflect iiii’s relationship to language and visual language in an identity, Studio Hyte asked Jordan and Chris to produce a piece of creative writing. This text outlined what a “conceptual and textural journey might look like for anyone who encounters iiii. With references to an example from Charles Dickens’ A Christmas Carol, where a colon contains a breadth of information, the piece set out the publication’s intention to elevate the significance of minutiae. “That tiny things can be portals, that orders can be altered, that emotional resonance can be borne of simple grammar,” writes Jordan.

It was from this proclamation that the notion of a graphological website was born, one which examines the nuances of interactions and user journeys. One that understands how the physical and digital characteristics of design can dictate this, in the same way a colon can dictate the meaning of a sentence. As a result, the website and identity were produced in tandem with Studio Hyte’s research into type, code and web interaction. “Every aspect of creating the website – research, site mapping, wireframing, ideation, designing, front-end developing, backend developing and optimising – doubled as an inward-looking graphological method,” the studio tells us.

With moving elements reading “click”, “hover” or “transition”, for example, Studio Hyte’s design reveals the relationship between readers, and the ideas presented in each article. “This is something which we were keen to see reflected in the aesthetic choices of the site, as seen through the composition of the home page, and the constant acknowledging of the reader through emphasising the use of verbs throughout the site,” it adds. In turn, this approach makes the reader aware of the ways in which they navigate online text.

This use of wireframe-esque commands and the aesthetic of wireframes on all imagery, however, also subverts the usual etiquette of simple user-centred navigation. “Users know that they’re supposed to hover and click,” the studio explains, “By over-explaining we’re intentionally revealing certain inherent characteristics of the web, in order to make the audience aware of their own actions and interactions.”

In a broader sense, what makes Studio Hyte’s design for iiii so interesting, is the way its aesthetics are a direct result of the processes used to create them. Each visual decision was made “as an attempt to acknowledge the ways in which the identity and website were formed,” Hyte continues, “revealing the very process being used, by using the aesthetics of such processes”.

A computer monitor displays a minimalist website with two black and white graphic tiles. One tile reads “The Cold Whore Crisis Liv Fontaine” and the other reads “Claret & Blue: Shaving David Moyes”.
Above

Design & Development by Studio Hyte: Home Page

Two browser windows are layered against a dark grey background. The top window is black with the word “(splash)” in white serif type. The window behind it is white, featuring scattered fragments of text including “The 500 Painter Richard Cook” and “(Click)”.
Above

Design & Development by Studio Hyte: Left: Splash Page Right: Home Page

An animation of a website interface that transitions from a tilted portrait of a person and the text “The 500 Sebastiane” to a black screen reading “(transition)”. It ends on an interview page titled “Interview: Liam Williams” by Jordan Harrison-Twist, dated 08/07/2018.
Above

Design & Development by Studio Hyte: Article Page Transition

Three browser windows display a minimalist website design on a black background. The main page features the text “The 500”, “Derek Jarman – Sebastiane” and “Jess Palmarozza 01/08/2018” over a line drawing of a landscape.
Above

Design & Development by Studio Hyte: Article Page, 1 out of 3 Type and Layout Treatments

Two browser windows display a digital publication on a black background. The first page features the title “Claret & Blue: Shaving David Moyes” above a minimalist illustration of a person.
Above

Design & Development by Studio Hyte: Article Page, 1 out of 3 Type and Layout Treatments

Two browser windows display a digital art project by Liv Fontaine. The first page features the title “The Cold Whore Crisis” above a grainy black and white photograph of a mushroom cloud.
Above

Design & Development by Studio Hyte: Article Page, 1 out of 3 Type and Layout Treatments

Two browser windows display a digital interview with painter Cian McLoughlin. The first shows a title page with a soft, blue-toned portrait of a person, while the second shows a page of text and a cropped version of the same painting.
Above

Design & Development by Studio Hyte: Article Page, 1 out of 3 Type and Layout Treatments

An animation of an Instagram post from “iiii_magazine” in Denmark. A black and white topographic map with the text “Henrik Pedersen: Episode 3” morphs into a colourful, distorted portrait of a person.
Above

Design & Animation by Studio Hyte: ‘At the End of the Day’ Series In Situ

An animation of a smartphone screen showing an Instagram story. White text on a black background reads “and funny times.” before transitioning to a white screen that reads “At the End of the Day”, “Tuesdays from 5pm” and “Only on @iiii_magazine”.
Above

Design & Animation by Studio Hyte: ‘At the End of the Day’ Series In Situ

Share Article

About the Author

Ruby Boddington

—

Ruby is Senior Creative at It's Nice That, overseeing our visual output across platforms and projects. Before that, she was associate editor on the editorial team, after joining in September 2017 following graduation from Central Saint Martins.

It's Nice That Newsletters

Fancy a bit of It's Nice That in your inbox? Sign up to our newsletters and we'll keep you in the loop with everything good going on in the creative world.