Posts Tagged ‘Arquitetura da informação’

Revista Cult

Há alguns meses participei do projeto de redesenho do site da Revista Cult. Fui contratada pelo pessoal da Fli Multimídia para fazer a arquitetura de informação da revista. Os conceitos foram discutidos com Rodrigo Savazoni e André Deak e a partir das nossas conversas criei os entregáveis – wireframes, mapas e fluxos que por sua vez foram entregues a Faracy, que transformou as nossas ideias em um site todo construido na plataforma Wordpress (aliás, o pessoal da Faracy é fera nisso). Mais uma prova que o Wordpress é muito mais que uma simples plataforma de blogs. Foi um trabalho que considero um marco no caminho de A.I. que venho trilhando. Visite o site.

Wireframe da Home - Revista Cult

Wireframe da Home - Revista Cult

Fotos Estadão

Há tempos planejávamos uma reforma na editoria de fotos do Estadão.com e finalmente, a reforma ficou pronta.

A página anterior deixava a desejar pois a área de fotos era quadrada e muito se perdia das fotos por conta disso, além de aproveitar pouco o potencial fotojornalístico da casa.

Home de fotos a ser melhorada

Home de fotos a ser melhorada

Para desenhar a nova página contei com o apoio das dicas super valiosas do nosso editor de fotografia Nilton Fukuda (que aliás edita o imperdível blog “Olhar sobre o mundo” e também com as dicas do meu colega Guilherme Sanches, já citado nesse blog outras vezes.

Antes da primeira conversa com o editor, eu fiz um wireframe da home, que mudou bastante em relação ao que temos hoje.

Um dos wireframes do processo

Um dos wireframes do processo

No canal anterior a navegação se dava na home mesmo e o maior tamanho da foto era 290px x 290px, exceto quando entrava na galeria, que abria em pop-up (que na verdade, já era uma versão melhorada da primeira galeria).

Redesenhamos completamente o Foto Repórter – que agora ficou no mesmo padrão da editoria. Tivemos um grande avanço nas galerias de fotos, com fotos bem maiores, navegação por editorias ou por galerias, ícones de compartilhamento, seguindo as diretrizes das galerias de outro produto da casa, o Limão.

Nova visualização de fotos e galeria

Nova visualização de fotos e galeria

Veja o resultado final da home e navegue por todo o canal.

Abraços e até o próximo post.

Layout final

Versão final da home do canal Fotos Estadão

09

02 2010

Na casa nova, uma nova proposta

Finalmente, comprei um domínio, uma hospedagem e resolvi por meu “blogfólio” no ar. Antes, usava o espaço para falar sobre os meus trabalhos e experimentações, agora pretendo falar sobre arquitetura da informação, infografia, design, fotografia, mídias sociais (assuntos ligados a minha formação) e serviços interessantes nessa internet desorganizada de meu Deus. Não apenas trabalhos meus, mas, de outras pessoas também. Não tenho a pretensão de fazer um post por dia, mas, tentarei manter uma frequencia decente (um post por semana, talvez, não sei), pois esse não é um espaço pra cobranças (pois, de cobranças basta as do trabalho para o qual sou paga pra executar) e sim, pra ser feliz.

Para quem quiser ir direto aos meus trabalhos, é só clicar na categoria Portifólio, que é um filtro que mostra todos os trabalhos postados. Aliás, sofri muito para decidir esse formato de portifólio. Entre fazer um portifólio lindo e complexo, optei por um blog eficiente, claro e com todas as possibilidades de interação permitidas pelo número de widgets e serviços que são lançados por ai. Sem falar na facilidade de atualização. E de personalização da ferramenta. Item importante pra essa designer/arquiteta/cozinheira que vos escreve.

Assinem o feed e fiquem informados das atualizações do bloguinho.

Welcome!

31

08 2009

Link

Em junho de 2009 estreamos o novo site do Link. Parte de um grande projeto, o site do Link foi a primeira ação que envolve essa marca do Grupo. Fiz a arquitetura de informação desse projeto com o querido Rodrigo Savazoni. Foi um trabalho muito especial e gratificante, com ideias excelentes e coroado com o belo design de Thiago Braga.

Wireframe da home do Link

Wireframe da home do Link

Home do link dia 18/08/09

Home do link dia 18/08/09

18

08 2009

Coluna da Fisio no ar!

Eu precisava de um assunto interessante pra explorar em um trabalho da pós e uma amiga precisava divulgar seu trabalho. Dessa junção surgiu a idéia de criar um blog colaborativo para fisioterapeutas que utilizarão a ferramenta para dar dicas e falar sobre fisioterapia a quem interessar. Aproveitando o conhecimento adquirido com o case MPB4, o projeto se firmou nas seguintes bases: o blog colaborativo, twitter pra divulgação de posts e links interessantes de fisioterapia, o flickr pras galerias de fotos e a comunidade no orkut também voltada pra divulgação  e discussão dos assuntos pautados pelo blog. Tudo isso integrado na plataforma Wordpress.

No momento, contamos com duas profissionais blogando e pretendemos em um futuro bem próximo ampliar o número de colaboradores no site.

O trabalho foi feito conjuntamente com Marco Moreira (designer e arquiteto de informação como eu) e Bruno Fernandes  (analista programador).

É um trabalho que foi feito para contemplar a primeira Oficina Integradora do Conhecimento ministrada pela Thaís Campas no curso da FIT, mas, que vai ser continuado e melhorado, tendo como objetivo se tornar um endereço de referência sobre fisioterapia na web.

Obrigada aos colegas pela realização do trabalho e às fisioterapeutas  Dra. Gislaine Zapata e Dra. Luciana Almeida pela importante contribuição nesse pontapé inicial. Nos visite.

Printscreen do www.colunadafisio.com.br

Printscreen do www.colunadafisio.com.br

01

07 2009

Linguística e Mass Media

Essa disciplina ministrada brilhantemente pela Prof. Msc. Sílvia Dotta nos levou de encontro à algumas teorias de comunicação, cultura de massa e cibercultura.

Assistimos alguns filmes, entre eles, o belíssimo Renaissance, um filme que mostra Paris em 2054, linguagem HQ, alto contraste P&B, onde a linguagem no filme está sempre relacionada a tecnologia. É um filme de aventura, mas, tem muito aspectos a serem observados quando visto da forma como vimos, como objeto de estudo. Abaixo, o trailer:

Dessa disciplina sairam dois trabalhos: a criação de um dispositivo interativo para estabelecimentos para relacionamento com os clientes  e uma resenha crítica de um livro da área. Eu escolhi O Design do Dia a Dia do Donald Norman, que aliás é um excelente livro pra quem quer estudar usabilidade.

O nosso trabalho foi a criação de um dispositivo para supermercados. A função não será descrita aqui, porque, a gente não sabe o dia de amanhã, e podemos resolver produzir a ideia. Mas, foi um trabalho muito interessante com definição de público-alvo, análise SWOT (novidade pra mim, que nem sabia o que era isso), criação de funcionalidades, entre outros tópicos. O trabalho aliou teoria e criatividade e saímos do convencional ao criar um dispositivo pra supermercado, ao invés de uma funcionalidade pra sites ou celular, o que era esperado já que quase todos do grupo trabalham com internet.

Particularmente, eu gostei muito da disciplina, principalmente pela professora, que nos instigou a pensar (e muito), com muitas questões durante a apresentação do trabalho e com o feedback, tão importante pra nós que estamos aprendendo. Aliás, feedback é importante em todas as áreas.

P.s.: Como a resenha é grande, vou disponibilizá-la aos colegas da turma, no nosso grupo. Se alguém, quiser lê-la, é só pedir que eu envio.

14

05 2009

Introdução a A.I. e Elementos Fundamentais em A.I.

As duas disciplinas em uma que foram ministradas pela Profª. Thaís Campas nos colocou em contato com as primeiras noções sobre o trabalho do arquiteto de informação e nos apresentou muitos termos do jargão da profissão, assim, como algumas  técnicas e métodos de trabalho. A ferramenta mais discutida e temida por nós em aula foram as matrizes. Matrizes de funcionalidades, matrizes de conteúdo, matrizes. A matriz, no meu entender, nada mais é que um levantamento profundo das funcionalidades e conteúdos de um site/portal (isto, é se for uma matriz legada – de um produto já existente) ou se for de um produto novo, conterá funcionalidades, seções, links, tecnologias, tudo o que for necessário pra um bom andamento de projeto. É uma planilha detalhada nos dois casos e os campos da planilha quem vai definir é o próprio arquiteto.

Como conclusão dessa disciplina nos foi pedido um trabalho em grupo de análise de um portal ou site à escolha com os seguintes conteúdos: uma matriz de escopo até o 4º nível do site mais perfil do negócio, razão de escolha do portal a ser analisado, análise da situação do portal (pontos fracos, fortes, oportunidades e ameaças) e uma conclusão com possíveis melhorias para a experiência do usuário.

Eu e o meu grupo ( Eglen Mari, Erico Rabanea e Shirley Higa) escolhemos o portal da SPTrans por ser um portal destinado a informar as pessoas sobre o transporte público da cidade e os benefícios de usá-lo, além de mostrar as facilidades que oferecem.

Após a análise detalhada nós chegamos a algumas conclusões: que o portal da SPTrans apresenta uma série de serviços relevantes a população em geral, tanto o usuário de transporte coletivo quanto o usuário de transporte individual. Possui também um banco de dados rico e complexo que privilegia a rapidez resultando em uma resposta satisfatória em consultas. Levantamos vários pontos a serem desenvolvidos e aplicados, que claro, não vou expor aqui, porque quem trabalha de graça é relógio, rs. Mas, o mais importante desse trabalho foi aprender que a partir de uma série de ferramentas de análise você pode ter a diferença entre mais um projeto e um projeto de sucesso.

É por isso que existe a figura do arquiteto de informação, para enriquecer de dados relevantes um projeto, pra ter uma visão holística sobre todas as áreas envolvidas e detectar problemas e soluções antes de qualquer desenho ou redesenho de site, portal ou o produto que for. Pra ninguém morrer de curiosidade, uma palhinha do que foi nossa matriz de escopo.

Pedacinho da nossa matriz de escopo

Pedacinho da nossa matriz de escopo

31

03 2009

Barba e bigode… ou se preferir, wireframe e layout

Para o hot-site da Madonna no Brasil para o Limão – produzi os documentos de A.I. a partir de um desenho executado conjuntamente com a editora do projeto. Participei desde a discussão sobre os campos até a finalização do layout e fiz o acompanhamento junto a parte técnica. Foi um trabalho muito prazeroso, pois fugiu um pouco da normalidade dos trabalhos que executo para o Estadao.com.br. Pude ousar um pouco mais nas cores e no layout já que o referido era um pedido do pessoal do Limão. Como ao fazer o wireframe eu já sabia que ia dar a saída pro layout, acabei fazendo-o muito próximo do que eu queria pro layout, depois apenas artefinalizei. Confira o resultado aqui

Wireframe - Madonna no Brasil para Limão

Wireframe - Madonna no Brasil para Limão

Layout do hot-site

Layout do hot-site

13

03 2009

O primeiro wireframe oficial a gente não esquece

É fato. Embora esteja usando um clichê para fazer um título, a verdade é essa mesmo. Em meados de 2008 produzi os meus primeiros documentos de arquitetura da informação. Agora que o produto está no ar (na realidade, já está faz alguns meses) posso mostrar um pouco do trabalho que realizei com a colaboração do editor Rodrigo Savazoni (ai que saudade dessa parceria!). Ele foi o pai do projeto e eu o ajudei a colocar as idéias no papel. Trabalhei exclusivamente com a organização da informação e a produção de aproximadamente 50 wireframes que deram o suporte para o pessoal da criação colocar um belo produto no ar. Em tempo, sou designer de formação e trabalho há 8 anos com design de interfaces e no momento, estudo Arquitetura da Informação na FIT. Embora, tenha sempre pensado em arquitetura, sem saber que estava pensando, minha primeira praia é o design. Mas, A.I. está se tornando um complemento e uma paixão. Ainda não sei aonde isso vai me levar. Agora sem churumelas, uma palhinha:

Wireframe V.01 - Paladar

Wireframe V.01 - Paladar

Não pretendo incluir aqui detalhes de como o trabalho foi feito, apenas, uma pílula de conhecimento, no caso, um dos wireframes e o resultado. Em um processo de desenvolvimento de produto, muitas coisas mudam pelo caminho, nomenclaturas, áreas, ideias. É um exercício muito rico, revisitar o início de um projeto, meses após tê-lo concluído.

Uma curiosidade, apenas pra finalizar: comecei esse projeto dias antes de começar a pós em A.I. Foi um processo altamente intuitivo baseado nos anos de trabalho como designer e nos profundos papos com Rodrigo Savazoni e Thiago Braga, o editor de arte do Portal, responsável por toda a “cara” do projeto.

11

03 2009

O fascinante mundo da A. I.

Desde o dia 22 de setembro estou assistindo aulas na minha pós em Arquitetura da Informação. E neste final de semana comecei a por em prática um pouco do que aprendi. Um mundo de planilhas e ppts. E pesquisa e análise. Confesso que fisicamente estou cansada. Mas, completamente fascinada pelo novo mundo que está se abrindo bem na minha frente. Fiz a escolha certa. Tenho mais certeza do que nunca.

13

10 2008