EDITORIAL DESIGN

A responsive online platform for a magazine — A 6 days project at UX/UI Bootcamp Ironhack, teamwork with Jay

Ute Hintersdorf
Aug 4, 2019 · 5 min read

Intro

“The rise of the digital press has seen a tremendous peak over the last years. The audience is increasing as Millennials grow older, demanding all sorts of content.
The best magazines and newspapers had already launched their digital version in early 2000, but it has been only in the last 5 years that the digital experience started to take its own shape.
With numbers increasing, publishers are prompted to deliver quality content along with a great digital product for readers to experience a different but still unique act of opening up a magazine and dive into it.

The Challenge

Design a responsive online platform for a magazine, newspaper or blog directed to meet the needs and goals of one of the presented User Personas.

User Persona

Most digital magazine readers are educated, young and upper middle class. Recent studies indicate that they are part of the so-called Millennials.” (Text by Ironhack)

User Persona

Paula is thirsty! And she’s seeking for profound insights to the world. She’s curious always trying to read EVERYTHING as much as she can. As a future artist, she desires to expand her perspective and dive deep into unknown worlds. Paula wants to network with people and share her opinions while validating and challenging her own opinions and thoughts.

By doing some additional research we wanted to learn about people’s online-reading behaviour and user needs. It revealed that they don’t read word by word but rather scan contents. Priorities of choice are topics, design and writing style. 37% read whenever they can and 60% use mobile devices for that.

Brand Identity

From there we created a Brand Identity for our magazine “Deviant” — which we wanted to be unconventional, maybe weird but OPEN. We want to be a platform for people like Paula who want to build a unique perspective to the world.

Product & Competitors

As a term deviant stands for, the magazine as an open space to discuss topics that are not widely covered in major medias.

Deviant offers unconventional and sometimes provocative perspectives of arts, cultures and international affairs. The topics vary and there is no boundary in terms of discovering something new and contemplating current/ongoing issues. There are 4 categories Arts, News, Perspectives and Events. Deviant News covers major issues in a global scale, Perspectives includes columns, art/book critics and unique opinions. Competitors as well as a source of inspiration for design and content are Spex Magazine, Juxtapoz and Vice Magazine.

Card Sorting

By several rounds of card sorting we structured our content into categories and created a sitemap from that.

Moodboard

We wanted the magazine to be vibrant with vivid color and bold typeface. Black and white are the basic colors and one color that stands out. As the magazine contents are bold, the color and design also had to align with the concept.

We got inspired by our competitor’s clear designs and wanted to adapt that.

Style Tile

We decided to use the Barlow font family for Headlines, because it has a clean, modern style. To visualize enthusiasm we used the Italic for the main Headlines.

The Bodytext is set in Montserrat to provide a good redability.

Simplicity and readability were the main priorities. As we aimed for a website that can be scannable anytime anywhere, the images are designed to hook the audience in order for them to grasp the texts right after. We cut down the use of colors and went for a gender neutral, fresh yellow to highlight categories and text on buttons to make our content scanable.

Mid-Fi-Prototype

In the Mid-Fi we set our layout. It took quite a time to achieve consistency in the design which still needed iteration in the Hi-Fi.

Mid-Fi Prototype for Mobile

Hi-Fi Prototype — Mobile

Here you will follow Paula’s user flow. She is scanning the content on her mobile, finds an article she likes to read but saves it for later in her personal archive which she can organize with folders and notes.

Interactive Prototype — mobile, Editorial Design — Deviant

Desktop-Version

So Paula would come back home, visit our website again were to find her saved article in her archive and then read it on the bigger screen.

Screenshot Desktop Version

As we spend a lot of time creating the mobile version — the desktop version turned out to be just a huge copy of that instead of being responsive actually. That’s why I only a show a screenshot here in order to iterate that, when I find some time.

Next Steps

Iterating the Desktop-Version, doing animations, implementing interactive features and thinking about a print version.

Conclusions

Working in a team has its pros and cons. On one hand the project benefits from different ideas, talents and double knowledge — on the other hand it can be tiring and time consuming to discuss a lot and to explain your ideas/thoughts. So time management is very important. Also testing the desktop-version in a preview earlier in the making might have prevented the actually not responsive design.

Ute Hintersdorf

Written by

UI/UX Designer & Graphic Designer @ pixandcolours.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade