Revista Bridge

Transcript

1. DESCUBRA TODO O POTENCIAL DO Nesta edição: Descubra o potencial do SVG • Descubra ferramentas interessantes para designers • Customize os mapas do google • Aprenda porquê designers não são taxistas Ano 1 — Jan/2013
2. Anuncio
3. Anuncio
4. por Pedro Maciel A Revista Bridge tem por objetivo fazer a ponte entre o Designer Gráfico e o mundo web, promovendo assim uma melhor integração entre os designers e o meio da comunicação digital. Esses ramos, apesar de tão ligados, ainda parecem falar línguas completamente diferentes. A ausência de publicações nesse sentido se faz evidente. Por isso, a Revista Bridge tem por missão inicial chacoalhar o mercado editorial voltado para designers gráficos. Por isso nosso layout tem por missão ser diferente, ousado, mas ainda assim, respeitando princípios básicos do design gráfico. Que princípios são esses? Grid. Boa tipografia. Boa legibilidade. Boa comunicação. Valorização do caractere tipográfico em sua forma. E é claro, a ênfase numa leitura agradável e numa paleta de cores consistente. O grid da revista é proporcional às dimensões do papel. Com sua consistência, direciona as dimensões de todos os objetos, desde as imagens, as caixas de texto, os títulos e em última instância, o corpo de texto. Mas tudo isso com a consciência de sair do grid e quebrar as regras quando se faz necessário. Muitas vezes foi necessário. Essa revista foi desenvolvida usando famílias tipográficas consagradas como Clarendon, Corporate E, Rockwell e Akzidenz Grotesk (esta mesmo que você está lendo). Editorial FUNDADOR Pedro Maciel EDITORA Beatriz Accioly Gomes CONSELHO Bill Murray, Owen Wilson PRESIDENTE Beatriz Accioly Gomes DIRETOR DE ASSINATURAS Juliana Shimodaira REDATOR-CHEFE Akaina Pancini DIRETORA DE ARTE Maria Fernanda Gama DÍRETOR DE INFOGRÁFICOS Salvador Dalí EDITOR JÚNIOR Tomas Degutis EDITORA ASSISTENTE Clarissa Accioly REPÓRTERES Vivían Gomes DESIGNERS Beatriz Accioly ESTAGIÁRIAS Caroline Lopes, Brígida Onuk EXPEDIENTE ANO 1
5. 6 FEEDBACK DOS LEITORES 8 DESCUBRA O POTENCIAL DO SVG 12 DESCUBRA FERRAMENTAS INTERESSANTES PARA DESIGNERS 14 CUSTOMIZE OS MAPAS DO GOOGLE 16 APRENDA PORQUÊ DESIGNERS NÃO SÃO TAXISTAS Sumário
6. Feedback dos leitores DIA TIPO Gostaria que vocês falassem sobre o DiaTipo (conheça o site oficial), evento maduro, muito bem estruturado, criado pelo maior pulverizador nacional de conhecimento tipográfico Henrique Nardi (nesse ano ele está como consultor do evento), vai acontecer dia 15 de dezembro aqui em São Paulo. DiaTipo, além de todo conhecimento passado nas palestras (e workshops também!), é um encontro, antes de tudo, de apaixonados por tipografia. Dia de contatos bacanas, dia de pessoas legais, dia de papos interessantes, dia de renovar e tirar o mofo que os trabalhos muito institucionais nos ajudam a criar, que fica depositado bem ali, onde mais queremos boas ideias para desenvolver um bom projeto. Dia de encontrar OS CARAS da área, aqueles que fazem a coisa girar e que inspiram tantos outros. Dia de pegar um novo foco de estudo, dia de evoluir. DÉCIO PINTO, 37, WEB DESIGNER. SÃO PAULO — SP FOTODESIGNER Eu insisto, quando mamãezinha me apresenta prazamigas como designer, em corrigi-la prontamente: “É, na verdade sou fotógrafa formada em design.” Por que? Porque, apesar de ter o diploma de bacharel em design com habilitação em projeto de produto (UFA!) e quase recebendo o de especialista em design gráfico, eu simplesmente não atuo como designer. Eu não sou designer, eu não faço projeto, eu não crio. Eu uso o design como referencial teórico para a construção do meu trabalho fotográfico. E claro, atualmente para seguir na carreira acadêmica… Mas meu ponto é: nunca gostei dessas invencionices de nomes pomposos, especialmente quando é estrangeirismo desnecessário. JÚLIA YAMAMOTO, 18, FOTÓGRAFA. SÃO PAULO — SP PANACHÊ DE LEGUMES Me surpreendi a primeira vez que vi. Lá no restaurante a quilo que eu almoçava não tinham mais os deliciosos legumes no vapor. Simplesmente desapareceram da bancada. No lugar dele tinha um tal de panachê de legumes. Caceta, como eles se pareciam visualmente. Arrisquei e, com o pegador, me servi de uma pequena porção, seja lá o que fosse. O sabor era exatamente o mesmo dos famigerados legumes no vapor. Com o passar do tempo resolvi aceitar o novo nome e almoçava normalmente, como se nada tivesse ocorrido. Mas, de certa forma, ocorreu. Não sei qual foi o fenômeno, mas LEGUMES NO VAPOR, talvez, não parecesse tão gostoso quanto PANACHÊ DE LEGUMES. O mesmo aconteceu quando o meu pai comeu a primeira vez um filé de saint peter. “Que nome é esse? Isso é tilápia“, reclamava meu bom e velho genitor. É, Seo Rodolfo, é tilápia vermelha, sim, daquelas que a gente pescava no sítio do Mirto em Cambuí (MG), lembra? Sei lá que infernos ocorreram no planeta e PIMBA!, tilápia sai de campo e entra de volta, com gel no cabelo e decidiu ser chamada de saint peter. E “ai” de quem não chamar assim. JACINTO LEITE, 23, DESIGNER. RECIFE — SP 6 ANO 1 FEEDBACK
7. WEB 1000 Web 1.0, 2.0, 3.0 ou 20.0? Sei lá em qual está agora, acho que nunca levei muito em consideração esse tipo de nomenclatura. Pra mim é tão importante quanto o conceito de Geração X ou Y: Nenhuma utilidade. Em 2005, quando me formei, não imaginei que o rumo do design digital fosse entrar tanto em experiências em suportes móveis. Muito se especulava sobre a chegada da Tv digital ao Brasil, eu acreditava nas mudanças que isso poderia causar e não me empolgava nada com o que se podia fazer com os celulares nessa época. Os smartphones não me seduziam muito até uns quatro anos atrás. A internet não era legal, era cara, os sites WAP eram terríveis e pareciam sempre ter sido feito às pressas. Talvez fossem, mesmo. A integração entre os suportes/plataformas era baixa. Que bom que esse cenário, muito rapidamente, mudou. CAMILA CHONG, 43, WEB DEVELOPER. PORTO VELHO — RO HYPERACTIVITYPOGRAPHY Quando me deparei com o Hyperactivitypography – From A to Z a primeira vez eu achei que era apenas uma brincadeirinha inocente num livro totalmente despretensioso sobre tipografia. E foi começar folheá-lo para encontrar diversos valores bem interessantes e propostas de breves exercícios que não tem em (quase) nenhum dos renomados e tradicionais livros de tipografia. Considero o Hyperactivitypography – From A to Z uma feliz tacada da editora Gestalten: ao passo que a história da tipografia, anatomia do tipo, variações de corpo e afins a apresentação de seu conteúdo é extremamente divertida e inusitada. É exatamente como uma “cartilha de tipografia”, detalhes minunciosos sobre as letras. Como todo o conteúdo é ilustrado e em formato de pequenos desafios e passatempos. KRAMER, 23, DESIGNER. RECIFE — SP FOTOGRAFIAS Fotografias, documentação visual do mundo e inversão digital/analógico Apps como o Instagram (que só existe pra mobile, não tem um site como o Linkedin ou Four Square) entre tantos outros de fotografia, por exemplo, sites como o Flickr ou Picasa, além do Facebook, tem ajudado a documentar o mundo na nossa era (ou pelo menos enquanto não inventarem algo melhor). As câmeras fotográficas dos celulares mais novos estão bem satisfatórias. Ainda não substituem uma máquina-fotográfica-que-é-só-máquina- fotográfica. Cada vez mais tem gente com fotos na rede. Escolhe efeitos, cores, detalhes. Aprende, bem ou mal, como melhorar a foto com efeitos simples, quase prontos. Há quem diga que isso banaliza a fotografia, eu acho tremenda bobagem. O mundo precisa aprimorar sua cultura gráfica e com isso nosso trabalho de designer vai ser mais valorizado e reconhecido. As máquinas fotográficas Lomo voltaram a vender, inclusive em território tupiniquim. Junto com a modinha rétro tem um app que simula fotos antigas e junto dele, as próprias máquinas que fazem fotos antigas. E pessoas passaram a conhecer o método analógico por conta do que foi feito no digital. JORGE DO REGO, 32, DESIGNER UX. GOIANIA — GO 7
8. todo o potencial do Descubra SV 8 ANO 1 CAPA
9. Entenda o que são essas imagens e como você poderá utilizá-las hoje. Por Jack Russel Uma das grandes tendências do momento é o formato SVG, principalmente com o advento do design responsivo e a consequente preocupação com dispositivos com densidade de pixel superior (HiDPI) como a tela retina da Apple, utilizada nos modelos mais recentes do iPhone, iPad e do Macbook Pro. Mas o que exatamente é um arquivo SVG? Qual é a diferença entre um vetor e um bitmap? Como e por que utilizar esta tecnologia a nosso favor? → VG 9
10. O QUE É SVG? SVG é uma sigla para Scalable Vector Graphics ou, em português, Vetor Gráfico Redimensionável. O padrão foi proposto pelo W3C em 1999, inspirado em formatos proprietários como VML da Microsoft e PGML da Adobe. Em 2001 o SVG ganhou sua primeira versão oficial. A vantagem deste formato em relação aos anteriores é ele ser um padrão aberto (open source). Ou seja, todos podem utilizar sem ter que pagar dinheiro para nenhuma empresa… Um arquivo SVG é basicamente um mapa em XML que descreve matematicamente uma figura gráfica bidimensional. Funciona como um conjunto de instruções numéricas para realizar um desenho, que são convertidas em imagens em um software capaz de interpreta-lo (como um browser, por exemplo). SVG é para uma imagem o que o HTML é para um texto. VETOR VS BITMAP Existem dois tipos principais de arquivos de imagens. Vetores e Bitmaps. Os arquivos do tipo vetor (como AI, EPS, CDR e o nosso novo melhor amigo SVG) são linhas, curvas e formas geometricas descritas matematicamente. Já os arquivos bitmaps (como JPG, PNG, GIF etc) são compostos por um grid de pixels. As vantagens de se utilizar gráficos em vetor são incríveis. Primeiramente por que é possível redimensiona-los infinitamente sem perder qualidade ou nitidez. Na prática isto significa que um ícone, por exemplo, terá a mesma aparência sem distorções em um smartphone ou uma televisão de 42”. Não importa qual é a quantidade de espaço que a imagem ocupa, o arquivo terá o mesmo peso. O que potencialmente economiza a quantidade de banda necessária para realizar o download, minimiza a quantidade de requisições para o servidor já que não são necessárias diversas imagens diferentes para servir todas as necessidades, etc… A possibilidade de uso de medidas relativas também faz dos gráficos em SVG o formato ideal para se trabalhar com design responsivo. SVG SÃO UM TIPO DE IMAGEM PARA WEB QUE PODEM SER AUMENTADOS INFINITAMENTE A possibilidade de uso de medidas relativas também faz dos gráficos em SVG o formato ideal para se trabalhar com design responsivo. 10 ANO 1 CAPA
11. ONDE E QUANDO APLICAR Ultimamente o formato vem sendo utilizado para ícones, mas ele é útil para qualquer elemento gráfico que precisa ser redimensionado como botões, padrões de background, etc… Uma boa dica é utilizar gráficos SVG para logotipos. Desta maneira o logo sempre ficará nítido e com uma boa qualidade em qualquer resolução ou tamanho de tela, deixando seu cliente muito mais feliz… Existem ainda uma infinidade de outras possibilidades para este tipo de arquivo como filtros, animações, scripts e outros elementos interativos. Até alguns jogos simples, como este clone de Tetris pela Mozilla. Mas é bom não abusar. Quanto mais complexa a imagem mais tempo levará para o browser renderiza-la. É inviável utilizar o formato para uma fotografia, por exemplo. COMO FAZER UM ARQUIVO SVG Bem, se você gosta muito de matemática e hard coding você pode abrir um editor de texto e escrever manualmente. Se você deseja se aventurar existem alguns tutoriais bacanas nesta wiki. Existem ainda algumas bibliotecas de javascript, como a Raphael.js, que facilitam bastante o trabalho. Mas para quem não é o super-herói da matemática e deseja uma solução mais prática é possível utilizar algumas ferramentas gráficas como o Adobe Illustrator, Corel Draw, Inkscape… e simplesmente exportar outros arquivos vetoriais para o formato. Existe até um editor online chamado SVG Edit. Ele é bem simples, mas quebra um bom galho na falta de um outro software por perto. É possível encontrar por aí até alguns programas que prometem converter automaticamente bitmap em SVG… Mas isto não é nada recomendável e cria resultados com qualidade desastrosa. Se você não é um grande designer, sem problemas. Você pode ainda encontrar diversos pacotes de ícones no formato sob licença creative commons. Uma boa fonte para quem gosta do estilo minimalista é o site Noum Project. IMPLEMENTAÇÃO Uma pequena nota sobre medidas relativas. Lembrando que para esta técnica funcionar corretamente no caso específico de design responsivo é necessário a utilização de medidas relativas como EM e porcentagem. Vamos utilizar para os exemplos práticos um pequeno icone de roldana. O tamanho “padrão” do nosso ícone de exemplo seria equivalente a 32px de altura e largura. Se considerarmos que a medida padrão de texto (1em) de um browser é equivalente a 16px, o tamanho padrão do nosso icone seria portanto 2em (16×2 = 32). Tomar este tipo de preocupação é fundamental para garantir a flexibilidade das imagens e dar ao desenvolvedor um controle muito maior sobre o conteúdo. Não se esqueça que esta medida será afetada de acordo com a porcentagem do font-size, ok? Para fins práticos vamos trabalhar neste artigo com a medida em 100%. Hora de colocar a mão na massa e conhecer alguns métodos de desenvolvimento. Não existe uma solução perfeita, cada uma é boa para um tipo de situação. Vamos analisar algumas opções, juntamente com seus lados positivos e negativos. 11
12. Ferramentas para Designers Por Robson Godoy No último post falei sobre algumas ferramentas úteis a designers gráficos, hoje completo o texto falando sobre stocks, fontes e serviços. 12 ANO 1 REFERENCIA
13. GRAPHICRIVER Layers de PS, ícones em formato Ai, etc. Esse site tem a disposição inúmeros recursos, vários deles com um preço bem acessível. Você também pode vender suas criações neste site. PHOTODUNE Site de stocks “irmão” do anterior. O preço vária conforme a qualidade das fotos, sendo uma boa opção na hora de achar a foto ideal para o seu trabalho. MYFONTS Provavelmente o melhor site de comércio de fontes disponível. As fontes são realmente muito boas, e os preços, embora possam parecer nada amigáveis, compensam levando em consideração a qualidade dos arquivos. Também disponibiliza algumas fontes gratuitas mas a maioria delas são pagas. FONTS.COM A Monotype sempre se supera com suas fontes. Esse é o site ideal para encher os olhos e esvaziar os bolsos. Além de mais de 150.000 produtos, o site também conta com dicas e técnicas tipográficas. KULER Serviço online da Adobe que permite visualizar, baixar e criar combinações de core de forma intuitiva e prática. Bem útil para trabalhar com cores. WACOM Qualidade mundial em tablets, a Wacom é a escolha certa. Embora possa ser mais cara que outras marcas, a qualidade também é superior. Alguns produtos tem um preço bem acessível, outros fogem dos 3 dígitos. PANTONE Outra empresa de qualidade, mas na área de cor. O Canha já havia publicadoPantone: O Pantone, ao contrário do que muitos pensam, na verdade é uma empresa e não marca de tinta. Fundada em 1962 em New Jersey, Estados Unidos, a Pantone Inc. é famosa pela “Escala de Cores Pantone” (“Pantone Matching System” ou PMS), um sistema de cor utilizado em uma variedade de indústrias especialmente a indústria gráfica, além de ocasionalmente na indústria têxtil, de tintas e plásticos. Enquanto o processo CMYK é o método padrão para impressão da maioria dos materiais do mundo, o sistema Pantone é baseado em uma mistura específica de pigmentos para se criar novas cores. O sistema Pantone também permite que cores especiais sejam impressas, tais como as cores metálicas e fluorescentes. Os catálogos de cor Pantone são bem importantes para escritórios de Design Gráfico, no entanto não tem preços nada acessíveis, além de que a validade desses catálogos é bem curta. Depois de excedido o prazo de validade a Pantone não se responsabiliza mais pela integridade das cores representadas. 13
14. Customize os mapas do Google por Joãozinho Trinta Não é bem uma novidade mas eu fui brincar com isso somente alguns dias atrás. Em maio deste ano o Google anunciou uma atualização na v.3 da API do Google Maps que permite aos desenvolvedores alterar a aparência dos mapas. Apesar de já ter um tempo desde seu lançamento, ainda não vi esse recurso sendo utilizado nos sites para tornar os mapas mais adaptados a diferentes escalas de cores. O fato é que isso permite deixar os mapas mais integrado com o design e layout do site. Veja ao lado alguns exemplos divulgados pelo Google A CUSTOMIZAÇÃO AJUDA A HARMONIZAR OS MAPAS COM A IDENTIDADE DO SITE. 14 ANO 1 UPDATE
15. Para facilitar a vida do desenvolvedor e divulgar os novos recursos, o Google criou um wizard com quase todos (ou todos, não sei dizer ao certo) recursos disponíveis pra ajudar os designers a montar os estilos. A documentação completa você encontra no site da Revista Bridge (www.bridge.com.br). 15
16. 16 ANO 1 PENSAMENTO
17. por Tomas Turbando Com o Design, no entanto, esse tipo de abordagem geralmente causa uma série de problemas. Muitos designers gostam de trabalhar de forma a “surpreender” o cliente: fazem o briefing, estipulam um prazo e depois de X dias mostram o trabalho pronto, sem que o cliente tenha tido qualquer tipo de contato com ele. O lado positivo dessa abordagem é que se cria uma grande expectativa sobre o cliente, deixando ele curioso sobre o que está sendo feito. No entanto, esse tipo de prática é como dar um tiro no escuro: você pode tanto fazer exatamente aquilo que o cliente imaginava como pode acabar fazendo algo que decepcione ele em relação ao seu trabalho (geralmente o que mais acontece), e com isso ter que perder um longo tempo com alterações. → Designers não são taxistas Quando chegamos de viagem e pegamos um taxi, escolhemos um dentre os vários da fila, falamos o endereço e ao chegar pagamos a corrida. Esse é um exemplo de serviço pontual que funciona. Muitos designers gostam de trabalhar de forma a surpreender o cliente: fazem o briefing, estipulam um prazo e depois de X dias mostram o trabalho pronto, sem que o cliente tenha tido qualquer tipo de contato 17
18. O PROCESSO INTERATIVO Esse tipo de abordagem eu venho aprendendo na Universidade e também no meu trabalho, e garanto que os resultados são muito satisfatórios: inclua o cliente na sua metodologia de trabalho, não se restrinja a uma reunião de briefing e uma reunião de apresentação final, faça algumas reuniões periódicas para apresentar as ideias, mostrar os caminhos que você julga melhores para o projeto, não deixe de considerar que na maioria das vezes ninguém conhece melhor o problema do cliente do que ele mesmo. Trabalhar de forma interativa com o cliente permite não só uma economia de tempo, mas também facilita na hora de tomar as decisões sobre quais caminhos seguir. Estabelecer um diálogo aberto e franco com seu cliente pode abrir sua cabeça para uma série de novas possibilidades, mas não espere que o cliente saiba lhe dizer exatamente aquilo que ele quer: é precisa aprender a “ler nas entrelinhas” o que a pessoa a sua frente esta dizendo em uma conversa. CADA CASO, É UM CASO Um processo interativo, onde cliente e designer trabalham lado a lado é uma situação utópica, e nem sempre é possível estabelecer esse tipo de abordagem. Algumas situações (e alguns clientes) não dão margem pare esse tipo de trabalho, sendo que as vezes pode ser melhor não dar tanta liberdade para o cliente opinar no seu trabalho, pois ele pode acabar atrapalhando mais do que ajudando. É claro, que vai chegar uma hora em que você vai ter que pedir a opinião dele (afinal, é ele que esta pagando), mas tente argumentar bastante antes de mostrar o que você já fez, explique o processo de trabalho, convença o cliente de que você esta fazendo aquilo que ele precisa, e não o que ele quer. Ter esse jogo de cintura não é fácil, mas muitas vezes isso pode salvar seu trabalho das temidas alterações. 18 ANO 1 PENSAMENTO
19. Anuncio
20. Anuncio