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

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 webdesigners/graphistes qui essaient de créer des thèmes sympa, ce topic existe pour leur proposer donner peut-être des outils qui nous sont utiles à la conception d’un site web, que ce soit pour le webdesign les maquettes ou l’inté , l’intégration web et le développement . ça peut dépanner ..

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.

Améliorer le processus de conception des maquettes d’un site web et des présentation graphiques :

Pour améliorer le workflow avec les personnes avec qui on travaille, la modification en direct, pour une meilleure gestion et présentation des propositions, pour faciliter les retours, et pour le versionning de fichiers (genre calques, fichiers, dossier, branches etc...).

_ « »
Quand on travaille avec des gens de tout horizons, de tout niveaux et parfois avec des handicaps, c’est pas toujours évident de bien communiquer et présenter ses réalisations à distance ou à l’oral.
_

_
En recherchant des systèmes pour construire des maquettes beaucoup plus rapidement qu’en faisant pour chaque projet séparément : des grilles, des blocs, des boutons, des nuanciers, des icones, des images, et de devoir les poser 1 à 1 (ce qui implique de les retrouver, les avoirs sous le coude etc...).
_

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 _
  Le but étant de se préparer sa bibliothèque de créations ( comme un framework pour le css ou le javascript ), avoir une bonne organisation des créations pour pouvoir les utiliser facilement , et donc rompre avec une utilisation sur plusieurs dossiers d’ouverts partout, plusieurs fenêtres ouvertes, même sur plusieurs écrans ( ça devient vite le cauchemar 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 :

Apparemment Google, par son équipe Material Design (material.1 . io / gallery / Listing des logiciels io ) prépare un logiciel dédié au worflow de création d’interfaces Front-end design  :
https://material .

_
Quelques trucs, mais malheureusement pas de projet dans le libre, que du open source c’est déjà pas mal (bien vérifier les termes de confidentialité et l’utilisation de vos données si vous utilisez un des programmes qui suit dans l’article). Ça reste souvent du « freemium » c’est à dire version gratuite limitée et sinon des tarifs raisonnables pour stocker ses projets (eh oui ça coûte un prix le stockage sur les serveurs ! Surtout pour le graphisme qui peut prendre moulte place ! M’enfin si des devs se sentent un projet open source, pourquoi pas et on les remercierais bien fort ! ).

Libre , accessoirement open source ou inversement Voici quelques bribes de recherches à vous transmettre :

Alien Brain (pas de freemium) http://www.alienbrain.com/
Zero Height (parfait pr se faire sa biblio de compositions) https://zeroheight.com/
Pixelapse (projet repris par dropbox.. dommage le concept de base était très bon mais dropbox pas super sécurisant pr les données) http://pixelapse.com/demo
Abstract https://www.goabstract.[Gravit Designer
-  > com /
Perforce https://www.perforce.com/solutions
Viewflux (pas de freemium) https://viewflux.com/
Tortoise SVN (gestionnaire de versionning de fichier) https://tortoisesvn.net/
Proofhub (pas de freemium) https://www.proofhub.designer.io/
Klex (même noyaux que Gravit Designer mais avec inscription) https://www.klex.io/
Dotgrid : simple illustration en vecteur (libre, open source) : https://alternativeto.net/software/dotgrid/
Alva (libre open source encore beta) : https://meetalva.io/]
/
_ 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...) com /
Gravit designer ( open source et gratuit " commercial licence "), toute plateformes  :
Possibilité d’importer des " symboles " mais pas de les classer par catégories et les symboles ne sont pas importable importé/importable d’un projet à l’autre.. C’est plus + un genre de logiciel photoshop/illustrator libre toshop/illus gratuit ) https://www .

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

--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- -> Pour tous les OS

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](https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA]
-  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.

-> Propriétaires (presque toutes plateforme) :

Avocode (Interface de compos et biblio (freemium, ) https://avocode.com/?lng=en
Figma (Collaborative interface design tool (payant) avec bilbio et permet des retours faciles et rapide )) https://www.figma.com/
Proto (Animer ses zoning ou comportements de maquettes (payant)) https://proto.io/
Adobe XD (payant) https://www.adobe.com/products/xd.html

-> Pour Mac only (comme d’habitude ils oublient toujours les designers sous Linux..hum aaaalala la vente forcée)

Plus d’infos :
-  [Télécharger la démo->https://www.sketchapp.com/get /]
com /
_ - [Tutoriels->https://www Sketch https://www .sketchapp.com/docs/]
- [Plus d’explications->https://en.wikipedia.org/wiki/Sketch_(application)]

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->https://stackoverflow.sources :
https://stackoverflow.com/questions/29292/version-control-for-graphics]
com/questions/29292/version-control-for-graphics
https://blog . [Git repository for designers abstract sketch->https://blog.prototypr.io/git-repository-for-designers-abstract-sketch-9138cf6ab9b1]
io/git-repository-for-designers-abstract-sketch-9138cf6ab9b1
https://www . [Is there something like Github for graphic designers->https://www.quora.com/Is-there-something-like-Github-for-graphic-design]
[Concept com/Is-there-something-like-Github-for-graphic-design
Concept du « Open Design » lancé par le créateur de Pixelapse, un ancien employé de chez Google, beaucoup de liens morts, recherche à poursuivre->https://www poursuivre  : https://www .fastcodesign.com/3038135/ex-googler-builds-a-github-for-designers]
com/3038135/ex-googler-builds-a-github-for-designers [How to collaborate on sketch files inspired from git->https://blog.central.team/how-to-collaborate-on-sketch-files-inspired-from-git-589b4dddfee1]
[A simple workflow for designers->https://medium.com/@FolioForMac/a-simple-git-workflow-for-designers-342cac8fd9de]
[Git skecth plugin->https://github.com/mathieudutour/git-sketch-plugin]

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

sources :
https://blog.central.team/how-to-collaborate-on-sketch-files-inspired-from-git-589b4dddfee1
https://medium.com/@FolioForMac/a-simple-git-workflow-for-designers-342cac8fd9de
https://github.com/mathieudutour/git-sketch-plugin

Tous vos commentaires sont les bienvenus pour agrémenter la liste.
des projets de versioning pour les webdesigners & graphistes , surtout s’il en existe pour le libre  !
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 !
P.-S.

Merci pour votre lecture !

Le lien avec spip : permettre de casser les barrières entre le monde des graphistes/designers et intégrateurs/devs/sys admin...