Archive for the ‘projeto’ Category

Making of / processo (7): Centro Cultural
31 de dezembro de 2016

Desta vez trago o processo de desenvolvimento de peça gráfica/de comunicação visual, de Centro Cultural no RJ.
As peças gráficas desenvolvidas são adaptadas para serem veiculadas em várias mídias – cartaz/convite impresso, mídias sociais, etc.

A peça gráfica finalizada é esta:
mk-of-montagem1b

(mais…)

Anúncios

Making of / processo (3) – Ilustrações para livro infanto-juvenil
17 de março de 2016

sidalio-carla-souza-lapis-tinta-cor O projeto
O projeto que me chegou de cara me atraiu: ilustrar um livro cujo tema é a inclusão social, com pessoas portadoras de necessidades especiais, como a personagem-título (surdo-mudo) ou pessoas com algum tipo de deficiência (pessoas que usam óculos, bengalas, etc) sem esquecer ainda pessoas da terceira idade, obesos, etc. A ideia é mostrar pessoas que normalmente são excluídas da nossa literatura infanto-juvenil e estão presentes na sociedade.

Pré-projeto
Inicialmente foi definido o estilo de desenho a partir de exemplos de ilustração do mercado, evitando um erro comum – o artista perder tempo adivinhando o que o cliente deseja, trabalhando a partir de seu estilo pessoal. Trabalhar assim permite que o desenho se aproxime mais e rapidamente do que o cliente deseja/imagina, pois raramente o cliente procura o ilustrador para fazer “trabalho autoral” (aquilo que o ilustrador gosta de fazer). Foi feito a seguir um exemplo de ilustração para ser aprovado junto a cliente e à editora/gráfico, que forneceu as especificações de como a arte deveria ser entregue (dimensões, marca/área de corte).

Desenvolvimento de projeto
Os rascunhos foram feitos em miniaturas, para dar agilidade na produção, e ampliados digitalmente para fazer os traços pretos. carla-ilustra-rascunhos Optei por fazer o traço dos desenhos à mão, em papel não-revestido, a fim de que o traço não ficasse muito parecido com desenhos da Disney (nada contra, apenas procuro fazer algo diferente a cada trabalho). Os traços foram escaneados em preto-e-branco, e depois convertidos em cor, com transparência. Isso permite ter traços pretos sem anti-aliasing/anti-serrilhamento da cor branca do papel original. A colorização foi feita em vetor, o que permite maior flexibilidade para fazer alterações. Segui soluções visuais do estilo de desenho aprovado (p.ex., gradientes de cor escalonada, com poucos gradientes contínuos), o que foi um aprendizado, ao sair de meu estilo pessoal de ilustrar.  Aliás, “sair da caixa” e trabalhar com estilo diferente do meu, é um exercício fundamental.

Cronograma de trabalho

infografico-carla-ilustra-2
O trabalho seguiu o seguinte cronograma: cada etapa do desenvolvimento passa por processo de aprovação junto a cliente, antes de ser finalizado: os rascunhos a lápis, o desenho em forma de traços pretos, a colorização inicial (com cores planas). Isso evita retrabalho de desenho e cor ao mesmo tempo. Após aprovação das cores planas, o desenho é finalizado com sobreposição de cores para dar profundidade e iluminação.

Contrato de serviço
Um pequeno contrato de serviços digital foi feito entre mim e a cliente, o que permite refazer/incluir termos com agilidade, além de registrar em um único lugar as conversas entre ambos (comprovantes de pagamento das etapas, datas de aprovação etc). Uma questão comum no mercado (assim como sobre o que é ou não entregue ao final do trabalho), são as alterações no combinado: se a etapa foi aprovada (exemplo, desenho a traço), será refeita mediante pagamento de adicional. Pode parecer coisa simples, mas vejo muita gente não sabe lidar com essa questão, seja pela nossa cultura do “jeitinho” (onde mais vale o relacionamento interpessoal do que o combinado) seja por imaturidade profissional. Pode-se ter um bom relacionamento com os clientes sem perder de vista o cumprimento ao combinado. E isso não quer dizer engessamento das relações: pode-se mudar o combinado, contanto que ambos os lados cheguem a um acordo bom para ambos os lados, ao ajustar o contrato de serviços.

Conclusões
O projeto deve estar concluído neste primeiro semestre de 2016, e parte dele pode ser visto no site ilustra.org: http://www.ilustra.org/users/wallyvianna Existem detalhes de produção, mas que caberiam mais num curso prático ou em outro texto específico sobre este tema.

Dicas do Google: webdesign móvel
17 de dezembro de 2014

Webdesign para smartphones e tablets

Wallace Vianna é webdesigner no Rio de Janeiro

Fique atualizado webdesigner e desenvolvedor web!

O Google criou campanha para fazer uma web mais acessível por dispositivos móveis com dois sites, o

que tem como finalidade orientar os desenvolvedores e designers sobre como fazer sites melhores.

Outros links são para quem possui sites ou deseja desenvolver sites melhores:

Leia mais nesta matéria do O Globo online. que fala sobre como tornar páginas mais fáceis de ler em smartphones e tablets.

A capa de meu site passou no teste do Google!

A capa de meu site passou no teste do Google!

Making of / Processo (2): Media Guide CBF copa 2014
18 de novembro de 2014

media guide olhonu design

Imagem: Renata Leite, escritório Olho Nu Design; FaceBook, 29/10/2014

Wallace Vianna é designer e mestre em design, no Rio de Janeiro

O escritório OlhoNu Design desenvolveu o Media Gude (Guia de Mídia, com informações sobre uso de marcas e material promocional da CBF)da Copa do Mundo 2014, uma caixa com lâminas e um livreto informativos.

O processo foi interessante pois ilustra como se produz um projeto de design gráfico, desmistificando certos mitos em torno deste tema.

A pesquisa de imagens foi feita no site DepositPhotos.com, escolhido tanto pelo perfil do trabalho como em relação ao custo-benefício. Uma vez definidas as imagens, desenvolveu-se propostas de layouts a partir delas.

depositphotos_11296152-Man-soccer-football-player-flying-kicking

Fonte: DepositPhotos.com

A capa do projeto (caixa em cartão triplex com fecho por cordão decorado) foi desenvolvida em Photoshop, e a faca de corte no Adobe Illustrator

depositphotos_10550754-Green-soccer-field

Fonte: DepositPhotos.com

O miolo (lâminas e livreto) foram diagramados no Adobe Indesign.  O recorte de imagens difíceis (fios de cabelo e assemelhados) foi feito com o plug-in Corel KnockOut, mais indicado tanto pela qualidade do resultado como pela agilidade na produção.

Amistoso Brasil 6x0 Austráliaphotoshop-tecnica-recorte-cabelo-2
Fonte: WallyVianna tutoriais

 Muitas vezes as pessoas imaginam que o trabalho de criação do designer é como o do artista plástico, que parte de uma tela vazia para compor o grafismo desejado. A utilização do banco de imagens como ferramenta no processo criativo além de reduzir custos no quesito produção de ilustração, reduz o cronograma de desenvolvimento do projeto.

E para os que argumentam “qualquer pessoa faz um trabalho de comunicação visual com banco de imagens”, experimente dar um PowerPoint (ferramenta) para a secretária (profissional) de sua empresa produzir uma boa apresentação a partir de imagens colhidas no Google. Por mais que a profissional tenha bom-gosto e algum talento para a coisa, não vai conseguir comunicar com as imagens conceitos como elegância, consistência de cor, (as)simetria ou equilíbrio, relacionando forma com função.

Como disse em outro post, o papel da ilustração (design?) é comunicar (uma história) e não decorar (o texto).

Making of / Processo (1): direção de arte e ilustração
15 de março de 2012

Queria registrar aqui um making of/processo que dimensiona a importância da direção de arte aliada a um bom trabalho de ilustração. O trabalho é uma ilustração e identidade visual para projeto de filme (omito o nome pois o filme ainda está em fase de captação de recursos), realizado pela Inlumini Comunicação. Pedro Duarte fez a direção de arte e Hugo Aieta a ilustração .

A ilustração partiu de algumas referências fotográficas, de homem mulato: cabelo, corpo, rosto.

  

A partir daí Hugo criou paleta de cores borrando a imagem de referência (corpo) e selecionando as cores essenciais.

A foto de referência do corpo foi distorcida de forma que ficasse em perspectica frontal, já que no original é voltada para a direita.

Com as referências e cores, os traços foram feitos sobre o corpo e rosto.

O primeiro render sobre os traços foram colocados, mas o personagem ficou com aparência muito delicada para o personagem retratado na história.

Pedro entrou com a direção de arte para masculinizar as feições e dar físico mais rijo a figura. Por fim, a pintura foi mais escurecida.

 

As texturas que remetem a terra foram aplicadas ao fundo da imagem para comunicar a idéia de que a história se passa no interior, compondo a ilustração.

Foram utilizados no desenvolvimento desta ilustração basicamente o Photoshop com tablet Wacon Bamboo e pincéis criados e baixados da internet; o processo mostra a importância da direção de arte num trabalho de design, já que a ilustração deve comunicar a história e não apenas decorar a informação.

Mais sobre os autores:
Inlumini Comunicação
Hugo Aieta

Notícias e novidades em webdesign
7 de março de 2012

IAB lança novos formatos de anúncios online

Corrigindo erro na atualização do WordPress 3.3

Não me faça errar
30 de dezembro de 2010

Eu reescreveria o título deste livro assim, pois, o original – Don’t make me think/Não me faça pensar – deixa ambiguidades no ar (o livro é para fazer profissionais de web pensarem sobre projetos de internet, ao mesmo tempo que sugere que, projetos bem feitos, não fazem os usuários pensarem no que fazer).

Minha versão modestamente sugere que projetistas ou usuários não devem errar ao projetar ou usar um site. Do jeito que está sugere que o livro é feito exclusivamente para usuários de determinada marca de computador e sistema operacional…

O livro é muito bem escrito, mas o estilo irreverente “até o ponto certo” acaba sendo um calcanhar de aquiles: a real formação do autor fica no ar (se bem que para mim ele pode até ser botãnico, contanto que cumpra bem seu papel). Outra crítica que faço seria a versão brasileira – ela possui alguns poucos erros de revisão (indicação de páginas no índice) além de não indicar se os livros sugeridos pelo autor possuem versão em português.

O livro em sí é uma referência pois aborda questões técnicas de maneira prática e pragmática: como conceber testes de usabilidade que não custem mihares de dólares; como acabar com discussões de equipe  intermináveis sobre o que é “certo” e “errado” (funciona ou não) num projeto de sites; como elementos de interface devem ser projetados; como saber se seu site atende às perguntas gerais do visitante (“qual é o objetivo deste site?”, “por onde começo?”) ou perguntas específicas: (“o que é isso?””, “o que posso fazer aqui?”, “o que eles tem aqui?”, por que eu deveria estar aqui – e não em outro lugar?”).
Krug chama isso de  “teste do porta-malas” (imagine-se sequestrado, jogado num porta-malas e depois retirado dele para responder estas questões sobre um site): “que site é este?”, “em que página estou?”, “quais são as principais seções?”, “quais são minhas opções neste nível?”, “onde estou no esquema das coisas?”, “como posso realizar um a pesquisa?”.

O grande mérito do livro é mostrar que tecnologia não resolve questões de projeto. Design de interfaces tem a ver com pesquisar como as pessoas – ou grupos de pessoas –  reagem frente a um projeto. Talvez isso explique a resistência ou o desconforto dos profissionais de mídia impressa ao migrarem para mídia digital. Na mídia impressa questões de organização da informação já estão por demais bem resolvidas para que se tenha de pensar como as pessoas vão reagir frente ao que foi diagramado e impresso.

O site do autor possui links para download de um capítulo e sumário – como muitas livrarias online fazem – o que já é um bom começo para quem deseja avaliar se o livro atende as expectativas.

Nem preciso recomendar esse livro, uma vez que é indispensável a quem trabalha com internet.

Rocket surgery made easy, livro de Steve  KrugAcredito que seu livro novo – Rocket surgery made easy (tradução livre do tradutor de “Não me faça pensar”: “não é uma coisa de outro mundo”) seja um complemento interessante, já que explica exatamente como fazer um teste de usabilidade; e até onde sei não existe livro em português sobre o tema.