Prototypage rapide avec HTML KickStart

Photo de Stéphane

Par Stéphane Bordage le jeudi 10 janvier 2013

Prototypage rapide avec HTML KickStart

Je comprends de moins en moins la place des outils de prototypage type Axure, Justinmind... Pour moi, tant qu'on est dans du wireframing rapide et peu interactif ses outils font sens.

Les premières versions "basiques" de Justinmind correspondaient à cette description. Depuis, la solution légère a fait place à un mastodonte permetant de gérer des comportements à base d'expressions régulières (entre autre) !

Comme tout chef de projet web maîtrise au moins HTML & les bases des CSS, pour prototyper de futurs sites en HTML... HTML semble le plus simple non ? D'autant que de nombreux "boilerplate" existent (voir les liens ci-dessous).

Ce billet présente succintement HTML KickStart, le meilleur d'entre eux.

Principe

Le principe d'HTML KickStart est de fournir un cadre de prototypage HTML clés en main et sans installation.

En pratique

Prototypage rapide avec HTML KickStart

Il suffit de télécharger l'archive et de la décompresser pour être opérationnel. HTML KickStart fourni ensuite une page d'examples (titres, galeries, menus, slider...) qu'il suffit de copier / coller et adapter en ajoutant son texte. Tous les éléments sont 100% fonctionnels et cross-browser. Le code HTML est ultra lisible. Principaux éléments fournis

  • Système complet de grille 960 avec 12 colonnes
  • Typographie (des headings aux styles inline en passant par les blockquote)
  • Listes (ul, ol + styles alternatifs)
  • Menus (verticaux, horizontaux, déroulants, avec ou sans icones...)
  • Tableaux (y compris avec tris des colonnes)
  • Tooltips (avec ou sans HTML, choix de la position...)
  • Icones (taille, couleur, style paramétrables via IcoMoon
  • Boutons (taille, style, couleur, icone personnalisables)
  • Tabs
  • Breadcrumbs (2 styles par défaut)
  • Images (4 styles, galerie, lightbox...)
  • Slider
  • Video
  • Carte
  • Calendrier
  • Formulaire et éléments de formulaire (y compris JS avancé, éditeur WYSIWYG...)
  • ...

Pour aller plus loin

Si le sujet vous intéresse, jettez un oeil à html5boilerplate et Bootstrap (Twitter).

Prix

Gratuit.

Liens

comments powered by Disqus