Maki, superposer une maquette de site et un site dans le navigateur

Dans le microcosme des webdesigners , 2 écoles s’affrontent : les purs et durs à l’ancienne qui ne jurent que par Photoshop et les fainéants (et pas forcément compétent en Photoshop dont je fais partie, soyons clair) qui développent « dans le navigateur ».

Il faut dire que créer un site web un peu complexe prend très rapidement beaucoup de temps et d’énergie, pour souvent s’apercevoir que ce n’est pas exactement ce que l’on souhaite obtenir, et qu’il faut ajuster. Pour cela, les wireframes et les mockups ont été créés, afin d’obtenir rapidement une maquette plus ou moins réaliste de la mise en page souhaitée. Mais dans la réalité, il y a toujours ce petit pixel qui fait défaut.

Maki est un bookmarklet développé en JS qui permet de superposer des maquettes de type mockup dans le navigateur avec un site web existant.

Lorsque l’on clique sur le bookmarklet, le site en cours est rechargé avec un barre d’outil. Celle-ci permet de superposer une image (typiquement issue de Photoshop, mais aussi celle du site concurrent) et de régler la transparence. Ainsi, vous pouvez constater visuellement les défauts de mise en page, et les corriger en live.

De quoi gagner pas mal de temps dans les nécessaires ajustements post-développements.