photo courtesy Stephen Kilvington • www.airliners.net

Ce à quoi vous avez échappé...

Ce qui suit n'est pas inconnu des internautes qui fréquentaient le forum de Master 194 alors que ce site était en gestation. C'est la reprise d'un fil qui évoquait les hésitations et autres errements graphiques de la maquette du site studiosechen.com.

Pitch Black

maquette avec un fond noir

Tentative initiale avec un fond noir... pas concluant ou en tout cas, pas inspiré ! D'ailleurs ça n'est pas allé bien loin. Outre cette page, j'avais fait une page d'accueil assez peu compatible rétrospectivement avec l'évolution à long terme du contenu. En gros, ça limitait trop la place disponible et du coup le graphisme choisi serait devenu inutile. Je n'avais même pas réfléchi à une mise en forme des profils (ce qui est quand même le principal pour un site de profils, non ?). Autre problème qui apparaît dans tous avant-projets présentés ici : je voulais mettre une galerie de photos avec dans la mesure du possible les images des appareils ayant inspiré les profils... Mais une fois envisagée plus concrètement une mise en ligne, le problème des droits d'auteur se posait très sérieusement.

Les hommes préfèrent les... rondes

Première apparition des cadres à bord arrondis, avec création d'icono pour les boutons de navigation. En fait, tout ça est très en rondeur, même la police y va de son aspect arrondi ? Mais un autre problème était que peu de gens verraient cette police, faute de l'avoir sur leur propre ordinateur… Donc police de remplacement… donc pas bôôôôôô !!! Le bleu est un peu flashy mais est appelé à revenir régulièrement. Noter aussi une première forme de logo sur la page d'accueil repris sur le bandeau, bien vide d'ailleurs, des pages courantes. Là non plus pas très concluant. C'est mieux mais c'est pas encore ça... Quand j'imagine la future inflation des boutons spécifiques à chaque avion sur la colonne de gauche, je me dis que ça aurait fait beaucoup de boulot au niveau des mises à jour. Mais surtout l'ensemble est peut-être encore un peu trop inspiré par des mises en forme « print »...

maquette avec cadre arrondi maquette avec cadre arrondi

Orange mécanique

Nouvelles tentatives avec cette fois des couleurs chaudes. Essai sur un autre logo plus trash, façon « street art », repris en filigrane dans le coin en bas à droite de chaque page... Compliqué, encore plus « print » que le précédent comme mise en forme... On voit apparaître les points sous forme de trame (je vous le concède pas super visibles à cette échelle). Le texte gagne sa mise en forme finale. Et voilà l'image du MiG-29 en plein ravito que j'ai réutilisée par la suite dans une autre version du bandeau (prise sur le site du constructeur www.migavia.ru). Et la galerie de photo est encore bien présente dans la maquette (images cliquables vers un slide show (?) et bouton « galerie » visible sans savoir si ce lien devait être général (les images de tous les avions) ou ne concerner que l'avion présent sur la page (avec un nombre de pages pareil pour accéder au contenu recherché, j'imagine le taux de rebond...). L'ergonomie n'était pas encore à l'ordre du jour et ça partait un peu dans tous les sens sans trop de cohérence.

maquette orange maquette orange

Le Grand Bleu

Nouvelle tentative avec le retour du bleu, avec la mise en forme du texte, les trames sont encore là, pour habiller une page très épurée quand même... On retrouve le bouton « profils » créé pour la mise en forme précédente et des puces apparaissent également. Assez sympa, mais difficulté à gérer la colonne de gauche si le contenu est trop grand. Je voulais mettre les profils de chaque avion sur une seule longue page avec un ascenseur, mais cette colonne de gauche n'aurait pu suivre (je ne pouvais quand même pas étirer l'image verticalement !) d'où un problème de déclinaison dans le respect de la charte graphique. Et toujours la galerie avec en plus les photos présentes dans la colonne de gauche, un site qui aurait fini par coûter cher... Tout est tellement permis tant que vous laissez les fichiers dans votre disque dur.

maquette bleue maquette bleue

Presque célèbre

Et puis, à force de me racler le fond de la soupière, je suis arrivé au logo qui se trouve en haut de la page qui me plaît bien et que vous voyez régulièrement sur les profils que j'ai mis en ligne ici (mais en orange). C'est lui qui a finalement conditionné tout le reste de cette maquette qui a bien failli être en ligne ; avec toujours le bleu, un peu plus pastel, et les lignes de points plutôt que la trame. Le texte ne bouge plus depuis un moment, donc cette fois non plus. Un peu de douceur dans un monde de métal hurlant... Bref, pas en ligne !

maquette bleu pastel maquette bleu pastel

Lost in translation

Alors on continue avec cette version plus rigide et des couleurs plus pastel, mais… crème quand même... Cela donne lieu à plein d'essais pas tous franchement réussis dont je vous épargne la vision... En fait, entre le manque d'inspiration pour adapter la charte à tous les types de pages et le fait que justement la navigabilité ne soit pas complètement définie, cela donne lieu plus à des errements qu'à des bonnes idées… Et puis, il ne fait pas très aéronautique comme site. Pour le dire simplement, problème d'identité visuelle.

maquette bleu pastel maquette bleu pastel

Final Fantasy

Mais... une fois qu'on s'est dit que le bleu n'est peut-être pas une bonne idée, qu'il faudrait penser plus sérieusement à l'ergonomie pour pouvoir concevoir une arborescence qui se tienne, et qu'on a quelqu'un sous la main qui maîtrise le php, ça devient tout de suite plus facile de trouver l'inspiration. Quand en plus, l'auteur de la photo que vous voulez utiliser vous donne son accord… (Merci M. Kilvington !) c'est carrément Byzance ! Donc du orange et du gris pour le côté sérieux (conseil de graphiste : ça rassure les clients, y paraît…).

Ouf... Et voilà !

maquette définitive