Carnet Wiki

Boîtes à outils projet participatifs webdesign & développement

Version 13 — Mai 2018 tcharlss

Améliorer le processus de conception d’un site web ou application au sein d’une équipe de production, allant du design au développement. Une plateforme où pourrait s’entendre les créatifs visuels et les créatifs du code.

Dans spip il y a aussi des webdesigners/graphistes/developpeurs qui essaient de créer des thèmes sympa, ce topic existe pour leur proposer des outils qui sont utiles à la conception d’un site web, que ce soit pour le webdesign, l’intégration web et le développement.

Les besoins :

  • Améliorer le workflow (organisation, collaboration, production)
  • Permettre la présentation du travail étape par étape, en vue globale et/ou versionning (ex : calques, fichiers, dossier, branches etc...).
  • Permettre à d’autres personnes du projet ou commanditaire d’accéder et participer facilement.
  • Garantir une cohésion et compréhension entre les contributeurs et intervenants du projet, outils de communication.
  • Faciliter les retours sur un travail graphique en partageant les idées (mouvement d’objet, changement des couleur, de forme...) ce qui inclue une modification en direct.
  • Gestion des bibliothèques d’éléments créés (comme un framework pour le css ou le javascript) : formes, traits, icones, symboles, nuanciers, boutons, effets sur l’état d’un élément, encarts type, etc.. à trier, drag’n’droper facilement.
  • Meilleure présentation des maquettes et de leurs comportements, zoning & effets.
  • Prix correct, idéalement projet libre, bien que les fichiers graphiques prennent une place énorme et consomment beaucoup de ressources, et demande une grande prise de tête pour concevoir un projet pareil.
  • Mutliplateforme pour qu’aucun ne se retrouve bloqué pour ne pas avoir le même OS.

Le but est d’éliminer :

  • La perte de temps pour organiser sa « planche » de travail pour construire une maquette, avec pour chaque projet : des grilles, des blocs, des boutons, des nuanciers, des icones, des images.
  • Rompre avec une utilisation sur plusieurs dossiers d’ouverts partout, plusieurs fenêtres ouvertes, même sur plusieurs écrans (même si c’est parfois inévitable).
  • Les prises de têtes, les listes de mails qui ne finissent plus, les romans à rallonge qui tentent d’expliquer son point de vue quand à un élément du design ou son comportement ou sa logique.
  • Le fait de partir dans tous les sens, de ne pas respecter ce qui a été dit et validé par l’équipe en réunion.
  • Les mauvaises compréhension de comportement de maquettes pour le développement.
  • Les dizaines de fichiers avec le même nom de version, la perte de fichiers.

Quelques recherche ci-dessous, bien vérifier les politiques de confidentialité avant de vous engager avec un logiciel :

1. Listing des logiciels de création d’interfaces Front-end

Libre, accessoirement open source ou inversement :

Gravit Designer
linux, windows, mac
Logiciel ou webappli pour créer des interface webdesign et print avec une bibliothèque pré-définie.
Possibilité de transformer un élément en « symboles » mais pas de les classer par catégories (ex : buttons, encart, etc...) et les symboles ne sont pas importable d’un projet à l’autre.. C’est plus un genre de logiciel photoshop/illustrator libre.

Plus d’infos :
-  Télécharger
-  Tutoriels
-  Contribuer

Klex
linux, windows, mac
Même noyau que Gravit Designer, mais il faut s’inscrire.

Alva
linux, windows, mac
Interface de creation participative pour webdesign. Permet d’échanger avec toute l’équipe de production les avancées d’un projet d’interface. Bientôt est prévu d’insérer du code sur des éléments de l’interface.
*N’a pas marché pour moi sous fedora avec le fichier AppImage...*

Plus d’infos :
-  Télécharger
-  Contribuer

Invision
 ?, ?, mac
Logiciel ou webappli pour créer des interface webdesign et les partager facilement, avoir des retours rapide sur les éléments de design. Permet l’organisation d’un groupe sur un projet avec agenda, chat, todolist, « tableau blanc » sur lequel on peut dessiner des mockups d’idée pour les réunions, créer des workbench pour organiser ses idées créatives.

Plus d’infos :
-  Télécharger en s’inscrivant
-  Tutoriels

Google Gallery
Linux, windows, mac
Permet d’organiser ses projets webdesign, de les partager, de les animer pour une démo et d’avoir facilement des retours, ainsi que ça facilite l’export des informations pour l’intégration web et le développement.

Plus d’infos :
-  Télécharger en s’inscrivant
-  Plus d’informations

Akira
Linux
Akira est un logiciel libre pour créer des interfaces d’applications natif à Linux, se destinant principalement aux graphistes et designers web.

À l’heure actuelle (mai 2018), il est encore en version pré-alpha

Plus d’infos :
-  Télécharger

---- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

Freemium proprio :

Avocode
linux, windows, mac
Interface d’inspection pour webdesigner et développeurs. Facilite l’intégration web des maquettes.
Une fois les maquettes réalisées sur Photoshop, Sketch, Adobe XD ou Figma elles sont importées dans Avocode, pour ensuite être soumis à l’inspection des équipes de productions. La bilbiothèque des éléments est créée d’après le fichier source du logiciel de création. Permet d’avoir rapidement des feedbacks et discutions sur les éléments à améliorer. Tout le monde peut travailler sur la dernière version et voir les changements du projet du début à la fin. Permet de sortir immédiatement le code pour l’intégration web, notament l’export d’images en plusieurs format d’un coup. Synchronisation des projets.

Plus d’infos :
-  Télécharger la demo
-  Tutoriels
-  Plus d’explications

Figma
linux, windows, mac
Outils d’interfaçage collaboratif. Permet de créer les interfaces (ou d’importer des projets de Sketch), d’avoir un versionning, de créer sa bibliothèque d’éléments et de les partager avec l’équipe de productions, qui peut intervenir sur l’interface ou donner leurs feedbacks (en tant réel), proposer des modifications, et en être notifier.

Plus d’infos :
-  Télécharger la demo en s’inscrivant
-  Tutoriels
-  Plus d’explications

Proto.io
linux, windows, mac
Outils de création d’interface webdesign/apps (ou import part Sketch ou Photoshop) et de test des zoning et comportements multiplateforme. Création et organisation de bilbiothèques d’éléments et/ou mise à dispo de kits prêt d’interface utilisateur type Material design. Partage des projets avec l’équipe de productions, démo « réaliste », et retours par commentaires ou vidéos. Pas de code nécessaire.

Plus d’infos :
-  Télécharger la demo en s’inscrivant
-  Tutoriels
-  Plus d’explications

Adobe XD
windows, mac
Outils de création de webdesign/apps simplifié, possibilité d’importer ses designs depuis Photoshop et Sketch. Permet de créer et organiser sa bibliothèque d’élements via le Creative cloud en synchro avec photoshop/illustrator ou de télécharger des kits gratuits existant, pour apporter des modifications sur le projet. Permet d’animer ses interfaces et de tester le zoning et comportements sur ios et android. Envoie des démo aux équipes de productions (pas sûr qu’il y ai un manager d’équipe ou la possibilité de faire des retours immédiatement sur le document).

Plus d’infos :
-  Télécharger la demo
-  Tutoriels
-  Plus d’explications

Alienbrain
linux ? windows, mac
Outils de versionning pour les webdesigner/infographistes 3d/vidéastes, management de projets collectifs avec possibilité de créer ou d’importer des maquettes via Photoshop, 3dsMax, Maya, Alias, Visual Studio. Permet le suivi très précis du projet, avec versionning des maquettes (à la git), retours et ajout de modifications avec l’équipe de productions en temps réel, veille du workflow et statistiques pour chaque projet, gestion des permissions.

Plus d’infos :
-  Acheter
-  Tutoriels
-  Plus d’explications

Proofhub
 ?
Organiseurs pour travailler en collaboration, permet un suivi des avancées d’un projet allant de la timeline, aux retours, un peu comme un mini erp pour un projet. Pour le travail des designer, cela permet de présenter le travail et d’avoir des retours direct sur les fichiers envoyés (un peu comme le fait acrobat pro mais en ligne).

Plus d’infos :
-  Télécharger la démo en s’inscrivant
-  Tutoriels
-  Plus d’explications

Viewflux
 ?
Création de maquettes webdesign et permet la collaboration avec l’équipe de productions/client pour faire des retours. Versionning des maquettes.

Plus d’infos :
-  Télécharger la démo en bas de page
-  Plus d’explications

Zeroheight
mac
Plugin pour Sketch qui permet d’organiser des guides de styles pour maquettes sur des projets webdesign (sur mac uniquement). Permet le travail en collaboration avec les developpeurs, leur facilite l’intégration web et le développement pour chaque type d’éléments.

Plus d’infos :
-  Demander une invitation
-  Tutoriels
-  Plus d’explications

Abstract
mac
Logiciel fonctionnant avec Sketch uniquement, un vrai github pour les designers. Importer les maquettes de Sketch, ajouter des utilisateurs, créer de nouvelles branches, commiter, pusher, merger sur la branche master, commenter, todolister, et tout le monde peut toujours avoir la denrière version du projet tout en gardant les versions précédentes et avoir un aperçu rapide des modifications.

Plus d’infos :
-  Télécharger la démo
-  Tutoriels
-  Plus d’explications

Sketch
mac
Création de maquettes, utilisant des automations pour les styles d’éléments, et rend facile l’animation des pages pour faire une démo. Permet le travail collaboratif et d’avoir rapidement les feedbacks sur un projets.

Plus d’infos :
-  Télécharger la démo
-  Tutoriels
-  Plus d’explications

Pixelaps
Les inventeurs du « Open Design » pour permettre aux designer de créer et collaborer de la même manière qu’un versionning pour les developpeurs. Partager les maquettes, retours facilité, versionning. Super concept mais l’application à depuis été rachetée par Dropbox..

---- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

Autres sources

TortoiseSVN
Toutes plateformes
Gestionnaire de versionning de fichiers.

Versionning control for graphics
Git repository for designers abstract sketch
Is there something like Github for graphic designers
Concept du « Open Design » lancé par le créateur de Pixelapse, un ancien employé de chez Google, beaucoup de liens morts, recherche à poursuivre
How to collaborate on sketch files inspired from git
A simple workflow for designers
Git skecth plugin

---- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

Tous vos commentaires sont les bienvenus pour agrémenter la liste.
Il existe beaucoup d’articles et vidéos sur des logiciels existant, principalement propriétaire sur lesquels j’ai fait la passe, et parfois que sur mac.. l’intérêt pour cet article serait de mettre l’accent sur les logiciels libre de ce type.

Merci pour votre lecture !