Libre Graphics Research Unit — Closing chapter

From 22 to 25 May the Libre Graphics Research Unit gathers in Porto and this meeting concludes the two year project.

Hosted by associate partner Manufactura Independente in Maus Hábitos we will present and discuss all work that was developed in the context of the Research Unit: Piksels and Lines Orchestra, Superglue, Graphical Shell prototype, the Future Tools event, Grafica Libre Workstation, Tools for a Read-Write World, Considering your tools: a reader for designers and developers, and more. In parallel we open an exhibition of books made with FLOSS, plus on Saturday 25 May there will be workshops with students and local professionals.

Goal of this meeting is to facilitate an indepth discussion based on work developed in context of LGRU, to finish archiving/documentation as far as not already done; to reflect on/discuss the results of project as a whole and hopefully to start future work.


Books with an attitude*

Wednesday, 22nd of May, at 9:30 pm, exhibition opening with Manuel Schmalstieg (Greyscale Press)

Exhibition design and curation: Manufactura Independente (Porto)

The Libre Graphics Research Unit presents Books with an attitude, an exhibition of printed books made with Libre digital tools. This exhibition includes Libre bookdesign and typography from all over Europe, demonstrating how content, aesthetics and Libre tools can play together.

After the end of the exhibition, the collection will be donated to OpenLab ESEV, a Free Software working and learning space in Viseu, Portugal.

* Quoting Ward Cunningham, the author of the first wiki software:
You’re browsing a database with a program called Wiki Wiki Web. And the program has an attitude. The program wants everyone to be an author. So, the program slants in favor of authors at some inconvenience to readers.


The sandbox culture

Aymeric Mansoux (Piet Zwart Institute, Willem de Kooning Academie)
Thursday, 23rd of May, at 9:30 pm


Workshops, Saturday, 25th of May, from 11:00 am — 6:00 pm

FLOSSmanuals, Greyscale Press, Open Source Publishing e Manufactura Independente



Full programme

Wednesday, 22nd of May

10:00 Introduction, welcome
11:00 Piksels and Lines Orchestra, Elisabeth Nesheim (Piksel)
13:00 Lunch
15:00 LGRU-Reader, Alexandre Leray e Stéphanie Vilayphiou (Constant)
17:00 Libre Graphics Workstation, Laura Fernández e Myriam Cea (Medialab Prado)
19:00 // end worksessions
19:30 Dinner
21:30 Exhibition opening: Books with an attitude

Thursday, 23rd of May

10:00 Co-position, Femke Snelting e Pierre Huyghebaert (via Skype) (Constant)
12:00 Superglue, Mike van Gaasbeek (WORM)
13:00 Lunch
15:00 Superglue, Mike van Gaasbee e Danja Vasiliev (via Skype) (WORM)
16:00 Libre Graphics Meeting & Interactivos?13, Marcos Garcia, Laura Fernández, Myriam Cea, Femke Snelting e Mónica Cachafeiro (Medialab Prado)
19:00 // end worksessions
19:30 Dinner
21:30 Lecture Aymeric Mansoux: The Sandbox Culture

Friday, 24th of May

11:00 Admin meeting (partners): finances, reporting
13:00 Lunch
15:00 Documentation session
19:00 // end worksessions
19:30 Dinner
22:00 Party

Saturday, 25th of May

11:00 Two parallel worksesions with Manufactura Independente, OSP, Greyscale Press e FLOSS-manuals:
– Translation sprint: translating the FontForge FLOSS-manual into Portuguese
– Foundry-in-a-box
13:00 Lunch
15:00 Translation sprint + Foundry-in-a-box
18:00 End

Address:
Maus Hábitos
Rua Passos Manuel 178, 4º
4000-382 Porto

Posted in libre graphics, news, workshops Leave a comment

Tools for a Read-Write World

We have been busy at Medialab Prado in Madrid for the last couple of weeks, first participating in Libre Graphics Meeting (with two talks and a workshop), and now we’re integrating the Interactivos?’13 advisors team, along with ginger coons, Jennifer Dopazo, Samer Hassan and Vicente Ruiz Jurado.

This edition of Interactivos? is dedicated to the theme of Tools for a Read-Write World, and 9 projects have been selected for an intensive development sprint at the beautiful new Medialab Prado HQ.

For the first time in Interactivos?, there is going to be a printed collection of the projects’ diverse outcomes. We took the task of laying out and designing the cover of this publication, while ginger coons, Femke Snelting and Jennifer Dopazo take care of gathering material and editing it.

Following the sprinting methodology of the workshop, we have spent a full day brainstorming, looking for possible design cues and defining a visual language for this publication, given the extremely tight timeframe (3 and a half days from beginning until it’s all printed!)

Working with plotters has given us new cues about how to use bézier strokes as expressive design elements; drawing from technical diagrams and axonometric projections, we’ve been going through a hectic iterative process, trying out different layouts and positionings around the I-beam character.

Posted in news, work in progress, workshops Leave a comment

From Stone to Spaceship, Collaborative type design

This article was originally published in Cuaderno Medialab

The future home of Medialab-Prado, Serrería Belga (Belgian Saw Mill), has its facades decorated with beautiful typography. Taking on the challenge set by Medialab-Prado to liberate these letters from their stone prison and release them to the world, we hosted a three day workshop in Madrid. The premise was to collaboratively design a font, using a fully libre workflow and with no pre-requisites for participation — everyone was invited to join in.

We were thrilled to receive this invitation from Medialab-Prado to come to Madrid and work together in a font revival inspired by a building with a rich historical background. The reception to the call was impressive and two days later we closed it having enlisted a total of thirty participants from different backgrounds and coming from different cities in Spain.

The first challenge we faced was to come up with a method that allowed collaboration to take place while, at the same time, creating and maintaining a cohesive design style. Having Serreria’s wall lettering as the starting point proved to be a very important aspect. It allowed us to have a reference point we could start from and go back to whenever we needed.

Looking at the building one of our first collective discoveries was that the wall letterings didn’t came from a pre-existing font. In the compositions it is possible to identify different representations or variations over the same character. Still there are some principles behind the letter drawings that made it consistent in the overall.

The fact that the letterings were so rich and had so many shape variations made it the perfect stage for the work taking place. It allowed space for improvisation and interpretation (within a set of constraints). There wasn’t one clear direction for the font design but many and we could pick from there freely.

The first day of the workshop went by without computer work. Pen and paper were our medium of choice in a phase we wanted as free and experimental as possible. The focus was to get the general feel of the font and not the perfect letter shape.

From the wall letterings we identified to possible directions and divided the large group of participants in two. We all moved to the first drafting sessions, where each person would draw a small set of letters. We would then gather and collectively look at the results, selecting one of them; then, we would go through another iteration of the process, this time with more letters, but sticking to the general rules that were set by the first drawing that was selected. Again, we all picked a satisfactory proposal among all of them, and the identity of the typeface was then set.

Now, the focus shifted from proposing alternative design directions to working together in order to draw all the characters based on the identity that we evolved in the previous steps. Using a manual version control system (with sticky notes), everyone was supposed to work together in order to draw the remaining characters from the alphabet, numbers, and basic punctuation. The rudimentary version control system helped understand the current status of our endeavour, as well as know who was working on what (replacing shouts) and know who to ask for pointers (e.g. someone drawing a B would want to discuss with whoever drew the P.).

From time to time we would stop, look at the progress and realign the general direction of the two typefaces taking shape. After a few hours of work, drawing, comparing and re-sketching, we ended the day with fairly complete character sets on paper.

On the second day it was time to turn our sketches digital, and for that we used the best vector graphics editor we know — Inkscape. After an introduction to vector drawing and a quick showcase of Inkscape’s powerful features, we set out to re-draw all the sketches using points and curves. The previous day drawings served as reference but we didn’t scan them. They served to understand the letter’s structure but were filled with inconsistencies we didn’t want to reproduce in the digital drawing.

In regular intervals we would print the letters and get together to discuss them. Participants would propose changes, alternatives and sometimes would even decide on making multiple variations of a character. The environment was vibrant and lunch brakes became shorter with the will to get back to work and accomplish as much as possible. Extra characters were added to the initial set, some of them brought by participants suggestions. One of them was the “ñ”, a characters widely used in Spanish. Medialab-Prado’s technician contributed a beautiful @, extending the font glyph coverage beyond what was initially planned.

The last day workshop day was reserved for Fontforge, the font editing tool. It was when we began collecting all the glyphs and compiling them in the final file. But a font is not made only out of glyphs, it is also a collection of the relations between them. The spacing between characters is an important part of type design and can be a very time consuming one. In the field of libre fonts the task becomes easier as you can use resources from one font and apply them to yours. Having this in mind we went back for a script we wrote a year ago. It is called Transpacing and what is does is that it picks the spacing tables from a font and applies it to a different font. This made our work easier as we quickly borrowed the spacings of similar fonts and applied them to our own.

Once the fonts were finished we proceed to writing the copyright notices, appending the Open Font License, creating the FONTLOG and checking all appropriate boxes before exporting the final file. The font was released on Open Font Library, an online repository of libre fonts, and we all clicked the upload button together. From there anyone was free to pick up the work, building upon it or take it in a different direction.

The two fonts created were named Serreria, after the building that inspired them. Serrería Sobria was based in the most conservative letter shapes while Serrería Extravagante was based in more decorative shapes. We celebrate their release and ended the workshop making beautiful type specimens with them.

The fonts and documentation are available at manufacturaindependente.com/piedranave.
Find Serrería Sobria and Serrería Extravagante the fonts at Open Font Library.

The photos in this posts are by kamatiko

Posted in libre type, news, workshops Leave a comment

Persuasive interfaces in open data

Today we gave a lightning talk at Open Legislative Data Camp in Paris about the subject of interface design for open data websites. Here is a detailed write-up of our major points.

Interface?

An interface is whatever entity that sits between you and what you want (data, information, completion of a task, etc).

A good analogy is to think of your local tax office, which you have to visit sometimes to take care of various kinds of business. Your goal is to get that business taken care of, and you have to deal with an interface made of various desks, forms and clerks in order to get what you want.

When a certain task, such as filing your taxes, is an obligation, you’ll be more willing to go through and overcome the interface. If, instead of taxes, the task would be to donate money to charity, and if you had to go through all those hoops in order to do it, it’s easy to imagine that no one, or very few, would end up donating their money to charity.

An interface is seldom neutral: it can be a great tool to empower you, providing the pathways for you to reach all you need, or it can be a means to restrict and condition your actions.

In order to make sense of this, we informally came up with the term dissuasive interfaces – such as EULA’s or most poorly-designed government websites – which will not encourage you to navigate the information within and, in more serious cases, actually drive you away, whether intentionally or not.

On the other hand, persuasive interfaces are about giving you a straightforward path towards what you want – but also provide you with things you didn’t know you wanted in the first place. The best example we could find is how Wikipedia manages to accomplish exactly this:

The Problem with Wikipedia

Xkcd: The Problem with Wikipedia

When we consider open parliamentary data, it’s definitely a field where we want to motivate users – government and parliamentary websites don’t usually do a great job at this. So, learning from our experience building Demo.cratica, we began trying to answer the question of how can we come up with more persuasiveness in open government and parliament data websites? Here are a few hints on what might work towards this goal.

Care about typography, layout and general design principles

Not all of us are specialist designers, but the huge majority of us makes many more design decisions than we might think. A great way to realize this is to question the default choices: why use black text on a white background? Why this default font and not another one? Why should the link text be blue and underlined? Going along with the default is a design decision in itself, and it will have an effect in the way an interface is perceived.

You have a huge amount of colours, typefaces and layout choices to decide on – try spending a bit of time exploring other possibilities. For instance, a blog with a custom WordPress theme will look much more determined than another which uses the default theme.

Think before you display

Once you have a well-built database with dozens of different fields, it is tempting to go all the way and display all the information you can – after all, you had so much work, you need to make it all visible!

Sadly, too much information can be worse than no information at all. A good rule would be avoid reflecting the internal data structure in the front-end. If you have 20 different fields of information for a single entity, think about the priority and/or importance of each field, and reflect it visually through emphasis. For instance, on a page about a specific person, that person’s name and picture should be well visible, their birth date can be pushed to a less prominent “Details” section, and the timestamp of the last time this person’s info has been updated should be almost hidden in the bottom of the page, if at all present.

Tip: Keep things in one screen (no scrolling) if you can.

Think before you visualize

Infographics and charts bring with them a sense of credibility through numbers. And while these ways to display information have been soaring in popularity, we should be careful about what to focus on in our efforts to provide meaningful information.

Graphically pretty, but hard to read (hat-tip: Erick Schonfeld)

For instance, ranking politicians. In Portugal there was a Parliament monitoring site which ranked politicians based on the amount of bills they put forward. Assessing a politician’s performance through a simple metric like how many bills they’ve proposed is not serious or even relevant, since parliamentary activity is not homogeneous or easy to reduce to cold numbers.

However, the media temptation to build a definite “Top 10” or “Hall of shame” list totally clashes with the goal of providing sensible and accurate perspectives on how parliament works.

It’s a good question to ask if it is worth graphing or even displaying certain kinds of information, or if there aren’t other, better ways to convey that information other than charts or graphs. It is too easy to skew or shape a story through gratuitous use of infographics. Avoid making them look what they aren’t.

Reduce the number of steps

The heart of interface design is hiding complexity. Each additional step from home page to the desired bit of information will make a site a bit more dissuasive. A good interface provides simple paths to go through in order to get where we want.

Think what the most relevant and central parts of your site are, and center your site design around them; from there, it will be easy to fit the secondary sections in a non-obstrusive way. In Demo.cratica, we follow an informal “three-clicks rule”: all essential information should be accessible in no more than 3 clicks from the start page.

Eliminate specialist terminology

Going on with the goal of hiding complexity, one key part is to provide information in terms that your target audience can understand. In Portugal, we have terms such as “legislature” and “legislative session” which mean distinct things, but you have to know exactly what they are if you want to get to the Parliament transcripts in the official government website.

Each layer of complexity restricts access to a significant part of your audience; the best way to keep it accessible is to use common non-technical terms.

Design should be your last concern

It’s too easy to focus and get lost in design details, losing sight from the greater goal of providing good tools to empower people with access to relevant information. Ideally, planning the back-end architecture and front-end design should be a simultaneous process, but not usually possible.

A good resource website using default themes – or no styling at all – is a much better starting point than a cleverly designed site with an incomplete backend or database (we made this mistake). The data needs to be ready at launch, whereas the design can be improved as you go.

These are just pointers into how design principles can be considered in the goal of providing an interface that works in catching regular users’ interest. Front-end design can be a very strong tool in turning a simple data service into a relevant and attractive resource that can be used by audiences that you wouldn’t even consider in the first place.


Update: Here are the slides.

Posted in news 3 Comments