Créez vos prototypes directement dans votre navigateur avec ces ressources CSS et JS !

Créer des wireframe, puis des maquettes dans Photoshop, puis enfin commencer l'intégration en HTML. Ce schéma est-il réellement le plus efficace ? Ne serait-il pas possible de prototyper directement les wireframes en HTML, puis utiliser cette base pour designer les maquettes puis le site web, sans passer par Photoshop ? 

Si cette solution semble excellente pour gagner du temps (plus besoin de repartir de zéro, chaque étape se construit sur la précédente), sa mise en place est un peu plus complexe. Ces étapes demandent des connaissances qui n'appartiennent pas forcément toujours aux mêmes coeurs de métiers, et il faut avouer que les habitudes ont la vie dur.

Si cette aventure vous intéresse, je vous propose des pistes et des ressources pour vous aider dans la mise en place de prototypes en HTML le plus rapidement possible.

Choisir un framework CSS

Les frameworks CSS sont souvent un des meilleurs moyens de gagner du temps au démarrage d'un projet. En plus de fournir un CSS de base, ils proposent aussi un style par défaut pour de nombreuses structures que vous verrez dans tous les sites (menus, tables, pages, sliders, …).

Les deux plus utilisés à l'heure actuelle sont Bootstrap et Zurb Fondation. Les deux proposent en plus du CSS une bibliothèque de ressources Javascript que vous pourrez utiliser simplement depuis votre HTML, sans connaissances Javascript.

Zurb Foundation

Zurb Fondation est le Framework que nous utilisons à Dezup. Simple à prendre en main, il a aussi l'avantage de charger moins de style de base que Bootstrap. Il en résulte des CSS un peu plus simples à modifier et un peu plus légers.

Notez au passage que Fondation vous propose des listes de templates de pages "de base" en HTML, très simples à adapter à vos besoins

Bootstrap

Bootstrap et le Framework CSS le plus utilise au monde, et vous trouverez une quantité impressionnante de ressources et thèmes compatibles.

Vous aimez rester dans la norme et avoir énormément des ressources à disposition simplement ? Prenez Bootstrap !

D'autres alternatives

Si l'idée de charger quelque 40 000 lignes de CSS dans votre projet (sans parler du Javascript) ne vous emballe pas, il existe des frameworks bien plus simples et légers (et moins complets, évidemment) sur le marché.

 

Protyper ses animations CSS et Javascript

Il est important de prévoir ses animations au plus tôt, pour être sûr qu'elles correspondent au design, car elles font souvent partie intégrante de l'ergonomie et de l'identité d'un site. Ce point est sans aucun doute le gros plus qu'apporte le HTML par rapport à de simples maquettes sur Photoshop.

Or, si ces animations sont souvent imaginées par le graphiste, elles demandent des connaissances en développement pour être mises en place. Comment animer ses prototypes sans connaissances en Javascript ?

Shorthand

Shorthand est une ressource Javascript qui permet de déclarer ses animations dans un langage au plus proche de l'anglais.

Mettre en place des animations complexes ne vous demandera que de connaitre le ciblage des éléments en CSS et des rudiments d'anglais !

Animate.css

Animate.css est une collection d'animations préfabriquées simples à appliquer à tout element HTML. Idéal pour animer un site en un temps limité.

 

Mettre en place du contenu de remplissage

Il est très rare d'avoir déjà le contenu final au début du projet, nous nous retrouvons donc à mettre en place du contenu fictif (généralement des images aléatoires et du lorem pisum). Et généralement, ce contenu en question est inséré à la main dans les pages, a gros renfort de copiers collers bien répétitifs.

Il existe pourtant des solutions pour simplifier cette étape, que ce soit pour les images ou pour les textes.

Dummytext

Dummytext est une ressource Javascript qui vous propose d'insérer du lorem pisum dans vos pages automatiquement, grâce à de simples petites indications dans votre HTML.

Un exemple étant souvent mieux qu'un long discours, je vous ai fait un petit Pen. Comme vous pouvez le voir, il est possible de générer du simple texte, mais aussi des balises (p, li, …)..

See the Pen BjWEzX by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Ce contenu est malheureusement du simple lorem, il n'est pas possible de choisir une des alternatives comme du Batman ipsum par exemple. Si votre client est allergique au latin, il sera possible d'utiliser une police d'écriture comme Redacted Font, par exemple.

Placehold.it et Lorempixel

Pour les images, deux sites sortent du lot, selon vos besoins.

Placehold.it est un service permettant d'afficher sur son site les emplacements des images et le format de l'espace (plus éventuellement un texte). Cette solution est pratique car très informative, mais elle empêchera peut-être votre client de se projeter dans le design.

Lorempixel, lui, affiche des images tirées de banques d'images gratuites et organisées par catégories. Besoin d'une image pour illustrer un site du sport ? C'est aussi simple que ça : http://lorempixel.com/400/200/sports .