You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.9 KiB
Markdown
120 lines
3.9 KiB
Markdown
---
|
|
title: Post-it Visual Identity
|
|
description: How to deliver a pubblication in post-it format
|
|
categories:
|
|
- SI17
|
|
- Visual
|
|
date: 20/03/2022
|
|
cover: postit-id.jpg
|
|
cover_alt: various postit
|
|
links:
|
|
- url: https://www.figma.com/file/wVdpA2iwKN3hT9YXONqXTj/SI17?node-id=0%3A1
|
|
title: Figma
|
|
---
|
|
|
|
## Small pages big text
|
|
|
|
Working with the post-it format the team1 (supi, mitsa, erica, me) approached the visual identity with two things in mind:
|
|
|
|
1. The office aesthetic, that kind of default aura that surrounds workspaces
|
|
2. The blurred line between personal writings such as memos and todolists and formal documents.
|
|
|
|
We used the post-it format as a module. Short sentences, big font size, different writing styles, few images. The idea was to facilitate a non-linear combination across the original page order of the pubblication. We choose not to put page numbers: instead we opted for a progress bar in each contribution.
|
|
|
|
In the body of the post-it we stayed simple using a default sans-serif font. We used the Bitsi font from Supi and Jian for the covers of each contribution and the main index.
|
|
|
|
|
|
|
|
## Post-it
|
|
|
|
We designed 8 types of post-it: from text and image post-it to complex card layout, we tried to embed the form of every contribution in the generator pipeline.
|
|
|
|
### Text
|
|
|
|
The basic type of post-it was the text one. We went with a super big font-size and an unexpected alignment. After a certain amount of characters the font-size is set to shrink a bit for a small text version.
|
|
|
|
|
|
_From What is a loot box?_
|
|
|
|
|
|
_From Life Hacks!_
|
|
|
|
|
|
|
|
### Dialogue
|
|
|
|
It can display text in the four corners of the postit. Used for the NIM dialogue and some single word sentence in What is a loot box?
|
|
|
|
|
|
_Dialogue_
|
|
|
|
|
|
|
|
### Definition and Cell
|
|
|
|
Definitions and cells are the main modules for the Crossword Imaginary Grid Game from Emma. Each cell occupies a position in a grid, and is used to build the crossword structure. The definitions indicate a starting point and some hints to guess the word.
|
|
|
|
|
|
_Definition_
|
|
|
|
|
|
_Cell_
|
|
|
|
|
|
|
|
### Card
|
|
|
|
|
|
Card designed starting from the layout Miriam prepared for her version of the game Quartet.
|
|
|
|
|
|
_Card_
|
|
|
|
|
|
|
|
### Image & Picture
|
|
|
|
For images we decided on a full page approach. We have two post-it: image is for normal images, while picture is for graphics that folllow the pubblication main color. Both can display a caption in overlay.
|
|
|
|
|
|
_From Katamari Fanfic_
|
|
|
|
|
|
_From Xquisite Branch_
|
|
|
|
|
|
|
|
### QR code
|
|
|
|
For QR code we choose to be as messy as possible. QR carries a specific visual language. We tried to force it into something else by cloning each code in repetition, with a glitchy result.
|
|
|
|
|
|
_QR codes_
|
|
|
|
|
|
|
|
### Covers
|
|
|
|
|
|
We played a lot with the contributions' cover. The starting point was always the title of the special issue in the bitsi font. On top of that we designed some sketches related to the contents.
|
|
|
|
|
|
_Katamari Fanfic_
|
|
|
|
|
|
_Unfinished Thoughts_
|
|
|
|
|
|
_NIM Fanfic_
|
|
|
|
|
|
_Imaginary Crossword Grig Game_
|
|
|
|
|
|
### Index
|
|
|
|
For the index we used the combination of normal and bitsi font. This approach was reused then in the SI17 home page.
|
|
|
|
|
|
_Index_
|