Posts Tagged arquitetura de informação

Entrevista sobre wireframe na revista Webdesign

Revista Webdesign edição 79

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.

Foto da dupla da revista3 – 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

,

4 Comentários

Hotsite Brasília 50 anos

Este projeto foi lançado na data do aniversário de Brasília, porém somente agora pude divulgá-lo.

O planejamento, conteúdo, arquitetura de informação, design, animação e desenvolvimento foram feitos pela TV1. Eu cuidei da parte de Arquitetura de Informação, começando pela infoestrutura:

Infoestrutura Minisite Brasilia 50 anos

O especial fala da história de Brasília, e além de textos, contém vídeos, áudios e galerias de imagens. A proposta foi fazer uma linha do tempo diferenciada, um pouco fora do padrão de linha do tempo que estamos habituados a ver, então parti para a segunda etapa como de costume: os benchmarks e em seguida os Rafes:

Sketches do projeto

Para que todo o conteúdo não ficasse dentro de menus tradicionais, a ideia é que a navegação fosse feita através de três principais áreas (A cidade, O povo e A história) e a partir daí filtros que o usuário pudesse selecionar conforme o seu interesse.

Enquanto os rafes passavam pela aprovação, passei para a arte ir adiantando, pois como não tínhamos muito prazo as etapas tiveram que ser feitas no mínimo de tempo.

Conceito aprovado, iniciei então o desenho dos wireframes.
Não costumo colorizar os protótipos que faço, justamente para que a cor não influencie nas decisões do cliente, mas desta vez fiz questão de colorir algumas áreas, pois a presença da cor neste caso foi essencial para mostrar o funcionamento da navegação do site.
E como não se trata de uma navegação comum, criamos também mais de uma opção de navegação: Através das setas do teclado, pela roda do mouse, clicando nos conteúdos e finalmente pela própria timeline padrão que fica localizada abaixo do conteúdo central.

Hotsite Brasilia 50 anos - Wireframe da timeline

Hotsite Brasilia 50 anos - Wireframe dos filtros

Hotsite Brasilia 50 anos - Wireframe Brasília hoje

E para que não precisasse desenhar todas as telas, fiz uma página só de templates prevendo comportamentos diversos, como texto+imagem, texto+vídeo, texto+áudio e etc. Assim o editorial poderia escolher o template de acordo com a característica de cada conteúdo.

Hotsite Brasilia 50 anos - Wireframe dos templates

Enfim algumas telas do layout que o Caio Andreolli, Diretor de Arte aqui da agência desenhou:

Hotsite Brasília 50 anos - Layout da home

Hotsite Brasília 50 anos - Layout dos filtros

O trabalho de motion e programação foi feito pelo Alessandro Luz

Acesse o hotsite

1 Comentário

Um bate bola sobre o fim do TCC

Tudo um dia acaba, até o trabalho de conclusão de curso que as vezes parece interminável.

Finalizei minha Pós Graduação em Arquitetura de Informação neste sábado, dia da apresentação final.  Trabalhos de alto nível que surpreenderam a banca. Foi show de bola!

Meu professor Fabio Palamedi fez um post no Blog dele passando suas impressões. Vale a pena ler.

Bom, nosso trabalho foi sobre futebol e aquele post que fiz de uma pesquisa a respeito nos ajudou muito no trabalho. Fico muito agradecido aos que gastaram o precioso tempo fazendo!
Por enquanto não posso revelar detalhes do projeto, mas posso mostrar algumas telas da apresentação que fiz em Flash:

A Capa

A escalação

Navegação tipo estratégia de jogo

Uma das telas dentro da navegação da apresentação

Não fazia parte do trabalho, mas aproveitei o gancho para inscrever mais um job no IdeaFixa:

Arte para o IdeaFixa

E os grandes méritos para o sucesso do meu trabalho de conclusão também se devem às talentosas meninas que estavam no meu grupo: Luciana Alencar, Tassia Spineli e Melina Aves (estão nesta mesma ordem na 2ª tela da apresentação). Valeu muito!

3 Comentários

Portal Brasil: Orgulho!

Hoje foi o dia de lançamento do novo Portal Brasil, o que para mim é motivo de grande orgulho. Com uma equipe de aproximadamente 200 profissionais de diversas áreas, pude participar no desenvolvimento da Arquitetura de Informação. Motivo de orgulho por fazer parte de um projeto desta dimensão e de colaborar com o lindo trabalho que está sendo feito para o País.
Há muito ainda o que fazer, muito trabalho pela frente para oferecer o melhor serviço para o cidadão brasileiro.

O novo Portal Brasil é um canal aberto para o brasileiro se informar do que está acontecendo no País, opinando, tendo acesso às novidades, serviços, entrevistas, áudios, vídeos nas áreas de economia, educação, esporte, meio ambiente, geografia, história, saúde e muito mais.

Você também pode seguir o Portal Brasil no Twitter

3 Comentários

Revista Plug 2009

Em meados de maio a Plug, revista publicada anualmente pelos alunos do Curso Abril de Jornalismo me chamou para participar de uma entrevista que faria parte de uma matéria sobre novas mídias. Entre os entrevistados representei a profissão de Arquiteto de Informação.

Bom, a edição saiu agora em agosto e o que eu não previa era mudar de empresa antes do lançamento da edição. Pois é, surgiu uma oportunidade na TV1 e agora estou indo cuidar de um grande projeto. Pois bem, avisei o pessoal da redação a respeito da mudança e eles atualizaram a matéria antes que fosse impressa. Veja como saiu:

Páginas da revista Plug

VAGAS ABERTAS
No passado recente, eles não teriam emprego na Abril. Suas funções simplesmente não existiam
texto Amanda Zacarkim e Elisa Tozzi design Marina Brant foto Diogo Salles

Marco Moreira_Arquiteto de Informação_
Se você nunca construiu um prédio, como pode ser arquiteto? Essa é a pergunta a que o arquiteto de informação Marco Moreira, 32 anos, mais tem de responder. Para tanto, ele lança mão da metáfora: “Desenhar um site é como erguer um edifício. É preciso avaliar o terreno, entender o que o cliente quer e montar uma estrutura que priorize o usuário”. Webdesigner por formação, Moreira trabalhou na Abril até julho de 2009 e se envolveu com arquitetura de informação quando era estagiário, cinco anos atrás. Organizado e louco por planilhas, ele adora trabalhar nas etapas de criação de um site, que começam em pesquisas com internautas, passam por rascunhos de layout e chegam aos testes de navegabilidade. Testes que nunca terminam. “Sites são seres vivos; estão em constante mutação”, diz.

Abaixo a revista Plug 2009 completa para folhear:

,

Nenhum comentário.

Núcleo de User Experience na Abril Digital

Logo NUX“Em meio a tantas mudanças, a Abril Digital ganha uma área que até então não existia: o Núcleo de pesquisa focado em User Experience (UX) e Arquitetura de Informação (AI).

Provavelmente você já escutou que um sistema precisa ser enxuto, objetivo e claro o suficiente para ser bem utilizado. Afinal, o tempo que se perde pensando ou fazendo uma ação errada é muito frustrante. Chega a dar vontade de falar aquela frase que brasileiro adora dizer – é tudo culpa do sistema – e no pior dos casos, ainda acredita-se que seja falha do usuário.

Tudo isso porque, quando pensamos em uma interface, em muitos projetos, a preocupação com o usuário final só se torna explícita antes da ação de lançamento. Principalmente quando temos um prazo e metas agressivas, tudo que envolve pesquisa qualitativa demonstra um outro lado da realidade. Porém, existem métodos não muito custosos que podem ser agregados a práticas de desenvolvimento ou de produto. Investigar necessidades e manter um estudo prévio centrado no usuário pode evitar retrabalhos e melhorar a produtividade do time.

O núcleo de UX pretende ser um laboratório de soluções baseados numa premissa de inovação que preza por um processo cíclico e incremental, composto de quatro etapas: pesquisa com usuários, ideação, prototipação e avaliação. Um profissional de UX inserido em seu projeto significa o amortecimento das barreiras criadas entre projetistas  e a aplicação de uma interface usável, útil e que proporcione uma experiência significativa.

Cliclo NUX

Desde a sua formação, em maio, o NUX já começa a dar os primeiros passos. Contamos com 3 pessoas e as atividades diárias são atualmente baseadas em demandas e prioridades, as quais complementamos de acordo com a necessidade de cada projeto e o tempo que temos para executar as melhores práticas na área.

O compromisso do núcleo é a entrega de uma interação de qualidade antes do Product Backlog. Para garantir isso, o grupo participa e atua em definição de requisitos, sketches, storyboards, paper prototype e testes com usuários.

A área entende a estratégia de cada produto junto com os PO’s e avalia as necessidades frente a seu público alvo, através de interações contínuas e acompanhamento em todas as fases de vida de um projeto.”

Texto gentilmente cedido pelo Blog do NUXAbril escrito por Tássia Spinelli, Arquiteta de Informação, apaixonada pelo mundo dos games e do universo mobile.

, ,

3 Comentários

AI da INFO Downloads

Este foi o primeiro job que fiz na Abril Digital em Arquitetura de Informação.

O site da INFO possuia a área de downloads muito acessada, porém pouco explorada e o objetivo foi redesenhar para melhorar a usabilidade e deixar mais atrativo e captar novos usuários.
O cliente tinha como premissa a facilidade na busca da informação e a interação do usuário para comentar, avaliar e compartilhar o conteúdo.

Então iniciei os estudos primeiramente me familiarizando com referências que são conhecidas pelo público que costuma utilizar este tipo de serviço, já pensando na viabilidade técnica e sempre consultando o pessoal da programação. A Product Owner já conhecia muito bem o usuário e isso facilitou muito a minha vida.

Como vim da área de design, procuro manter também no wireframe proporções do tamanho dos elementos para que a localização e o estudo já feito na arquitetura não seja prejudicado na hora do layout.

No wireframe usei algumas cores para diferenciar os tipos de informação deixando claro para o cliente a localização e o espaço que cada um deles ocupariam:

Wireframe e layout:

Wireframe à esquerda | Layout à direita

Abaixo o wireframe de uma das páginas mais importantes do site, a página de downloads. Tentei deixar as opções de interação o mais claro e óbvio possível, podendo ser visto logo no primeiro scroll da página e logo abaixo desta parte, dados importantes para decisão do download do software.

Wireframe da página de download

E o layout feito pelo designer do site baseado na Arquitetura de Informação:

Layout da página de download

O admin utilizado para a inserção de conteúdo foi feito direto na programação enquanto a arquitetura do site não ficava pronta, ou seja, não foi feito a arquitetura do publicador devido ao prazo, mesmo assim fiz uma análise heurística e de layout para que a usabilidade não fosse comprometida na publicação dos conteúdos.

1 Comentário

Arquitetando a carreira

arquiteto_de_informacao
Hoje é uma data muito importante pra mim e o início de uma fase enorme de grandes aprendizados.
Primeiro por que comecei a trabalhar oficialmente como Arquiteto de Informação e, aproveitando a força do vento iniciei a algumas semanas o Curso de Pós Graduação em Arquitetura de Informação na Faculdade Impacta Tecnologia.
Já me envolvi anteriormente com alguns trabalhos na construção de wireframes, mas ainda não tinha me dedicado integralmente a essa função.

Mudar é preciso
Hoje foi um dia completamente diferente. Meus horários, rotina, pessoas, ambiente e o trabalho. Acho que o ser humano precisa de mudança para ter energia e ser feliz. Por experiência própria posso dizer que a oportunidade acontece para quem a faz, basta querer. Não é a toa que já me envolvi em trabalhos distintos, como atuação em programas de vídeo, edição, animação, fotografia, design e agora Arquitetura de informação.

Se eu pudesse eu me dividiria em uns 5 para dar conta de fazer tudo o que gosto, mas como não posso, tive que fazer uma escolha que foi mudar de área. Dói um pouco a idéia de deixar de lado o Photoshop e o Flash, companheiros de um longo período na minha experiência como designer. Mas na vida a gente precisa escolher as coisas desde a hora que acordamos, não é? Escolhemos com qual roupa iremos trabalhar, se vai ser chá ou café, pão ou bolacha, escolher qual rádio ouvir no carro, qual o melhor caminho para driblar o trânsito…
E na vida profissional não é diferente.

Escolha feita, lá vou eu!!!

Ah!! Para você não ter perdido tempo de ter chegado até aqui para ficar vendo esse “auto-jabá”..rsrs (por que esse blog é de fato um… digamos… “Blogfólio”), descolei um sketch do Arquiteto de Informação Americano T. Scott Stromberg que é uma verdadeira Obra de Arte:

wireframe_t_scott_stromberg

2 Comentários

Redesign do site da Mundo Estranho

Wireframe
O site da Mundo Estranho passou por uma reformulação radical. O objetivo foi a diminuição de peso e banda ocasionados pelo grande conteúdo Multimídia que o site anterior tinha, ter mais foco no que a marca tem de mais forte (curiosidades), melhorar a usabilidade e agilidade na navegação e fazer uma grande busca por perguntas e palavras-chave para que o usuário possa encontrar a resposta em forma de texto e infográficos que dão apoio às respostas.

Dentro deste objetivo comecei a organizar a informação e navegação no Axure (imagem abaixo) e finalizado e aprovado a navegação, parti para o layout do site, que segue bem a estrutura criada.

redesenho_me2


Layout
Realizei o estudo de cores e iconografia dos canais priorizando o uso de CSS, melhorando a indexação em buscadores, padronização e compatibilidade com diversos browsers, estudo de tamanhos de título e conteúdo, RSS, tamanho e padrões de imagens, módulos na home com tamanhos de imagens diferenciadas dando maior flexibilidade para o Editor e um box do lado esquerdo com rápido acesso à área participativa para assinantes e leitores da revista.

redesenho_me1

Paleta de cores
Paleta usada como “manual” com a finalidade de facilitar a vida do programador e para quem irá trabalhar com o site daqui pra frente.

paleta_de_cores

Iconografia dos canais
Seguindo as cores dos canais, a designer Fabi Zambon me ajudou a conceber a iconografia de maneira que fosse facilmente reconhecida e claro, o nome do canal acompanha o ícone.

iconografia

Padrões das imagens
Foi pensado também na padronização das imagens da home, imagens de promoção e tamanho padrão das capas de revista a fim de facilitar também no trabalho de atualização do designer/editor.

tamanho_imagens


,

2 Comentários

Curso Abril de Jornalismo 2008

Hoje falo um pouco sobre como foi produzir o projeto “Em Tiras” para a editoria da Abril Digital sob orientação de Alini Sordili no Curso Abril de Jornalismo

ca_livro

Pesquisas e referências

Primeiramente fomos convocados para fazer um site de história em quadrinhos, jogos e animações baseados nos moldes do Comflix. Claro, nós do grupo boiamos um pouco, pois o máximo que sabíamos de quadrinhos girava em torno dos gibis da turma da mônica..rs
Pois então, tivemos que correr atrás de pesquisas de público, de linguagem e entender de fato quais eram as necessidades deste público, o que eles pensam, o que eles curtem e como seria este tal “site ideal” para eles.

Dentre diversos livros que vimos e compramos na Comix, recomendo muito esse, o “Desenhando quadrinhos“, tanto para iniciantes quanto para quadrinistas auto-didatas que ainda não o leram. É obrigatório!
O livro também é excelente para quem faz storyboards e trabalha com animação. Percebi que uma história de quadrinhos tem tudo a ver com o comportamento do storyboard.

Wireframe

Depois de entender esse público e mergulhar nesse mundo partimos para a parte prática.
Nem todos optam por fazer um wireframe detalhado, mesmo porque as vezes não dá tempo, mas acho que sem ele a probabilidade de um projeto ter furos é muito grande, então preferimos gastar mais tempo no entendimento e no planejamento para fazer um projeto conciso de cabo a rabo!.

ca_wireframe

Logotipo

Primeiramente, definimos o nome, concebido por todos os envolvidos no projeto, depois veio a concepção do logo que foi feito por mim e pela designer Lívia Holanda, parceira do grupo.
O objetivo foi criar algo original e que de cara se relacionasse com o assunto que estávamos tratando. Acertamos em cheio!
Temos referência do “balão” presente em todas as HQs e definimos para a tipografia uma temática que tem tudo a ver com o rítmo dos frames das histórias em quadrinhos.

ca_logo

Layout do site

O prazo era curto. Nós fomos o primeiro grupo a entregar o projeto, o que exigiu muita energia e algumas madrugadas em claro.
Optamos por fazer um layout em que as informações dos boxes em primeiro plano ficasse em maior destaque em relação ao backgroud do site.
Estudamos também quais seriam as áreas mais nobres dentro do scroll e grandes áreas de acessos para a nossa principal idéia: O “Crie HQ”, onde o usuário poderia criar a própria HQ, imprimir, mandar para os amigos ou até salvá-la como imagem e fazer o upload no site, criando o seu perfil onde poderia exibir toda sua criação e essas serem submetidas a comentários e avaliação de outros usuários.
ca_layout_site

ca_foto_grupo

THE END

O Final foi tão feliz quanto triste. Foram 30 dias de intenso trabalho e aprendizado com profissionais da Editora Abril e alunos bacanas e talentosos que viraram grandes amigos. Este aí em cima foi o meu grupo. Da esquerda para a direita:
Jornalistas Natalie Reinoso, Katiane Romero, Lucas Pereira e Designers Lívia Holanda e Marco Moreira (eu!)

Para a apresentação mandamos fazer as camisetas, onde em cada verso havia uma letra, representando a união matadora do grupo. Lívia Holanda também preparou uma animação de abertura onde explicava o conceito do projeto:

E para fechar com chave de ouro ainda criamos e mandamos imprimir diversos fanzines que continha nossa história no projeto desde o início.

Valeu demais!

, , , ,

4 Comentários