5139 sujets

Le Bar du forum

Quels logiciels pour l'UI ?





Bonjour,

Je dois réaliser la maquette d'un logiciel PC.

Quel logiciel est le mieux adapté pour réaliser des maquettes d'interface utilisateur responsive avec du .svg ? Illustrator, Firework, ou Photoshop ?

Et quelle est la meilleure méthode pour préparer sa maquette à l’intégration ?
http://tinyurl.com/nwkbh8z
http://www.wirify.com/
http://moqups.com/

Les outils SVG natif
illustrator
inkscape
voir outil , IDE, tool , library , framework .....ici

Les plug in et widget SVG
beaucoups de librairies SVG UI element pour le web le mobile et le destokp .
firefox plugin ( All) pencil evolus/
photoshop *(web) webzap avec export svg
sketch ( Mac) ( mobile ) iOS8
All ............ (All ) speckyboy template/widget toolkits



Il est possible d importer le SVG pour l utiliser comme une vrai interface utilisateur ( IHM-interactive) en utilisant java ( desktop) ou javascript ( browser) .
- JView ilog composer and API ( ivl <--> svg )
- SCADA IHM and GLIPS grafiti editor basé sur batik
-d3js svg ( many sub screen svg ) + CSS animation + SVG mask



-KEndo UI et SVG-> canvas -> VML ?
Modifié par 75lionel (26 Jul 2015 - 19:10)
Modérateur
dew a écrit :
Il y a aussi Inkscape


Un gros +1

Je connais très bien Illustrator depuis des années (+ de 15 ans dont 7 en tant professionnel). De plus en plus, je ne vois pas trop l'intérêt d'Illustrator puor le web. Il est indéniable que pour le print, Inkscape n'est pas du tout adapté. Il n'y a pas les Pantone par exmeple. Mais pour le web, il n'y en a pas besoin.

La dernière version d'Inkscape date de février. D'ailleurs, ils ont fait un bon de la version 0.48 à la version 0.91.

Imppao fait d'excellents tuto sur les logiciels libres de pao. Pour Inkscape, il y a beaucoup de doc. Perso, je n'ai pas eu trop de mal à migrer vers Inkscape. A l'époque où j'ai commencé à connaitre, il n'y avait pas beaucoup de doc (voilà avec quoi j'ai appris à utiliser Inkscape : http://tavmjong.free.fr/INKSCAPE/MANUAL/html_fr/index.html). Je crois que ce n'est pas à jour mais ça suffit amplement pour mettre le pied à l'étrier.

Le seul bémol que je trouve à Inkscape, c'est qu'il est un tout petit peu différent des spec du SVG. Le point d'origine en SVG est en haut à gauche. Or sur Inkscape, il part du principe qu'il est en bas à gauche. Ensuite lorsqu'il enregistre, il paramètre l'attribut viewBox. Illustrator exporte mieux ce format.

Sinon, c'est un excellent logiciel !

Il y a d'autres logiciels moins connus et pas mal. Je pense à Corel par exemple. Il y a aussi Xara. Il y a quelques années, il y avait Freehand. Il était très bien dans le sens qu'il était très léger et aussi complet qu'Illustrator.
Modifié par niuxe (24 Jul 2015 - 14:23)
En fait y a 2 questions je crois, je comprends pas trop, tu veux exporter tout ton wireframe en SVG ?

Pour du SVG (des icônes, des illustrations, etc.) : Illustrator (ou Inkscape), Photoshop "peut exporter du SVG blablah" mais franchement le vecto sous Photoshop c'est pas la joie et c'est pas fait pour ça.

Pour le côté maquette, wireframe, je dirai l'outil avec lequel t'es à l'aise ? Perso je fais mes maquettes sous Illustrator aussi, parce que j'ai pleins de patterns tout faits et de morceaux d'interface que je peux ré-utiliser. T'as d'autres trucs comme Balsamik, Mockflow ou encore UXpin qui proposent des trucs sympa avec des patterns déjà tout faits que tu peux ré-utiliser et qui te faciltent la vie.

Sinon pour fireworks, adobe a arrêté le support. C'est pas dérangeant, sauf que du coup il est bloqué en CS6 donc tu peux plus faire de copier/coller d'icones depuis illustrator ou autres passerelles sympas. Bref c'est un peu la mort du logiciel.
Je voulais une méthodologie de travail pour créer une interface d'un logiciel destiné pour les PC sous windows. En somme, un logiciel pour créer une maquette couleur et exporter les icons en SVG.

J'aurai aimer trouver un logiciel complet qui permet de réaliser des pré-maquettes pour optimiser l'ergonomie avec des liens cliquables, pour ensuite passer directement dans une maquette couleur avec des outils de création d'icon, le tout visualisable dynamiquement sur différentes résolutions, et un export en un clique pour l'intégration du projet. Mais je pense que ce logiciel n'existe que dans le monde des poneys avec des arcs-en-ciel. Smiley sweatdrop

J'ai essayé Wireframe, il remplit une bonne partie de mes souhaits. Mais il est trop complexe et n'intègre pas par défaut les SVG. Smiley ohwell

Finalement, je suis partie sur Illustrator comme je le connaissais bien.
J'ai trouvé quelques astuces pour faciliter le travail sur illustrator : http://www.astutegraphics.com/why-you-should-use-adobe-illustrator-to-create-user-interfaces/
http://design.tutsplus.com/articles/how-to-build-flexible-and-lightweight-uis-in-adobe-illustrator--cms-20512

J'espère que l'équipe Adobe comblera ce manque. Smiley cligne