João Pedro Rosa

Arquitetura de Informação: Ramarim Prim/Ver 2012

2011-09-19T15:26:00.001-03:00

Wireframe / Conceito Visual

Segue meu último projeto como Arquiteto de Informação. Conceito visual criado por Luciano Machado.

GAD'Brivia

Logotipo ClicLances

2011-05-16T16:36:00.000-03:00

Industrial Boituva

2011-05-16T16:34:00.000-03:00

Website da Industrial Boituva utilizando a plataforma Joomla.

Wireframes

2010-11-05T16:59:00.000-02:00

Alguns wireframes que desenvolvi para aplicação de DataQuality.

Cartas

2010-11-05T16:52:00.000-02:00

Layout e diagramação de cartas.

Esta foi criada para a secretaria da saúde do estado de São Paulo.

Carta antiga

Segunda versão

Primeira versão

Aprovada

Cartas para o Governo do Estado do Rio Grande do Sul

Blog Promessas de Políticos

2010-11-05T16:39:00.000-02:00

O blog Promessas de Políticos foi um trabalho desenvolvido por mim e mais dois colegas durante as eleições presidencias de 2010. Para conhecer melhor sobre o blog acesse: www.promessasdepoliticos.com.br

Desenvolvido sobre a plataforma do wordpress, fui responsável por toda a parte de design e manutenção, fora a participação nas postagens, palestras, entrevistas...

Capa do Blog

Icone

Votorama (Ficamos em 2º lugar como melhor blog de política do Brasil)

Portal R7


Revista Brasil, além de sair na capa do site ganhamos uma matéria de 2 páginas na revista.

Palestra na UFRGS

Energydrink + Vodka

2010-07-02T16:20:00.001-03:00

Novo trabalho desenvolvido para a Faculdade na cadeira de Marketing. Eu e um colega ficamos responsáveis pela criação da imagem do produto, meu colega o Tiago criou a garrafa que está acima. Eu fui responsável pela finalização e criação do banner que se encontra abaixo.

Também fui responsável pela criação do vídeo promocional.

Blog: Promessas de Políticos

2010-06-01T11:31:00.004-03:00

Este é meu mais novo Blog, que estou mantendo em parceria com mais dois colegas de trabalho, William Grillo e Phelipe Ribeiro. Para conhecer melhor a nossa proposta visite o site. Também possuímos um twitter que funciona junto com o blog.

O blog foi desenvolvido em cima da plataforma do wordpress. Criei um layout bem simples e limpo, de fácil navegação e leitura.

BeachGear

2010-05-10T14:38:00.000-03:00

BeachGear é uma empresa australiana que comercializa cadeiras de praias e utilitários. Desenvolvi uma loja online com todos os produtos de suas linhas. Utilizei o OpenCart como solução de shopping online para fazer a gestão do conteúdo, layout desenvolvido no Photoshop CS3.

Guinness AD

2010-05-10T14:20:00.002-03:00

Este pequeno curta produzido por mim é uma homenagem a melhor cerveja escura do planeta. Foi filmado com uma Panasonic Lumix FX55 e editado no Adobe Premiere CS3. Trilha sonora Alan Parsons Project.

Foto do Monumento Tranqueira Invicta

2009-10-26T14:32:00.004-02:00

Como prometido, uma foto do monumento pronto em Rio pardo.

Créditos ao Caé Braga, escultor Gaúcho que criou a obra.

Monumento Tranqueira Invicta, Rio Pardo - RS

2009-09-29T10:49:00.006-03:00

O Escultor Gaúcho Caé Braga, vai assinar o monumento em homenagem aos 200 anos da Tranqueira Invicta, em Rio Pardo, uma importante região que teve a Fortaleza Jesus Maria José e na demarcação e preservação do domínio português contra o avanço dos espanhóis no sul do continente. Com sua arte, ele trabalhou os pontos mais marcantes da cultura local, e após cada um destes contextos ser passado para o papel, eu entrei com a parte de arte-final em corel. Trabalhamos juntos na composição e montagem final do monumento que vai ter aproximadamente 2 metros de altura e vai ser recortado a laser em chapas de metal sobre um fundo de concreto.

O lançamento está previsto para o início de Outubro.

Marketing Viral, Marketing Emocional.... FLASH MOB

2009-09-19T17:46:00.009-03:00

Uma campanha em vídeo que começa inoscente, algo que seria apenas mais um show. Com um pequeno release e apresentação do grupo Black Eyed Peas em Chicago, parte do The Oprah Winfrey Show, algo inesperado surgi, vindo da platéia e deixando a apresentadora Oprah emocionada e quase sem palavras. Por traz de tudo, está a T-Mobile, que em conjunto com o Rapper Will.I.am, treinou um grupo de dançarinos, que treinaram mais 800 fãns, e estes mais 20.000 pessoas que faziam parte da platéia.

iPLOTZ online, crie e gerencie wireframes

2009-09-12T20:16:00.006-03:00

A meses venho procurando uma boa ferramenta para criação de wireframes e mokeups navegáveis, que seja simples, online e com um bom sistema de gerenciamento de conteúdo. Eis que cheguei ao iPLOTZ!

O que é o iPLOTZ?

É uma ferramenta web-based desenvolvida em flash, para criar experiências de navegação web, iphone ou mesmo aplicações desktop. Ele oferece a possibilidade de múltiplos usuários que também podem comentar, administrar e editar o conteúdo gerado.

A interface parece simples no inicio, a navegação é semelhante a aplicações gráficas de desktop, mas ao iniciar um desenho, uma variedade de funções vão surgindo. Com uma completa biblioteca de componentes web como janelas, objetos de formulários, tabelas, botões e icones, cada um tem sua janela de configuração própria. É possível editar as cores, conteúdos, labels e tamanhos com poucos cliques. Também é possível importar componentes externos em jpg, png, gif e swf.

A parte de gerenciamento dos projetos também é muito interessante, você tem uma barra de progresso em cada um, onde ele mostra o progresso diário de desenvolvimento, e pode ser agregado comentários dos colaboradores. Também existe uma tab de compartilhamento com outras contas do iplotz.

Então, se você procura uma boa ferramenta online para criar wireframes, concerteza o iPLOTZ é uma das melhores opções do mercado. Na versão gratuita você pode trabalhar em um projeto, depois existem 3 pacotes de assinatura mensais de $15,00 a $500 doláres.

Arquitetura da Informação

2009-09-02T10:03:00.014-03:00

Desde fevereiro de 2009, estou envolvido em um projeto de uma ferramenta de ETL na empresa em que sou colaborador. Durante este tempo, fiz parte da equipe de Arquitetura da Informação e atualmente estou fazendo a parte de Criação e Usabilidade da Interface. Na época em que iniciei no projeto me senti perdido e ao mesmo tempo surpreendido com as possibilidades de AI, e depois de fazer um curso pela JumpEducation oferecido pela empresa, a metodologia do projeto começou a fazer muito mais sentido, sendo que hoje me sinto totalmente seguro dentro deste processo.

Então quero compartilhar um pouco desta experiência com vocês, falando brevemente sobre cada principio aplicado durante as etapas da Arquitetura desta ferramenta que estamos desenvolvendo.

Passo 1 ( Pesquisa):

Com a equipe de AI e Usabilidade formada, nos reunimos com as equipes de Desenvolvimento e Pesquisa para buscar compreender alguns quesitos básicos para dar inicio ao projeto.

Estes quesitos são:

Visão
Missão
Objetivo

Passo 2 (Concepção e Wireframes):

Com estes 3 itens compreendidos, partimos para nossa sala de criação, composta por uma espaçosa mesa, marcadores, post-its e quadro branco. Um dos desenvolvedores juntou-se a equipe para responder questões de implementação, já que a ferramenta a ser desenvolvida deveria se em Java-Web, utilizando uma metodologia de desktop. A partir disso, começamos a criar wireframes a mão e discutir as possíveis regras de organização do conteúdo.

Após 2 dias de trabalho, definimos um padrão de navegação, e já criamos o wireframe da tela inicial da aplicação no quadro, que ficou um pouco semelhante com o windows.

Passo 3 (Protótipos):

Depois de criar, validar e documentar as regras de organização de todas as aplicações que farão parte da ferramenta ETL, com wireframes desenhados no quadro e fotografados, eu transferi tudo para minha estação e comecei a desenvolver os protótipos não navegáveis. O primeiro protótipo foi composto apenas de elementos funcionais, sem dar muita atenção visual.

Após aprovação deste protótipo, me dediquei a criar uma identidade visual que desse mais vida ao sistema. Foram inúmeras interfaces, e a aprovada até o momento foi a seguinte:

Mas como nem tudo é assim tão fácil, após a aprovação desta interface, tivemos alguns problemas de implementação e tivemos que optar por não dar tanta relevância a aspectos visuais, limitando a o design. E a partir disso, a simplicidade entrou em pauta, e tive que desenvolver uma nova identidade.

Devido a ferramenta ainda estar em desenvolvimento, não vou postar imagens atuais, mas futuramente pretendo finalizar este post com um review final de todo o processo. Acredito que muitos vão se surpreender com o resultado, e posso dizer que está bem diferente deste último protótipo.

Trabalho de Semiótica: O Poema do Semelhante

2009-09-01T17:28:00.005-03:00

No primeiro semestre de 2009, cursei a cadeira de Semiótica, aquela que muitos temem, muitos odeiam, mas no final, muito se surpreendem. Eu sou uma dessas pessoas que se surpreendeu, pois o que essa cadeira ensina, é base para qualquer trabalho criação.

Um dos últimos desafios dessa cadeira foi baseado no Poema do Semelhante, onde os alunos deveriam interpretar o mesmo com recursos de sua escolha. Os trabalhos da turma ficaram muito bons, algumas esculturas, apresentações em PowerPoint e vídeos.

Eu e meu colega Fernando Fleck, depois de muito debater em cima do assunto proposto, chegamos a idéia de criar um vídeo. Nosso foco foi Ayrton Senna, e em cima dessa personalidade que mexe com a emoção de qualquer pessoa, interpretamos o Poema do Semelhante.

Toda nossa composição de vídeos foi feita a partir do YouTube, com a música de fundo da banda The Wallflowers. A edição e finalização foi toda feita no Adobe Premiere CS3. Devido ao pequeno prazo de entrega do trabalho, tivemos que optar por não se prender pela qualidade, mas sim pela emoção que o vídeo poderia transmitir, fica a cargo de vocês fazerem esta análise.

Infográfico da Interativa

2009-08-26T13:54:00.004-03:00

A Proposta: Criar um infográfico para dispor os componentes de segurança da Interativa durante um vídeo comercial.

A partir desta proposta, desenvolvi uma casa utilizando o software Google Sketchup, que é muito simples e oferece inúmeras possibilidades.

Com o arquivo finalizado, exportei ele para o Kerkythe através de um plugin do Sketchup. Kerkythe é um software de renderização um pouco mais complexo, porém nenhum bixo de sete cabeças.

Com a renderização finalizada em nada menos do que 45 minutos, fiz os últimos retoques no Photoshop, e aqui está o arquivo final.

No último post você pode conferir o infográfico inserido no vídeo de apresentação da Interativa.

Interativa, Solução em Segurança

2009-08-26T11:39:00.006-03:00

Vídeo desenvolvido para apresentar o sistema de segurança da Interativa. Todo o processo de filmagem e criação dos elementos visuais foram feitos pela equipe de Usabilidade & Comunicação da Godigital, da qual faço parte. A finalização foite feita por uma Produtora de Porto Alegre.

Logotipo: Lucas Eco Brindes

2009-02-05T11:46:00.003-02:00

Logotipo: Lucas Eco Brindes
Cliente: Lucas Dieter
Software: Corel Draw X4
Descrição: Logotipo para embalagens do Lucas Eco Brindes

Banners: AbraaoGS Game Store

2009-02-05T11:35:00.008-02:00

Flash

Gif

Cliente: AbraaoGS - http://www.abraaogs.com.br
Ano: 2009
Softwares: Photoshop CS4, Flash CS4
Descrição: Banner publicitário para o site do AbraaoGS.

Para Vizualizar o banner acesse: http://www.hangarnet.com.br/forum

Webdesign: Estúdio Zardo

2008-11-18T09:31:00.002-02:00

Webdesign: Estúdio Zardo
Empresa: Foto Zardo - www.fotozardo.com.br
Linguagens: html
Softwares: Photoshop CS, Dreamweaver CS
Descrição: Site desenvolvido para servir como um catálogo de amostras dos trabalhos do Estúdio Zardo.

Webdesign: Site Institucional da Palterm

2008-11-14T13:09:00.003-02:00

Webdesign: Site Institucional da Palterm
Empresa: Palterm - www.palterm.com.br
Linguagens: xhtml, flash, asp + access
Softwares: Photoshop CS3, Dreamweaver CS3, Access 2007, Flash CS3
Descrição: Site desenvolvido para atender os clientes através de um sistema restrito, com catálogo online e informações da empresa. Desenvolvi toda sua estrutura em xhtml + css e os objetos em flash. Site otimizado e rodando google Analytics com conversão de metas.

Tratamendo Fotografia: Pescador

2008-11-12T16:39:00.003-02:00

Fotografia: Pescador
Cliente: Papo de Pesca - www.papodepesca.com.br
Software: Photoshop CS3
Descrição: Fotográfia do colunista do papodepesca utilizada na adesivagem de um veículo da marca

Embalagem: Calcanheira Slim Masculina

2008-11-11T09:10:00.005-02:00

Produto: Calcanheira Slim Masculina
Empresa: Palterm - www.palterm.com.br
Ano: 2008
Embalagem: Blister de PVC transparente
Softwares: Photoshop CS3, Corel Draw X3
Descrição: Novo embalagem para o produto calcanheira invisigel, que agora se chama Calcanheira Slim da linha Para Homens

6ª Propaganderia da Unisinos

2008-11-11T08:53:00.004-02:00

Desde a tarde desta segunda-feira, 3, o saguão do Bloco B das Ciências da Comunicação abriga os trabalhos participantes da 6ª Propaganderia. Nesta edição o briefing do evento é baseado no incentivo à leitura.

O projeto Propaganderia é destinado a estudantes de Publicidade e Propaganda da Unisinos, e funciona como um primeiro passo na carreira profissional. Criando peças publicitárias que variam de acordo com a disciplina que o aluno está cursando, o evento proporciona aos participantes o exercício prático da profissão.

Nesta quarta-feira, 5, é o dia da avaliação dos trabalhos. A banca avaliadora será composta por quatro profissionais da Publicidade: Marcelo Amil, diretor de criação da Soul; Bárbara Bastos, redatora da DCS; Gustavo Portela, diretor de arte da DCS; e Rodrigo Rocha, redator da Paim.

O encerramento ocorre no dia 13 de novembro, às 20h, no Auditório Central. Após a premiação dos três melhores colocados de cada categoria, Dado Schneider realiza palestra sobre o tema Marketing para as classes C e D. Os trabalhos ficam expostos no saguão até o dia 19 de novembro.

Para saber mais sobre as categorias, programação e outras informações, acesse o site do evento.

fonte: http://portal3.com.br

Um dos meus trabalhos da cadeira de Expressão Gráfica foi selecionado para a exposição que ocorre no Centro 3 em frente ao xerox. Para saber mais acesse o site do evento.

Revista: Vitrine

2008-11-10T11:41:00.006-02:00

Revista: Vitrine
Empresa: Palterm - www.palterm.com.br
Material: Papel Couche com verniz
Softwares: Photoshop CS3, Corel Draw X3
Descrição: Revista com noticias, entrevistas e informações sobre o mundo da moda focando o calçado

Direção de Arte: João Pedro Rosa

Acesse a versão virtual da revista clicando aqui.

Webdesign: Solange Festas

2008-11-07T08:51:00.001-02:00

Website: Solange Festas
Empresa: Solange Festas - www.solangefestas.com.br
Linguagens: xhtml, asp + access
Softwares: Photoshop CS3, Dreamweaver CS3, Access 2007, Fireworks CS3
Descrição: Site desenvolvido para oferecer serviços online como consulta de bolos, tortas, salgados e cucas, além da possibilidade de o usuário fazer pedidos online.

Impressão Digital: Dourado Bus

2008-11-05T13:58:00.008-02:00

Empresa: Dourado Bus - www.douradobus.com.br
Material: Impresso digital em adesivo
Softwares: Photoshop CS3, Corel Draw X3
Descrição: Trabalho feito a partir de uma pintura a mão, que foi digitalizada e tratada para confecção da arte do fundo com alguns elementos ligados a pescaria e o logotipo da empresa.

Logotipo: Papo de Pesca

2008-11-05T11:26:00.007-02:00

Logotipo: Papo de Pesca
Cliente: Papo de Pesca - www.papodepesca.com.br
Software: Corel Draw X3
Descrição: Novo logotipo do Portal Papo de Pesca.

Mala-Direta: Lançamento do Protetor de Joanete

2008-11-05T11:03:00.005-02:00

Mala-Direta: Lançamento do Protetor de Joanete
Empresa: Palterm - www.palterm.com.br
Material: Papel Couche 175g e aplicação de UV
Softwares: Photoshop CS3, Corel Draw X3
Descrição: Com nova embalagem e novo material, o Protetor de Joanete precisou de uma nova campanha, está é a primeira mala-direta de lançamento.

Embalagem: Protetor de Joanete

2008-11-05T10:50:00.009-02:00

Produto: Protetor de Joanete
Empresa: Palterm - www.palterm.com.br
Ano: 2008
Embalagem: Blister de PVC transparente
Softwares: Photoshop CS3, Corel Draw X3
Descrição: Está a nova embalagem do Protetor de Joanete da Palterm, muito menor, prática e visualmente mais atraente.