portf贸lio pessoal Marcelo S. Coelho
3
Índice
Marcelo S. Coelho - Portfólio
06
06
Criebox Projeto Acadêmico, Identidade Visual, Design de Interação
12
Museu do Festival de Cinema de Gramado Identidade Visual
16
Primeiro Plano Café & Bar Identidade Visual
Cliever Tecnologia
20
Identidade Visual, Design de Interação, Direção de Arte
Ftec Politécnica
24
Gerência de Projeto, Design de Interação, Direção de Arte
ER Escola Gerência de Projeto, Design de Interação, Direção de Arte
26
30 28
34
Monjuá Design de Interação
30
JBL Experience Gerência de Projeto, Design de Interação, Direção de Arte
32
Yázigi Big Challenge Gerência de Projeto, Design de Interação, Direção de Arte
Sites Institucionais
34
Design de Interação, Gerência de Projetos
26
Redes Sociais
38
Direção de Arte
Aplicativos
40
Design de Interação, Direção de Arte
Games Design de Interação, Direção de Arte
42
Currículo Experiência Gerente de Projetos Pronexo Marketing Digital (2014-2015)
UI/UX Designer Aquiris Game Studio (2013-2014)
Assistente de Arte 3yz (2012-2013)
Web Designer Plano Comunicação (2011-2012)
Estágio no Núcleo 3d Co.De ESPM-Sul (2011)
Formação Escola Superior de Propaganda e Marketing Bacharel em Design Visual com ênfase em Marketing
O Estado Digital Gestão Estratégica de Negócios Digitais
Universidad del Centro Educativo Latinoamericano Espanhol intermediário (Rosário-ARG)
Cultura Inglesa Inglês Avançado
Alfamídia Adobe Photoshop Avançado
Reconhecimentos Ouro no Anuário ESPM 2013 Melhor projeto de graduação no design no ano de 2013
Láurea Acadêmica Láurea acadêmica no curso de graduação em Design Visual da ESPM
Ouro Anuário ESPM Melhor projeto de Design 2013
Criebox PROJETO ACADÊMICO, IDENTIDADE VISUAL, DESIGN DE INTERAÇÃO
O Projeto de Graduação aqui apresentado recebeu nota máxima na banca da ESPM-Sul e também o prêmio Ouro no Anuário 2013 da ESPM, sendo reconhecido como melhor projeto de Design do ano na instituição. A empresa Criebox, objeto do projeto, não possui uma comunicação adequada para o setor onde se encontra no mercado. Com o objetivo de criar uma presença digital para a empresa foi desenvolvido um site institucional com foco em design adaptativo com os seguintes objetivos: Comunicar a missão da empresa: Ótimo design, interface intuitiva, segurança e atendimento impecáveis.. Contemplar preceitos do design adaptativo: Competência em lidar com o abundante número de dispositivos no meio digital. Fortalecer a marca: Foco em design, especialização em e-commerce e confiabilidade frente a seu público-alvo.
6
O problema do projeto foi separado em 7 componentes: • Coletar e analisar os dados pertinentes; • Observar e analisar sites referenciais no mercado; • Desenvolver linhas gráficas contendo conceitos e ideias; • Averiguar viabilidade tecnológica; • Criar protótipo a partir da linha gráfica final; • Verificar a receptividade do usuário ao site; • Construção final do site. Durante o desenvolvimento projetual foi possível aplicar no exercício prático os conceitos estudados durante a fundamentação teórica: Interface, Design Adaptativo, Design Responsivo, Dispositivos (Desktop, Tablet, Smartphone), Linguagens de Programação, Usabilidade, Arquitetura de Informação, Acessibilidade e Design Aplicado à Web (Imagem, Composição, Grid, Tipografia e Cor). O processo advindo do método de Munari somado ao método de Garrett mostrou-se um aprendizado importante pelo fato do design adaptativo ser uma estratégia ainda em evolução.
Design Adaptativo: desktop, tablet e smartphone Acima, as diversas versões reunidas e as versões desktop, tablet e mobile. Abaixo, demonstração dos gestos de toque, exemplificados pelo toque no menu e pelo gesto de trocar de projetos no destaque mobile.
7
Identidade Visual A nova marca consiste em três elementos: símbolo, logotipo e tagline. O símbolo consiste em três cubos tridimensionais em diferentes ângulos, onde as transparências se sobrepõem gerando reflexos e cores. Dinâmico, possui 3 variações baseadas em ângulações da marca.
Solução Final A nova marca consiste em três elementos: símbolo, logotipo e tagline. O símbolo consiste em três cubos tridimensionais em diferentes ângulos, onde as transparências se sobrepõem gerando reflexos e cores. Dinâmico, possui 3 variações baseadas em ângulações da marca.
8
Linhas Gráficas Nessa etapa ocorreu o desenvolvimento dos conceitos estabelecidos anteriormente (segurança, marca, conceito e lúdico) em quatro linhas gráficas. Cada linha explora um dos conceitos como base, podendo ter como suporte uma ou mais palavras-chave. Para cada uma será desenvolvida uma página inicial e outros elementos auxiliares pertinentes à linha em questão. A criação que ocorre nesse momento servirá como guia para o desenvolvimento
que ocorrerá nos capítulos seguintes, onde as linhas passarão por mais duas etapas: materiais e tecnologias, onde verifica-se a viabilidade tecnológica de cada uma, e experimentação, onde ocorre o desenvolvimento das telas restantes (páginas internas e versões responsivas correspondentes). Por fim, chegando à construção do modelo que, após passar pela verificação com usuários, resultará na solução final do projeto.
Linha Gráfica 01: pegar e arrastar
Linha Gráfica 02: sanfona
Linha Gráfica 03: parallax
Linha Gráfica 04: cubo (mobile-first)
9
Museu do Festival de Cinema de Gramado IDENTIDADE VISUAL O Museu do Festival de Cinema de Gramado, localizado em uma sala envidraçada logo ao lado do Palácio dos Festivais, irá expor de maneira interativa os 40 anos de história do festival no contexto brasileiro e latino-americano. Com acervo de fotos, arquivos e equipamentos, o objetivo é tornar o espaço uma nova alternativa de turismo.
10
O processo criativo da Pro>Target + Pronexo buscou uma marca elegante que se conectasse ao estilo de Gramado, buscando inspiração nas luzes, texturas e cores características da cidade. Ao final se chegou na criação de um símbolo que remete visualmente ao Kikito e também ao cinema, formando um único elemento.
A marca O nome Museu do Festival de Cinema de Gramado é autoexplicativo e passa credibilidade/história. Por ser comprido, identificamos a necessidade de utilização de uma sigla. A sigla será utilizada em casos específicos, como muitos museus fazem.
Feeling & Texturas Houve especial preocupação neste projeto com o replicar o feeling de Gramado nas texturas e aplicações feitas (cartaz promocional, fachada, camisetas, materiais de escritório, etc), como couro, papel craft, materiais metálicos e madeira escura.
11
Primeiro Plano Café & Bar IDENTIDADE VISUAL Complemento ao projeto do Museu do Festival de Cinema de Gramado, o café & bar Primeiro Plano estará localizado em uma sala anexa com conexão à saída e entrada do museu. Com a criação foi buscado os seguintes pontos: • Nome e visual com personalidade e criatividade; • Nome relacionado ao universo do cinema, mas sem cair nos clichês; • Valorização do café como um local independente. E que atraia seu próprio público; • Estética elegante que se conecte ao estilo de Gramado e ao status do cinema.
12
O processo criativo da Pro>Target + Pronexo passou pela pesquisa dos planos utilizados no cinema (Plano Fechado, Plano Geral, Plano Aberto, Plano Médio, etc) até se chegar ao Primeiro Plano, um nome diretamente relacionado ao cinema sem ser um clichê. Para a marca, houve o desafio de aplicar o Primeiro Plano do cinema (o corte a partir do busto) em uma tipografia - para isto, foi pesquisada a anatomia do tipo, onde se identificou qualidades anatômicas para o logotipo como pé, barriga, bojo, cabeça e lacrimal.
A marca As letras “p” e “a” da tipografia Bodoni foram utilizadas como exemplo para a demonstração da anatomia tipográfica. No esquema indicado, também se mostra o enquadramento do Primeiro Plano aplicado nestes tipos.
13
Cliever Tecnologia
www.cliever.com.br
IDENTIDADE VISUAL, DESIGN DE INTERAÇÃO, DIREÇÃO DE ARTE
A Cliever é a primeira fabricante brasileira de impressoras 3d do Brasil. A empresa, que atende gigantes como Embratel e Intelbras, venceu o prêmio INFO Start como startup mais inovadora e foi apontada pela revista Exame como uma das 45 startups brasileiras de mais futuro. Fui convidado pelo fundador da empresa, Rodrigo Krug, para cuidar de todo o design da marca. O projeto foi iniciado pela identidade visual, com a criação de um
14
símbolo tridimensional que representa a faísca de inovação que a empresa deseja estimular no mercado. A partir da criação da identidade da marca, foi desenvolvido e-commerce, software de impressão, adesivagem de produto (impressora), folders e anúncios de divulgação e aplicações diversas da marca como camisetas, adesivos, materiais de expediente, etc.
Marca A marca da Cliever em suas vers천es normal e em wireframe.
E-Commerce e Software para Impress찾o Design de interface para e-commerce responsivo feito em parceria com a empresa Vnda (www.vnda.com.br) e software para impress찾o Cliever Lab, programado internamente na Cliever.
15
Ftec Politécnica
www.ftecpolitecnica.com.br
GERÊNCIA DE PROJETO, DESIGN DE INTERAÇÃO, DIREÇÃO DE ARTE
O novo portal de e-learning da Ftec Politécnica apresenta vídeo aulas, conferências, reforços e workshops de maneira efetiva e simples, acessível em todas as plataformas. Desenvolvido pela Pronexo, a Ftec Politécnica lançou o maior portal virtual de engenharia do Brasil: • Mais de 3.000 vídeo aulas online; • 200 cursos de engenharia e exatas; • 18 preparatórios para concursos; • 6 cursos de pós-graduação; • 113 certificações específicas.
16
Para o projeto foi necessário o estudo de cases de sucesso no segmento, pesquisa de concorrentes e análise da plataforma antiga da Ftec com o uso de pesquisa com alunos. Assim, foi criada uma plataforma de e-learning original que atendia as necessidades de arquitetura da informação e operação interna da Ftec, com funcionalidades como produto de assinatura, comissão para professores, calendário de concursos e relatórios de acordo com os padrões dos setores Financeiro e Marketing da empresa.
Páginas Foram mais de 15 templates de páginas dinâmicas projetados e programados. Abaixo, as páginas Home, Capítulo e Prova.
17
ER Escola
www.erescola.com.br
GERÊNCIA DE PROJETO, DESIGN DE INTERAÇÃO, DIREÇÃO DE ARTE
Fotógrafo do glamour e da grandiosidade, Everton Rosa é dotado de uma extrema sensibilidade e intuição, levando-o a captar a essência de cada momento e pessoa. Dono de uma visão que vai muito além da lente de uma câmera, é reconhecido como um dos melhores fotógrafos do Brasil, sendo requisitado para registrar eventos em diversas partes do mundo. Para criar uma plataforma de ensino virtual, o exigente fotógrafo contratou a Pronexo para se assegurar que sua loja teria um visual à altura do seu trabalho. Com base na
18
plataforma criada anteriormente para a Ftec Politécnica, a ER Escola possui uma apresentação mais limpa, com maior foco nas imagens e também na parte institucional do profissional. Vídeos otimizados foram utilizados na abertura do site e na homepage para dar maior dinamismo e movimento. A loja de Everton Rosa, que possui o mais completo conteúdo sobre fotografia social, foi um sucesso financeiro para o cliente, com o custo do projeto sendo abatido no primeiro dia de vendas.
Páginas Acima, a página de introdução com vídeo no fundo. Ao lado, a homepage acessada via login. Abaixo, a página de detalhes e compra de produto.
19
Monjuá
www.monjua.com.br
DESIGN DE INTERAÇÃO
A Monjuá tem como conceito subverter, divertir, descomplicar e quem sabe contribuir para um mundo mais interessante. Sua história começou no varejo em setembro de 2011. Em maio de 2014, a marca fechou sua operação offline e migrou totalmente para a web, simplificando a nossa operação e expandindo as fronteiras para todo o território nacional.
20
Para este grande desafio fui contratado junto com a Vnda E-Commerce para criar um e-commerce responsivo que transferisse a riqueza conceitual da marca e das suas lojas para a web. Com design minimalista, o e-commerce se destaca pelas interações ricas no conteúdo e nos elementos de navegação, como banner, campo de busca, carrinho e menu mobile e desktop.
Páginas Homepage e página de produto, versões desktop. Demonstração da funcionalidade de carrinho e menu na versão mobile.
21
JBL Experience GERÊNCIA DE PROJETO, DESIGN DE INTERAÇÃO, DIREÇÃO DE ARTE
Áudio é a maneira mais pura de fornecer experiência musical e emocional. Este foi o insight da campanha da Pro>Target para a JBL, criar experiência para o consumidor a partir do som, da maneira mais inovadora possível.
Leia o anúncio:
Foi criado um site interativo, sensorial e intuitivo, onde o usuário tem a experiência de estar dentro de um festival de música a partir do som.
200 mil pessoas gritando Eufóricas Impacientes Esperando você
O site é o centro da campanha, porém outras mídias foram pensadas para complementar a ideia, gerando tráfego, visibilidade e valor. Ações no cinema, em ponto-de-venda, banners interativos e spots em rádios online adaptam a ideia de experiência dentro de seus contextos.
22
Imagine a tensão
Imagine o frio na barriga O backstage A respiração
Imagine a ansiedade Os passos O tapinha nas costas O suor na testa Imagine a claridade O ápice O primeiro acorde O delírio de 200 mil vozes como uma. Se ler já provocou, imagine ouvir.
O site O usuário está em um ambiente totalmente escuro, somente visualizando seus passos. A jogabilidade parte totalmente do som, onde a partir de técnicas de gravação binaural é possível se localizar em um ambiente tridimensional a partir do ponto de onde o som surge. O objetivo é chegar ao palco a partir do camarim, utilizando o feedback auditvo e visual que ocorre quando algum evento acontece.
23
The Big Challenge
www.yazigi-rs.com.br/desafio
GERÊNCIA DE PROJETO, DESIGN DE INTERAÇÃO, DIREÇÃO DE ARTE
Em campanha integrada, a Pronexo criou o Big Challenge juntamente com o Yázigi e a Rádio Atlântida, onde os comunicadores do popular programa Pretinho Básico são desafiados pela escola para descobrir quem merece mais um curso de inglês, O hotsite possibilita que o usuário assista aos vídeos e vote em ferramenta integrada com o Facebook. Pelo suplemento Atl. Paper do jornal Zero Hora são criadas matérias
24
relacionadas aos temas dos desafios: trava-língua, rock’n roll, filmes, poesias e até música gauchesca. A divulgação também é feita pela Atlântida via rádio e redes sociais e também por campanha de Google Adwords.
Campanha integrada Homepage versão desktop e mobile, leaderboard, vídeo via YouTube, voto via Facebook, anúncio no jornal e PDF interativo.
desktop/tablet
mobile
25
Sites institucionais DESIGN DE INTERAÇÃO, GERÊNCIA DE PROJETO
Sites institucionais tornaram-se essenciais para empresas para divulgar suas informações de contato, serviços e diferenciais. Considerados cartões de visita virtuais, são porta de entrada para a geração de negócios.
26
Nas páginas seguintes foram selecionados alguns dos projetos desenvolvidos na Pronexo e também em trabalhos freelance para empresas relevantes de seus ramos. Foram selecionados projetos atualmente online, com design e programação otimizada para mobile e desktop.
Calรงados Pegada
Ftec Faculdades
www.pegada.com.br
www.ftec.com.br/vestibular
27
Calรงados Mississipi
Tabacum Interamerican
www.mississipi.com.br
www.tabacum.com.br
28
Beco 203
Rosa Tatuada
www.beco203.com.br
www.rosatatuada.com.br
29
Redes Sociais DIREÇÃO DE ARTE
As redes sociais, mais do que nunca, necessitam estar permanentemente atualizadas, gerando interação constante com o seu consumidor. Uma rede inativa, além de transparecer abandono e desleixo, perde espaço e poder de comunicação na rede. Quanto mais o público da marca acessar e interagirem com o conteúdo, mais exposição a marca tem e, consequentemente, mais potencial terá de crescimento.
30
Contudo, para que isso aconteça é necessário ter uma atualização periódica e, mais do que isso, publicar um conteúdo atraente e interessante para as pessoas. (fonte: www.seen.com.br) Nesta página são apresentadas as criações para redes sociais feitas na 3yz e na Pronexo para as marcas Loucos & Santos, Unimed, Panvel, Todeschini, Calçados Bibi, Planeta Atlântida e Totosinho.
31
Ações de Ativação DESIGN DE INTERAÇÃO, DIREÇÃO DE ARTE
A ação promocional para Facebook “Faça Você Mesmo” da Tramontina consistia em uma página onde o usuário tem acesso a tutoriais de como montar os kits fornecidos pela empresa.
Em “Love Dots”, a Jorge Bischoff montou um aplicativo para Facebook onde o usuário poderia escolher uma foto do seu álbum para integrar a galeria de imagens no Facebook e sortear uma bolsa temática da marca.
No hotsite “Presente dos Desejos” a Mississipi resolveu facilitar as coisas no dia dos namorados e criar um aplicativo onde a consumidora pode escolher seus modelos preferidos, coloque no pacote virtual e envie para seu namorado como sugestão.
Também para o dia dos namorados a Loucos & Santos criou um jogo estilo Pacman onde uma consumidora deveria consumir corações e produtos da marca e fugir dos “gatos” perseguidores. A cada fase se ganhava um cupom de desconto para a loja virtual da empresa.
32
Tramontina: Faça Você Mesmo
Jorge Bischoff: Love Dots
Ação promocional para linha de produtos no Facebook.
Ação promocional para Dia dos Namorados no Facebook.
Loucos & Santos: Pacman Game promocional para Dia dos Namorados com integração com e-commerce. http://protarget.com.br/namorados/
Mississipi: Presente dos Desejos Hotsite promocional para Dia dos Namorados com integração com o Facebook e e-mail. www.mississipi.com.br/namorados
33
Games DESIGN DE INTERAÇÃO, DIREÇÃO DE ARTE
A Aquiris Game Studio, especializada em desenvolvimento via Unity 3D, é uma das maiores produtoras de jogos do Brasil. Com sede no Tecnopuc, conta com uma equipe altamente qualificada e tem em seu portfólio de clientes Cartoon Network, Marvel, Warner Brothers, Globo, CocaCola, Unilever, Embraer, Chevrolet e Olimpikus. Sob a direção de Rodrigo Bellão, participei do time de design de interfaces da empresa, trabalhando principalmente no desenvolvimento da interface do
34
first-person-shooter Ballistic, hoje disponível na Steam e carro-chefe da empresa. Participei dos design dos jogos da Cartoon Network “The Great Prank War” e “Wrath of Psychobos”, para os programas “Apenas um Show” e “Ben 10” - desenvolvendo o logotipo do primeiro em três línguas apresentado nesta página. Por fim, também é apresentado ao lado estudos para interface de jogos para os programas da Nickelodeon “Teenage Mutant Ninja Turtles” e “Sponge Bob Square Pants”.
Cartoon Network: The Great Prank War 1º lugar geral na App Store na semana de lançamento, ainda disponível nas lojas de aplicativos para iOS e Android. Abaixo, nas versões para 3 línguas: inglês, português e espanhol.
Nickelodeon: Teenage Mutant Ninja Turtles e Sponge Bob Square Pants Design de interfaces para concorrência da Nickelodeon para desenvolvimento de jogos mobile.
35