SQUIG : prototyper la structure avant de discuter des détails
📌 SQUIG est un canvas infini de composants d’interface réels, volontairement rendus comme des croquis pour se concentrer sur la structure plutôt que sur le rayon des angles.
Un wireframe classique finit souvent par ressembler trop vite à une maquette. Les couleurs, les ombres et les détails typographiques attirent la discussion alors que le sujet devrait rester la hiérarchie, le parcours et la place de chaque bloc. Squig prend le contre-pied : vous dessinez une interface avec des composants qui gardent l’apparence d’un brouillon, même lorsqu’ils représentent de vrais éléments d’UI.
L’usage est immédiat. Vous posez une carte, un bouton, du texte ou une image sur un espace sans limites, puis vous déplacez les éléments pour tester une composition. Vous pouvez ajouter des formes, des flèches et des dessins libres pour relier une idée à une autre. Le rendu volontairement irrégulier donne assez de distance pour parler de la page sans déjà défendre une finition visuelle.
C’est particulièrement adapté à une première revue de produit. Vous pouvez organiser l’écran d’un tableau de bord, tracer le chemin d’un onboarding ou comparer plusieurs architectures sur le même canvas. Le slogan « argue about structure, not corner radius » résume bien la proposition : Squig ne cherche pas à remplacer un outil de design haute fidélité, mais à retarder les débats qui arrivent trop tôt.
Le détail intéressant est que les éléments ne sont pas de simples traits. Le modèle interne distingue notamment les composants, les formes, les dessins, les flèches, le texte et les images. Une sélection peut être groupée, dupliquée, alignée, verrouillée ou détachée. Les flèches peuvent s’accrocher aux objets et suivre leur géométrie. Cette base donne au croquis une vraie logique d’édition, au lieu d’une collection de pixels impossible à réorganiser.
L’esthétique reste réglable sans perdre le principe. Plusieurs palettes, types de papier, grilles et styles de texte sont disponibles. Vous pouvez passer d’un trait bleu très marqué à une apparence plus sobre, choisir une fonte manuscrite, sans-serif ou serif, et adapter le niveau de contraste. La personnalisation sert ici à garder un canvas lisible, pas à transformer le wireframe en design final.
Les fichiers sont conservés localement dans le navigateur via localStorage, avec un index de documents et des fonctions d’import et d’export. Le format embarque les nœuds du dessin, leur ordre et l’apparence choisie. Squig peut donc servir à préparer plusieurs variantes sans mélanger les essais dans un unique tableau.
Je trouve cette contrainte visuelle saine. Un wireframe qui assume son aspect de croquis protège mieux la conversation : on peut déplacer un bloc sans avoir l’impression de casser une interface finie. La limite est évidente aussi : si vous devez spécifier une grille exacte, une direction artistique ou des composants de production, il faudra passer à un outil plus précis. Squig est meilleur dans le moment qui précède ces décisions.
Points clés
- 🧱 Canvas infini pour organiser les blocs d’une interface
- ✏️ Composants UI rendus comme des croquis lisibles
- 🔗 Flèches, groupes et alignements pour raconter une structure
- 🎨 Palettes, papiers, grilles et styles de texte ajustables
- 💾 Documents conservés localement avec import et export
Pour cadrer une discussion produit avant de polir les pixels, Squig propose une surface volontairement imparfaite, mais suffisamment structurée pour faire avancer les choix.
