top of page
pexels-mark-angelo-sampan-1587927_edited.jpg

BERLINER

CREATING A RESPONSIVE PLATFORM FOR AN ONLINE WEEKLY MAGAZINE.

ROLE:

UI Design (80%), UXdesign (20%), user research, market research, information architecture, wireframing and prototyping.

TIMELINE:

Auguts 2021 (12 weeks).

TOOLS:

Figma, Photoshop, Keynote.

iPhone 11 Pro.png

THE CONTEXT

Magazines have been shifting to the digital press since early 2000, but it has been only in the recent years that the focus on the digital experience has increased.

The weekly format is having a difficult transitioning. Some of these magazines fail to create online content for events and activities listing, which is one of the main features of their printed versions and source of income.

Screenshot 2021-10-04 at 3.24.56 PM.png

Two popular american weekly magazines in both printed and online format.

Screenshot 2021-10-04 at 3.38.25 PM.png

THE CHALLENGE

In order to design a responsive online platform for a weekly magazine targeted at millennials living in Berlin, a key challenge needs to be overcome: Translating the brand image and style into a digital format while maintaining usability.

The most relevant weekly magazines in Berlin.

THE MARKET

To better understand the context of a weekly editorial, Irelevant magazines in different cities of America and Europe were analized.

Their features are very similar: Articles on politics, culture, art, fashion, music, food, and lifestyle in general. However, only a few offer online listings.

Specifically in Berlin, only Exberliner offers a limited listing. It is part of the TipBerlin Media group, focusing on ex-pats and foreign readers that need a connection to the local culture and news in general. On the other hand, Tip Berlin reaches to the germans and places news in the backdrop. KaltBlut has a focus on art, photography, fashion, and music.

BERLINER features a complete event listing where users can promote their own events. This feature is a key differentiator from the competition.

Popular Weekly Magazines in Berlin, Europe and North America

Group 541.png
Screenshot 2021-10-04 at 3.48.45 PM.png

EDITORIAL
STYLE

Because content is similar among competitors, it was necessary to make distinctions based on editorial style (Mainstream & Alternative) and design style (Serious & Playful).

BERLINER will be in the Playful/Alternative quadrant, differentiating itself from local competitors and aiming to identify with millennials eager to engage socially with the city.

Analysis of the competitors' editorial styles.

PERSONAS

Based on the market research, proto personas were defined to visualize a clearer idea of the design problem. Margerite is a social butterfly, looking to make friends while exploring the city’s culture. Ralph owns a bar and likes to promote the local jazz scene. These personas became the basis for defining the problem statement and creating user flows and low-fi wireframes.

Berliner Persona and Problem Statement

Example of Proto Persona and Problem Statement.

USER STORIES

There are four essential stories associated with the user flows and the wireframes:
 

  • Reading an article to stay up to date with the cultural trends.

  • Finding an event to participate in and experience the city’s culture.

  • Posting an event to promote the local culture.

  • Signing up as a user to create events and to enhance the experience of accessing the content.

Rectangle 1975.png

Example of Task Flow, User Flow and LoFi Wireframe.

THE MOODBOARD

Berliner Moodbard

For a weekly magazine to become relevant, it must genuinely represent the city’s culture. For this reason, the mood board was a crucial step in the design process.

The inspiration of BERLINER is the city’s nightlife. The mood spins around a night out. Anything can happen, and maybe this night will change everything.

In May 2021
, clubs in Berlin were declared cultural institutions. The local cultural identity was born out of the club scene from the ’90s after the wall came down. This identity is a mix of the techno scene, diversity, and sexual freedom.

For BERLINER to embody this identity, it borrows references from fashion and music magazines from the ‘90s and newer editorials inspired by an unconventional, chaotic, and colorful esthetic.

EVOLUTION OF WIREFRAMES

The development of the wireframes happened in four stages.

By focusing on the design elements and holding content until the last stage, the development occurred quickly.

Berliner Wireframes

HIFI PROTOTYPE

The prototype highlights the gestures and interactions for the primary flows users will experience with BERLINER. This video quickly demonstrates each task.

RESPONSIVE DESIGN

The first interaction with the website aims to emulate a magazine cover, especially for the mobile format. To do so, the featured article appears with the logo and icons from the navigation bar inside the image. As users scroll down, these elements disappear into a conventional navigation bar.

Grids were built in 4, 8, and 12 columns for mobile, tablet, and desktop. Margins on the desktop version are set to have an active grid of 1170 pixels wide according to most popular conventions.

Moreover, the desktop format allows space to feature more articles before showing the latest recommended content.

Group 546.png

COLOR

Black and white are the dominant colors, evoking the lights and shadows of the nightlife.

Secondary colors are complementary or accentual, based on the moodboard. They are highly saturated to express the strong emotions arising during the night. Such colors will only enhance the images displayed in the web app.

Group 547.png

Translating the visual style from paper to the internet is a significant challenge for every editorial. To evoke the feeling of a 90's printed magazine, the home screen has been designed to resemble the cover with the logo embedded in the image of the feature article. In this case, the logo will be in any color that contrasts this image to enhance visual impact.

Group 456.png

TYPOGRAPHY & ICONOGRAPHY

FONTS

The set of typefaces is meant to convey different messages. The logo's typeface alludes to boldness and strength. The headings aim to clarity and lightness. The body focuses only on clarity. They all neutrally support the imagery.
 

Group 548.png

ICONS

The logo has an extra heavy font (Spartan Black) with tight spacing. It is essential to have a similar heaviness and tightness on the iconography to keep the brand and style consistent. The minimum size for icons is 24px, including padding of 3px.

Group 549.png
Style Guide 1.png

STYLE
GUIDE

A visual style guide was put together for a potential team developing the website or the brand to guarantee consistency in the visual experience. Knowing the complexities of designing, testing, and documenting the design elements, this guide is considered a starting point.

Rectangle 1978.png
Rectangle 1979.png

Promotional Mockups.

FINAL THOUGHTS

Editorial transitioning into the online world is a reality that newspapers and magazines need to deal with while finding a business model that allows their survival. But in regards to their visual design, the solutions are radically different.

Their tabloid layout defines newspapers with standardized fonts, which can be easily translated into a website format. On the other hand, printed magazines invest heavily in layout design, fonts, and colors to deliver a visual message that rarely gets translated into the browser window.

Magazine design is a crucial challenge that editorials face during their transition. Indeed, some formats, such as the phone size, present major limitations, but there is still room for creativity and the use of new design elements like animation. The magazine design has substantial value on the printed business and should have it as well on the screen. Automating and standardizing layouts, colors, and fonts to reduce cost could carry fatal consequences.

I’ve always loved magazines. They are beautiful objects, and a big part of their beauty lies in their various layouts, fonts, and color palettes. When reading an online magazine, this beauty gets lost in translation and the readers with it. Reclaiming such beauty is not a matter of romanticism but a matter of survival of the medium.

Group 551.png

Examples of printed magazine pages that are difficult to recreate on the online medium.

bottom of page