Quali sono le migliori pratiche per la prototipazione rapida utilizzando esclusivamente HTML / CSS / JS [closed]

8

Sto sviluppando un prototipo di un'applicazione web. Voglio usare solo HTML, CSS e Javascript. Preferisco usare il mio editor di testo e non dover imparare (o pagare, per quello) un nuovo strumento come Axure.

Quali sarebbero, secondo te, le migliori pratiche? Per me ci sono molte qualità per un buon prototipo:

  • sviluppato rapidamente
  • Facile da migliorare
  • Fedele fedeltà per UX (questo squalifica strumenti come Omnigraffle o PowerPoint che sono più dedicati al wireframing)

Cerco di imparare il più rapidamente possibile, ma mi piacerebbe sapere, in base alla tua esperienza, come sei riuscito a essere sia veloce che agile.

Riferimento:

posta charlax 27.05.2011 - 19:06
fonte

4 risposte

6

Se intendi gettare il prototipo e ricominciare da capo con l'app reale , ti suggerisco di utilizzare uno strumento come PowerPoint o Balsamiq o anche carta. La bassa fedeltà consente agli utenti di concentrarsi sull'interazione e meno sui colori o sui pulsanti spumanti. In realtà ottieni più nodi più velocemente con meno investimenti di questo tipo.

Se intendi utilizzare il tuo codice come base per un'app reale , ti suggerisco di guardare qualcosa di leggero come Webmatrix o equivalente IDE Ruby / Java. Webmatrix è uno strumento gratuito che è un IDE che ti aiuterà a progettare e mockare il tuo sito molto rapidamente e persino a utilizzare SQL Express, IIS Express e gli altri componenti dello stack Web .NET (tutto gratuito) localmente. Quindi, se decidi di eseguire l'upgrade a Visual Studio in un secondo momento, puoi farlo senza fare nulla alla tua app.

    
risposta data 27.05.2011 - 21:09
fonte
5

Puoi scegliere un prototipo per un'applicazione reale abbastanza rapidamente se scegli gli strumenti giusti. Recentemente ho prototipato uno strumento interno che alla fine sostituirà una raccolta arcaica di schermate che gestiscono i dati interni. Il vecchio sistema non è molto intuitivo ed è estremamente confuso per i nuovi assunti.

La mia pila:

Metti questo sopra un framework MVC e legalo al codice dell'applicazione lato server di tua scelta e puoi essere attivo e funzionante in un giorno.

    
risposta data 01.06.2011 - 06:03
fonte
1

* COME RAPIDAMENTE PROTOTIPO *

Alcune persone sono confuse da questo. Si prega di sopportare con me, ci sono diversi livelli di "velocità" quando si tratta di prototipazione, ma c'è solo uno che è il più veloce - e sarà sempre il più veloce, perché è più vicino al livello di interazione; e questo è il browser.

Come prototipizzare rapidamente?

1 - Prova a trovare tutto ciò che c'è da "Design-In-Browser"      - Gli esperti dicono che il modo migliore per progettare il front end è "arrivare al codice il più velocemente possibile" - Chris Coyier.

2 - Essere rapidi significa riutilizzare.      - Il trucco n. 1 per la prototipazione rapida è ~ "costruire componenti che possono essere costruiti sull'altro componente che hai già costruito."

Esempio:      - Questo può essere come Tabs dimostrato in una pagina      - Grafici dimostrati in un'altra pagina      - Poi combobox ricchi provati in una terza pagina

 - In a fourth page, the three prior prototypes combine into a complex-component.

 Mixing - Components together, is key. 

3 - Per l'amor del cielo, se sei un prototipo veloce - PUO 'ESSERE FANTASTICO. Per favore non illuderti che il codice di formattazione sarà necessario. I prototipi rapidi sono codice clandestino o codice in evoluzione, in entrambi i casi questo può essere risolto o automatizzato molto tempo dopo la revisione del prototipo. Il punto del prototipo è determinare la vitalità architettonica. Stiamo parlando del prodotto minimo vitale nella maggior parte dei casi, quindi ottieni il codice funzionante sulla pagina il più velocemente possibile. Questa è solo la prova del concetto, non la prova nel budino.

4 - Ho menzionato l'automazione, un buon IDE è davvero importante - uno con molti tasti di scelta rapida. "Per prototipare rapidamente - le tue dita devono volare, non il tuo mouse."     - Ma c'è di più. Molti IDE formatteranno il tuo codice per te. Molti sfilaccino mentre lavori, trovando gli errori così come sono fatti, alcuni possono aggiornare il tuo browser al salvataggio. Evidenziazione della sintassi. È semplice ma efficace.

Conclusione: il Rapid Prototyping è una raccolta di questi tipi di tratti di best practice. Nessuno di noi è immediatamente fuori dai cancelli: quindi è un processo di evoluzione accelerare la velocità. Questo è misurato in Agile come velocità. Devi pensare: come andare più veloce, poi piegarti in avanti di più.

** Incorpora ogni ottimizzazione dello sviluppo che puoi nel tempo. ** Costruisci librerie di widget prototipati, tecnologie e cimiteri API. ** Poi quando arriva il momento, duplicali e mescolali insieme - mantenendo gli originali mentre si evolve qualcosa di nuovo. ** Questo è particolarmente vero per molti framework JS.

Spero che ti aiuti.

    
risposta data 06.10.2012 - 11:07
fonte
0

Hai preso in considerazione Bootstrap di Twitter o Yahoo Pure ?

Entrambe sono molto, molto facili da usare e puoi creare interfacce piuttosto complesse solo con quello che ottieni "fuori dalla scatola".

Ho utilizzato Bootstrap per la prototipazione per un lungo periodo di tempo e, il più delle volte, le stesse ossa del prototipo si inseriscono nel prodotto finito.

    
risposta data 31.07.2013 - 18:43
fonte

Leggi altre domande sui tag