Studio-hyte-digital-itsnicethat-3

Design & Development by Studio Hyte: About Page Transition

Work / Digital

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

“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”.

Studio-hyte-digital-itsnicethat-1

Design & Development by Studio Hyte: Home Page

Studio-hyte-digital-itsnicethat-2

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

Studio-hyte-digital-itsnicethat-4

Design & Development by Studio Hyte: Article Page Transition

Studio-hyte-digital-itsnicethat-5

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

Studio-hyte-digital-itsnicethat-7

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

Studio-hyte-digital-itsnicethat-8

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

Studio-hyte-digital-itsnicethat-9

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

Studio-hyte-digital-itsnicethat-10

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

Studio-hyte-digital-itsnicethat-11

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