Hoje vou levantar uma questão que tem a ver com produção, processo e meios que podem otimizar a vida do designer (e do cliente), minimizando refações e garantindo os prazos. Então descrevi nesse post um caso prático, mostrando o passo a passo deste trabalho.

Job: Criação de um folder frente e verso.

Briefing: Criar um folder tipo cabide. Este folder deve ser impresso em 4/4 (4 cores, frente e verso), com verniz em reserva em algumas áreas com faca especial (no cabide) para ser pendurado em retrovisores internos dos automóveis.
O folder também deve ter picote para que uma área seja destacada e mais, nele deverá ter 2 espaços para ser preenchido à mão assim que forem definidos os tipos de produtos pós compra e outra área que receberá um código por folder, por isso ela deve ficar em branco.
Outra necessidade é exibir dentro do folder duas marcas distintas apresentando sua linha de produtos, dando a possibilidade do instalador escrever quais produtos foram instalados.

Aí pronto, é só desenhar tudo isso de uma forma clara e fácil de entender.

Desafiador, não?

Pois é, diante desta quantidade de informações a serem consideradas, usei o meu conhecimento de Arquiteto de Informação, implantando o wireframe (uma das formas que servem para documentar um projeto na fase da Arquitetura de Informação) antes da criação visual, dando prioridade para a aprovação da informação em primeiro lugar.

Primeiramente levantei as informações, elencando junto ao cliente as chamadas e as prioridades dada a cada elemento no folder e a partir disso, iniciei uns sketches.

Feito o levantamento das informações, iniciei o estudo do trabalho ordenando os textos e gráficos em uma primeira versão, ou, como disse, o “wireframe” da peça.
Qualquer cliente que esperasse receber um layout e recebesse um folder sem cor, com certeza iria estranhar. Por isso propuz este processo com a finalidade de acertarmos o projeto de ponta a ponta, minimizando a margem de erro, tanto minha, do cliente quanto o da gráfica.

No final o cliente ficou feliz com o processo e com o resultado (e eu também!)

Wireframe inicial

Mocku-up ou Boneco

Apresentação do layout feito em Illustrator e finalizado no Photoshop

Mockup do layout final (feito após a aprovação do passo anterior)

Prova de cor e área do verniz em reserva

Estudo de formato do cabide

O formato escolhido foi o terceiro da esquerda para a direita por seguir mais a linguagem aplicada no visual do folder e por alguns carros terem a aste que segura o retrovisor mais espessa.

Folder impresso

Legenda:
1) Campo para ser preenchido após a escolha dos tipos de insulfilm.
2) Área que será destacada para fixar no volante do carro, informando ao dono a data correta para a abertura dos vidros e uso do desembassador térmico traseiro.
3) Picote da área a ser destacada.
4) Número de série do certificado para o controle da garantia.

Folder no carro

Ao se envolver na criação de uma peça gráfica, o designer deve se atentar a outras coisas tão importantes quanto à parte visual, como a ergonomia (onde e como isso será utilizado?), ao tamanho e prioridade da informação (quem vai ler? qual a distância?), a produção, etapas de aprovação e as próprias peculiaridades da área impressa – e são muitas! (bonecos, provas, verniz, corte, fechamento de arquivo e por aí vai).
A criação de um folder pode ser mais complexa do que imaginamos, por isso é bom se atentar às necessidades do cliente, responsabilidades do designer e todos os detalhes na hora de orçar.

Meu amigo, designer e ilustrador Gustavo Bacan trabalhou na criação dos ícones e no fechamento de arquivo da peça. Valeu, Guga!

Nos dias 21 e 22 de outubro aconteceu o 5º EBAI – Encontro Brasileiro de Arquitetura de Informação e desta vez resolvi fazer o registro do que rolou em forma de palavras-chave em meu Sketchbook.
Cada palestra ganhou uma folha de anotações e com elas fiz um painel para poder baixar e imprimir:

Além disso disponibilizei as páginas separadas de cada palestra para quem quiser baixar.
Então o que está esperando, baixe aqui o zip com os sketches!

UX no Limite: como fazer um bom trabalho em experiência do usuário apesar das limitações

Search Engine Optimization – SEO: a contribuição do Bibliotecário na otimização

Crowd Sourcing: Usando as comunidades virtuais para gerar e discutir ideias de design

Interatividade + Tv

A influência das cores na usabilidade de interfaces através do design centrado no comportamento cultural do usuário

UX=MKT²

Design Livre e Cultura Colaborativa

Interface para um ambiente de consumo + Participação: um widget social para a experiência Globo.com

Panorama do Mercado de Trabalho

Arquitetura de Informação sem wireframe

Design em sites de encontro: Promessas de amor verdadeiro, rápido, anônimo e gratuito

Pratique o que você prega: sua entrevista de trabalho é sua primeira entrega

Eric Reiss (Fat DUX)

E se você quiser baixar um ux-wallpaper maneiro para o seu Lap ou Desktop disponibilizei também em alguns tamanhos:

1366×768  |  1024×768  |  1280×800  |  1440×900  |  1280×1024  |  1920×1080  |  1680×1050

Baixe aqui o ZIP com todos eles! (A cara deles é essa aí em baixo)

Foi feito um resumão do EBAI 2011 no Blog Arquitetura de Informação do Fabricio Teixeira. Vale a pena dar uma olhada!

Curtiu? Comenta aí!

Design, Arquitetura de Informação e fotografia. Taí três coisas que eu não consigo me desvencilhar. Primeiro comecei a estudar design e segui carreira. Logo no início da faculdade também carregava uma Sony Mavica (Aquela de disquete, lembra?) e na época já fazia trabalhos profissionalmente com ela (acredite!). A qualidade era péssima, mas como trabalhava com propaganda multimídia, onde as fotos tinham que ser tiradas e imediatamente descarregadas para ser exibida em uma tela computador que na época chegava no máximo 800×600, atendia bem o recado. Depois da facu, fiz pós em AI e gostei muito do novo desafio que eu tinha pela frente, tive também um pouco de sorte e aqui estou, enchendo linguiça antes de mostrar o que interessa, que são as fotos =P.
Mas uma coisa é fato, eu gosto dos três. E quando de alguma forma eu consigo juntar conhecimentos das 3 áreas, vixi maria, como com farinha!

Estas fotos foram feitas depois que cataloguei todos os meus livros (fiz um post falando sobre isso). Foi aí que me permiti organizá-los por cor. Se não estivesse catalogado deixaria organizado por assunto, como estava antes. Na minha opinião é mais prático quando se quer achar algo, pois grande parte dos livros eu uso para consultar no dia a dia, então a função da organização na estante acaba sendo mais importante que a forma.

Mas agora eu tenho os três F’s: Forma, função e foto! Espero que gostem

Se gostou dessas fotos, vai gostar também dos Ensaios com Playmobil

Depois que a Tereza Jardim twittou um link de um site mostrando uma estante de livros organizados por cor, veio a seguinte questão:
Ok, fica bonito, mas onde fica a praticidade na hora de procurar um livro de determinado assunto?

Foi a partir de uma discussão corriqueira no Facebook que cheguei a conclusão que se eu catalogasse todos os livros, conseguiria os organizar por cor, uma vez que no software eu também consigo categoriza-los pela cor, o que torna mais fácil na hora de procurar. E como não tenho uma Biblioteca Nacional em casa, consigo sim achar meus livros mesmo não consultando o catálogo (com um pouco mais de dificuldade do que quando estavam separados por assunto).

Há quem pense que isso é uma tarefa de um Nerd, mas comparando às milhares de músicas que todo mundo cataloga no iTunes e de fotos no Flickr, organizar livros hoje é fichinha.

Iniciei pela procura do software necessário e o mais completo que achei foi o BookPedia para Mac.

Com ele vc pode escanear o código de barras dos livros e “plin”, todos os dados do seu livro já estão catalogados.

Mas nem tudo é tão fácil assim. Muitos deles eu cataloguei manualmente, inserindo os dados e pegando a capinha no Google Imagens mesmo, pois a busca do programa não reconhecia alguns livros brasileiros, por exemplo.

Apesar disso levei apenas 3 dias para catalogar os meus 182 livros.

Além de poder buscar por dezenas de filtros, colocá-los em diversas categorias e tags diferentes, o aplicativo ainda possui campos personalizáveis. Foi nessa que tive a ideia de colocar a cor da lombrada do livro (nem sempre a lombada segue a cor da capa) em um desses campos.

Sem dizer dos gráficos que ele mostra. Bem legal ver por exemplo quais são as editoras ou assuntos que você mais consome.

E por fim, a estante ficou assim:

Veja as fotos que foram feitas depois desta organização.

Quer começar a se organizar? Comece já. Eu dou a dica!

Nem só de fotos e ilustrações bonitinhas vive o Magel Studio. Devo grande parte das coisas que consigo fazer à uma coisa que se chama “organização”. Por isso hoje falo exclusivamente dela e ainda dou algumas dicas aí para os que querem “entrar na linha” . Boa leitura!

Este post é destinado aos arquitetos de informação, biblioteconomistas, designers, amantes da organização e para todos que de alguma forma administram dados e informações do dia a dia nos meios digitais. Se você não é arquiteto, nem designer, nem amante de organização mas que tem um perfil em redes sociais, câmera digital, celular e computador, você também administra informações, então este post também é para você.

A organização é parte importante do nosso trabalho, uma função que não se ensina na escola, tampouco aparece no portfólio, mas além de nos ajudar a tornar o dia a dia mais prático, nos dá mais agilidade para achar algo na hora que precisamos, com isso ganhamos mais tempo fazendo o que realmente importa.

Uns acham que organizar é perder tempo. Eu acredito que é exatamente o contrário. Costumo dizer que para cada hora “perdida” em organização, ganha-se 3, 4 ou 5 lá na frente. Ficamos menos estressados quando as coisas estão organizadas. Encontramos o que precisamos, pagamos as contas nas datas certas evitando alguns transtornos como pagamento de juros ou fila em banco por exemplo. Também não nos deixa esquecer coisas importantes, evitando outros contratempos chatos.

A necessidade de se organizar nunca esteve tão presente. Fotos, vídeos, músicas, links, números de documentos, usuários, senhas e milhares de outros assuntos são armazenados em nossa mente, computador, celular e internet, e para isso precisamos de um mínimo de organização para aprender a conviver com essa enxurrada de informação que consumimos todos os dias.

No Flickr por exemplo você tem 3 recursos para conseguir organizar suas fotos, que são as coleções, os sets e as tags. Sem uma organização bem definida nada se acha quando você (ou o mecanismo de busca) precisa encontrar algo. No YouTube existem as tags e as listas de reprodução, que também o ajudam a categorizar o conteúdo e a busca, sem dizer que a forma como você nomeia o título da sua foto ou vídeo também determina o quão fácil será para você achar depois.

Na arquitetura de informação nós chamamos a forma de rotular, categorizar e agrupar coisas de Taxonomia, palavra que vem da ciência que estabelece critérios para a classificação de seres vivos, plantas e animais. Grande parte dos sites e ferramentas online e offline feitos para organizar arquivos de músicas, fotos, etc, possuem recursos de busca ou filtros para poder encontrar informações interessantes ou favoritos que você armazenou. Estes dados armazenados só serão encontrados com sucesso se tiverem nomeados e tagueados de maneira organizada.

E levando em conta que a cada dia mais informações são adquiridas, o quanto antes você as organizar, melhor.

Eu não sou o guru da organização, nem consigo segui-las sempre, mas listei 10 dicas que podem ser úteis para todos.

1. Começe já!

Organizar alguma coisa, principalmente o que já está muito bagunçado dá preguiça, seja o seu guarda-roupas ou a sua coleção de CDs, mas se você não começar por algum lugar, a zona só tende a crescer (e você a perder mais tempo cada vez que mexer nela).
Começar já é a metade de toda ação. Comece, mesmo que seja aos poucos.

2. Descarte

Organizar também é se deparar com arquivos duplicados ou que não vão lhe servir para nada, que estão ali só ocupando espaço. Antes de tudo tente excluir tudo o que você tem certeza que não vai mais usar, ver ou ouvir.

3. Planeje sua organização

Antes que comece a arrumação, tente planejar o que vai fazer. Se for as suas músicas do iTunes ou suas fotos no computador crie antes uma lista de categorias e(ou) pastas onde todas as informações possam ser distribuídas. Pode ser trabalhoso mudar e dividir as pastas depois, por isso recomendo que haja um planejamento prévio.

4. Escolha a ferramenta

A escolha da ferramenta que melhor atende às suas necessidades também é importante. Dê uma pesquisada em softwares que fazem o que vc precisa, pergunte para os amigos e enfim, baixe o seu assistente de organização.

5. Não deixe para depois

“Depois eu arrumo” é sinônimo de “deixa como está”. Não deixe para depois o que você pode fazer agora. Espante a preguiça! A não ser que você precisa sair para ver os amigos, andar de bicicleta, ir a praia… não dá para competir com o mundo real, mas a organização moderada vai inclusive te dar mais qualidade lá na sua vida boa.

É melhor dedicar 20 minutos do seu dia organizando suas coisas do que fazer isso uma vez por ano e acabar com o sol das suas férias.

6. Ganhe tempo

Organizar é ganhar tempo, não perder. Você não precisa fazer da organização uma neurose. Como disse, se conseguir fazê-la um pouquinho por dia nem vai sentir e quando achar em segundos um e-mail importante que enviou no ano passado, vai saber o que eu estou dizendo.

7. Evite o stress

Atire a primeira pedra quem nunca quis “parar tudo” num momento de caos com as coisas da vida pessoal e profissional confusas. Todo mundo precisa de uma pausa para rever papeis, roupas, gavetas, agendas e os 20 sites que tem cadastrado. Parece que depois dessa arrumação tudo fica mais “leve”, até a sua respiração melhora. A organização nos ajuda a ter mais controle sobre o que estamos fazendo e o excesso de bagunça pode trazer pequenos ou grandes problemas, daí o stress.

8. Faça uma limpeza

Depois da arrumação tudo fica mais claro e a sensação é de limpeza. Não é a toa que no fim de ano todo mundo quer fazer uma limpeza nas coisas pessoais antes de chegar o ano novo. Legal mesmo é se ninguém tivesse que parar para fazer tudo só no fim do ano. Se quer mais tempo pra você no fim do ano, volto a dizer, comece já fazendo um pouco por dia.

9. Faça backups

Fale a verdade, quem você conhece que faz backups de fotos, agenda do celular, músicas e etc? Sempre recebemos e-mails com amigos dizendo “perdi o meu celular e toda a minha agenda. Por favor me passem novamente seus telefones…”. Ouvimos também outras coisas típicas de quem não costuma fazer backup. É a coisa mais normal do mundo.

Você vai ter uma baita dor de cabeça se um dia perder, danificar seu equipamento ou se o site que você tem todas as suas fotos desaparecer na net. Fazer backup faz parte da organização e vai evitar de você ter um ataque quando isso acontecer, o que na verdade é quase certo um dia, pois assim como quem tem carro está sujeito a arranhões e furtos, quem trabalha com informações de qualquer gênero também está sujeito a perdê-las.

10. Seja organizado no trabalho

Se você é uma pessoa que não está nem aí para a organização na vida pessoal e acha que é uma balela isso tudo o que falei, tente ser organizado pelo menos no seu trabalho. Não dá para levar a sério um profissional se atrapalhando sempre por pura falta de organização. Se não é funcionário e é dono de empresa, ainda pior.

A desorganização é improdutiva, acarreta em perda de tempo, stress e prejuíso para as empresas, por isso não é legal ser desorganizado no trabalho. Se seu chefe (ou seu cliente) for desorganizado e você não, há uma luz no fim do túnel, você ainda pode ajudá-lo a deixar as coisas sob controle. Se os dois forem desorganizados, quem vai sentir na pele se algo sumir por exemplo é você.

A organização e a disciplina andam juntas. Com elas você consegue ter mais liberdade e poder de escolha. A música Há tempos do Legião Urbana já dizia “disciplina é liberdade…”

2010 foi um ano muito bom para mim. Um ano em que pude viver bastante o que gosto muito de fazer, que é viajar, fotografar e trabalhar com diferentes projetos de design e AI.
Comecei o ano com a conclusão do meu curso de Pós graduação em Arquitetura de Informação. Lançamos na TV1 o Portal Brasil, projeto de grande importância para o cidadão brasileiro e motivo grande felicidade em ter feito parte da equipe. Dei uma entrevista para a revista Webdesign falando sobre AI e para ABIGRAF falando sobre Tipografia. Depois disso fiz a minha primeira ilustra de capa para a revista Nova Escola da Editora Abril. Em seguida, tirei férias e viajei para a Patagônia. Logo depois fiz uma exposição com as fotos que tirei lá. Foi demais! Enquanto a exposição rolava, apresentei a minha primeira palestra no EBAI. Ufa, haja pique!
E para fechar o ano, frilei na agência Hypnotiq ficando responsável pela Arquitetura de Informação de um grande projeto e logo depois na Try Consultoria, aplicando testes de usabilidade e fazendo o relatório dos testes para o cliente, ou seja, 2010 foi um ano de muito trabalho, muita experiência e muito aprendizado. Valeu demais!

Agradeço a todos que me acompanharam no twitter e que me ajudaram a manter este blog com suas visitas, seus Retweets e seus comentários. Obrigado!

Ah! Agora a Magel Studio tem o seu próprio twitter: @MagelStudio

Enfim, os posts que mais fizeram barulho por aqui em 2010:

A primeira capa a gente nunca esquece

AI: Rede de Tecnologia Social

Sketchbox: Fotografia

Entrevista sobre wireframe na revista Webdesign

Street Type: Alfabeto com ruas do Google Maps

Sketchbook: O começo

Foto da foto

Fundos criativos para iPhone

Making-of exposição fotográfica

Qual é a melhor câmera para começar a fotografar?

Este ano inscrevemos o projeto Paixão Coletiva no EBAI e fomos selecionados para apresentá-lo.

Passei a semana preparando a apresentação junto com a Lu, a Melina e a Tassia. Ensaiamos rapidamente durante a semana e fomos o segundo grupo a apresentar na sexta-feira.
?Eu nunca tinha apresentado para uma plateia grande como a do EBAI, somente para pequenos grupos na Faculdade e na Pós, mas a apresentação rolou legal e eu consegui falar com bastante tranquilidade.

Rolaram muitos cases e palestras interessantes, mas destaco a palestra apresentada pela Lu Cattony e João de Freitas. Eles falam do design estratégico e do papel do Arquiteto da Informação hoje, onde mostraram um vídeo sensacional feito por eles ilustrando um pouco do que o Arquiteto faz hoje e que nos faz refletir sobre o que e de que forma estamos trabalhando:

Modern Times 2.0 from João de Freitas on Vimeo.

Depois do vídeo, na apresentação é proposto uma forma mais ampla de pensar Arquitetura e um case muito rico em qualidade e inteligência de projeto. Me identifiquei bastante com o pensamento. Vale a pena ver a apresentação.

Outra palestra que também gostei bastante foi a última de sábado, apresentada pelo Marcelo Eduardo Oliveira do Institito Nokia de Tecnologia (INdT).
O Marcelo falou muito dos processos que os designers e desenvolvedores INdT usam para criar interfaces e soluções para celular e ainda fez uma brincadeira interativa legal utilizando o recurso de realidade aumentada com cartões coloridos distribuídos na platéia.

Além de assistir a palestras muito interessantes fiz alguns contatos bem legais e conheci pessoalmente uma galera gente boa pacas que eu já acompanhava a um tempo por Blogs e Twitter. Entre eles, a Luciana Cattony do Blog Planta Baixa, Rogério Pereira, Rodrigo Teixeira do Blog Alternativa Coletiva e o Fred van Amstel do Usabilidoido.

Então é isso.

Até o próximo EBAI!

Mais um projeto feito na TV1 como muitos outros que passaram por lá, mas destaco este em especial pela peculiaridade do processo de trabalho.

Após a etapa de planejamento e início do levantamento de conteúdo, eu e as áreas envolvidas no início do projeto fomos até Brasília fechar algumas idéias e sketches juntamente com o cliente, pois o cronograma apertado não permitia que houvesse nenhum tipo de erro ou refação.

Em uma situação dessas o exercício exige concentração, agilidade de resposta e que você esteja em um dia inspirador, de preferência

Abaixo alguns dos sketches feitos lá, iniciando com exemplos e sugestões de navegação a partir de poucos links:

Na volta, com uma idéia já desenvolvida na reunião, documentei a estrutura da informação colorizando algumas áreas que tinham relação para que o entendimento fosse facilmente assimilado pelo cliente na aprovação.

Infoestrutura aprovada, parti para a etapa de prototipação, construindo basicamente uma home, uma matriz de uma interna e uma página só com templates que pudessem se encaixar de acordo com os tipos de conteúdo que pudessem entrar (áudio, vídeo, galeria de fotos, etc).

Sabemos que em muitos casos, principalmente naqueles que envolve Flash, o designer não precisa seguir a risca o wireframe, possibilitando maior liberdade de criação, então a arte seguiu a informação e deu uma identidade legal para o assunto.

AI: Marco Moreira
Design: Caio Andreolli
Flash: Samir Saikali

A Mirandouro é uma empresa tradicional na fabricação de jóias em ouro 18k e seus clientes possuem por natureza um alto grau de exigência no que diz respeito a imagem e a design, por isso ela precisava de um site que pudesse traduzir um pouco a sua imagem no mercado.
A empresa já tinha um site com um visual definido e o cliente queria “dar vida” e movimento ao site já existente. É aí que o designer aqui entra.

Propus então alguns ajustes no layout sem perder a característica já adotada, fazendo com que a nova proposta visual pudesse se encaixar melhor na construção do site em Flash. Então fiz alguns rafes em cima do layout antigo sugerindo as melhorias para o cliente com a preocupação de enriquecer a experiência do usuário, valorizar o produto e dar maior legibilidade e clareza aos textos, botões e imagens.

Com a ideia aprovada, layoutei todas as páginas. Abaixo você poderá ver um panorama geral da mudança do antigo para o novo (clique na imagem para ampliar).

Depois de todas as telas aprovadas, parti para a produção em Flash que você pode ver agora no ar.

Este mês fui um dos convidados para fazer uma entrevista para a matéria de capa da edição da revista Webdesign que fala da produção de wireframes e a organização da estrutura de um site.
A revista está mudando de nome, dando lugar à revista Wide, que terá uma gama mais ampla de assuntos ligados a internet e começará a circular em setembro.
Antes da publicação, o Luis Rocha, ex-diretor de redação da revista me enviou as perguntas que serviram para a elaboração da matéria junto com outros dois profissionais, porém nem todas as respostas foram publicadas, e como achei interessante a discussão em cima do assunto, pedi a permissão da editora para que eu pudesse publicar as perguntas e respostas na íntegra. Aí estão elas:

1 – Em nossas últimas edições, profissionais do mercado brasileiro de internet apontaram a arquitetura de informação como uma área promissora para quem está decidido a se especializar na área. Diante da sua experiência no segmento, quais são os principais desafios para tornar esta prática comum na criação e no desenvolvimento de projetos digitais e interativos?
O desafio, como toda nova profissão está na cultura dos profissionais que ainda não sabem muito bem o que é e para que serve a AI, principalmente o próprio cliente. Não saber o valor que a área pode proporcionar ao negócio dificulta na hora pedir um prazo maior para uma pesquisa de usuários, card sorting ou um estudo de personas, por exemplo. O que acaba acontecendo na maior parte das vezes é partir direto para a prototipação, sem passar pelas etapas anteriores que também são muito importantes. Então o que pesa muito no dia-a-dia são os prazos. Apesar de sabermos em nossa formação que todas as etapas são importantes, muitas empresas e clientes ainda não sacaram o real valor das etapas que um projeto de AI precisa ter, então o desafio é usarmos nosso conhecimento para mostrar que todos os passos são muito importantes para um melhor resultado no retorno sobre o investimento do cliente.

2 – Dentre as principais atribuições envolvidas no trabalho com arquitetura de informação, o wireframe surge como o documento que vai apresentar a estrutura funcional e os elementos que vão compor uma interface. Na delimitação das áreas e na distribuição e atribuição de pesos dos elementos a serem incluídos em ambientes interativos e manipuláveis, quais são os subsídios fundamentais para se garantir a produção adequada de um wireframe?
Primeiramente saber quem é o público e qual o objetivo do projeto, sempre. Depois disso definir junto à área de tecnologia quais são as plataformas ideais que podem atender as necessidades deste público em questão e, por último e não menos importante, das informações que serão inseridas neste site/software, afinal nós arquitetos temos como principal matéria prima, a informação.

3 – Podemos dizer que a produção de wireframes é o pontapé inicial no processo de diagramação de interfaces digitais. Pensando nisso, de que maneira outras áreas (design e tecnologia) devem ser envolvidas neste processo? E como garantir um bom fluxo de trabalho para evitar ruídos/atritos entre arquiteto de informação e designer?
As duas áreas são muito importantes para a construção de um wireframe. A área de tecnologia deve ser envolvida para alinharmos as expectativas tecnológicas do projeto, suas limitações técnicas e até no sentido de nos ajudar a encontrar uma solução que pode ser mais simples do que estávamos imaginando.
Arquitetos de Informação nem sempre foram designers no passado. Uns vieram do Jornalismo, da publicidade, da biblioteconomia e etc., por isso é muito importante que o designer exponha a sua visão sobre a forma que isso pode ter e o nível de interações que ele imagina de acordo com o briefing, então para que não hajam esses ruídos, acho que o projeto precisa ser sempre alinhado com todos, desde o início.

4 – No artigo “Quanto mais simples o Wireframe, melhor” (http://tinyurl.com/79-capa-5), Frederick van Amstel analisa o envolvimento de clientes na etapa de produção do wireframe. Pela sua experiência, quais são as vantagens dessa estratégia?
Envolver o cliente na criação do wireframe pode ajudar na visão que ele tem sobre a estratégia de negócio, aprendemos muito com eles. Neste ponto eu concordo. Por outro lado não é ele quem vai navegar no site e sim o cliente dele (o usuário). Quem nos contrata pode acabar influenciando no nosso estudo com aqueles achismos que nós sempre tememos, por isso tem que haver um limite. Fazemos os wireframes porque temos embasamento de estudos, padrões de comportamento, navegação e de um briefing anterior.
O que pode ser ainda melhor então é envolver o cliente do cliente, que é o modelo mental e usuário final do produto. Este sim pode nos mostrar como é a interface ideal para ele.

5 – No artigo “Wireframe, documento cada vez mais importante” (http://tinyurl.com/79-capa-4), Leonardo Oliveira ressalta que “o arquiteto pode contribuir com a usabilidade de um site no momento em que está construindo os wireframes, ao evitar conteúdos redundantes e sobreposição de conteúdo, além de layouts complexos ou links escondidos”. Pensando nisso, como os conceitos de usabilidade devem ser aplicados na produção de wireframes?
A Arquitetura de Informação envolve o conhecimento de várias disciplinas. É importante saber um pouco de programação, de design e saber escrever bem. É difícil prever o comportamento do usuário por mais que o estudemos. Só iremos descobrir se a usabilidade é eficiente após alguns testes, porém, seu conceito deve andar junto com a criação de um wireframe, assim minimizamos a probabilidade de erros no final.

6 – Em discussão levantada no fórum Rede Design Digital (http://tinyurl.com/79-capa-1), arquitetos de informação analisam as transformações causadas no processo de trabalho desses profissionais pelas metodologias de desenvolvimento ágil. Em sua opinião, quais mudanças essas metodologias trouxeram para a produção de wireframes?
Como muitos disseram no fórum e como o próprio nome do método diz, o wireframe acaba tendo que ser feito por etapas, por isso algumas funcionalidades devem ser desenhadas no Sprint em que as Histórias serão escritas. Então certos detalhamentos e avanços devem ser deixados de lado, construindo as telas do wireframe aos poucos de acordo com as prioridades elencadas pelo P.O. Tive um pouco de dificuldades com o método no início, pois era difícil enxergar o projeto fragmentado e ter que fazê-lo em pequenas dosagens.
Na atual empresa costumo ler planejamento, escopo e ter uma visão macro. Construo o wireframe enxergando o projeto como um todo, envolvendo a área de TI, conteúdo e design e finalizando o protótipo antes do início da produção.
Também acho que metodologias ágeis não se aplicam a tudo, principalmente quando não há prazos. Neste caso o que acaba sendo aplicado é a boa e velha metodologia tipo WaterFall.

7 – No artigo “Design estrutural (wireframes)” (http://tinyurl.com/79-capa-2), é apresentada uma lista de softwares para produção de wireframes. Além do processo computadorizado, é possível também criar wireframes através de lápis e papel, com o uso até de régua especial (http://tinyurl.com/79-capa-3). Dentre as opções disponíveis pelo mercado, quais são os parâmetros que você utiliza na hora de analisar/escolher a ferramenta mais apropriada?
O primeiro parâmetro é o próprio prazo. Dentro do tempo normal costumo realizar meus protótipos em Axure, ele é prático e permite que alterações de estrutura sejam rapidamente feitas. Contudo a ferramenta é o de menos, o importante é a agilidade que o Arquiteto tem em trabalhar com ela e o entendimento do cliente na visualização desta documentação.
Quando precisamos de mais agilidade na entrega de um projeto, faço sketches de algumas telas e funcionalidades junto com o Diretor de Arte, assim ele já vai trabalhando na arte enquanto eu fotografo os esboços e envio com explicações para o cliente aprovar. De qualquer maneira gosto sempre de documentar via software, mesmo que o faça depois dos esboços já encaminhados para a arte.

8 – Falando especificamente sobre tecnologia, a produção dos wireframes poderá exercer algum tipo de influência na escolha adequada das plataformas tecnológicas a serem aplicadas nas etapas de desenvolvimento e programação funcional das interfaces?
Desde o início as áreas de TI, gerência de projeto e design devem ser envolvidas. Nas conversas iniciais conseguimos definir qual será tecnologia a ser utilizada, evitando que a etapa de arquitetura influencie nos demais processos.

9 – Existem três modelos para o desenvolvimento de um wireframe: de baixa fidelidade (protótipo com pouco detalhamento), de média e de alta fidelidade (com alto nível de detalhamento). Considerando as atuais necessidades e particularidades envolvidas com a produção de projetos web, é possível apontar um modelo ideal? Quais são as vantagens e as desvantagens na aplicação de cada um desses modelos?
Como já dito aqui, um dos parâmetros para se definir qual modelo a ser aplicado é o próprio prazo. Para prazos curtos, sketches e protótipos de baixa fidelidades ou para projetos que não exijam tantos detalhamentos, deixando também a equipe de arte mais livre para criar. E protótipos de alta fidelidade para projetos que necessitem de maiores detalhamentos, como portais, aplicativos, softwares, sites de bancos e comércio online.

Veja também:
Entrevista na revista Plug