it-swarm-pt.com

Quais ferramentas de prototipagem?

Isso está fortemente relacionado à seguinte pergunta:

No entanto, eu não queria limitar as sugestões às ferramentas "Baseadas na Web", encontrei e usei as seguintes ferramentas para prototipagem, wireframing e maquetes no passado com algum sucesso:

Também sei que alguns designers optam por usar aplicativos gráficos, como Photoshop e Illustrator, para a tarefa.

Esta é uma pergunta do Wiki da comunidade. Portanto, poste com seus pensamentos, tente mantê-lo em um pacote por resposta para que possamos criar uma idéia de como a comunidade se sente sobre essas ferramentas.

34
Richard Slater

É importante manter minha prototipagem em pelo menos dois threads e três se estou tentando entender interações detalhadas com animação.

Tópico 1: Fluxo, função, formulário e dados

  • Começando no papel (na verdade geralmente uma sessão de design do quadro branco com outras pessoas). Concentre-se no fluxo da tela e, em seguida, nas principais funções e possíveis layouts de telas particularmente importantes. Tente pelo menos duas idéias diferentes.
  • Próximo nível de fidelidade em Balsamiq. Adicione detalhes funcionais, ajuste o layout, adicione dados de amostra concretos e significativos à tela (no contexto de um cenário demonstrável).
  • Crie um protótipo de fluxo de trabalho reunindo um cenário de caminho único passo a passo com telas e interações esperadas específicas para passar para a próxima tela. Eu costumo usar o PowerPoint, colocando todas as maquetes de tela em sequência. Esse protótipo permite que você receba feedback antecipado de usuários reais por orientações pluralistas , que são muito eficazes para refinar conceitos, fluxos de trabalho, requisitos funcionais, terminologia etc.
  • Itere cedo, frequentemente e rapidamente.

Tópico 2: Programa visual e estilo

  • Usando algumas das principais maquetes do segmento 1, visualize-as (como composições) em detalhes no nível de pixel usando o Photoshop ou algum outro mecanismo semelhante. Explore cor, proporção, metáforas visuais, tipografia, etc. Gere pelo menos três idéias.
  • Obtenha feedback sobre eles independentemente dos protótipos do fluxo de trabalho. Use teste de preferência, teste AB, críticas, charettes etc.
  • Repita e refine.

Tópico 3: Interação e animação detalhadas

  • O foco em uma única interação detalhada ou sequência de animação reúne um protótipo funcional em qualquer ferramenta que funcione melhor para você: HTML/CSS/JS, Flash, linguagens de programação de nível inferior, estruturas/bibliotecas de componentes de interface do usuário, etc. Pelo menos duas interações alternativas .
  • Execute um pequeno número de pequenos testes de usabilidade, incluindo a coleta de dados de tempo. Faça testes comparativos. Contar pressionamentos de tecla/cliques de mouse/gestos.
  • Repita e refine.

Em resumo, crie tipos específicos de protótipos para fins específicos ... para responder a perguntas específicas. Nenhum tipo funciona para todas as situações. Mantenha as preocupações estéticas fora do loop de feedback do fluxo de trabalho/função. Use métodos apropriados e eficazes para os diferentes tipos de perguntas. "Não atravesse as correntes."

Descobri que quase todas as melhorias fundamentais de design vêm do segmento 1 e do segmento 2, mas o segmento 3 é necessário se você estiver indo além dos controles padrão ou se o seu domínio for novo/complexo/específico (por exemplo, interações gestuais, modelo multidimensional) manipulação, controles personalizados para um novo SO sofisticado, otimizando o desempenho humano em alguma dimensão).

35
Jim Jarrett

Lápis é uma boa ferramenta para criar modelos de interface do usuário. Está disponível como addon Firefox ou aplicativo independente .

alt text

Ele tem uma vantagem sobre algumas das outras ferramentas mencionadas porque é gratuito e de código aberto.

12
david4dev

Eu li um artigo muito interessante, há algum tempo, chamado "Esboçar ou não esboçar" - você deve dar uma olhada: pergunta do esboço Sempre que for necessária criatividade, você não deve limitar seus pensamentos com ferramentas você usa. Minha escolha pessoal para limpezas posteriores é uma ferramenta próxima à área com a qual estou lidando. Para HTML/CSS, costumo começar com layouts simples e aumentar os detalhes passo a passo. O mesmo pode ser útil para outras áreas também. Prototipagem de detalhes baixos a altos. Portanto, não tenho uma ferramenta específica para recomendar ... depende.

Portanto, não tenho uma ferramenta específica para recomendar ... depende .

10
Daniel Bleisteiner

Eu pessoalmente uso o Balsamiq nas primeiras revisões e depois vou direto para um protótipo HTML usando uma estrutura CSS como Blueprint .

8
Michael Warkentin

Interessante que Adobe Fireworks tenha recebido pouco amor neste site.

Entre outras coisas, eu gostei

  1. Construindo em diferentes estados
  2. Páginas mestras
  3. Objetos HTML, como links e ícones, podem receber marcações que serão exportadas (links internos e externos, metadados, toda essa bondade)
  4. Exporta layouts baseados em CSS e compatíveis com os padrões com folhas de estilo reais
  5. Integração nativa do Illustrator e Photoshop para logotipos, etc.

Gosto da Balsamiq por enviar uma IA para um cliente e, em seguida, o Fireworks por um protótipo navegável depois que um designer colaborar. O trabalho realizado no Fireworks exporta com facilidade o suficiente para HTML e CSS, que se traduz com facilidade em um site estático completo ou como páginas/temas de modelo para um site dinâmico.

8
Matt

Vou dizer que apenas o papel é a melhor ferramenta de protótipo. Sim, é óbvio, mas é melhor do que começar eletrônico.

  • O artigo diz ao cliente que essa é uma idéia, uma das muitas possíveis.
  • O papel não permite que o cliente seja pego em fontes, cores, formas ou imagens. Existe uma razão para que o balsamiq tenha escolhido wireframes de estilo de esboço.
  • As revisões são rápidas
  • É fácil obter a caligrafia real e não os intimida de desenhar nela.
  • Você pode digitalizá-lo ou enviá-lo por fax, se precisar que ele seja eletrônico.

Sou um grande fã dos protótipos funcionais de html depois, mas o papel reduz a barreira ao brainstorming e testes rápidos da interface do usuário do corredor.

É fácil orientar alguém através de um esboço em papel:

"Where do you click if that transaction was a mistake?"
"Great now what do you do to find out which kitten has the highest durability?"

Se você não começar com esboços e obter alguma validação do usuário, estará pulando a arma e só será mais caro desfazer e iterar mais tarde.

5
MattK

Eu prefiro fazer maquetes da interface do usuário da Web em HTML/CSS.

  1. A criação de protótipos funcionais é uma solução muito melhor porque os usuários obtêm uma experiência real em vez de uma experiência não dimensional (olhando para o Photoshop).

  2. Protótipos funcionais não são um trabalho descartável.

  3. É muito mais rápido repetir um protótipo funcional durante um loop de feedback

4
abrudtkuhl

Eu uso Axure .

Embora muito caro (quase US $ 600 por licença), ele oferece uma flexibilidade incrível e permite personalizar quase tudo.

Ser capaz de usar seus próprios controles (ou modelos), mestres etc. é imprescindível ao criar um aplicativo em vez de um site.

4
Dan Barak

Papel e HTML são os melhores.

Esboços rápidos no papel. Então construa a coisa real em HTML. StaticMatic texto do link é ótimo para prototipagem.

No passado, eu usei o Axure, mas o wireframing é uma perda de tempo.

3
Miki

Eu também votaria no Axure. Nosso escritório usa suas ferramentas de colaboração para dividir responsabilidades entre nossos IAs e designers gráficos.

Embora não seja um Omnigraffle, as opções de wireframing são mais que adequadas. O software possui excelentes funcionalidades de mestrado, para que possamos aumentar rapidamente a fidelidade de um protótipo.

E, como Dan disse, é totalmente personalizável e cria documentos de especificação profissional.

r.

3
Robert Hamburger

Adobe InDesign. Pode parecer um pouco estranho, mas há recursos que eu gosto:

  • Interface no estilo Adobe. Se você trabalhou com o Photoshop ou alguns outros produtos da Adobe, seria muito fácil mudar para o InDesign
  • ferramentas poderosas para trabalhar com tipografia, tabelas, estilos, grades e assim por diante
  • na verdade, você pode criar não apenas uma estrutura de arame, mas também um design gráfico
  • você pode exportar wireframes como PDFs clicáveis
3
Kostya

Concordo com alguns dos amswers acima, mas gostaria de acrescentar mais informações e dicas. Quase inicio todos os projetos com o quadro branco, canetas em cores diferentes e também algum post-it. A maneira mais fácil de comunicar idéias e obter feedback rápido. Dependendo do tipo de projeto, tento esboçar os principais fluxogramas com um programa chamado ano . É uma maneira simples de estruturar as idéias. Se eu tiver um Mac por perto, escolheria OmniGraffle (um programa excelente para mais do que fluxograma).

Continuo fazendo protótipos em Balsamiq , Fluxo de esboço e Illustrator para obter diferentes tipos de protótipos de baixa e alta fidelidade.

Em relação a essas informações, achei adequado ter uma caixa de ferramentas rica para escolher. É importante para mim ser capaz de adotar diferentes abordagens, dependendo do tipo de projeto.

2
Anna

Eu apóio a moção de Daniel Bleisteiner: "Depende".

Para 90% dos projetos, considere meu voto em papel. A justificativa para o papel é abundante nesse segmento, por isso não vou repetir.

O design nunca é o mesmo entre os projetos, e certamente não entre os clientes. (Falo de design no sentido mais vago, ou seja, design, desenvolvimento, prototipagem, wireframing - sejamos honestos, todos estão se fundindo gradualmente.)

Portanto, para os outros 10% dos projetos, a ferramenta de prototipagem dependerá do projeto. Se exigir colaboração de longa distância, o Axure pode ser o melhor. Se for necessário trabalhar com a equipe interna de um cliente que usa principalmente o Adobe, o Fireworks pode ser o melhor. Existem muitas ferramentas. Infelizmente, por definição, as ferramentas não podem se adaptar tão rapidamente quanto os problemas que são criados para resolver; portanto, muitos desses produtos parecem muito semelhantes, mas não completamente idênticos, entre si. E cabe a nós avaliar qual é o melhor para o trabalho.

Pensamento adicional: o iPad está começando a ajudar a embaçar as linhas entre a colaboração pessoal do cliente e o cliente pessoal, observe-o por cima do ombro. Omnigraffle, SketchBook, TouchDraw, Draft e outros aplicativos para iPad estão abrindo caminho para uma experiência de colaboração aprimorada. (Falo da melhoria como um trabalho em direção ao objetivo final de fazer com que um cliente se sinta tão confortável desenhando em um iPad quanto no papel, cuja vantagem é que o cliente pode estar usando um protótipo funcional em vez de uma página estática. objetivo final é apenas a minha opinião.)

2
Tyler Hayes

Eu sigo estas etapas ...

1. Prototipagem. Eu uso Balsamiq Mockups porque é fácil. O ponto principal da prototipagem é descobrir o layout básico das coisas. Este é o estágio em que você está fazendo mudanças drásticas. Felizmente, o Balsamiq não finge ser algo que não é e continua sendo extremamente fácil de usar. É mais rápido para mim usar o Balsamiq do que desenhá-lo. E vem com o benefício de poder arrastar elementos pela tela em vez de apagá-los e redesenha-los.

2. Finalize o design. Eu uso o Photoshop e algumas vezes um pouco de ilustrador para que eu possa aperfeiçoar os gráficos antes de escrever qualquer código.

É mais difícil fazer mudanças drásticas no seu design no Photoshop, pois tendemos a nos empolgar com a perfeição de pixels. E ainda é mais difícil quando está no seu aplicativo. Portanto, esta é a razão da minha progressão e por que começo com a ferramenta mais fácil possível ... Balsamiq.

2
Steve Wortham

Eu sou um bloco de desenho/lápis primeiro e Balsamiq - segundo tipo de cara. Depois, o Photoshop detalha os detalhes até que haja o suficiente para pular em HTML e CSS.

1
blackant

Balsamiq. É bom também para software baseado em desktop e é muito fácil de aprender.

1
franz976

Também vale a pena conferir gomockingbird que está saindo da versão beta

1
Paul McKeever

A agência interativa de minha esposa teve sucesso com:

http://www.mockflow.com/

Início rápido e uma quantidade razoável de controles e telas integrados para protótipos e wireframes.

1
noluckmurphy

A pergunta menciona a necessidade de uma ferramenta de prototipagem, mas não o quão realista seu protótipo precisa ser. Para um protótipo esboçado de estrutura de arame, concordo com a maioria dos comentários aqui de que caneta/papel, Balsamiq ou mesmo Visio são boas ferramentas. No entanto, quando você precisar de um protótipo de aparência mais realista, isso não funcionará e, então, sugiro que você analise pessoas como Axure ou Adobe Fireworks/Catalyst (o iRise é muito caro) e, mesmo tendo seus problemas, eu procuraria o Axure .

0
Geert

Eu também uso o Pencil, embora tenha algumas desvantagens:

  • sem manipulação de dados da tabela: se você deseja criar uma estrutura de tabela, está perdido.
  • wordWrap nas caixas de texto. Ao tentar colocar um lorem ipsum, eu mesmo tenho que fazer o embrulho. Isso é péssimo.

no entanto, gosto muito desta ferramenta.

0
cukabeka

Às vezes eu uso esta ferramenta http://www.hotgloo.com/

0
512x512

Como sua pergunta foi especificamente sobre prototipagem, suponho que você esteja executando as etapas que julgar necessárias antes da prototipagem, como esboços etc.

Se o seu produto for entregue via Web, crie seus protótipos usando a Web (HTML, CSS, JS). No final, é mais rápido, mais barato e mais preciso do que qualquer outra coisa que você possa usar. Descobri que ferramentas como o Axure são adequadas para coisas simples, mas exigem uma curva de aprendizado acentuada para fazer algo moderadamente complexo. Nesse momento, você está gastando tempo aprendendo uma ferramenta proprietária quando pode aprender os padrões da Web que serão mais benéficos para você a longo prazo.

Se você está preocupado com o fato de um cliente pensar que está "pronto", você pode deixar de lado o estilo até o final. No entanto, eu descobri que quanto mais "real" for o seu protótipo, mais facilmente ele será avaliado.

0
Craig Villamor

Realmente depende do que é o projeto.

Se o site que você está criando um protótipo terá apenas algumas páginas com conteúdo estático, provavelmente usar um editor de gráficos como o Photoshop ou o Fireworks será bom. O conselho para manter os elementos de design fora da prototipagem "a todo custo" pode não ser apropriado aqui.

No entanto, no outro extremo do espectro em que você está criando um aplicativo grande com muitos casos de uso, eu recomendaria algo mais como a resposta de Jim Jarrett. Eu acrescentaria que os aplicativos em larga escala são (ou pelo menos deveriam ser) um processo iterativo: você fará o protótipo para a fase I e depois o protótipo novamente para uma versão da fase II, etc. Cada uma dessas fases da prototipagem pode exigir diferentes níveis de detalhe . Você pode querer trabalhar a partir da construção/protótipo da fase atual ou talvez seja hora de voltar aos primeiros princípios e começar do zero.

0
skybondsor

O Axure é uma excelente ferramenta de wireframing/prototipagem/especificação. Ele permite que você se concentre no que está criando e facilita a especificação de anotações, notas, interações.

A vantagem é que, quando você especifica interações, quando gera protótipos a partir de seus wireframes, essas interações se traduzem em widgets reais. (Axure gera protótipos HTML)

Você também pode criar um design de tela (em JPEG, por exemplo), importar a imagem, ativar áreas da imagem usando a ferramenta "mapa de imagem" e, em seguida, efetivamente ter um protótipo de maior fidelidade!

O Axure também permite criar ações com base em variáveis ​​(você pode configurá-las ou lê-las). Há também o conceito de obter um widget para gerar um evento, você pode fazer com que outro widget ouça o evento e esse widget possa responder de alguma forma.

Eu posso continuar ... O lado negativo é o custo ~ $ 550, mas a economia de tempo vale totalmente a pena. O suporte ao cliente, via email, é ótimo; eles geralmente voltam para mim dentro de algumas horas ... às vezes imediatamente.

0
milesmeow

Achei o Mockingbird ok para quadros de arame simples. Ele não vai me deixar sair do oniigráfico tão cedo, mas é muito bom para uma ferramenta baseada na Web: http://gomockingbird.com/

0
fluxd

Dê uma olhada em App Sketcher (atualmente no candidato a lançamento) para ver se ele se adapta às suas necessidades. É uma ferramenta rápida de prototipagem HTML para criar protótipos de wireframe e aplicativos da web interativos. Ele usa um navegador WebKit incorporado como superfície de design, onde você pode adicionar componentes HTML, componentes da interface do usuário do jQuery, widgets da web (como Google Maps e YouTube player) e estilizá-los com tema jQuery e propriedades CSS. Ações simples também podem ser definidas. Os usuários podem executar/testar o protótipo no navegador padrão e exportar a fonte HTML/CSS/JavaScript assim que estiverem satisfeitos com o design. Essa ferramenta é mais voltada para a experiência do Axure, mas enfatiza o "design no navegador para execução no navegador", pois garante que os modelos/wireframes sejam realizáveis ​​na fase de desenvolvimento com as tecnologias da web.

Eu sou o desenvolvedor deste aplicativo. Sinto muito por essa autopromoção desavergonhada. No entanto, acho que pode ser uma boa ferramenta de prototipagem HTML e vale a pena dar uma olhada.

0
Feng Chen