Araya Wongwan
Barcelona

Discontent (Pt.I)

Concepting

Art Direction

Editorial Design

User Interface

Bold and daring editorial website focused on underground electronic music, catering to a global minded audience

MA Interaction Design Individual project
Roles: Concepting, Art Direction, Editorial Design, User Interface
Professor: Anton Reponnen
Date published: April 2020

Discontent is an online publication focusing on electronic music – a medium to build mass unity and disrupt the status quo. The publication shares similar daring and forward-thinking ethos as the inspired underground music culture. Monochromatic red is utilised as a form of valourous self-expression, to represent visionary movements, voices, and fashion in the scene.

The challenge was to translate bold and daring concept into a digestible editorial online publication in order to attract the mass to undiscovered talents and also to movements within underground electronic music culture. The publication must be engaging and easy to use for the half-split desktop and mobile readership. This simulated project is a part of my MA in Interaction Design.

01

Color

01

Monochromatic red is used to highlight information, set contrast, draw attention as it is a color of passion – a sentiment behind the publication. We want draw the readers to new perspectives and join the movement but also show that we are not afraid to reveal our true selves. White is used as a secondary color in relations to red to bring out and contrast the saturated red color. Grey is used on text hover and in the long article for the legibility of text.

02

Type

02

The logotype and heading font selected evoked the publication’s bold and irreverent tone. Logotype fits the “get to the point, no BS” brand personality – it doesn’t try to do anything or be anything other than what is stated. The high contrast of the sans-serif balances the aggressivity with the feeling of newness and adaptibility. The transitional type selected for the body font complements the heading font while being legible for longer text due to its wide capitals and open apertures.

03

Grid

03

The 12-column grid was utilised for desktop screen to adapt to the varying sizes of the featured, long read (5 columns), and quick skim (3 columns) components. In addition, the large margins enabled the flexibility of the side scrolling components. The same grid is used for homepage and article page for consistency.

The 6-column grid is adapted from the 12-column grid to enabled flexibility in the mobile version.

04 Features

04.1

Music Player: The 12-column grid was utilisedf for desktop screen to adapt to the varying sizes of the featured, long read (5 columns), and quick skim (3 columns) components. In addition, the large margins enabled the flexibility of the side scrolling components. The same grid is used for homepage and article page for consistency.

05 Night Mode

05

Alternative deep yet bright blue is used for the night mode option to contrast with the red. The particular blue is more calming to the eyes but maintain passion and novel sentiment of the publication.

Selected Projects:

Discontent Pt.I Herma Alex Enscoe Discontent Pt.II