Feed Artigos Comentários

Design Marco Moreira em 12 Ago 2008

Hotsite Feira do Guia do Estudante

projeto feira guia - projeto feira guia


Como era de se esperar e como faz parte da minha metodologia de trabalho neste projeto também comecei pelo wireframe. As informações já estavam bem organizadas, então a única coisa que fiz foi planificá-las para ter uma noção macro do site e então partir para a criação dos layouts no photoshop.
A idéia era fazer um visual jovem, a ver com os estudos, por isso decidi fazer algo que talvéz não seja tão inovador em termos de design, mas que o público se identificasse, que fosse extremamente funcional e fácil de encontrar as informações.
Em questão de legibilidade, optei por um layout com cores chapadas e desaturadas, que não fossem agressivas ao olho do internauta que visita o hotsite, além de fazer o fundo do texto também com o intuito de tornar uma leitura agradável, saindo do tradicional contraste fundo branco, fonte preta.

Mais uma vez eu contei com o Elton Prado, um parceiro que dá vida aos meus projetos, tornando-os navegaveis e indexaveis, tendo em mente sempre o foco no usuário, sempre se preocupando na função aliado ao visual.

Acesse o hotsite da Feira do Guia do Estudante: http://guiadoestudante.abril.com.br/feira-do-estudante

Animação Marco Moreira em 11 Ago 2008

Job mais do que Sexy

Enfim chegou a oportunidade de fazer animação!

Todos os anos a VIP presenteia os leitores com uma edição especial das 100 mulheres mais Sexy do mundo, e este ano ela fez um super hotsite onde o internalta pode votar. São vários duelos onde você pode fazer a votação de forma simultânea.

Baseado neste conceito, fui chamado para fazer uma vinheta com breve animação, onde os nomes das competidoras pudessem sofrer alteração e que passasse exatamente este clima de duelo.

Abaixo você vai poder ver também o rafe esquemático de onde originou a animação.

raf animacao vip - raf animacao vip

Foto & Fun Marco Moreira em 10 Jul 2008

Peça “L” do TETRIS

tetris - tetris

Acidente ou jogo incompleto?

O que aconteceu na cena acima?

Design Marco Moreira em 09 Jun 2008

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 - 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.

ca wireframe - ca wireframe

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 logo - ca logo

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 layout site - ca layout site

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 foto grupo - 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!

Design & Tipografia Marco Moreira em 03 Jun 2008

Como enlouquecer um designer

designer louco - designer louco

1- Microsoft Office
Quando você tiver que mandar um documento para um designer gráfico, certifique-se que ele foi feito com algum programa do Office. Versão PC se possível. Se você tiver que mandar figuras, você terá mais chances de enlouquecê-lo; ao invés de apenas mandar um jpeg ou um raw de câmera digital, insira as figuras em um arquivo de Office como o Word ou Powerpoint. Não se esqueça de baixar a resolução para menos que 72 dpi, assim eles terão que contatar você novamente para pedir uma versão com a qualidade melhor. Quando você mandar a versão ‘melhor’, certifique-se que o tamanho seja no mínimo 50% menor. E se você estiver enviando as figuras por e-mail, esqueça de anexá-los de vez em quando.

2- Fontes
Se o designer gráfico escolher Helvetica, peça Arial. Se ele escolher Arial, peça Comic Sans. Se ele escolher Comic Sans, ele já está 50% doido, então seu trabalho está 50% pronto.

3- Quanto mais melhor
Suponhamos que você precise de um designer para um jornal. Designers gráficos vão sempre tentar deixar espaços em branco em qualquer lugar. Margens largas, o alinhamento, o kerning do texto, etc. Eles vão dizer que eles fazem isso para facilitar a leitura e manter um visual limpo e profissional. Mas não acredite destas mentiras. Eles fazem isso para deixar o documento ainda maior, com mais páginas, e isto lhe dará mais prejuízos com a gráfica. Por que eles fazem isso? Porque designers gráficos odeiam você. Eles também comem bebês. Sem cozinhar, carne de bebê crua.

Então certifique-se de lhes pedir para colocar margens menores e um texto muito muito pequeno. Diferentes tipos de fonte também são uma boa pedida (e você ganha bonus se pedir Comic Sans, Arial ou Sand). Peça clipart. Peça muitas figuras (se você não sabe como mandá-las, veja o item 1). Eles vão tentar argumentar e defender as escolhas deles mas não se preocupe, no final, o cliente está sempre certo e eles irão acatar todos os seus pedidos.

4- Logos
Se você tiver que mandar um logo de um projeto particular para um designer gráfico, de um patrocinador ou parceiro por exemplo, certifique-se de que ele seja realmente pequeno e um gif ou jpeg de baixa resolução. Novamente, você ganha pontos se inseri-lo em um documento Word antes de mandá-lo. Agora você deve estar pensando que isto tenha sido suficiente mas se você quiser mesmo abalar a estabilidade mental de um designer gráfico, dê o seu melhor e mande uma versão do logo com um fundo que dificulte o seu recorte. Fundos pretos ou brancos devem ser evitados, já que são facilmente cortados com um layer style mais escuro ou mais claro no photoshop. Uma vez que o designer gráfico estiver trabalhando em um logo bitmap, diga-lhe que você precisa dele maior.

Se você precisa de um logo customizado, faça os seus próprios rascunhos em um guardanapo. Ou melhor ainda, deixe seu filho de 9 anos desenhar isso. Seu rascunho não pode demorar mais que 5 minutos para ficar pronto. Você não quer algo detalhado e fácil de ser entedido, porque quanto menos um designer entender o que você quer, mais mudanças ele terá que fazer no futuro. Nunca aceite o primeiro logo. Nunca aceite o nono, faça-o fazer várias mudanças, cores, fontes e clipart. Peça-lhe para adicionar uma foto no logo. Cantos. Gradientes. Comic Sans. E quando ele estiver em sua décima tentativa, diga-lhe que você gostou mais da segunda. Eu sei, isso é cruel, mas lembre-se: designers gráficos são a causa do câncer de mama entre as mulheres de meia-idade.

5- Escolhendo suas palavras
Quando estiver descrevendo o que você quer para um designer, certifique-se de usar termos que realmente não signifiquem nada. Termos como ‘jazz it up a bit’* ou ‘poderia tornar isso mais webístico?’. ‘Eu gostaria de um design bonito’ ou ‘Eu prefiro gráficos legais, gráficos que, você sabe, quando você os vê você diz: esses são gráficos legais.’ são outras opções.
Não se sinta mal com isso, você fez a coisa certa. De fato, é a sua obrigação porque todos nós sabemos que em noites de lua cheia, os designers gráficos se transformam em lobisomens.

6- Cores
A melhor maneira para escolher as cores (porque você não quer deixar o designer gráfico escolher) é escrevê-las randomicamente em pedaços de papel, colocá-los em um chapéu e sorteá-las. O designer gráfico irá sugerir que você fique com 2 ou 3 cores no máximo, mas não. Escolha quantas cores você quiser e certifique-se de fazer o sorteio no chapéu na frente dele. Enquanto fizer isso, cante uma música bem chata.

7- Prazos
Quando for a sua vez de aprovar o design, relaxe. Não há pressa. Espere dois dias. Mais seis. Conforme o fim do prazo for chegando, contate o designer com mais correções e mudanças que ele tenha tempo para fazer.
Afinal, os designers gráficos são responsáveis pelos ataques de 11 de setembro

8- Acabe com ele
Depois de aplicar todos os itens desta lista em sua vítima, faz parte da natureza humana (embora alguns irão argumentar se eles são humanos ou não) ficar um pouco inseguro. Conforme ele for percebendo que não pode satisfazer suas necessidades, o designer gráfico irá abandonar todas as suas esperanças de vencer uma discussão e irá fazer só o que você disser para ele fazer, sem questionar. Você quer aquilo em roxo? Então é roxo. Seis fontes diferentes? Claro!

Nesta altura dos fatos, você deve estar pensando que venceu, mas não se esqueça do seu objetivo: ele tem que desistir desse negócio. Então esteja pronto para o golpe final: Quando estiver em suas decisões finais sobre cores, formas, fontes, etc, diga-lhe que está desapontado com a falta de iniciativa dele. Diga-lhe que afinal de contas, ele é o designer e que ele deveria ser o cara que coloca sua experiência e seu talento no trabalho, não você. Que você estava esperando mais soluções e avisos sobre o design dele.

Autor desconhecido

Foto Marco Moreira em 01 Jun 2008

I Have a Flickr!

divulg flikr - divulg flikr

Depois de muita resistência a mais uma coisa pra eu administrar na web, eu acabei fazendo porque é muito prático.

Então, você pode ver minhas fotos preferidas agora diretamente no endereço:

http://www.flickr.com/photos/marcomoreira

Tipografia Marco Moreira em 21 Mai 2008

I LOVE TYPOGRAPHY

tipografia - tipografia

(imagem do site: http://ilovetypography.com )

Você ama mesmo tipografia?

Então teste seu conhecimento no game: http://fontgame.ilovetypography.com

Confesso que tenho que estudar mais porque fiquei um pouco decepcionado com o meu resultado..rs

Design Marco Moreira em 18 Mai 2008

Que viagem!

hotsite europa - hotsite europa

Ufa!
Depois de um mês de intenso trabalho ele saiu!
Foram muitos “vai e vem” durante todo o trabalho, mas faz parte. Alguns trabalhos eu tiro de letra. O cliente aprova sem muitas alterações e ok. Mas como nós sabemos nem tudo são flores não é mesmo?
E outra é que a gente acaba lembrando que nós, designers não somos o centro do universo. Apesar de sermos especialistas nA arte, ninguém entende mais da marca do que o cliente.
Nos primeiros trabalhos com um cliente novo você pode ter certa dificuldade em “acertar a mão” ou até mesmo de entender a maneira de se comunicar com ele. E confesso que tive um bocado nessa, mas aprendi.
Fiz o wireframe, layout e animação, mas como programar não é minha especialidade, deixei essa parte com o Elton Prado que entende da arte e que também aprendeu um tantão em desvendar a porrada de erros e paus que o flash e os textos dinâmicos davam a todo momento.

Bom, este hotsite não é apenas uma cara bonitinha cheia de animações.
Ele foi desenvolvido com opção para 2 línguas, além de poder ser alimentado externamente, tanto textos como fotos e vídeos, então grande mérito deste trabalho se deve ao programador.
A princípio não haveria necessidade de ser abastecido por fora, mas como o cliente não tinha todo conteúdo, resolvemos fazer com que o hotsite funcionasse desta maneira. (como você vai poder ver, a opção em inglês e os vídeos ainda não foram ativados no site)

Clique para ver o Hotsite Europa para jovens no site do Viaje Aqui

Foto Marco Moreira em 10 Abr 2008

Festas Playboy 2008

festa playboy leticia - festa playboy leticia

festa playboy cibele - festa playboy cibele

Ontém madruguei.
Enquanto vocês estavam nanando ou se divertindo na balada eu estava trabalhando!
Pois é, esta foi a terceira festa que cobri para a Playboy no lançamento da Capa. Foram duas festas da Letícia (Bar Brahma e Sta. Clara) e a última foi da Cibele Dorsa na Lotus.

Fotografar para mim sempre foi uma paixão e a oportunidade de fazer o que era um hobby e agora ganhando para isso é muito bom.
Há quem diga que a vida de tirar foto da mulherada e de celebridade é vida fácil. Engano seu!
É muito trampo, mau da tempo de beber água e ir ao banheiro, porque em foto de um evento como este principalmente, perder um click pode ser perder o trampo. É como se o fotógrafo de casamento perdesse o momento da aliança. Nem dá para imaginar né?

Foto de evento é um pouco diferente, você tem o “momento da aliança”, mas tem mais uns dez fotógrafos disputando lugar e um ângulo melhor com você. Olha, não é fácil.
E tem a segunda parte do trabalho que muita gente não sabe. A fotografia digital facilitou muito as coisas claro, mas deu muito mais trabalho para o fotógrafo. Depois da balada ainda chego em casa, descarrego as fotos, dou um tapa nas que ficaram um pouco escuras e gravo alguns CDs e DVDs para entregar para a redação. Tudo devidamente etiquetado e organizado, sem esquecer de relacionar o nome e profissão das pessoas fotografadas na festa (sim, o fotógrafo também precisa fazer isso!)

Apesar dessa correria toda e da pressão que sofremos com a preocupação “DAQUELA” foto, principalmente eu que estou no início de carreira na área, vale a pena. Eu chego cansado em casa, mas feliz pelo trabalho realizado.

Erros: Eles acontecem, principalmente no início quando você não está acostumado e não tem as malícias da coisa, mas é com eles que se aprende não é? Recebi algumas críticas ao último trabalho, quanto ao estilo utilizado para fazer as fotos. Entendi e concordei.
Cada marca, revista, cliente, enfim, tem sua pecularidade e devemos saber qual é público, qual é a mídia e qual será a mensagem a ser transmitida.
Vivendo e aprendendo. As críticas nos fazem aprender e a crescer.

Veja as fotos no site da Playboy e fale aqui o que acha. Toda crítica será bem vinda.

Valeu!

Design Marco Moreira em 08 Abr 2008

Interação = informação

piores discos - piores discos

O infográfico “Os piores discos de todos os tempos” saiu primeiramente da revista Mundo Estranho edição 74 e foi adaptado para internet, como diversos outros infos que são feitos na redação.

Na dupla da revista legumes de diversos ângulos atingem os artistas e me baseando nesta idéia, na versão online o usuário pode atirar tomates, ovos e etc para ver curiosidades e ouvir trechos dos piores discos da história.
Logo na abertura do info você poderá ver uma instrução básica e rápida de como navegar.

Fiz o layout e conceito de navegação, mas deixei a programação com o parceirasso Elton Prado, programador do site da Superinteressante que sempre colabora com muito empenho em várias de minhas pirações “flashmaníacas”. Valeu Elton!

- Próxima Página »