Wireframes

Por Ivo Gomes, em Segunda-feira, 5 de Dezembro de 2005 | 38 Comentários

No seguimento do projecto em que estou a trabalhar, depois de realizados e testados os protótipos em papel chegou a hora de passar os esboços para wireframes.

Com base na validação dos protótipos em papel pelos próprios utilizadores, foi feita a digitalização dos mesmos em formato wireframe.
Um wireframe é um documento que tem como função estruturar o conteúdo de cada página, indicando o peso e relevância de cada elemento do layout e a sua relação com os demais elementos formadores do todo.

Além desta função estrutural, o wireframe também é utilizado para a marcação das etapas de um processo de interacção entre o utilizador e o sistema, fornecendo um wireframe por cada ecrã que explique detalhadamente todos os elementos presentes na página e como o utilizador pode interagir com eles.

O nome "wireframe" vem da junção de duas palavras em inglês: "wire" (linhas) e "frames" (ecrãs). Ou seja, são ecrãs de baixa resolução e com um aspecto gráfico muito pobre que servem apenas para indicar onde devem estar localizados os objectos e menus de interacção. O wireframe serve para mostrar a funcionalidade e não o aspecto gráfico de uma aplicação.

Como desenhar um wireframe?

Existem algumas aplicações com funções específicas para desenhar wireframes, entre elas temos o Microsoft Visio, o OmniGraffle, o Adobe Illustrator ou o Adobe InDesign.

No meu caso uso o OmniGraffle. A interface é extremamente simples e o resultado final tem uma qualidade superior à do Visio. Além disso, o OmniGraffle foi concebido quase especificamente para esta função.

OmniGraffle

Há quem prefira conceber os wireframes logo em formato XHTML em vez de os desenhar numa destas aplicações. A vantagem de desenhar em XHTML é que os protótipos são funcionais e na fase de concepção em si poupa-se trabalho porque o esqueleto das páginas já está feito. No entanto, perde-se muito mais tempo a codificar o XHTML e o CSS correspondente do que se desenharmos os ecrãs através de objectos "drag & drop".

No meu caso, dado o tamanho da aplicação que estamos a desenvolver, foram 250 ecrãs. Se tivesse optado por desenhar os ecrãs em XHTML ainda hoje não deveria ir a meio...

Qual é o aspecto de um wireframe?

Tal como já foi mencionado antes, o aspecto de uma página em formato wireframe é apenas um conjunto de linhas e caixas de texto que indicam a localização dos objectos e dos menus.

Há ainda uma outra discussão relativamente ao uso da cor nestes ecrãs. Muitos especialistas dizem que não devemos usar a cor porque isso irá levantar questões no cliente do tipo: "é com aquela cor que vai ficar o site?"; ou "não gosto muito é das cores" em vez de se centrarem no layout das páginas.

Por outro lado, podemos usar a cor para distinguir certos objectos da interacção e zonas de aviso ao utilizador. Num ecrã a preto e branco não é fácil distinguir se há zonas de alerta ou de aviso e na fase de programação pode acontecer que essas zonas não sejam devidamente marcadas pelo programador.

Em baixo temos o exemplo de um ecrã em formato wireframe a preto e branco.

Para este projecto optei por usar a cor pois existem algumas mensagens de alerta importantes para os utilizadores. Eis 2 exemplos dos 250 ecrãs que desenvolvi para esta nova aplicação:

Wireframe da aplicação O tamanho das imagens foi diminuido de propósito pois trata-se de uma aplicação de um cliente e não convém mostrar muito... As imagens foram colocadas aqui por motivos meramente demonstrativos de como pode ser desenvolvido um wireframe.

Wireframe da aplicação Como podem reparar, do lado direito existe uma coluna com informações sobre cada elemento do ecrã. Podem ver ainda as cores usadas para as mensagens de aviso e de alerta.

Próximos Passos

Os próximos passos consistem numa validação dos ecrãs feita pelos utilizadores e pelo cliente por forma a que se possa avançar finalmente para a fase de concepção e programação da aplicação.

Links

Artigos sobre Wireframes
Wireframes em XHTML com links para outros artigos interessantes
Wireframe: documento cada vez mais importante
Using Wireframes

38 Comentários

Daniele

5 de Dezembro de 2005, 18:16

Tenho algumas dúvidas quanto esse tipo de apresentação.
Em primeiro lugar, acho que só deve ser usado, para passar para a própria equipe qual será o resultado da organização do trabalho.
Acho que não deve ser apresentado ao cliente, pois não são só as cores que podem confundi-lo, o formato do site tbm….
É dificil esplicar que é só um projeto, e que o resultado final será bem diferente…

Aldemir Vieira

6 de Dezembro de 2005, 05:19

Eu uso wireframe (com o Word, pasmem), e concordo que realmente cores podem influenciar, assim como o próprio layout influencia. Eu não uso cores, principalmente, para não podar ainda mais a criatividade do Designer.
Acho o uso desta técnica importante, porque é a primeira forma gráfica de elaboração da estrutura do site, considero que, antes, deva existir o trabalho de arquitetura, para elaborar de forma textual a estrutura da informação. Assim, em conjunto, fornecerão subsídios para a elaboração do Markup (CSS e XHTML).

Ivo Gomes

6 de Dezembro de 2005, 08:46

@Daniele: O resultado deve ser sempre apresentado ao cliente uma vez que há processos inerentes ao desempenho das suas tarefas e actividades que só ele compreende na totalidade. Não podemos conceber uma interface sem conhecer a opinião das pessoas que a vão usar. Foi por isso que desde o início envolvemos todos os futuros utilizadores desta aplicação no seu desenvolvimento.

Uma vez que o cliente foi envolvido desde o início, não há o problema de ele confundir os wireframes com o layout final porque ao longo de todo o processo o cliente vai sendo sensibilizado para acompanhar o processo e dar a sua opinião em todas as fases. Desta forma, o próprio cliente tem noção das fases do projecto e da sua importância para o futuro desenvolvimento da aplicação.

@Aldemir: Eu no início usava o Excel e o PowerPoint para fazer os esboços! :)
Para a realização destes wireframes foram feitas entrevistas com os utilizadores, análises de tarefas e procedimentos, análise da organização da empresa, estudo da infra-estrutura tecnológica e foi feita uma arquitectura de informação com base na organização e procedimentos actuais da empresa. No fundo, foi feita uma análise ergonómica dos postos de trabalho, neste caso das suas tarefas e actividades.

Em relação a estes dois comentários parece-me que vocês estão mais preocupados com a fase seguinte de programação do que com a apresentação dos resultados aos utilizadores para saber se é isto que realmente eles necessitam para melhorar as suas tarefas e aumentar a produtividade da empresa.
Nesta fase eu estou mais preocupado em saber se os ecrãs que vou apresentar satisfazem as necessidades dos utilizadores. Só depois de termos todos os processos validados é que podemos começar a pensar na programação da aplicação.

Dominic Evans

6 de Dezembro de 2005, 09:08

I really wish there was an English version of this article. I’d love to read it.

Ivo Gomes

6 de Dezembro de 2005, 09:16

:D I’ve been thinking about starting to write in English! Maybe I’ll switch in a few months and probably translate some of the most popular articles I wrote. Stay tuned :)

israel cefrin

6 de Dezembro de 2005, 13:21

Artigo deveras interessante. Bem claro e extremamente útil.
No final tu percebes que algo simples mas que faz toda a diferença no fluxo de trabalho, principalmente em projetos de grande porte.

abraços
Israel

Sérgio

7 de Dezembro de 2005, 01:19

Viva,

sempre considerei que a principal função dos wireframes era *identificar* o conteúdo e as principais hierarquias nos ecrãs. No entanto, quando referes que os wireframes “servem apenas para indicar onde devem estar localizados”, fico na dúvida.

Em meu entender, depois dos wireframes vem a parte de design (em sentido mais lato) na qual a estrutura da página pode ser radicalmente alterada.

Cada caso é um caso ou há regras rígidas?
Gostava de discutir este ponto.

Obrigado pelo texto.

Ivo Gomes

7 de Dezembro de 2005, 08:52

Olá Sérgio!

Quando disse que os wireframes serviam para identificar as localizações dos objectos estava a usar um termo genérico. Obviamente que nos wireframes devemos hierarquizar os conteúdos e usar a semântica para melhor estruturá-los.

Houve uma coisa que me esqueci de dizer no artigo: em relação aos conteúdos dos wireframes em si, há quem use texto genérico do tipo “lorem ipsum…” para representar blocos de texto, no entanto, se quisermos fazer testes com utilizadores convém que a informação disponibilizada seja minimamente perceptível e esteja dentro do contexto de uso da aplicação. Dessa forma opto sempre por usar texto “real” que possa ser compreendido pelos utilizadores (ou designers) por forma a melhor compreenderem o significado e a função de determinadas áreas do ecrã.

A seguir aos wireframes, vem a parte do design, mas antes temos de o testar para não corrermos o risco de na fase de design termos de alterar alguma coisa, o que poderia demorar mais tempo do que se alterarmos logo nos wireframes. Uma vez que os utilizadores estiveram envolvidos no estudo desde o início, não fazia sentido não lhes apresentar estes ecrãs para saber se é isto que eles necessitam para desempenhar a sua tarefa. O mesmo aconteceu com os protótipos em papel em que a maioria dos ecrãs foram aprovados mas às vezes faltava um campo numa tabela, ou um botão específico.

Quanto à parte de design, não é necessário seguir à risca o layout dos wireframes. O importante é manter a informação e a hierarquia da informação no futuro layout. Aqui não me parece que hajam regras muito rígidas, a não ser que o desenvolvimento da aplicação seja feito segundo os webstandards e com um nível mínimo de acessibilidade. A usabilidade já vem em grande parte dos wireframes, mas mesmo assim é preciso ter cuidado com a selecção de cores e com o uso de layouts complexos.

helder

10 de Dezembro de 2005, 16:03

Viva
Eu nem sabia o que é um wireframe e já faço paginas alguns anos ( meu deus cada dia sei que não sei mesmo nada desta porra… ), mas no meu entender esse tipo de criação de wireframe so é útil para quando criamos um site muito extenso e com muitas funcionalidades, opções, menus, etc..
Pois quando falamos de um simples site isso pode ser simplesmente mais trabalho, e uma forma de confundir o cliente, pois eles n sabem aquilo que nos pensamos fazer, e só o entendem vendo ou mexendo.

No entanto vou fazer o download de um dos programas e ver melhor, quem sabe eu n tou errado na forma como penso �?�

Um abraço, e continuação de bom trabalho

“ já agora só por curiosidade esse trabalho que tax a desenvolver tem como prazo para ser feito de quanto tempo ? “

Ivo Gomes

15 de Dezembro de 2005, 12:32

Os wireframes são importantes também nos sites de pequenas dimensões. Senão como é que é feita a estruturação das páginas? Se já tivermos essa estruturação feita, depois é só começar a desenhar o layout à volta.

O prazo para a fase de análise deste projecto foi de cerca de 2 meses mas incluiu além disto uma análise à infra-estrutura tecnológica da empresa. Provavelmente se fosse só para a concepção dos wireframes e protótipos o prazo seria muito mais curto, mas assim aproveitámos e fizémos a análise completa ao mesmo tempo que era feita a análise à infra-estrutura.

Renato Rosa

26 de Dezembro de 2005, 16:12

Excelente post. Fomento a discussão perguntando quais seriam os elementos ou definições necessárias para definir os componentes da melhor forma, para que o diretor de arte – que pode simplesmente modificar a densidade de algumas funcionalidades ou destaques – trabalhe com mais liberdade, e que formato poderemos definir o percurso cognitivo do usuário, em um documento que ainda é nativamente estático.

Moisés Ribeiro

26 de Dezembro de 2005, 16:36

Escreves muito bem e com bom senso sobre o assunto.

Li sobre tua intenção de escrever em inglês. Faça, mas não abandone a nossa língua, és uma boa referência em português sobre o assunto, que é tão escasso e difícil de ser encontrado.

Muito me chamou a atenção o processo de projeto/prototipagem no papel. Tens aplicado esse processo a outros jobs? Ou esse exemplo está vinculado somente a grandes trabalhos?

Outra coisa que te pergunto é se sofreste algum tipo de restrição a aplicar essa metodologia de trabalho (a prototipagem). Penso que não é um processo comum (pelo menos no Brasil, não) e tenho dúvidas se as empresas para as quais trabalhamos estariam “abertas” a entender isso.

Ivo Gomes

5 de Janeiro de 2006, 13:32

@Renato: Nos próprios wireframes, cada elemento tem uma descrição própria que ajuda a futura equipa de desenvolvimento a perceber a sua importância e qual a sua função. Apesar do documento ser estático, existe um workflow associado com informação sobre para onde vai cada link e como funciona cada elemento.

@Moisés: Ainda não me decidi se passo a escrever em inglês ou não…
Em relação à prototipagem, já utilizei esta metodologia em outros trabalhos e não eram tão grandes como este. A prototipagem é uma formarápida e simples de definir como se irá disponibilizar a informação. Em todos os trabalhos em que apliquei esta metodologia nunca tive nenhum tipo de restrição. Com o uso de um Plano de Projecto eficiente é possível aplicar várias metodologias desde que o resultado final seja do agrado dos utilizadores (e do cliente).
Para convencer as empresas convém explicar desde o início que o projecto vai ser feito com a ajuda de todos e a opinião de cada um é importante para o sucesso futuro da aplicação. Se ela for bem concebida desde o início não se gastará rios de dinheiro a corrigir os erros cometidos!

Romeu Ribeiro

25 de Janeiro de 2006, 20:56

Bem já chego um pouco tarde para a discução, mas mesmo assim vou ser mauzinho e em vez de comentar vou questionar, eu sou bastante novo nestas andanças, mas pretendo ser cada vez melhor e mostrar que anda por ai muito “charlatão”. A minha questão é: será que a criação de wireframe é realmente válida em projectos de dimensões reduzidas? falando de websites simples ou aplicações megalomanas? a questão de organização é importante, mas até que ponto o wireframe posso ser substituido por um simples organigrama e o projecto é concluido com o mesmo sucesso? obrigado, e vou passar com certeza a ler atentamente este blog.

para terminar, como diriam alguns comuns “tu tás lá Ivo Gomes”

Ivo Gomes

26 de Janeiro de 2006, 09:35

Um organigrama também pode ser considerado um Wireframe. Basta que faças um esboço da organização e hierarquização dos conteúdos no início do projecto para não vires a ter surpresas no final (alterações de última hora, correcções que poderiam ter sido evitadas, etc…)

Os custos das correcções pós-implementação de um website são quase tão grandes como os custos de criação. Assim, se fizeres uma análise cuidada no inicio, minimizas os custos de correcção no final.

Para websites mais pequenos já não é tão crítico uma vez que os custos são muito menores.

E agora a minha pergunta: quando desenvolvem websites pequenos como é que costumam fazer? Começam logo a martelar no HTML ou fazem alguns esboços primeiro? E que tipo de esboços? Baseados em quê? Estou curioso para saber como costumam fazer :)

Romeu Ribeiro

26 de Janeiro de 2006, 09:45

Bem nos meus casos, eu uso sempre um organigrama e estrutura tudo muito bem, sem chegar mesmo a atingir um wireframe, o “bicho” é apresentado e dps passamos a fase seguinte, mas mesmo antes de passarmos ao codigo ou ao design, temos sempre uma sessão de “”””brainstorming”””” e debatemos o que devia ou não ter, e como devia ter e se apresentar, discutimos prioridades e esboçamos ideias do conceito no papel e de seguida fica nas mãos do designer e do programador.

Carolina Quelotti

25 de Maio de 2006, 13:50

Ola Ivo!
Você tem algum material de consulta de algum organograma? Tenho feito várias pesquiisas e gostaria de conhecer modelos que são usados. Agradeço!

Aldemir Vieira

25 de Maio de 2006, 18:49

Carolina, um bom lugar para baixar exemplos e templates para trabalhar aplicar a arquitetura da informação é a página de Ferramentas do IA Institute. No site do Guilhermo Reis também encontrará um rico material.

ibomb

7 de Julho de 2006, 17:08

Mais um bom blog. :)

fernando

5 de Setembro de 2008, 19:33

Ivo, penso que achará interessantes estes 2 programas, que permitem desenvolver websites inteiros, interactivos, usando wireframes:

http://www.axure.com

http://www.protoshare.com

Ivo Gomes

6 de Setembro de 2008, 02:02

Olá Fernando.

Obrigado pelos links. Já os conhecia e continuo a preferir o OmniGraffle por algumas razões:
– O Axure é só para Windows e eu como uso um Mac prefiro ter aplicações nativas em vez de ter que correr o Windows lado a lado;
– Ainda não estou totalmente virado para as aplicações web mais avançadas (tipo Office ou neste caso, o desenho de wireframes). Prefiro usar ferramentas locais em que posso trabalhar mais rapidamente e sem constrangimentos de rede
– Ambas as aplicações que indicaste são pagas. O OmniGraffle também é, mas é muito mais barato que qualquer uma delas :)

Carlos

30 de Novembro de 2009, 10:27

Axure – uso bastante e tenho bons resultados. Tambem a[presento ao cliente neste formato.

Blogs que "linkam" para aqui

Comente!

Comente este artigo!

Daniele

5 de Dezembro de 2005, 18:16

Tenho algumas dúvidas quanto esse tipo de apresentação.
Em primeiro lugar, acho que só deve ser usado, para passar para a própria equipe qual será o resultado da organização do trabalho.
Acho que não deve ser apresentado ao cliente, pois não são só as cores que podem confundi-lo, o formato do site tbm….
É dificil esplicar que é só um projeto, e que o resultado final será bem diferente…
Aldemir Vieira

6 de Dezembro de 2005, 05:19

Eu uso wireframe (com o Word, pasmem), e concordo que realmente cores podem influenciar, assim como o próprio layout influencia. Eu não uso cores, principalmente, para não podar ainda mais a criatividade do Designer.
Acho o uso desta técnica importante, porque é a primeira forma gráfica de elaboração da estrutura do site, considero que, antes, deva existir o trabalho de arquitetura, para elaborar de forma textual a estrutura da informação. Assim, em conjunto, fornecerão subsídios para a elaboração do Markup (CSS e XHTML).
Ivo Gomes

6 de Dezembro de 2005, 08:46

@Daniele: O resultado deve ser sempre apresentado ao cliente uma vez que há processos inerentes ao desempenho das suas tarefas e actividades que só ele compreende na totalidade. Não podemos conceber uma interface sem conhecer a opinião das pessoas que a vão usar. Foi por isso que desde o início envolvemos todos os futuros utilizadores desta aplicação no seu desenvolvimento.

Uma vez que o cliente foi envolvido desde o início, não há o problema de ele confundir os wireframes com o layout final porque ao longo de todo o processo o cliente vai sendo sensibilizado para acompanhar o processo e dar a sua opinião em todas as fases. Desta forma, o próprio cliente tem noção das fases do projecto e da sua importância para o futuro desenvolvimento da aplicação.

@Aldemir: Eu no início usava o Excel e o PowerPoint para fazer os esboços! :)
Para a realização destes wireframes foram feitas entrevistas com os utilizadores, análises de tarefas e procedimentos, análise da organização da empresa, estudo da infra-estrutura tecnológica e foi feita uma arquitectura de informação com base na organização e procedimentos actuais da empresa. No fundo, foi feita uma análise ergonómica dos postos de trabalho, neste caso das suas tarefas e actividades.

Em relação a estes dois comentários parece-me que vocês estão mais preocupados com a fase seguinte de programação do que com a apresentação dos resultados aos utilizadores para saber se é isto que realmente eles necessitam para melhorar as suas tarefas e aumentar a produtividade da empresa.
Nesta fase eu estou mais preocupado em saber se os ecrãs que vou apresentar satisfazem as necessidades dos utilizadores. Só depois de termos todos os processos validados é que podemos começar a pensar na programação da aplicação.
Dominic Evans

6 de Dezembro de 2005, 09:08

I really wish there was an English version of this article. I’d love to read it.
Ivo Gomes

6 de Dezembro de 2005, 09:16

:D I’ve been thinking about starting to write in English! Maybe I’ll switch in a few months and probably translate some of the most popular articles I wrote. Stay tuned :)
israel cefrin

6 de Dezembro de 2005, 13:21

Artigo deveras interessante. Bem claro e extremamente útil.
No final tu percebes que algo simples mas que faz toda a diferença no fluxo de trabalho, principalmente em projetos de grande porte.

abraços
Israel
Sérgio

7 de Dezembro de 2005, 01:19

Viva,

sempre considerei que a principal função dos wireframes era *identificar* o conteúdo e as principais hierarquias nos ecrãs. No entanto, quando referes que os wireframes “servem apenas para indicar onde devem estar localizados”, fico na dúvida.

Em meu entender, depois dos wireframes vem a parte de design (em sentido mais lato) na qual a estrutura da página pode ser radicalmente alterada.

Cada caso é um caso ou há regras rígidas?
Gostava de discutir este ponto.

Obrigado pelo texto.
Ivo Gomes

7 de Dezembro de 2005, 08:52

Olá Sérgio!

Quando disse que os wireframes serviam para identificar as localizações dos objectos estava a usar um termo genérico. Obviamente que nos wireframes devemos hierarquizar os conteúdos e usar a semântica para melhor estruturá-los.

Houve uma coisa que me esqueci de dizer no artigo: em relação aos conteúdos dos wireframes em si, há quem use texto genérico do tipo “lorem ipsum…” para representar blocos de texto, no entanto, se quisermos fazer testes com utilizadores convém que a informação disponibilizada seja minimamente perceptível e esteja dentro do contexto de uso da aplicação. Dessa forma opto sempre por usar texto “real” que possa ser compreendido pelos utilizadores (ou designers) por forma a melhor compreenderem o significado e a função de determinadas áreas do ecrã.

A seguir aos wireframes, vem a parte do design, mas antes temos de o testar para não corrermos o risco de na fase de design termos de alterar alguma coisa, o que poderia demorar mais tempo do que se alterarmos logo nos wireframes. Uma vez que os utilizadores estiveram envolvidos no estudo desde o início, não fazia sentido não lhes apresentar estes ecrãs para saber se é isto que eles necessitam para desempenhar a sua tarefa. O mesmo aconteceu com os protótipos em papel em que a maioria dos ecrãs foram aprovados mas às vezes faltava um campo numa tabela, ou um botão específico.

Quanto à parte de design, não é necessário seguir à risca o layout dos wireframes. O importante é manter a informação e a hierarquia da informação no futuro layout. Aqui não me parece que hajam regras muito rígidas, a não ser que o desenvolvimento da aplicação seja feito segundo os webstandards e com um nível mínimo de acessibilidade. A usabilidade já vem em grande parte dos wireframes, mas mesmo assim é preciso ter cuidado com a selecção de cores e com o uso de layouts complexos.
helder

10 de Dezembro de 2005, 16:03

Viva
Eu nem sabia o que é um wireframe e já faço paginas alguns anos ( meu deus cada dia sei que não sei mesmo nada desta porra… ), mas no meu entender esse tipo de criação de wireframe so é útil para quando criamos um site muito extenso e com muitas funcionalidades, opções, menus, etc..
Pois quando falamos de um simples site isso pode ser simplesmente mais trabalho, e uma forma de confundir o cliente, pois eles n sabem aquilo que nos pensamos fazer, e só o entendem vendo ou mexendo.

No entanto vou fazer o download de um dos programas e ver melhor, quem sabe eu n tou errado na forma como penso �?�

Um abraço, e continuação de bom trabalho

“ já agora só por curiosidade esse trabalho que tax a desenvolver tem como prazo para ser feito de quanto tempo ? “
Ivo Gomes

15 de Dezembro de 2005, 12:32

Os wireframes são importantes também nos sites de pequenas dimensões. Senão como é que é feita a estruturação das páginas? Se já tivermos essa estruturação feita, depois é só começar a desenhar o layout à volta.

O prazo para a fase de análise deste projecto foi de cerca de 2 meses mas incluiu além disto uma análise à infra-estrutura tecnológica da empresa. Provavelmente se fosse só para a concepção dos wireframes e protótipos o prazo seria muito mais curto, mas assim aproveitámos e fizémos a análise completa ao mesmo tempo que era feita a análise à infra-estrutura.
Renato Rosa

26 de Dezembro de 2005, 16:12

Excelente post. Fomento a discussão perguntando quais seriam os elementos ou definições necessárias para definir os componentes da melhor forma, para que o diretor de arte – que pode simplesmente modificar a densidade de algumas funcionalidades ou destaques – trabalhe com mais liberdade, e que formato poderemos definir o percurso cognitivo do usuário, em um documento que ainda é nativamente estático.
Moisés Ribeiro

26 de Dezembro de 2005, 16:36

Escreves muito bem e com bom senso sobre o assunto.

Li sobre tua intenção de escrever em inglês. Faça, mas não abandone a nossa língua, és uma boa referência em português sobre o assunto, que é tão escasso e difícil de ser encontrado.

Muito me chamou a atenção o processo de projeto/prototipagem no papel. Tens aplicado esse processo a outros jobs? Ou esse exemplo está vinculado somente a grandes trabalhos?

Outra coisa que te pergunto é se sofreste algum tipo de restrição a aplicar essa metodologia de trabalho (a prototipagem). Penso que não é um processo comum (pelo menos no Brasil, não) e tenho dúvidas se as empresas para as quais trabalhamos estariam “abertas” a entender isso.
Ivo Gomes

5 de Janeiro de 2006, 13:32

@Renato: Nos próprios wireframes, cada elemento tem uma descrição própria que ajuda a futura equipa de desenvolvimento a perceber a sua importância e qual a sua função. Apesar do documento ser estático, existe um workflow associado com informação sobre para onde vai cada link e como funciona cada elemento.

@Moisés: Ainda não me decidi se passo a escrever em inglês ou não…
Em relação à prototipagem, já utilizei esta metodologia em outros trabalhos e não eram tão grandes como este. A prototipagem é uma formarápida e simples de definir como se irá disponibilizar a informação. Em todos os trabalhos em que apliquei esta metodologia nunca tive nenhum tipo de restrição. Com o uso de um Plano de Projecto eficiente é possível aplicar várias metodologias desde que o resultado final seja do agrado dos utilizadores (e do cliente).
Para convencer as empresas convém explicar desde o início que o projecto vai ser feito com a ajuda de todos e a opinião de cada um é importante para o sucesso futuro da aplicação. Se ela for bem concebida desde o início não se gastará rios de dinheiro a corrigir os erros cometidos!
Romeu Ribeiro

25 de Janeiro de 2006, 20:56

Bem já chego um pouco tarde para a discução, mas mesmo assim vou ser mauzinho e em vez de comentar vou questionar, eu sou bastante novo nestas andanças, mas pretendo ser cada vez melhor e mostrar que anda por ai muito “charlatão”. A minha questão é: será que a criação de wireframe é realmente válida em projectos de dimensões reduzidas? falando de websites simples ou aplicações megalomanas? a questão de organização é importante, mas até que ponto o wireframe posso ser substituido por um simples organigrama e o projecto é concluido com o mesmo sucesso? obrigado, e vou passar com certeza a ler atentamente este blog.

para terminar, como diriam alguns comuns “tu tás lá Ivo Gomes”
Ivo Gomes

26 de Janeiro de 2006, 09:35

Um organigrama também pode ser considerado um Wireframe. Basta que faças um esboço da organização e hierarquização dos conteúdos no início do projecto para não vires a ter surpresas no final (alterações de última hora, correcções que poderiam ter sido evitadas, etc…)

Os custos das correcções pós-implementação de um website são quase tão grandes como os custos de criação. Assim, se fizeres uma análise cuidada no inicio, minimizas os custos de correcção no final.

Para websites mais pequenos já não é tão crítico uma vez que os custos são muito menores.

E agora a minha pergunta: quando desenvolvem websites pequenos como é que costumam fazer? Começam logo a martelar no HTML ou fazem alguns esboços primeiro? E que tipo de esboços? Baseados em quê? Estou curioso para saber como costumam fazer :)
Romeu Ribeiro

26 de Janeiro de 2006, 09:45

Bem nos meus casos, eu uso sempre um organigrama e estrutura tudo muito bem, sem chegar mesmo a atingir um wireframe, o “bicho” é apresentado e dps passamos a fase seguinte, mas mesmo antes de passarmos ao codigo ou ao design, temos sempre uma sessão de “”””brainstorming”””” e debatemos o que devia ou não ter, e como devia ter e se apresentar, discutimos prioridades e esboçamos ideias do conceito no papel e de seguida fica nas mãos do designer e do programador.
Carolina Quelotti

25 de Maio de 2006, 13:50

Ola Ivo!
Você tem algum material de consulta de algum organograma? Tenho feito várias pesquiisas e gostaria de conhecer modelos que são usados. Agradeço!
Aldemir Vieira

25 de Maio de 2006, 18:49

Carolina, um bom lugar para baixar exemplos e templates para trabalhar aplicar a arquitetura da informação é a página de Ferramentas do IA Institute. No site do Guilhermo Reis também encontrará um rico material.
ibomb

7 de Julho de 2006, 17:08

Mais um bom blog. :)
fernando

5 de Setembro de 2008, 19:33

Ivo, penso que achará interessantes estes 2 programas, que permitem desenvolver websites inteiros, interactivos, usando wireframes:

http://www.axure.com

http://www.protoshare.com
Ivo Gomes

6 de Setembro de 2008, 02:02

Olá Fernando.

Obrigado pelos links. Já os conhecia e continuo a preferir o OmniGraffle por algumas razões:
– O Axure é só para Windows e eu como uso um Mac prefiro ter aplicações nativas em vez de ter que correr o Windows lado a lado;
– Ainda não estou totalmente virado para as aplicações web mais avançadas (tipo Office ou neste caso, o desenho de wireframes). Prefiro usar ferramentas locais em que posso trabalhar mais rapidamente e sem constrangimentos de rede
– Ambas as aplicações que indicaste são pagas. O OmniGraffle também é, mas é muito mais barato que qualquer uma delas :)
Carlos

30 de Novembro de 2009, 10:27

Axure – uso bastante e tenho bons resultados. Tambem a[presento ao cliente neste formato.

ivogomes.com » Prototipagem em Papel
8 de Dezembro de 2005, 13:35
ivogomes.com » Taxonomia: Usar os termos correctos
8 de Dezembro de 2005, 13:37
Vitor M. Costa » AI e Usabilidade!
28 de Março de 2006, 10:33
Fator W » O melhor momento para se realizar o teste de usabilidade
4 de Maio de 2006, 14:14
Untitled.art.br » Blog Archive » Gliffy.com, desenhando wireframes online.
22 de Maio de 2006, 12:14
JoãoVagner » Blog Archive » Wire Frames, como onde e porque
23 de Agosto de 2007, 15:10
» O novo website do jornal Record – IvoGomes.com
1 de Outubro de 2007, 10:09
Documentação de Projetos – Prototipo e Wireframe
19 de Dezembro de 2007, 02:39
Como construir wireframes – técnicas e programas | fator W
3 de Janeiro de 2008, 18:05
Paulo Eduardo
17 de Janeiro de 2008, 17:12
No Carnaval tem muito trabalho sim senhor!
26 de Fevereiro de 2009, 13:03
Trabalho do 2o Bimestre – Parte 1 « Tecnologia de Programação 1 e 2 (2010) – Turma Especial
29 de Maio de 2010, 03:41
Perfeccionabilidade » Blog Archive » Wireframes, o sucesso de um projeto garantido
12 de Janeiro de 2011, 17:55
“Pencil Sketching”, uma extensão bem completa do Firefox | Cristiano Web
14 de Outubro de 2011, 14:42
Como construir wireframes – técnicas e programas – Fator.WS
9 de Junho de 2015, 20:42
O melhor momento para se realizar o teste de usabilidade – Fator.WS
10 de Junho de 2015, 14:26

Wireframes

Como desenhar um wireframe?

Qual é o aspecto de um wireframe?

Próximos Passos

Artigos Relacionados

Links

38 Comentários

Blogs que "linkam" para aqui

Comente!