Matter of style: a critical eye

The 6 months we spent on experimenting on the reader and its form were very interesting and intense, because full of reflexions, contradictions and intuitions.
Below are some of those points:

A > B

Family tree
This platform has been created as a continuity and a declination of the current INC website. Thus, its design has been meant with a strong attention on the current visual chart of the INC website.
To make it so, we first created a style-guide for the existing INC website in order to analyze and document its visual identity and its different elements.

The general idea was to pick some strong elements of the website and to decline those into something new.
What was interesting but also complicated, is that the INC website is a bit pale. There are no real contrasts (everything is made of shades of gray). Only 2 colours are used: orange and gray. There is no black. The chosen orange is pretty dark and complicated to use as a background color for text; text has then to be white or big.
It works well like it, with the current website, but for the platform, we needed something more complex:
— Because of the different functions we had to implement, we needed more levels of information.
— We needed to make a visual distinction between menu/tools and content/reading space.
We didn’t have a real & established communication goal, but what came up in the end, is that we wanted to create something friendly, dynamic, fun, serious, original, minimal, strong.

I generally hate when people think that a graphic designer just has to play with nice colors. But unfortunately, I spent months playing with colors, just because I couldn’t make a decision wether the menu should be orange or white.
It could appear a bit ridiculous, but to my own point of view, as a graphic designer, it has proved very difficult to design this platform. For many reasons.


Wild child
Even if we were designing the platform in a pleasant and intelligible style, I couldn’t stop thinking that we could bring its design to a higher level, to turn it into something more radical and impactfull. Sometimes I felt like designing the wild child of the Institute.
A few lines above, I mentionned the colours. It is true that colours (and visual elements) are important. But there are a lot of other things to take in account, that people sometimes don’t see because it is transparent: the smootheness of the page, the scrolling effects, transitions, durations, fading effects… All of that defines a web identity. When we designed the website, we often had the impression that the platform was a way too cheesy:

‘Cheesy: Trying too hard, unsubtle, and inauthentic. […] The excessive showing off suggests he’s compensating for what he does not have.’

This definition describes perfectly the situation. There was no strong element, it lacked of contrast, there were too much useless and insignificant details, simply because we didn’t have a real bias.

What could we have done?
Of course, it is first up to us to make things look nice and to give a strong personality to what we design! (and I personaly feel guilty because of my 6 years of studying graphic design).
But, this problem also points out the importance of defining roles in the design process: it is not really about who has design skills and who has not, but about assigning the different tasks (and files) to a specific person, in order to limit the variety of used styles.
And finally the most important: work the other way around. Since the project was considered as experimental, we focused on conceiving relevant tools and finding ways to make them comprehensible. We worked in a very discontinuous and composite manner, adding tools to the rest little by little. In the end, we didn’t have any overview of the overall project and the way the page should look like. Now, we have to remove all of the small effects that were arbitrary set to each function and gather everything.

We want to keep on working on its visual style and believe that it can be very positive for the INC, which is an ‘avant-gardist’ and modernistic (futuristic?) structure.
Come on, we are in the Netherlands! The country of experimental design!

Back to the roots
The (obvious) solution which I found is to keep on designing. Designing the reader (the page we have been working on: B), but also look at it in a different scale and design the pages which come before (the ‘publications’ page, where the user can browse the different books: A). We will thus have a wider overview on the website and design the whole family.

User vs Designer

Another complicated thing was to find the right balance between what is good for the user, and what is good for the identity of the platform itself.
Sometimes, it appeared tempting to take the decision to give entire liberty to the user to customize everything as he wants. Since some functions we implemented are inspired by text-editors and their visual codes (highlight function, pin function, font-size, font-style…), the border between our project and a text-editor was sometimes a bit slight. We thus envisaged some functions such as giving the possibility to change the color of the highlighting, even the font family…
But, at the same time, if we don’t design any element anymore and if it changes all the time, how can the platform be quickly recognizable?
Those interrogations consisted in a big challenge. They conducted to interesting talks and animated debates in our team.

Browser > Website

What we designed is something in-between a software and a web page.
Software, because it has to be interactive (a minimum) and be as interesting and efficient as the functions in softwares, that we decided to implement inside our reader.
Webpage, because it has to be speed, light, to fit a specific structure (Markdown, Html) and be readable on any devices wether the hardware brand used, the screen size, the browser and its version.
I personaly think that we tended a little to consider this platform as an autonomous entity too much. As explained before, we sometimes thought of implementing functions just ‘in case if’, in order to make the website self-sufficient. ‘What if the user wants to read in the dark?’ ‘What if the user prefers to read bigger?’ Let’s implement that tool to our webpage!
But it was forgetting about the specific statute of a web document. A web page is always read and interpreted by a browser. And the browser already contains a lot of different sturdy tools and plug-ins especially designed to facilitate the use of webpages. There are already efficient search tools available on each browser. And sometimes a ‘reader’ button on your browser, which removes every distration [design] from the webpage and makes you able to chose the font you want. If even the design is removed… why should we add more?
I often consult this article, which is, to my mind, very refreshing: