La course à l’espace fait rage depuis longtemps. Attention, pas celle de Kennedy ou de Reagan, je parle ici de la course à l’espace disque. L’espace disponible sur vos ordinateurs. Pourquoi accumuler des dizaines d’applications quand nous utilisons d’ores et déjà l’application suprême, celle qui les contrôlera toutes, le navigateur web.
Cette fenêtre sur les Internets a changé de visage depuis quelques années. Les navigateurs sont de plus en plus puissants et permettent de faire tourner des applications. Pour un designer, pour un bidouilleur, un journaliste créatif, la solution se trouve peut-être là. Tour d’horizon des solutions web de la création graphique.
Concevoir un projet web, c’est avant tout mettre de l’ordre dans ses idées. Une fois l’aspect éditorial calé, reste à penser l’interface, l’expérience, tester des solutions, prototyper, c’est la conception en mode agile.
Les outils de Wireframing
Le papier et le crayon restent à tout jamais les deux outils indispensables du créatif. Mais pour partager ses idées, rien de mieux qu’une base de travail numérique. Si vous ne goutez pas aux joies de la conception web au quotidien, vous vous demandez ce qu’est un wireframe. Le wireframe présente l’ossature physique d’un objet digital. On l’appelle wireframe à cause de la représentation en « fil de fer », épurée, sans couche graphique qui est à la base de l’exercice. Quand on réalise un wireframe, l’idée est de positionner les éléments graphiques schématisés (boutons, boites, textes, images et vidéos par exemple) dans un cadre qui représente l’écran d’affichage. Voilà les différents outils disponibles en ligne que j’ai repérés pour vous.
Balsamiq
Tarif : 9 $ par mois
Outil hyper intuitif, Balsamiq permet de réaliser en quelques, à partir d’une bibliothèque d’éléments préconfigurés, un wireframe convaincant et de le partager. La bibliothèque placée en haut de l’écran propose des éléments qu’il suffit de glisser et déposer sur la scène pour commencer à designer un prototype. L’aspect de Blasamiq présente un design assez rudimentaire à dessein tout en adoptant un style crayonné bien adapté au prototypage.
Mockingbird
Un outil particulièrement adapté pour le travail collaboratif puisque les projets réalisés se partagent à l’aide d’un simple lien. Encore une fois, on retrouve la bibliothèque d’éléments qui devient la boite à outils naturelle de la plateforme. Son aspect très épuré rappelle celui de Balsamiq et permet de visualiser directement les éléments à manipuler.
Tarif : 12 $ par mois
Wireframe.cc
Tarif : gratuit
Pour le coup, wireframe.cc offre une prestation gratuite idéale si l’on ne cherche pas forcément à intégrer le wireframing dans son flux de production de façon systématique. L’idée ici est d’aller vite, de dessiner proprement et rapidement une proposition sans être embarrassé par une interface complexe.
Les solutions d’édition en ligne
Une fois passé le cap du wireframing, il s’agit de passer à l’action et de donner un coup de peinture à l’ensemble de l’ossature pour qu’elle ressemble au produit final. C’est le rôle du graphiste qui va réaliser les maquettes sur Photoshop ou Sketch (ou encore Studio) d’après les indications du wireframe et en fonction des réunions créatives organisées tout au long de la phase de conception du projet. Couleurs, textures, espacement, rythme visuel, micro-interactions, le graphiste aujourd’hui doit pouvoir envisager tous les aspects esthétiques et fonctionnels induits d’une bonne interface. C’est d’autant plus critique sur un environnement mobile ou la taille de l’écran joue un rôle contraignant important. Les solutions que je vous propose ci-dessous permettent une fois le design réalisé, d’intégrer les pages à l’instar de logiciels bien connus — mais aujourd’hui un peu dépassés — que sont Dreamweaver ou Frontpage.
Racontr
Tarifs : contactez directement racontr.com
Solution complète pour réaliser vos projets interactifs, Racontr permet à un couple graphiste/journaliste de réaliser des produits éditoriaux extrêmement variés en un temps record. Longform, documentaires interactifs, data-visualisation, mini-sites, rien ne résiste à Racontr. La spécificité de la solution : une gestion du temps dans la page grâce à sa timeline intégrée qui rappellera bien des choses aux amateurs d’After-effects. J’ai personnellement réalisé de nombreux projets avec cet outil et je n’ai pas rencontré d’équivalent qui permette de créer puis de publier un projet aussi rapidement.
Full disclosure: Je travaille depuis maintenant près de 2 ans chez Racontr, mais ceux qui ont pu assister à mes formations — que ce soit à l’emi-cfd ou au CFJ, savent que je suis un fan de la solution depuis bien longtemps.
Webflow
Tarifs : gratuit pour deux projets, 16 $ pour 10 projets et 35 $ par mois pour un nombre de projets illimités.
Webflow agit en intermédiaire. Il se place entre le code et le design pour permettre à l’utilisateur de réaliser des « mises en pages » plus facilement. Outil de prototypage efficace, Webflow ne vous amènera pas aussi loin que Racontr, mais vous permettra néanmoins de réaliser de nombreux projets très intéressants.
Ceros
Tarifs : Contactez directement Ceros
Même esprit, même philosophie, autre alternative à la création interactive. Ceros apporte un peu plus d’animation que Webflow. Grâce à une interface claire et intuitive, vous réalisez — à l’instar des autres plateformes présentées ci-dessus – en peu de temps vos projets interactifs compatibles sur l’ensemble des navigateurs desktop et mobile.
D’autres plateformes que vous trouverez certainement intéressantes :
- Nos amis belges développent une solution intéressante appelée Ludus plus adaptée à la création de slides interactives.
- Quand Webydoo vous aidera, à l’instar de Wix, à réaliser votre site web.
Pour coder :
- Caret, gratuit et disponible sur Chrome en extension vous permettra de mettre en forme votre code façon élégante.
- Codeanywhere, reste une alternative – payante – tout à fait séduisante.
