Qual software é melhor para o design da GUI?


9

Eu usei o Photoshop extensivamente, mas o fato é que é uma ferramenta de edição de fotos. Possui alguns efeitos complicados, como a sombra projetada e os brilhos interno e externo, etc., mas não é suficiente ao projetar uma interface gráfica. Você não pode adicionar vários gradientes editáveis, por exemplo. E você precisa enganar as ferramentas para obter o efeito desejado, quando elas não foram projetadas para isso.

Também comecei a usar o Fireworks, e há algumas coisas que eu gosto, como poder alterar as curvas em um retângulo arredondado, mas o seletor de cores desse programa simplesmente não é utilizável. Quando você entra no seletor de cores do mac, ele diz que a cor é algo diferente do que é, devido ao Fireworks não manipular corretamente os perfis de cores. Isso torna o ajuste de cores um processo muito difícil. E o software como um todo parece uma versão de pré-lançamento (e talvez deva ser).

Então, eu estou querendo saber qual software todos recomendariam para criar uma GUI? Deve haver algum software por aí que permita que você tenha uma variedade de efeitos editáveis ​​que podem ser alterados, alterados na ordem, movimentados a qualquer momento, juntamente com todas as outras ferramentas necessárias para criar ótimos gráficos.


Com base em todas as respostas aqui, precisamos que você esclareça a pergunta. Eu acredito que você está pedindo um software para criar os elementos reais da GUI ... ícones, botões, etc. Ou você está perguntando sobre wireframing?
DA01 13/02/12

Respostas:


7

Não há "melhor" software universal para design de GUI. Depende apenas das suas preferências de software / fluxo de trabalho.

Photoshop

Não sei ao certo o que você quer dizer com "vários gradientes editáveis", mas se você sabe o que está fazendo, o Photoshop fornece todas as ferramentas necessárias para projetar qualquer GUI que você possa imaginar. Não é necessário "truque" de ferramentas.

Apesar do nome, o Photoshop evoluiu muito além de ser uma ferramenta simples de edição / manipulação de fotos, e não há razão para que você não possa criar um design de GUI nele. O Photoshop provavelmente fornece o conjunto mais abrangente de ferramentas de edição de imagens rasterizadas de qualquer programa gráfico do mercado, e é usado para tudo, desde pintura digital a coloração de quadrinhos, ilustração, design de Web e UI, produção de vídeo e criação de jogos em 3D e até fotos. forense.

Recursos como máscaras de ajuste, estilos de camada, caminhos de vetor, objetos inteligentes, composições de camada etc. o tornam uma escolha natural para o design da interface do usuário para aqueles que já estão familiarizados com sua interface e conjunto de recursos profundos. Outra vantagem é que ele está bem integrado a ferramentas como Illustrator, Flash Catalyst e muitos aplicativos / plugins de terceiros.

Fogos de artifício

Muitas pessoas preferem o Fireworks para o design da web, pois foi para isso que ele foi projetado especificamente e, por esse motivo, também é uma boa ferramenta para o design da GUI. Sendo páginas, símbolos e estilos orientados a objetos e de suporte, o Fireworks se presta muito bem a um fluxo de trabalho de design de UX. Muitas pessoas também acham que o Fireworks oferece um melhor controle perfeito em pixels, sem recorrer a réguas, guias ou ferramentas de medição.

Além disso, o Fireworks possui muitos recursos interessantes, como pontilhamento gradiente, amostras ASE e, de certa forma, melhor controle tipográfico do que o Photoshop. A camada da Web do Fireworks e sua integração com o Device Central da Adobe também facilitam o protótipo rápido para vários dispositivos.

Ilustrador

Outro aplicativo popular entre os designers de UX é o Illustrator, que compartilha muitos pontos fortes com o Fireworks. Como o Fireworks, ele suporta símbolos, estilos avançados de objetos, várias pranchetas (semelhantes às páginas) e ainda melhores recursos de edição de vetores.

O Photoshop, o Fireworks, o Illustrator e o InDesign têm kits de wireframe / estêncil e modelos de UX disponíveis na Web, mas o design modular de UX é mais fácil no Illustrator e no Fireworks, devido ao seu suporte a bibliotecas de símbolos reutilizáveis.

O Illustrator também suporta estilos de caracteres e parágrafos, tornando seus recursos de design de tipografia muito superiores ao Photoshop ou Fireworks. Além disso, o Illustrator é excelente para ilustração; portanto, qualquer ícone ou gráfico da Web que você queira criar pode ser criado no mesmo programa.

InDesign

O InDesign é outro aplicativo muito popular entre IAs, IxDs etc. Seus recursos de design gráfico podem ser limitados, mas seu suporte a páginas, estilos de parágrafos e caracteres, snippets e bibliotecas de objetos o tornam ideal para muitas tarefas de design de UX. O InDesign também possui instalações de composição de texto muito avançadas e suporta layouts de grade. Isso, junto com a integração do InCopy e o Adobe Digital Publishing Suite, o torna uma escolha natural para empresas de mídia impressa que desejam criar aplicativos móveis para suas revistas.


Mas, no final das contas, toda ferramenta tem seus pontos fortes e fracos. Os aplicativos mais específicos de UX, como Axure, Balsamiq, OmniGraffle, etc., possuem muitos ótimos recursos específicos de UX para layout / estrutura de arame / design de interação. Mas no final do dia, você ainda precisa projetar os gráficos para a interface do usuário, para as quais são necessárias ferramentas de design gráfico, como Photoshop / Fireworks / Illustrator.

É por isso que a maioria dos fluxos de trabalho de design de interface do usuário inclui mais de um aplicativo. Portanto, a menos que você se preocupe apenas com uma única parte do processo de design da interface do usuário, por exemplo, wireframing ou construção da biblioteca UX ou prototipagem, não haverá um "melhor software" único.


2

O Pencil é uma ferramenta de design de GUI pequena e fácil de usar.

Top features:
Built-in stencils for diagraming and prototyping
Multi-page document with background page
Inter-page linkings!
On-screen text editing with rich-text supports
Exporting to HTML, PNG, Openoffice.org document, Word document and PDF.
Undo/redo supports
Installing user-defined stencils and templates
Standard drawing operations: aligning, z-ordering, scaling, rotating...
Cross-platforms
Adding external objects
Personal Collection
Clipart Browser
Object snapping
Sketchy Stencil
And much more...

insira a descrição da imagem aqui


É uma boa ferramenta de wireframing, mas acho que o OP estava procurando uma ferramenta de edição gráfica.
DA01 13/02/12

1

Onde trabalho, usamos o Indesign. Tendemos a criar layouts limpos baseados em grade, com estilos tipográficos cuidadosos, e para esses Indesign é ótimo. Ele possui um controle fino nos estilos de caractere, parágrafo e objeto, que se traduz bem em CSS e permite o ajuste fino desses elementos em qualquer ponto do processo, além de permitir um layout mais coerente. Não é tão bom ao exportar elementos gráficos, mas achamos que a troca vale a pena.


1

Uma das ferramentas de prototipagem da GUI mais inesperadas é, na verdade, o Keynote. Conheço muitos designers de interface do usuário de alto nível que juram por ele, e o Keynotopia é um recurso fantástico para usar o Keynote dessa maneira. Se eu não tivesse visto o uso tão eficaz, provavelmente não teria acreditado, mas funciona muito bem. Se você estiver em um Mac, experimente!


0

Estou trabalhando no Pidoco .

Com nossas ferramentas de prototipagem, você pode desenvolver protótipos para site, aplicativo móvel ou software. Você pode simular a maquete diretamente em uma área de trabalho, smartphone ou tablet usando o aplicativo Pidoco gratuito da AppStore e do Google Play .

Principais recursos:

  • Colaboração em tempo real
  • Exportar para HTML, PDF, Word, PNG, SVG
  • Muitos estênceis
  • Modelos
  • Estênceis personalizados
  • SaaS para que você possa usá-lo em qualquer navegador

2
Por favor, não promova sua empresa em todas as perguntas sobre wireframing. Embora obrigado por ser aberto, você é um funcionário lá.
DA01 23/06
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.