Les développeurs n’aiment pas les frameworks CSS et les graphistes n’aiment pas l’idée de travailler avec une grille de mise en page. Mais ça ne m’empêche pas de leur trouver un intérêt (aux FW, aux dévs et aux créas). Je suis certainement une espèce mutante, le chainon manquant entre les matheux (le code n’est poétique que dans WordPress ^^) et les graphistes ! Pour autant, je ne pense pas que les frameworks CSS doivent être utilisés partout ou que le design dans le navigateur remplacera votre graphiste ou votre logiciel de création préféré. Il s’agit d’une méthode de travail qui s’ajoute aux précédentes ; elle ne prétend pas s’y substituer. L’article Framework CSS — Sémantique, maquette dynamique et autres notes vous permettra de défricher le terrain sur leur utilisation et leurs avantages.
Framework CSS ?
Les frameworks CSS sont généralement composés d’un ou plusieurs fichiers prenant en charge les différents aspects de la réalisation d’une page (grille, typographie, formulaires, tableaux, etc.) dans le but de faciliter le placement des blocs sur la page et d’harmoniser les styles typographiques selon une grille horizontale.
The Simpler Grid — 12 colonnes «A la une» de 60px avec une gouttière de 20px pour une largeur totale de 940px. Choisissez votre Framework CSS parmi les 30 solutions disponibles.
Mockup ? (non, ça ne se fume pas)
Un Mockup est une maquette grandeur nature qui permet d’avoir une idée sur la manière dont les fonctionnalités prévues par le cahier des charges (cf. le périmètre des fonctionnalités) vont se concrêtiser. Selon les projets, il peut s’agir d’un croquis réalisé à main levé pendant le rendez-vous avec le client ou d’une version plus élaborée une fois que vous êtes de retour à l’atelier.
Voici un échantillon tiré des 40 Brilliant Examples of Sketched UI Wireframes and Mock-Ups qui devraient vous plaire et vous inspirer.
Un logiciel comme Balsamiq Mockups propose plusieurs dizaines de contrôles et plus d’une centaine d’icônes pour représenter les éléments que l’on trouve habituellement sur une page web (menus déroulants, onglets de navigation, blocs de texte, listes, formulaires, login, etc.). Je les trouve plutôt ennuyeux à utiliser et je préfère poser mes idées dans un bloc-note. Toutefois, ils peuvent être utile si les maquettes doivent circuler dans le flux de production et être modifiées par différents intervenants.
Pour faire un zoning ou une maquette plus précise, j’utilise généralement Illustrator, mais il semble que Fireworks ait plus d’un tour dans son sac. Rapid prototyping in Fireworks CS3 est un tutoriel en français qui explique comment utiliser les fonctionnalités de prototypage rapide apparues dans la version CS3 de la Suite Adobe. Lire également les article de SuperFiction sur les Wireframes.
Framework CSS et prototypage rapide
Partant de l’idée que l’intérêt premier des frameworks est de proposer une méthode pour placer rapidement des blocs sur la page, pourquoi ne pas les utiliser pour le zoning et la maquette fil de fer (Wireframe) ? Les différents objets censés représenter les éléments d’une page web seraient visibles sous leur forme native : les menus déroulants pourraient se dérouler et les diaporamas, diaporamer ! En attendant que les contenus définitifs vous parviennent, il existe du faux texte prêt à l’emploi à base de Lorem Ipsum enveloppé dans différents marquages HTML. Lire les billets traitant des Frameworks CSS sur css4design.
Conclusion
En permettant de modifier rapidement et simplement la largeur et l’emplacement des différents blocs, les frameworks CSS et le design dans le navigateur (au moins en ce qui concerne la maquette) procurent des avantages à l’équipe de développement, mais aussi au client qui pourra manipuler la maquette à l’échelle 1:1 ET en direct-live : il n’est plus obligé de regarder son futur site avec les yeux, mais il peut le toucher avec la souris ! En s’appropriant ainsi sa maquette, il devrait être plus enclin à fournir les contenus pour voir ce qu’ils donneront in situ.
Liens complémentaires
- Zapper la maquette Photoshop et passer directement à l’intégration HTML/CSS ?
- Conception dans le navigateur avec HTML5 & CSS3 (amélioration progressive)
- A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio
- Free Printable Sketching, Wireframing and Note-Taking PDF Templates
- http://wireframes.linowski.ca/
- Create diagrams online Real Time Collaboration
- 20 Free Web UI Element Kits and Stencils
- Zoning, wireframe, maquettage, prototype : les meilleures pratiques
- Mockups to go
- Foxguide
Très bon article !
Mais attention le lien interne vers ton autre article « Framework CSS — Sémantique, maquette dynamique et autres notes » est erroné.
Hugo — Merci, je viens de corriger 🙂
Salut Bruno!
Voilà un bon article qui met en avant toute la puissance des frameworks CSS, mais qui montre aussi qu’on peut aller bien plus loin!
Car finalement à l’heure actuelle avec les frameworks CSS (dîtes si je me trompe) on ne peut guère aller plus loin qu’un mockup à base de rectangles gris plus ou moins foncés. Une simple architecture de l’information donc, et très peux d’interactivité.
Mais si l’outil ne convient pas, changeons d’outil! Quitte à le créer soi-même.
J’ai il y a quelques temps maintenant (bien un an de cela) commencé à bâtir un véritable framework pour construire des prototype de site à la volée. Le tout en php avec un certains nombre de fonctions php (ex : buildMenuDropDown( $nbCat, $nbItems, …) ) plus ou moins portatives il faut bien l’avouer (c’est ici que l’on se rend compte de la portabilité et de la robustesse de son code! Et donc de sa réutilisabilité).
Enfin bref avec 5 ou 6 appels de fonctions php j’avais bâti ma page, navigable, interactive, avec un code plus que générique, beaucoup de style inline et loin d’être accessible, mais à cette étape du projet là n’est pas le but nous en conviendrons.
Il y a cependant un point noir ici. Car qui dit framework dit choix limités, ou du moins terrain balisé. Et de par ce fait on devient certainement moins original, moins innovant. Mais petit à petit ne sommes-nous pas, après maintenant plusieurs années de tests, d’essais et d’expériences, en train d’arriver sur une architecture de l’information stable, fiable et surtout efficace? Car justement normée… A l’image des livres tout simplement.
Pour parler de mon expérience personnelle, les grilles font à présent entièrement partie du processus de création. Les mockups dessinés à la main sont basés sur une grille. Mais peut-être un jour je passerai à l’outil décris ci-dessus…
Depuis quand les graphistes n’aiment-ils pas les grilles de mise en page ?
Ce sont eux qui les ont inventées, bien avant internet !
Regardez du coté de Joseph Müller-Brockmann pour vous faire une idée.
Pour répondre à clementroy et à l’idée qu’on ne peut utiliser cet outil que pour des carrés et des rectangles, il faut bien se dire que ce sont les frameworks qui imposent ce modèle.
Une grille de mise en page n’est pas cantonnée à des blocs, ça peut être ce qu’on veut, des ronds, des patates… C’est une distribution constante des éléments graphiques sur les pages qui fait la grille.
La notion est assez vaste, certains graphistes utilisent une grille pour concevoir une affiche, ce qui peut être paradoxal puisque c’est un support qui se limite à une seule instance.
Voilà, assez pour faire mon intéressant 🙂
Encore une fois tout ça mène à une joyeux mélange des métiers, et je ne suis vraiment pas sûr (c’est mon avis) que les agences doivent aller vers ça.
Alors oui, effectivement, le freelance développeur / intégrateur ira surement très vite pour faire un zoning en css, mais malgré tout il faut produire du code, et a mon sens la phase de spécifications fonctionnelle ne doit pas mener à la production de code.
Tu parles de l’avantage d’avoir des zonings taille réelle, dans le navigateur, et surtout interactifs. Oui, je suis carrément pour ! Mais il existe des outils très bien pour ca (je pense notamment à Axure).
Ce type d’outil permet a un chef de projet / concepteur web n’ayant pas de compétences techniques de produire un prototype Html ultra complet et navigable, avec seulement du drag & drop et du clic, en se concentrant sur le fonctionnel et non sur le calage de ces éléments.
Pourquoi alors devoir plonger les mains dans le HTML / CSS à cette étape du projet ?
Arf, je suis d’accord avec Mael et son commentaire plus haut. Ce sont les graphistes — et en particulier les typographes — qui ont imaginé la rationalisation de la page en utilisant des grilles.
Alors oui il ya encore beaucoup de graphistes qui n’aiment pas suivre les grilles de mises en pages car ils estiment qu’elles nuisent fortement a leur capacité de créer.
à mon sens ce n’est pas la maquette qui doit précéder le contenu, mais le contenu générer la maquette. Toute idée créative est vide de sens si les contenus sont minorés. Réflexion indépendant vs agence. C’est pourquoi il est plus facile pour le client de travailler d’abord avec des concepteurs-rédacteurs le cœur de son message et ensuite passé à l’élaboration visuelle.
j’aime beaucoup le lorem, mais les clients ont tout de même du mal à se projeter et identifier leurs créa finale.
Vraiment très intéressant !
Encore merci,