ILLITERATE

/ Literature online magazine

On March 15th 2021, we began a new 6-week Visual Design class at Harbour.Space with Anton Repponen of Anton & Irene. Our assignment for that class was to create a brand new publication based on the theme of our choosing. We needed to come up with a concept that would guide the art direction of the publication, which I found to be extremely interesting and motivating. We were expected to produce working prototypes of a homepage, tier 1 story and tier 2 (long form) story. The final solution needed to be bold and unexpected, but also functional and mindful of the concept.

TOOLS

Figma
‍After Effects

MY ROLE

UX Design
Visual Design
Editorial Design

ILLUSTRATIONS

Matteo Berton

MENTOR

Anton Repponen

THE CHALLENGE

ANOTHER ONLINE 
MAGAZINE?

When I initially saw the brief, that was my initial reaction. We are so used to online publications that we take them for granted in terms of structure, framework, and even design. “What thrills you about starting a new online publication? There are just too many publications available on the internet. What can I do to make something unique? How do I keep my viewers interested and on my website?”– I wonder to myself. So, in addition to the fundamental requirement of producing a functional online publication, I challenged myself to come up with a unique interactive model that would stand out visually.

Huffington post websiteThe new worker magazine websiteVogue magazine website

Even though the topics are different, the three websites above look similar.

IDEATION & CONCEPT

WHY ILLITERATE?

We are in the year 2021, and our world is moving at such a breakneck pace that individuals don't have time to keep up with the latest news, much less read a 600-page book. We risk becoming illiterate or only being able to read for survival if we continue at this rate. Why not provide a platform for people to expand their literary knowledge while surfing the web? This would be our digital book shelf.

LET'S SKETCH SOMETHING

I tried to find a different way for the audiences to interact with the website other than a standard vertical scroll. I drafted several ideas, but none of them seem to work well.

Margherita working
Sketches
Homepage 1

HOMEPAGE - DESKTOP

UNDERSTANDING THE FRAMEWORK

I tried to recreate the same experience that we have when we go in a library where you find book shelf, that are organised into categories. Let's take a look at how we'll move between pages and, in particular, how the homepage and the article page will look. Down the sides, we have categories that act like accordions: when you click on one of them, its content appears in the centre. Articles open as an overlay on top of the main text, with the categories permanently visible and accessible. There is a visible grid throughout the entire layout, every book or website is built on an invisible grid, which will be apparent in this case.

Framework explanation 1Framework explanation 2

ART DIRECTION

SIMPLE YET BOLD LOGOTYPE

The logo shows dynamic and movement as the nature of the publication.  It is modern bold and structured. This is the look and feel that I want to give to ILLITERATE Magazine.

Illiterate logo

modern typeface combination

I selected san-serif Trois Mille as the primary typeface, thanks to its geometric structure, to create a clean, modern, and catchy look. It paired perfectly with elegant serif Suisse Work as a body copy typeface to create a dynamic yet balance contrast.

Illiterate typography

MINIMAL COLOUR PALETTE

I wanted to keep the look and feel minimal so I decided not to use any colour besides than white and black and light grey because to go back to the main concept of the publication, usually books are in black and white.

Illiterate colour palette. Black, gray, white

BOLD AND COLOURFUL ILLUSTRATIONS

The visuals that you find inside a book are usually illustrations, that’s why I opted for these amazing illustrations created by Matteo Berton. This create a huge contrast between the simple colour direction and the bold typography choice.

Collage of 5 illustrations made by Matteo Berton

HOMEPAGE - DESKTOP

Design system

THE GRID

I used the screensize of 1440px x 900px as a base, then divided the screen into 12 columns, 80px each, with a 40px gutter between each column and 20px margin left and right.

The content always takes eight columns both in the Homepage and in the Article page.

Desktop grid

I used the same treatment for the mobile version. The screen width was divided into two columns.

Mobile grid 1
Mobile grid 2
Mobile grid 3

HOMEPAGE - MOBILE

ARTICLE PAGE- DESKTOP

Article pages

In order to keep the consistency, the article pages open as an overlay on top of the main text, with the categories permanently visible and accessible. The page is built on the same grid and it worked perfectly.

ARTICLE PAGE - MOBILE

LONG-FORM ARTICLE

All short-form article pages share the same templates. However, each long-form article will be designed like a stand-alone page. The long-read pages would contain more interactive elements to emphasise the topic and to keep the readers engaged. Our magazine publishes an Interactive piece every Wednesday. For the purpose of this assignment, I designed one about the Divine Comedy. This was the first book written in Italian rather than Latin, and it was written 700 years ago. The author Dante describes himself as travelling between Hell, Purgatory, and Heaven. The user will be guided through this journey, discovering and reading the stories associated with each stage.

LONG-FORM PAGE - DESKTOP

TAKEAWAYS

As the sole designer on this project, I executed the design process end-to-end, from research to implementation, with input and support from my mentor.

The biggest lessons this project taught me were the delicate balance between perseverance when faced with complex challenges, grace in the wake of perceived failure, and when to be okay with "good enough" (for this iteration, of course).

MY MENTOR

Anton Repponen from Anton&Irene.

“Great sense for art direction. Margherita seems to see the topic/theme and have an understanding how it should look visually. Good sense of space and how space can be utilized to display content. Also good to see how layouts progressed over time (Home Page + T1 page). Great use of her own time, selecting the right art direction based on illustrations found and focusing more on telling the story rather than creating assets.”

Mulino bianco billboard. Everyone wants the last crumb. Child eating cheerios

MULINO BIANCO

/ REBRANDING OF ONE OF THE MOST FAMOUS FOOD ITALIAN COMPANY

Welcome to Chroma Ninja!

CHROMA NINJA

/ INTERACTIVE INSTALLATION

Cinema 4D, incredible machine

FUN STUFF

/ I LOVE TO PLAY AROUND, HAVING FUN EXPLORING MY CREATIVITY

MARGHERITAGIOTTOLI@GMAIL.COM