Posts com a Tag ‘axure’

Rabiscoframes, wireframes e protótipos

domingo, 10 de julho de 2011

Conheci arquitetura de informação em 2006 na Agência Click e desde 2007 exerço a função de arquiteto de informação. Já são alguns anos trabalhando na área. Pensar no usuário antes de tudo sempre foi algo natural desde que comecei fazer os primeiros trabalhos digitais lá em 1999. Já fui designer e interface e conheço um pouco do processo de desenvolvimento. A experiência de experimentar outras etapas do processo foi bem rica no meu caso.

Quem conhece a disciplina de AI sabe que o wireframe é a entrega final do arquiteto de informação. Algumas empresas chamam esses profissionais de designers de experiência, designers de interação ou mesmo arquitetos. O importante mesmo é o pensamento estratégico e o resultado final do projeto.

Durante minha trajetória na área percebo que nem sempre todos entendem o que são e para que servem os wireframes. O wireframe é apenas o meio para o fim de uma criação de um website ou aplicativo. Ele define a primeira camada de conteúdo que o site irá ter. Não tem a função de limitar a criatividade do designer, redator ou desenvolvedor. Não existe essa história que o arquiteto definiu assim, vai ficar assim. Toda ideia que vem depois do wireframe existe para evoluir o projeto e não para corrigir o que o arquiteto fez de errado. Como disse em outro post, a experiência do usuário é responsabilidade de todos. Não custa nada lembrar novamente.

Rabiscoframes

O rabiscoframe é o momento que antecede o wireframe. Todo dia vejo uma ferramenta nova ou um aplicativo para o iPad, por exemplo. Mas não vejo nada melhor que papel, lápis e borracha. Ontem li um artigo sobre o assunto onde um designer sugere que usemos papel e caneta para não cair na tentação de apagar e desenhar novamente do zero. A ideia é desenhar uma, duas, três ou o tanto que for necessário. Assim você consegue evoluir a ideia nos estágios iniciais. Isso tem funcionando bem comigo.

Esse é o momento de testar o maior número de soluções. Interface se faz assim. Desenha, testa e desenha novamente. O legal é usar várias folhas e comparar as saídas para ver o que é melhor.

Wireframes

O wireframe é muito mais detalhado que o rabiscoframe. Separei wireframe até para diferenciar de protótipo. Antigamente se usava muito o PowerPoint para fazer o trabalho. O wire era estático e as interações tinham que ser imaginadas pela equipe de desenvolvimento. Era um tempo que a navegação acontecia praticamente tela a tela.

Protótipos

Atualmente as interfaces estão muito mais ricas. As possibilidades com HTML, CSS e Java Script são bem maiores. E tudo isso acontece sem a necessidade do Flash. Lembrando que não tenho nada contra a utilização do Flash. Vejo que o ferramenta da Adobe tem o seu valor e funciona muito bem em games. E também sou contra a história que um site só fica bonito quando feito em Flash. Essa lenda é bem antiga e não cola mais nos dias atuais.

Existem várias ferramentas para a criação de um protótipo. Eu uso e gosto muito do Axure. Ele permite a criação de um protótipo capaz de mostrar como a interface funcionará no final.

É importante ressaltar novamente que é apenas um protótipo. É o primeiro passo daquilo que se imagina para o resultado esperado.

Versionamento no Axure

quarta-feira, 16 de dezembro de 2009

Quando fui interface na Agência Click, em 2006, tive a oportunidade de conhecer o SVN. Essa técnica permite que várias pessoas possam trabalhar de forma conjunta em um mesmo projeto.

A Gabi, arquiteta de informação na Talk, mostrou que existe a possibilidade de fazer isso no Axure. Essa possibilidade nos ajudou bastante e mostrou que pode ser muito útil para o time que está trabalhando no projeto.

Trabalhamos em conjunto nesse projeto específico e percebi que isso pode nos ajudar de algumas formas. Exemplo: O Redator pode fazer a redação de arquitetura no próprio Axure conforme as telas vão ficando prontas. Isso ajuda bastante em trabalhos que temos que aplicar uma metodologia ágil com vários arquitetos, redatores, designers e desenvolvedores.

Como funciona

Veja os passos para criar uma arquivo versionado no Axure.

Primeiro passo: Abra o RP que vai ser versionado e clique no menu “Share” > “Create Shared Project from Current file…”

13

Segundo passo: Escolha o nome do projeto. Este será usado por todos os usuários na rede. Escolha um nome fácil para identificar o arquivo.

2

Terceiro passo: Escolha o local onde o arquivo será compartilhado. É onde a versão será atualizada por todos os usuários que utilizarão o arquivo, e assim, onde todos buscarão as atualizações. Sugiro que seja compartilhado em um servidor que todos possam buscar a informação a qualquer hora. Se for compartilhado no computador de um usuário, este deverá estar logado para que o versionamento funcione.

3

A pasta não deve ser mexida por ninguém, e ficará assim:

5

6

Quarto passo: Escolha o local onde ficará a sua versão do arquivo. É com ele que você vai trabalhar, pois ele buscará e mandará atualizações para o arquivo compartilhado que você salvou anteriormente.

4

O arquivo que o usuário irá abrir para trabalhar será esse RP com o ícone diferente:

7

Veja agora os passos para você criar um versionamento local (caso não tenha sido você que criou o arquivo compartilhado)

Primeiro passo: Clique no menu “Share” > “Get and Open Shared Project…”

8

Segundo passo: Informe o local onde está o arquivo compartilhado. É a versão atualizada por todos os usuário que utilizam o arquivo.

9

A pasta não deve ser mexida por ninguém, e estará assim:

5

6

Terceiro passo: Escolha o local onde ficará a sua versão do arquivo. É com ele que você vai trabalhar, pois ele buscará e mandará atualizações para o arquivo compartilhado que você salvou anteriormente.

10

Entenda como utilizar o arquivo compartilhado

Para fazer alterações você precisa clicar em Checkout. Significa que você está reservando aquela página no servidor para fazer alterações. Dessa forma apenas você poderá mexer.

11

Quando terminar de fazer as alterações, clique em Checkin. Significa que você está devolvendo a página atualizada para que outros usuários possam atualizar seus arquivos e mexer se necessário.

12