risposta-alla-domanda-sullo-sviluppo-web-bd.com

Qual è il nome per il wireframing nel browser?

Sto lavorando a un progetto Web piuttosto grande e sto pensando che progetterò prima una serie di wireframe in Sketch ... ma poi, una volta approvati, ho intenzione di costruire i wireframe usando Bootstrap = e ha alcune pagine statiche in modo che il client possa navigare.

Il prossimo passo sarà quindi progettare l'aspetto grafico (quindi torna a Sketch in quel punto).

Quindi mi chiedo, come faccio a distinguere (in termini di denominazione) tra wireframing in un'app come Sketch/Illustrator ... e wireframing in un browser, ad es. Bootstrap?

11
pealo86

Il wireframing in un'app è chiamato Wireframe

Lo sviluppo di wireframe in demo interattive (ad es. Bootstrap) è chiamato Prototyping

Modificare:

Tipi di prototipi utili dalle diapositive @Jose menzionate nel suo post:

Prototipi di carta
Strumenti usati spesso: carta, penna, pennarelli

enter image description here


Prototipi a bassa fedeltà
Strumenti usati spesso: Balsamiq, Axure

enter image description here


Prototipi ad alta fedeltà
Strumenti usati spesso: Invision, Marvel, Sketch, Photoshop, Justinmind

enter image description here


Prototipi funzionali
App Inventor, Origami, Framer, Twitter Bootstrap, HTML/CSS/JS

enter image description here

25
DPS

È possibile utilizzare un wireframe come prototipo, ma non tutti i wireframe sono prototipi.

Wireframe = a diagramma che utilizza solo linee in bianco e nero e nessun colore .

Prototype = tutto ciò che ti aiuta test un'ipotesi. Ad esempio,

  1. questa funzione javascript farà il lavoro?
  2. Questo layout è abbastanza chiaro?
  3. Questo flusso UU è ottimale?
  4. Agli utenti piace questa tavolozza di colori? I prototipi tipici sono realizzati con: un prototipo cartaceo con app Marvel, justinmind, codice html ...

Esiste un principio secondo il quale maggiore è la fedeltà del prototipo, più accurato si ottiene il feedback. Se stai cercando una convenzione di denominazione, forse puoi usare il grado di fedeltà per distinguere tra i tuoi wireframe/prototipi.

spero che aiuti. Ecco alcuni altri esempi di tipi (diapositive da 13 a 22) di prototipi:

9

Si chiama prototipazione .

Puoi anche utilizzare la prototipazione cartacea o la creazione di demo cliccabili utilizzando app come App Marvel.

3
Nick Groeneveld

Ecco come capisco questi termini in modo semplice

Divido questa Parola completa in 2 parole cioè Wire e Frame. Supponiamo che se sei uno scultore e devi fare una statua di dire umana. Sarebbe abbastanza buono per prima fare lo scheletro di fili e legno/acciaio. Quando lo fai, stai realizzando il wireframe di umano.

Quando hai finito con il wireframe che in altre parole significa che hai finito con la forma, la posizione e l'aspetto di basso livello dello scultore.

Allo stesso modo redigiamo un progetto per le nostre case e anche su carta per avere un'idea della nostra futura casa.

Quindi, quando metti fango o cemento su questo wireframe umano, provi a dargli forma, sensazione, espressione, posizione esatte, che sono altre parole non è altro che un prototipo.

Gli esperti suggeriscono che la fase di prototipazione dovrebbe essere veloce in modo da avere abbastanza tempo per scoprire, imparare, provare e misurare molte cose. Pertanto suggerirei Axure RP, UXPIN, Balsamiq etc come il miglior strumento per raggiungere la velocità.

0
Shabir Gilkar