# Web oblique. À propos de Slanted.cc

Anthony Masure, Kévin Donnot

► To cite this version:

Anthony Masure, Kévin Donnot. Web oblique. À propos de Slanted.cc. Back Cover, design graphique, typographie, etc., 2016. hal-04107186

HAL Id: hal-04107186

https://hal.science/hal-04107186

Submitted on 4 Jun 2023

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>
then the recording of a subject.

On the opposite direction, as a straight recording of
reality, Enrico developed an interest on architecture and
urban landscape photography.

Tout doit disparaître and

<figure><img src="image_2.png" /></figure>

<figure><img src="image_3.png" /></figure>

the ongoing project Agglo apply a documentary style on
these evolving and thus moving subjects. Eravamo in salento
& non abbiamo visto il mare explores an uncommon and

Web oblique

à propos
de slanted.cc

par Anthony
Masure et
Kevin Donnot

8

Resemblances

Le design graphique des sites web, peut-être plus que d'autres media, est marqué par les tendances (*trends*) et récurrences visuelles. C'est ainsi que nous voyons chaque année 1 fleurir des répertoires de styles, prêts à « décorer » n'importe quel site web en quelques clics via des *templates* (gabarits) téléchargeables. Dans cette toile de ressemblances, rares sont les projets (qui plus est francophones) qui proposent des identités visuelles à la fois singulières graphiquement, et adaptées aux logiques propres aux écrans. L'exemple de www.slanted.cc conçu par Raphaël Bastide pour présenter les photographies, documentaires et installations d'Enrico Floriddia, permet d'entrevoir ce que pourrait être un projet web inventif, pensé en cohérence avec son contenu, tant sur les plans concep-tuel, graphique que technique.

Oblique

Slanted.cc s'ouvre sur un long texte oblique occupant toute la fenêtre de l'écran et décrivant les productions de l'artiste. Le caractère typographique imposant – Young Serif par

Bastien Sozoo2 – donne au site web un aspect littéraire, impression renforcée par le fond gris clair, qui apaise les contrastes et invite à la lecture. Les conventions habituelles de l'ergonomie web sont ici bousculées: pas d'en-tête (header), de colonne latérale (sidebar), de grille façon mosaïque de projets, ni même de menu ou de pied de page ( footer ). Cette idée d'un texte linéaire qui ne serait pas droit – slanted, au sens géométrique – trouve sa source dans la typologie des travaux réalisés par Enrico Floriddia, notamment ses photographies d'architectures. La deuxième signification de l'adjectif slanted – pencher vers un coté, se positionner – est très impor-tante également, puisqu'elle induit une dimen-sion politique. C'est donc logiquement que ce terme a été appliqué à la conception du site web. Que ce soit sur les supports imprimés et numériques, nous sommes toujours assez liés à l'orthogonalité pour des raisons techniques, pratiques et d'habitude. Et si la navigation était oblique ?

Déstructurations

Un autre caractère – Whois Mono de Raphaël Bastide – indique les zones d'interactions possibles. Le clic sur un des liens n'ouvre pas une nouvelle page comme il est d'usage, mais fait apparaître, au sein du texte continu, le détail des projets avec miniatures d'images ou vidéos. Le contenu narratif est décalé, perturbé, dérouté par ces encarts positionnés sur une ligne de base horizontale, respectant ainsi la nature des travaux. Un deuxième clic sur les vignettes agrandit l'image ou le descriptif du projet, destructurant encore plus la mise en page. La navigation n'est plus frac-tionnée, sautant de page en page suivant une

structure en réseau propre à l'hypertexte, mais se parcourt de manière continue, en profondeur: le texte s'ouvre littéralement pour dévoiler le détail des travaux. Il ne s'agit pas pour autant d'un site mono-page à proprement parler, puisque chaque section dispose de sa propre adresse web (URL), pointant ainsi vers la page d'accueil avec les éléments « déroulés ».

Licences

Slanted.cc est publié sous licence Creative Commons BY-NC-ND 4, tout comme le CMS sans « base de donnée » utilisé: Stacey. Ce mode de diffusion permet le libre partage des éléments visuels et techniques, sans utilisation commerciale ni modification et sous réserve de crédit des auteurs. Les deux caractères typographiques utilisés sont distri-bués sous licence libre SIL Open Font License 5, qui garantit une liberté d'utilisation, de modification et de distribution. L'affirmation des modalités légales de diffusion de l'ensemble des composantes de ce site démontre la considération des auteurs pour les enjeux de création et de partage contemporains.

Cohérence

La cohérence entre le fond et la forme du projet, depuis les choix d'interface jusqu'à la structuration du code et la lisibilité des licences, est éloquente quant à une compréhension du design qui ne se limite pas à ce qui est immédiatement visible. Le visiteur est face à un objet qui propose des partis pris forts, l'amenant à dépasser le caractère utilitaire d'une interface familière destinée à présenter un contenu, pour considérer l'ensemble comme un projet singulier.

<footnote n="1">1 Voir pour exemple le
panorama « Web Desi-
gnTrends 2004-2015»,
Template Monster, URL :
http://www模板monster.</footnote>

<footnote>com/infographics/web-
design-trends-
years-2004-2014.php.</footnote>

<footnote n="2">2 « Young Serif », URL :
https://github.com/uplaod/
YoungSerif.</footnote>

<footnote n="3">3 « Whois Mono », URL :
https://github.com/
raphaelbastide/Whois-mono.</footnote>

<footnote n="4">4 « Licence CC BY-NC-ND
4.0 », URL : http://creative-
commons.org/licenses/
by-nc-nd/4.0/.</footnote>

<footnote n="5">5 « SIL Open Font License (OFL) », URL: http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL.</footnote>