Nouveau site, même métier : comment j'ai conçu pattdesign.es
Je me présente, je vous explique ce que je fais et je vous montre de l'intérieur comment j'ai conçu et construit le nouveau site de Patrick Uribe Studio.
Patrick Uribe · Grenade · · 6 min de lecture
Bonjour, je suis Patrick Uribe. Je suis designer à Grenade et je dirige mon propre studio, Patrick Uribe Studio. Je suis né à Bruxelles, le français est ma langue maternelle et, avant de monter le studio, j'ai travaillé en agences marketing, où j'ai appris qu'un bon design ne sert que s'il a une direction claire.
Aujourd'hui, je fais trois choses qui, pour moi, n'en font qu'une : je conçois l'identité d'une marque, je construis son site sur WordPress et je contrôle son SEO pour que Google le comprenne et l'affiche. Je suis aussi directeur créatif de Studio Tablas, un atelier de mobilier en bois massif ici à Grenade.
C'est le premier article du blog, et il me semblait juste de commencer par chez moi : vous dire qui je suis et comment j'ai conçu le site sur lequel vous lisez ces lignes.
Pourquoi un nouveau site
L'ancien site était devenu trop petit. Il montrait des projets, mais expliquait mal ce que je propose et comment je travaille, et le SEO, l'un de mes services, n'avait même pas sa propre page. Les cordonniers sont toujours les plus mal chaussés.
J'ai donc commencé là où je commence avec n'importe quel client : par la structure, avant le design.
D'abord l'architecture
Avant de dessiner le moindre écran, j'ai défini ce que chaque page devait faire. L'idée est simple :
- Les services vendent. Branding, création de site web et audit SEO ont chacun leur page, pensée pour apparaître sur Google.
- Les projets démontrent. Chaque étude de cas raconte le concept, le croquis et le résultat, et renvoie au service qui l'a rendu possible.
- La page d'accueil oriente. Elle n'essaie pas de tout dire : elle présente le studio et vous mène à ce que vous cherchez.
Le menu est passé de huit entrées à quatre et un bouton : Projets, Services, À propos, Blog et « Audit gratuit ».
Un univers visuel propre
Je voulais que le site ressemble à ma façon de travailler : sobre, précis et avec des détails qui se découvrent peu à peu. Voici les décisions qui le portent :
- Blanc cassé et noir. Pas de couleur d'accent : la couleur vient des projets des clients.
- Deux typographies. Satoshi pour la lecture et Gotham Light pour le logo et le menu, en capitales espacées.
- Des diagrammes de construction. Cercles, axes et points, comme ceux que j'utilise pour esquisser un logo, apparaissent dans les services et dans « À propos ».
- La flèche ↳. Elle marque chaque section, comme une note dans la marge d'un carnet.
- Du mouvement avec intention. Un écran de chargement avec pourcentage, un titre qui s'écrit tout seul, un bouton en verre liquide et un carrousel 3D avec les croquis du logofolio.
Un logo n'est pas une jolie forme. C'est la forme la plus condensée possible de ce qu'une entreprise veut dire d'elle-même.
Des projets vraiment racontés
Chaque étude de cas suit le même ordre : la couverture, le client et le type de projet, le logo concept (la carte d'idées dont naît la marque), puis le système : couleur, motif, applications et, quand il y en a une, vidéo. Vous pouvez le voir dans Melipal, Patagonia Punto Sur, Kajob Architecture ou Granada Basket.
Et dans le logofolio, les croquis tels quels : traits, corrections et constructions avant que les marques ne deviennent des marques.
Pensé pour le mobile et pour Google
Faire beau ne suffit pas si le site met du temps à charger ou n'apparaît pas dans les recherches. C'est pourquoi, en le construisant :
- La vidéo de la page d'accueil a une version verticale pour le mobile, et est passée de 16,7 Mo à moins de 2,5 Mo.
- Le menu mobile est un plein écran avec toutes les sections, le contact et les réseaux à portée de doigt.
- Chaque page a un titre, une description et des données structurées pour que Google comprenne ce que c'est : un service, une étude de cas ou une question fréquente.
Les outils
Le site est construit sur WordPress avec Elementor et des blocs de code maison pour les parties les plus particulières. Les croquis, comme toujours, à la main ; le design, dans Illustrator et Figma ; et je me suis appuyé sur des outils d'intelligence artificielle pour coder certaines pièces, avec le regard et les décisions de design toujours entre mes mains.
La suite
Ce blog parlera de ce que je fais chaque jour : comment naît un logo, ce que vérifie un audit SEO, comment choisir entre un site sur mesure et un modèle, et de vrais cas racontés sans filtre. Si vous avez une question sur votre marque ou votre site, écrivez-moi : la réponse pourrait devenir le prochain article.
Merci d'avoir lu jusqu'ici. Et si vous pensez à renouveler votre marque ou votre site, on commence par un audit gratuit.