Visual UX/UI Design
Nouvel Opera Fribourg

Visual UX/UI Design
Nouvel Opera Fribourg

Visual UX/UI Design
Nouvel Opera Fribourg

A visual brand identity for Nouvel Opera Fribourg which insights from various designers to guide our process, such as Dan Friedman, Ellen Lupton and design studio NEO NEO.

Visual Designer

Role

6 weeks

Duration

Figma + Adobe Create Suits

Tool

The Opportunity

We created a future-state journey map to show an ideal scenario for a new attendee. This is for someone who has recently developed an interest in local performing arts and is seeking to experience diverse forms of live and intimate performances.

We decided to intervene at the Enter stage for our microsite as we saw an opportunity to align what could be considered our persona's biggest goal of going online and learning more about the shows and events that are offered, while providing more value for Nouvel Opera Fribourg as a young performing arts center.

Art Direction

As a prominent contributor of New Wave design, Dan Friedman challenges conventional modern Swiss design by pushing the boundaries between legibility and readability. He later pioneered radical modernism to embrace elements of expressionism that reject the constraints of corporate designs. From our research, these were the qualities we decided to follow through with:

1. Disrupting monotonous readability
2. Rhythm informing grid
3. Cohabiting 2D and 3D forms

Process 1:

Lateral Explorations



The first line of investigation synthesizes the qualities of disrupting monotonous readability, layering shapes and colours alongside principles of texture and framing.



This direction was created for motivating viewers to perform a holistic exploration of the design space and in achieving a dynamic visual scene. The traditions of type are challenged when it's used in atypical ways that hinder legibility but promote the more creative endeavors of readability. As well, the intermixing of shapes and colours with textures can provide interestingly abstract frames for literal objects and images.

Process 2:

Lateral Explorations within

disrupting monotonous readability, layering shapes and colours alongside principles of texture and framing.




Upon all the explorations, we settled down with one line of investigation featuring the quality of disrupting monotonous readability along with principles of layering shapes and colours, incorporating textures, and framing text and images.



Aiming to focus on challenging the notion of functional readability, we utilized unconventional typographic practices to stretch the limits of monotonous and passive reading, while integrating overlapping layers and textures to provide dynamism through depth.

As we moved forward in our progress, we decided to further expand Friedman's quality of challenging passive reading into three specific techniques as it would provide the team with a more pointed lens for exploration and execution.



IRREGULAR SPACING AND CONTRASTING STYLES :The first of these being irregular spacing and contrasting styles to break conventional and "corporate-like" practices in favour of viewer interest and excitement.



OBSTRUCTING FLOW :The second focused on obstructing text with organic and irregular polygons to disrupt a linear and normalized reading flow while demanding active participation in decoding information.



INTERWEAVING TYPE AND IMAGE : And the third blurs the boundaries of imagery and text, unifying the two different mediums into one, creating a compelling tension that draws in viewers.

Consisting of a dominant achromatic visual presence, the red is used as an accent to balance flatness and provide a striking contrast to bring vibrancy and energy.

Discovering shows

HOVER: Reveal complete show name, bite-sized synopsis, and an animation of textured organic shapes framing the show.
CLICK: Direct users to more content and information about the selected show.

About Klanggg

Provide a summary, date, and location about Klanggg as an event, as well as a listing of the six shows presented.

Learning about a elected show

SCROLL: Detailed information is layered between the pieces of the show name.

CLICK: Reveal more detailed information, expand videos full-screen, and guide users to next show.

HOVER: Clarify navigational iconography and present actionable options.

IMAGES: Achromatic color palette allows for viewable images while still tying together with art direction.