it-swarm-eu.dev

Quali strumenti (idealmente convenienti) la gente consiglierebbe per creare un wireframe di siti Web?

Quali strumenti (idealmente convenienti) la gente consiglierebbe per creare un wireframe di siti Web? Quali strumenti hai usato e li hai trovati meglio di carta e penna?

33
James Page

Al giorno d'oggi usiamo Balsamiq Mockups religiosamente. È uno strumento così rapido per creare rapidamente contorni approssimativi e persino semplici procedure interattive. È molto economico e ha una prova gratuita ma rilascia anche licenze gratuite a progetti della comunità. Prova la versione desktop, la stiamo usando da alcuni mesi e la rendiamo parte del nostro processo di specifica e prototipazione.

27
DannyT

La carta è relativamente economica in questi giorni.

Inoltre, preferisco le matite a causa del loro pulsante di annullamento in gomma.

27
KevBurnsJr

Mi ritrovo a usare carta e penna semplici per disegnare rapidamente alcuni wireframe e poi passare al prototipo html/css. Soprattutto dal momento che sono un buon integratore, la prototipazione anticipata è più semplice rispetto all'utilizzo di software complessi per il wireframe.

Altrimenti, consiglierei Omnigraffle, non troppo costoso e con gli stampini giusti, fa un ottimo lavoro. Linky . È utile sia per il wireframing che per il sitemapping.

12

Sono d'accordo con alcuni degli altri poster qui. Carta e matita (o penna o pennarello) sono il modo migliore e più economico per iniziare la prototipazione. Non c'è motivo di usare qualcosa come Photoshop, perché non stai realizzando un progetto completo. I vari pacchetti software specifici per prototipi e prototipi sono tutti belli, ma possono diventare molto costosi e inoltre non aggiungono molto oltre ciò che la carta può fare per te. Direi che raramente sono ancora più efficienti dal punto di vista temporale.

Se vuoi andare con un'applicazione di prototipazione, penso che l'opzione migliore in circolazione sia Axure. Non sono eccessivamente costosi e hanno una grande quantità di funzionalità. E puoi provare il software gratuitamente per 30 giorni (e penso che sia perfettamente funzionante anche in quel periodo).

Sconsiglierei di usare HTML/CSS per i tuoi prototipi a meno che tu non sappia che le persone per le quali stai creando i prototipi capiscono completamente la differenza tra un prototipo HTML e un sito funzionante. In genere, accade una delle due cose:

  1. Si concentrano sull'estetica anziché sulla funzionalità, perché "è già un sito Web, quindi dovrebbe avere un bell'aspetto".
  2. Non capiscono perché non puoi semplicemente finirlo un paio di giorni dopo aver mostrato loro il prototipo, perché "il sito sta già funzionando, dobbiamo solo renderlo più bello". Ci vuole un lotto di lavoro per convincere le persone non tecniche a capire la differenza tra un prototipo HTML e un sito funzionante.

Per quanto riguarda PowerPoint - a mio avviso, questa è una delle applicazioni più abusate e abusate in circolazione. Non riesco a contare il numero di volte in cui ho ricevuto una presentazione di PowerPoint come allegato come unico mezzo per annunciare qualcosa da una persona delle risorse umane. Usarlo per la prototipazione è sulla stessa linea. Non è stato progettato per questo e non ha davvero gli strumenti per renderlo efficace per la prototipazione.

12
Charles Boyung

Uso principalmente un quaderno per delineare idee super ruvide, quindi uso Omnigraffle con gli stencil Konigi.com per realizzare i modelli reali.

Se sto facendo i test WoZ, allora faccio tutto su carta con elementi del browser stampati.

9
BJ Clark

Alla conferenza UPA di un anno e mezzo fa, ero in una sessione in cui le persone discutevano di strumenti: HTML vs Axure vs Balsamiq vs FlairBuilder per la prototipazione.

Axure e Balsamiq hanno ottenuto alcuni voti. FlairBuilder ottiene il mio voto.

Stavo live-twitter e qualcuno al di fuori della sessione ha suggerito di scaricare e provare la demo di FlairBuilder. Lo abbiamo fatto al volo e siamo stati immediatamente in grado di usarlo senza alcuna esperienza precedente. FlairBuilder ha lo stesso prezzo di Balsamiq e ognuno aveva alcune caratteristiche che l'altro non aveva. Ad esempio, FlairBuilder offre contenuti multimediali in diretta, anche da YouTube, che è stato importante per alcuni partecipanti e non per altri.

Durante la discussione, un partecipante ha affermato che "Visio è un incubo", e mentre penso che sia un'affermazione forte, mi viene richiesto di usarlo sul lavoro e mi ritrovo a "combattere" Visio (cioè sprecare il mio tempo).

Alla conferenza Microsoft stava dimostrando un nuovo strumento di progettazione/disegno che produce prototipi a bassa fedeltà, ma con un prezzo più elevato. Dimentico il nome del prodotto [modifica: è SketchFlow ], ma la demo è stata impressionante, "come ci si aspetterebbe da una demo", ha aggiunto cinicamente. Questo prodotto non è stato discusso nella sessione di discussione che ho descritto sopra [modifica: perché non è stato ancora rilasciato].

Consiglio di provare FlairBuilder , perché è facile da usare e da imparare, soprattutto se inizi modificando il progetto di esempio. Dovrai trascurare il frequente "Comprami subito!" messaggio nella versione di prova gratuita.

Non sono affiliato né pagato da alcun prodotto menzionato sopra.

8
JeromeR

Ho tenuto colloqui con:

FlairBuilder Balsmiq Axure SketchFlow PowerPoint Fireworks

Personalmente, inizio su una lavagna. Penso che FlairBuilder e Balsmiq siano entrambi estremamente facili da usare, forse il più semplice.

Penso che Axure sia davvero potente, ma non altrettanto amichevole.

Penso che PowerPoint funzioni quando stai cercando di fare qualcosa di veramente veloce su un PC casuale.

Il mio preferito è SketchFlow a causa del modo in cui collegano le pagine e della sua capacità di creare comportamenti e trasformarsi in un prototipo funzionante a tutti gli effetti (davvero ad alta fedeltà) che può fungere da codice iniziale di un'applicazione Silverlight o un fantastico documento per un team di sviluppo su un'altra tecnologia.

Mi piace anche l'acquisizione e la progettazione di animazioni, nonché la costruzione del comportamento/controllo rispetto agli altri programmi che utilizzano solo controlli personalizzati pre-progettati o a bassa fedeltà.

8
Chris Kluis

Fireworks è uno strumento straordinario che viene spesso trascurato: è davvero maturato soprattutto per fare molta documentazione e stati.

Il principale vantaggio di Fireworks rispetto ad altre soluzioni è che può essere utilizzato per Webapp non solo per pagine Web. C'è un'enorme differenza nel livello di complessità che deve essere cablato tra i due; questo spesso non viene considerato nella maggior parte degli strumenti di wireframing.

7
Mike Cuesta

Ho usato seriamente Visio, Illustrator, Axure RP Pro, OmniGraffle, Balsamiq Mockup e ho provato tutte le app basate sul web. Ho anche realizzato prototipi HTML e prototipi cartacei.

Quello che trovo funziona ancora più efficacemente è lo sketchiing su carta, perfezionare in OmniGraffle o andare direttamente ai modelli in HTML. Ciò che scelgo di consegnare dipende da chi è il documento di progettazione e da quale scopo. Principalmente scelgo OmniGraffle per la velocità o invio schizzi e HTML. La dichiarazione di non responsabilità è che mi trovo in un designer UI interno.

7
jibbajabba

Tendo ad afferrare una penna Stabilo Poit 88, qualunque sia il colore che mi piace e scampare le idee su un blocco da disegno wireframe del mio design (6 x su A4 orizzontale).

Ho anche scoperto che se tagli un blocco di note Post-It quadrate, riduci alla larghezza di 2/3 funziona bene: ti costringe a non rimanere bloccato nei dettagli, ma a concentrarti sulla pagina complessiva.

Quindi vado su alcune aree con un colore diverso per creare un punto di interesse/azione. Quindi disegno più dettagli su una scala più grande (2 x su in orizzontale A4).

Una volta soddisfatto della direzione e dei concetti, mi sposto su OmniGraffle, usando un modello personale e vari stencil (prova Konigi.com e graffletopia.com). Se qualcosa mi fa inciampare in questa fase, è tornato alla carta e penna.

Infine, salvo il mio documento Omni come PDF contenente collegamenti cliccabili.

7
DereckJohnson

Puoi provare il nuovo strumento Blend SketchFlow di Microsoft. È incredibilmente potente, ma può essere un po 'difficile da avvicinare (prova lateralmente e con una fetta di limone).

Può generare prototipi visualizzabili sul Web (utilizzando Silverlight) o un'app desktop di Windows utilizzando WPF con un sistema di navigazione completo e credo che possa tracciare gli utenti. Può anche registrare i commenti degli utenti mentre lo stanno attraversando ...

6
Kieron

Personalmente uso Pen and Paper (mi piace particolarmente carta millimetrata wireframe di konigi ) quindi renderizzata in Visio, con i modelli wireframe Lombardi e gli stampini wirefame di Nick Fink (entrambi gratuiti). Quindi, a parte il costo di MS Visio, mi va bene.

In passato ho anche usato:

  • PowerPoint per creare wireframe "cliccabili" ma mai arrabbiati.
  • Axure per generare prototipi rapidi ma la versione che ho usato non ha fatto un lavoro di collasso del pannello dinamico quando gli stati erano altezze diverse (potrebbe essere migliore adesso)

Opaco

5
Matt Goddard

Mi occupo di usare carta e matita (in realtà un pennarello e carta). Ottengo l'aspetto generale delle cose dopo che decido quali elementi sono più importanti e poi semplicemente direttamente in HTML.

Ho usato Photoshop, Balsamiq e Omnigraffle prima, ma mi sono sempre sentito come se stessi sprecando il mio tempo perché non importa quanto fossero belli, dovrei ricominciare tutto da capo quando sono arrivato al markup.

Mi sono sentito molto meglio a accartocciare un pezzo di carta su cui ho lavorato per 10 minuti rispetto a quando ho sentito di eliminare un file Omnigraffle su cui ho lavorato per alcune ore.

5
kevinholesh

Sono stato un utente di PowerPoint per qualche tempo, ma mi sono stancato delle sue funzionalità limitate e del fatto che non sono interattivi ..

Sebbene non sia l'opzione più economica, devo dire che pidoco sembra essere una delle migliori soluzioni di strumenti wireframe per le mie esigenze dal momento che sono basate su browser e mi permettono di esportare in vari formati e di riesaminare rapidamente il mio lavoro. Sì, le funzionalità di recensione sono davvero interessanti ..

Sicuramente ci sono molti buoni strumenti di simulazione in giro, ma mancano per lo più portabilità..anche sì, pidoco è la soluzione per me finora!

5
Valentino

Usiamo Adobe InDesign. Può sembrare strano ma ci sono delle caratteristiche che mi piacciono:

  • ha un'interfaccia "in stile Adobe". Se hai lavorato con Photoshop o altri prodotti Adobe, sarebbe facile imparare a usare InDesign
  • può esportare i tuoi wireframe come PDF cliccabili
  • ha potenti capacità di lavorare con tipografia, tabelle, stili, griglie e così via
  • è facile creare non solo un semplice wireframe ma anche un design visivo complesso, se necessario
5
Kostya

Pencil per FireFox è un plugin gratuito e può essere eseguito anche come strumento autonomo.

Il prossimo è qualcosa come Open Office Draw (anche gratuito).

Anche carta e penna sono buone.

Puoi anche provare qualcosa come FlairBuilder che è un'app AIR.

4
Jason Grant

Usando Photoshop, modifico il .psd nella griglia 960 ( http://960.gs/ ) per creare i wireframe.

4
Nitish

Sono abbastanza felice di iniziare con gli schizzi a matita e poi passare a OmniGraffle.

Abbiamo usato anche FlairBuilder. È decente per wireframe e prototipi molto semplici, ma abbiamo incontrato una serie di limitazioni. Mentre continuavamo ad aggiornare il prototipo, abbiamo scoperto che è diventato dolorosamente lento. Stiamo prendendo in considerazione Axure per la prototipazione.

4
Jeff Van Campen

Uso Post-it per la struttura e il layout generale, quindi passo a Balsamiq Mockups o OmniGraffle e per i prototipi ad alta fedeltà, niente batte Apple Keynote. :)

4
Martin

Non posso dire abbastanza cose positive di http://hello.hotgloo.com/ L'ho usato per l'inquadramento di filo collaborativo ed è fantastico.

Oh ed è gratuito mentre sono in beta.

3
MatthewFord

Adoro iPlotz. Alcune delle caratteristiche che mi hanno venduto:

  • ! Affordable
  • Gestione dei compiti
  • Prototipi cliccabili
  • Esporta in immagine o PDF
  • Funzionalità di condivisione e commento
  • Interfaccia utente semplice con numerosi widget disponibili
  • Skin per sketch, Windows e Mac

Prima di iPlotz, ho usato Photoshop.

  • Candace
3
Candace

Uso i prototipi di Balsamiq per Wireframes. Se il design è interattivo, utilizzo PowerPoint. Per i modelli ad alta fedeltà, PowerPoint è il re.

3
Sushant Anand

A proposito degli strumenti di prototipazione ad alta fedeltà, ci sono quelli che ti permettono di simulare progetti ed effetti quasi finali, come iRise e Justinmind Prototyper . Questi non ti consentono semplicemente di disegnare il wireframe, ma di incorporare video, creare interazioni complesse (come la compilazione dei moduli e l'uso dei dati) e sono meglio creare specifiche e test utente.

Sono un passo avanti rispetto ai semplici strumenti di disegno come Visio, OG o Balsamiq.

3
Alex

Abbiamo provato diversi strumenti di wireframing, ma abbiamo optato per pidoco.com poiché ha alcune cose utili per i test di usabilità integrate ed è tutto online.

3
Chris Michael

Fuochi d'artificio, le mani verso il basso è uno dei migliori strumenti là fuori; non solo per il wireframing ma per il passaggio da wireframe a mockup ed esportazione di prototipi HTML interattivi.

Offre una libreria di componenti Nice. Gli strumenti sono facili da capire. Supporta pagine e stati.

Potrebbe non essere la scelta più economica, ma in tutta onestà è uno dei migliori strumenti là fuori.

3
Jeremy D Johnson

Ho usato (e ne sono rimasto molto colpito) i prototipi di Balsamiq, ma come dice Nathanel, ha alcune limitazioni.

Non sono sicuro di averlo visto o meno ma Sitepoint ha pubblicato questo qualche mese fa, ma probabilmente è ancora pertinente. Potrebbero essere alcune cose che meritano un'indagine più dettagliata.

2
Sam K

Come la maggior parte delle persone qui sembra, io uso Balsamiq per eseguire al volo modelli approssimativi, ma i limiti dell'interfaccia (e la tendenza occasionale a bloccarsi) impongono che per lavori di wireframing più solidi uso Omnigraffle, di solito con gli stencil Konigi ma sempre più anche con il mio. Trovo che una volta investito il tempo necessario per abituarsi alla creazione di modelli e stencil, nonché alla padronanza di livelli e variabili condivisi, Omnigraffle è la combinazione perfetta di applicazione potente, ricca di funzionalità e produzione rapida/semplice. L'unico inconveniente ovviamente è che non puoi facilmente condividerlo con le persone di Visio. Dicono che puoi usare le esportazioni di file basate su XML supportate da entrambi i pacchetti, ma non funziona mai in modo impeccabile e ti ritrovi a risolvere manualmente tutti i problemi.

2
theothermatt

Ti suggerisco di dare un'occhiata a EightShapes Unify ( http://unify.eightshapes.com/ ) ... Ho appena iniziato a guardarlo e non ho avuto un nuovo progetto da provare con, ma sembra davvero un framework killer per Wireframes e altri prodotti di design.

PS È totalmente gratuito ma per utilizzarlo è necessario Adobe InDesign.

2
Michael

Sono passato da Balsamiq + Napkee a iPlotz: lo adoro assolutamente, dal momento che puoi creare un prototipo approssimativo funzionante mentre fai i tuoi modelli senza lavoro extra. Ho fatto un writeup su questo qui: http://www.snipe.net/2010/02/wireframes/

2
snipe

Come tutte le cose, questo dipende da ciò che speri di ottenere.

Ho usato PowerPoint per molto tempo e questo andava bene.

Lo strumento di wireframing più completo che ho incontrato è Axure (http://www.axure.com/) che è ottimo per creare wireframe navigabili ad alta fedeltà. Inoltre è stato recentemente lanciato per Mac.

Trovo Balsmiq (http://www.balsamiq.com/products/mockups) un po 'complicato, anche se mi piace l'approccio' sketch 'come se tu stessi cercando un feedback, ho trovato che qualcosa di più lucido sembra, meno probabile devi ricevere feedback a causa della paura che sia troppo lontano.

http://gomockingbird.com/ è un ottimo strumento gratuito, ma abbastanza semplice.

Se hai un Mac, Omnigraffle è eccezionale e puoi scaricare una gamma di stencil gratuiti da http://graffletopia.com/

Ma non sottovalutare mai il potere di carta e penna: questo è di gran lunga il migliore per sfornare idee rapidamente

2
Mike Clarke

Questo post sul blog sull'utilizzo dei documenti di Google, i disegni di Google sembra intrigante:

http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/

2
Michael Mistak

Gli strumenti più adatti per il wireframing e la prototipazione dipendono in gran parte ad es. sulla struttura del tuo team (interoperabilità, condivisibilità, ...), lo stato del progetto (=> necessaria fedeltà visiva e funzionale) e il tipo di stakeholder a cui devi comunicare il tuo progetto. Se lavori almeno in parte in remoto con un team distribuito, i requisiti sono piuttosto diversi rispetto a quelli che hanno tutti sul posto. Ulteriori influencer comprendono ad es. editing distribuito e versioning. (IMHO, il libro di Zaki Warfel sulla prototipazione fornisce un utile punto di partenza quando è necessario valutare alternative.)

Il mio flusso di lavoro ruota principalmente attorno alla carta (schizzi a mano libera, schizzi con modelli di griglia di base, a volte stencil di cartone per elementi spesso usati, ...) e poi molto spesso OmniGraffle in una fase successiva, a volte integrata da Indesign, Fireworks (solo con alcuni client, se sono richiesti comp hifi, altrimenti le sue prestazioni della GUI sono un PITA importante) o Keynote (ottimo se hai bisogno di tutti i tipi di transizioni). Attualmente sto valutando la possibilità di migrare verso Axure RP. Passare prototipi cartacei e mockup cliccabili attualmente lascia sostanzialmente il formato nativo, ovvero il più delle volte HTML/JS (incl. JQuery). Balsamiq e altre soluzioni basate su browser o RIA finora mi sono sentito troppo lento e imbarazzante per me, non riesco proprio a entrare in flusso con loro. (Tuttavia, le funzionalità di collaborazione e test di Pidoco potrebbero essere interessanti in determinate circostanze.)

2

Uso Gliffy (strumento online) per semplici wireframe

1
Maikel

Mockingbird è uno strumento online che ti semplifica la creazione, il collegamento, l'anteprima e la condivisione di modelli del tuo sito Web o della tua applicazione.

È ancora all'inizio della beta e non sono sicuro del prezzo, ma vale la pena tenerlo d'occhio. È un'app Web scritta in Cappuccino, quindi non è necessario Flash ...

Saluti R

1
richcb

Sebbene sia sicuro che molti di questi strumenti siano molto migliori, ecco una soluzione "a bassa tecnologia" (dato che hai PowerPoint) http://www.raizlabs.com/blog/294/wireframing-in Powerpoint

1
user628

Inserimento di una risorsa in ** per supportare lo sketch come un ottimo strumento di wireframing:

50 risorse di sketch per i progettisti dell'esperienza utente ** che include lo sketch:

  • articoli
  • utensili
  • modelli
  • presentazioni
  • video
  • libri
  • esempi
1
Nathalie C

Firefox Pencil Plugin è un altro strumento da verificare.

http://pencil.evolus.vn/en-US/Home.aspx

È gratuito, ha un bel set base di stencil e alcuni stencil abbozzati. È possibile eseguire alcuni modelli approssimativi abbastanza rapidamente. Non tanti stencil come altri strumenti, ma funziona abbastanza bene.

1
George

Uso Axure e ne sono soddisfatto. Avrò alcune idee di sviluppo, per rendere l'usabilità del programma più conveniente e più veloce. Ad esempio mancano le funzionalità quando si tratta di testo (allineamenti, allineamento testo-immagine, ecc.)

Non ho ancora provato altre cose!

1
Roland Pokornyik

WireframeSketcher è uno strumento software che consente di creare rapidamente wireframe, prototipi e prototipi per applicazioni desktop, Web e mobili. Viene fornito sia come plug-in per qualsiasi IDE basato su Eclipse sia come versione standalone.

WireframeSketcher Website Mockup

1
Peter Severin

Uso Justinmind, eccezionale per wireframe e prototipo di siti Web dinamici (eventi simili a JS e integrazione dei tuoi dati) senza codifica (anche le interazioni vengono trascinate).

Offrono anche un servizio per condividere i tuoi wireframe online in modo che le persone possano commentare direttamente gli elementi e puoi persino eseguire test utente in quanto integra la maggior parte degli strumenti di test utente (clicktale, userzoom, google analytics ...).

http://www.justinmind.com

1
Etienne

Ho trovato MS Visio molto flessibile se hai i giusti file di supporto. Io uso...

Visio - la pistola sparachiodi del designer dell'interazione (3a edizione)
Widget web di base nelle versioni standard e "abbozzate"

Suggerimenti e trucchi per Visio per i progettisti di interazioni
Macro che rendono molto più facile lavorare con Visio. In particolare, la copia di pagine e copia/incolla elementi "sul posto".

1
smallclub

Ecco uno strumento online che ha un piano gratuito oltre a uno veramente economico a $ 50/anno: http: //www.mockflow. com /

0
John Sanford

Mi sto stancando abbastanza della gente che dice che usano solo carta e penna.

Se riesci a creare strutture complesse con carta e penna, allora non sei efficiente o non riutilizzi mai i moduli di progetti precedenti o questo è il tuo primo;)

L'intero punto con uno strumento per lo schizzo deve essere quello di creare una libreria di modelli e utilizzarla in modo da poterti concentrare sui bit del progetto che sono interessanti e innovativi anziché sulle parti noiose che hai fatto tante volte in precedenza.

L'intero "Uso solo carta e penna" mi ricorda i giorni in cui ogni programmatore HTML con qualsiasi orgoglio affermava di non aver mai usato nient'altro che il blocco note per codificare. Ok, gli strumenti del giorno erano cattivi (ricordi Frontpage?) - ma comunque ...

Comon! Ovviamente usi carta e penna a volte, ma seriamente, quando le persone chiedono consigli sugli strumenti - non prenderli in giro suggerendo carta e penna - non pensi di sapere di carta e penna prima di porre la domanda?

Uso Axure. Non è carino ma fa il lavoro.

(Non farmi iniziare su quelli che dicono di saltare direttamente all'HTML. Sono peggio della carta e penna ppl.)

0
Haakon Halvorsen

Uso ForeUI che è un ottimo strumento per la creazione di prototipi, in cui è possibile aggiungere comportamenti per simulare comportamenti di sistema piuttosto complessi. - Se è necessario per il tuo prototipo.

Il prototipo DHTML può essere esportato ed eseguito in qualsiasi browser, che supporta Java, e può essere facilmente condiviso con colleghi e clienti.

Sto progettando software per Windows, ma ForeUI può essere utilizzato per qualsiasi cosa, incluso il web.

Funziona su Windows, Mac, Linux e Solaris e il prezzo è di $ 99. Di solito una nuova versione viene rilasciata ogni due settimane. Maggiori dettagli su www.foreui.com.

0
Ulrich Böttger

Vorrei aggiungere un costruttore MockUp GRATUITO, VELOCE, DI BASE, ONLINE: (Silverlight richiesto) http://www.mockupbuilder.com/App

Lo uso quando ho bisogno di qualcosa di bozza, veloce, online!

0