Accueil

  • Projets
  • Présentation
  • Blog
  • Design, interface, web

    Une création de site web plus tard

    Découvrez les raisons et raisonnements ayant abouti à ce site web. Un poil historique, un poil design ; mais surtout personnel dans ma relation au web, à l’interface et à la conception.

    Pendant plusieurs années, je n’arrivais pas à me décider sur la manière qui me convenait le mieux pour présenter mes travaux et les partager, que ce soit à une audience ou à un recruteur. J’ai utilisé plusieurs solutions, souvent en parallèle les unes des autres, avec à chaque fois une visée différente selon la plateforme. Je me suis donc retrouvé avec un compte Instagram (@voici_dahu), me servant plus pour une présentation “intimiste” des projets, bien qu’il me serve aussi de vitrine accessible et pratique. Behance fut aussi un choix qui me convenait pendant un long moment ; gratuit, en ligne, avec un rendu plutôt pro, c’était une solution parfaite pour présenter des projets dans les détails. Et enfin les sempiternels portfolios en PDF, bien moins pratiques pour une diffusion large.

    Durant cette même année de master, et comme chaque année où je dois trouver un stage/candidater, la même question revint encore : comment présenter mes travaux ? Comment vendre mes compétences dans un artefact à la fois fonctionnel, pratique, pragmatique et -surtout- qui me ressemble. C’est un croquis dans le coin d’une page qui finira par me débloquer la construction de mon site web. Bien que cette idée ait germé pendant quelques mois avant de se muer en divers wireframes, expérimentations et croquis papier visant à cerner les contours de ce que serait mon site web. Avec l’objectif que ce dernier soit tant informatif que représentatif d’une vision du design et de l’interface ; en plus de porter la lourde symbolique d’être mon premier site web (pour un designer en interface, il était temps !)

    Commençons plutôt par discuter des choix de conceptions qui ont amené à la construction du site tel que vous le naviguez en ce moment :

    La mise en page porte une forme plutôt extrême et minimaliste de tabularité, l'ensemble du contenu s'étale sur 3 colonnes horizontales d'égale largeur, et sur 3 lignes verticales aux dimensions 20% 60% 20%. (de haut en bas). Cette disposition minimaliste de l’information permet de proposer une vision rapide et claire du contenu à quiconque navigue dans cette interface. De plus, cela m'a permis, avec mes compétences de codes, de créer un environnement suffisant pour mes besoins de présentation, mais aussi, facile à construire, mettre en place et maintenir ; en plus de proposer une disposition de l’information plus claire et directe par le minimalisme même de la mise en page, contrastant avec la majorité des sites que l’on peut retrouver sur la toile.

    L’apparence graphique du site devait autant servir la mise en avant de l’information, qu’être un parti-pris fort résultant d’une vision du design et de l’interface graphique contemporaine. L’esthétique qui en ressort pioche ses inspirations dans la graphie du code, dans l’historique de l’informatique, du numérique et d’anciens appareils. Les formes conviées restent sobres, plutôt pragmatiques. L’utilisation uniquement d’éléments en CSS donne au site un aspect brut, sans fioriture ; comme pourrait l’être le brutalisme, un brutalisme numérique en somme. Une sobriété dans les effets et dans la mise en avant du contenu, l’utilisation d’une typographie mono, le tout actualisé dans une mise en page légère comme énoncé précédemment.

    Éxpérimentant la réintroduction du textuel et de la lecture dans les formes d'interfaces, le brutalisme numérique propose le gris typographique comme impact graphique à part entière. Il n'est plus question d’une navigation de zones d'interaction en zones d'interaction, mais d’un ensemble "interface", complet, proposant éléments interactifs et informations mises à disposition de manière égale. Se cache derrière une volonté de redonner sens et corps au texte, bien souvent délaissé. Ce dernier s'exprime sur le design dans sa dimension réflexive, afin d'appuyer son rôle dans la construction de nos relations inter-actives entre Homme et numérique. L’ensemble de ces choix de mise en page, ainsi que les choix stylistiques, permettent à l’information présente sur le site de ressortir plus facilement et d’assurer une lisibilité moins contraignante car moins sujette à une diversion due à tel ou tel éléments.

    Le code est entièrement écrit par moi, sans IA - mais non sans son aide -. La raison de sa non présence dans mon code se résume par ma volonté de m’exercer, de mieux le comprendre, de le manipuler, de le triturer, le bidouiller, en somme me l’approprier. En résulte aussi une certaine fierté “artisanale” du fait que le site est le produit de mon travail, de la relation cognition/action entre mes mains et mon ensemble cérébral. Vous ne trouverez pas de trace d’IA dans le code du site, mais cela ne signifie pas que je n’ai pas utilisé l’IA pour d’autres raisons. Le processus d’utilisation de cette dernière est à comprendre comme un “bibliothécaire” personnel sur le code. Je pose une question à l’IA, que ce soit sur les possibilités, les bonnes pratiques et autres attributs CSS possibles pour ensuite me renseigner et lire de la documentation via MDN Web Docs (MDN Web Docs). L’IA n’est que la porte d’entrée vers les possibilités du code, que j’actualise dans le site et avec une documentation permettant de comprendre pleinement le fonctionnement de tel ou tel bout de code.

    Au final, ce site fut l’occasion d’appréhender plus sereinement le code, de comprendre ses spécificités, mais aussi, et ce qui est le plus important à mes yeux, pouvoir créer un site web/portfolio reflétant pleinement une vision sur le design et l’interface. Ce site relève donc plus de la manufacture que d'une production machinale et répétée du même code circulant sur les supports de communication numériques, en arborant une posture de designer-artisan. C’est en effet cet argument qui m’a fait choisir le codage manuel plutôt qu’une solution CMS ou autres, pouvant m’imposer une forme de représentation/de présentation de mon travail. Une volonté de ne pas être inféodé à une entreprise, un groupe, un mouvement de réflexions ou de pensées qui n’est pas le mien. Créant alors un ensemble arborant fièrement ses différences, comme pour mieux être le manifeste d’une réflexion design singulière. Nous pourrions argumenter, que pour une volonté de rester inféodé, vous lisez ce contenu depuis la typographie IBM Plex Mono, appartenant, comme son nom l’indique, à l’entreprise IBM. Laissons cette petite coquille comme marge d’amélioration pour une potentielle future version de ce site web.

    Je reste tout de même fier du travail accompli, et satisfait des compétences mises en œuvre et acquises au cours de ce long projet. Si vous souhaitez reprendre un peu de ce site, vous pouvez découvrir les photographies que j’ai réalisées pour annoncer ce site web.

    Voir sur LinkedIn
    Voir sur Instagram

    Merci pour votre lecture, bonsoir.