web-dev-qa-db-fra.com

Quel est le nom du wireframing dans le navigateur?

Je travaille sur un projet Web assez important et je pense que je vais d'abord concevoir une série de wireframes dans Sketch ... mais ensuite, une fois ceux-ci approuvés, je prévois de construire les wireframes en utilisant Bootstrap = et avoir quelques pages statiques pour que le client puisse naviguer.

La prochaine étape sera alors de concevoir le look & feel (revenons donc à Sketch à ce stade).

Je me demande donc comment différencier (en termes de dénomination) entre le wireframing dans une application telle que Sketch/Illustrator ... et le wireframing dans un navigateur, par exemple Amorcer?

11
pealo86

Le wireframing dans une application est appelé Wireframe

Le développement des structures filaires des démos interactives (par exemple Bootstrap) est appelé Prototypage

Éditer:

Types de prototypes utiles à partir des diapositives @Jose mentionnées dans son article:

Prototypes papier
Outils souvent utilisés: papier, stylo, marqueurs

enter image description here


Prototypes de faible fidélité
Outils souvent utilisés: Balsamiq, Axure

enter image description here


Prototypes haute fidélité
Outils souvent utilisés: Invision, Marvel, Sketch, Photoshop, Justinmind

enter image description here


Prototypes fonctionnels
App Inventor, Origami, Framer, Twitter Bootstrap, HTML/CSS/JS

enter image description here

25
DPS

Vous pouvez utiliser un filaire comme prototype, mais tous les filaires ne sont pas des prototypes.

Filaire = un diagramme qui utilise uniquement des lignes noires et blanches et aucune couleur .

Prototype = tout ce qui vous aide à tester une hypothèse. Tel que,

  1. cette fonction javascript fera-t-elle l'affaire?
  2. Cette disposition est-elle suffisamment claire
  3. Ce flux UU est-il optimal
  4. Les utilisateurs aiment-ils cette palette de couleurs? Des protoypes typiques sont réalisés avec: un prototype papier avec application marvel, justinmind, code html ...

Il existe un principe qui dit que plus la fidélité du prototype est élevée, plus la rétroaction est précise. Si vous recherchez une convention de dénomination, vous pouvez peut-être utiliser le degré de fidélité pour faire la distinction entre vos filaires/prototypes.

j'espère que cela pourra aider. Voici quelques exemples supplémentaires de types (diapositives 13 à 22) de prototypes:

9

C'est ce qu'on appelle prototypage .

Vous pouvez également utiliser le prototypage papier ou créer des démos cliquables à l'aide d'applications telles que Marvel App.

3
Nick Groeneveld

Voilà comment je comprends ces termes de manière simple

Je divise ce mot complet en 2 mots, c'est-à-dire Wire et Frame. Supposons que vous soyez sculpteur et que vous deviez faire une statue de soi-disant humain. Il serait suffisant de faire d'abord un squelette de fils et de bois/acier. Lorsque vous faites cela, vous faites réellement le filaire de l'homme.

Lorsque vous avez terminé avec le filaire, ce qui signifie en d'autres termes que vous avez terminé avec la forme, la position et l'apparence de bas niveau du sculpteur.

De même, nous rédigeons d'abord un dessin pour nos maisons sur papier pour avoir une idée de notre future maison.

Ensuite, lorsque vous mettez de la boue ou du ciment sur ce filaire humain, vous essayez de lui donner une forme, une sensation, une expression, une position exactes, ce qui est d'autres mots n'est rien d'autre qu'un prototype.

Les experts suggèrent que la phase de prototypage doit être rapide afin que vous ayez suffisamment de temps pour découvrir, apprendre, essayer et mesurer beaucoup de choses. Par conséquent, je suggère Axure RP, UXPIN, Balsamiq etc. comme le meilleur outil pour atteindre la vitesse.

0
Shabir Gilkar