• 

  Hacker News

  O Hacker News é um agregador de artigos relacionados a tecnologia, mantido pela aceleradora de startups YCombinator. É a minha fonte principal de artigos e assuntos que estão bombando no mundo da tecnologia e startups.

  O sistema é composto de uma lista de artigos submetidos por usuários, em que todos podem dar upvote/downvote e comentar, o que dá os pontos que fazem os artigos subirem ou descerem no rank, naturalmente. Os comentários são ricos, e muitas vezes bem críticos.

  http://news.ycombinator.com

• 

  Designer News

  O Designer News é a versão para designers do Hacker News. Mantido pelo defunto Layervault, ele funciona da mesma maneira que o HN, mas o layout é mais amigável e o conteúdo é especificamente voltado a designers. O DN era uma comunidade fechada, em que precisava de um convite para participar das discussões e submeter links, mas recentemente eles abriram o cadastro para quem quiser entrar.

  http://news.layervault.com

• 

  Product Hunt

  Mais um dos agregadores de links, com upvotes/downvotes dos usuários, o Product Hunt é onde as pessoas vão pra postar sobre novos produtos digitais. A discussão não é tão rica quanto o HN, mas é um bom lugar pra ver o que está sendo lançado de apps, sites e serviços, e buscar nos arquivos.

  http://producthunt.com

• 

  Growth Hackers

  Também um agregador de URLs, o Growth Hackers é uma fonte riquíssima de links, cases e discussões sobre marketing digital. Destaque pra seção Must Read, que lista os melhores posts do site.

  http://growthhackers.com/

• 

  Skillshare

  O Skillshare é um hub de mais de 1.300 cursos online de tópicos específicos, criados por profissionais de diversas áreas. Os cursos são curtos, variando entre 30 minutos e 3 horas, ótimo para assistir à noite antes de dormir ou até no intervalo depois do almoço. Qualquer um pode publicar um curso, mas o conteúdo que se destaca acaba sendo de altíssimo nível, e muito prático, com review de exercícios, discussão entre alunos e acompanhamento do professor.

  Onde mais você poderia aprender lettering com a Jessica Hische? Ou arte generativa com Joshua Davis? Ou até mesmo branding com Paula Scher?

  É impressionante a quantidade de coisas que conseguimos aprender online, conectando com pessoas incríveis instantaneamente de graça, ou por um preço ridiculamente mais barato do que das formas tradicionais. Skillshare é um exemplo clássico disso, que eu não consigo parar de recomendar para meus amigos.

  http://skillshare.com

• 

  Quora

  O jeito mais direto de descrever o Quora é compará-lo com o Yahoo! Respostas. No Yahoo! Respostas, pessoas fazem perguntas idiotas e pessoas idotas respondem. No Quora, pessoas fazem perguntas idiotas e pessoas inteligentes respondem.

  Mas falando sério, o Quora, por ter começado com uma base de usuários bem restrita a pessoas ligadas a tecnologia no Vale do Silício, tem desde sempre conteúdo muito rico, escrito por pessoas bem qualificadas a responderem perguntas sobre diversos tópicos. Existe o mesmo sistema de upvotes e reputação do Yahoo! Respostas, mas o nível das respostas é muito maior e isso atrai um público muito mais especializado, o que dá mais credibilidade ao conteúdo. Houve a época em que se você fizesse uma pergunta sobre o Facebook, o próprio Mark Zuckerberg entraria para responder algo que ele nunca teria respondido em nenhum outro canal, o que tornou o Quora mais uma fonte de informação exclusiva.

  http://quora.com

• 

  Twitter

  Pra muita gente, o Twitter é uma rede social. Mas se você segue especialistas em assuntos que você gosta, e outras pessoas com os mesmos gostos, tem uma fonte contínua de informação e de rápida consulta. 140 caracteres é perfeito para as pessoas compartilharem links, fazerem e responderem perguntas e participarem de discussões curtas e focadas.

  http://twitter.com

• 

  Google+

  Assim como o Twitter, e provavelmente mais subestimado ainda como fonte de descoberta de conteúdo, o Google+ acaba sendo um poço de informações muito rico, e uma ótima plataforma para comunidades mais sérias do que grupos do Facebook, por exemplo. Não é difícil encontrar especialistas que publicam textos, links e imagens no Google+, e mesmo ele sendo mais uma, significa que pode ser considerado mais um hub de assuntos do seu interesse e comunidades de pessoas que se empolgam pelas coisas que você gosta, do que um lugar pra você saber o que seus amigos estão fazendo.

  http://plus.google.com

Entre você e essas pessoas está a internet – uma plataforma fria, um espaço vazio em que tudo pode ser colocado e interpretado conforme solicitado. Isso requer um certo nível de controle da sua parte, pra que essa interpretação seja consistente, e feita de forma que beneficie o seu objetivo, e ao mesmo tempo traga boas experiências ao seu leitor. Pra isso, você deve pensar bem sobre tudo que você publica na rede, como se apresenta graficamente, como se expressa, etc.

A internet, e especialmente as mídias sociais não são uma novidade, e já viraram parte do cotidiano de muita gente há um tempo. Se você trabalha com um computador, eventualmente dá uma navegada na web durante o dia, entra no Facebook, lê emails… E mesmo se não trabalha, pode ter um celular que recebe emails, acessa o Facebook e reproduz mídia rica através de uma conexão 3G, por exemplo.

Pela internet ser uma coisa tão onipresente, pode parecer simples manter uma imagem virtual positiva. Mas quando isso é feito com um objetivo, existem alguns pontos a se atentar. Um designer gráfico, por exemplo,  pode usar a internet com o objetivo de mostrar seu trabalho, sua capacidade e seus interesses, a fim de ser encontrado por clientes que queiram comprar seu trabalho, ou empresas que estejam atrás de talento.

Vou falar então de algumas estratégias, e alguns detalhes técnicos essenciais para que você consiga ter mais controle sobre o seu “eu” virtual, e consiga refletir seu lado pessoal e profissional de forma positiva e consistente na web.

Branding Pessoal

Quem trabalha com branding, deve estar associando isso tudo a branding corporativo. Empresas fazem isso há anos, pois elas sempre tiveram um poder de comunicação enorme, como resultado de oferecer serviços e produtos para muitas pessoas ao mesmo tempo. Mas hoje, você tem esse mesmo poder. Nessa mídia de massa chamada internet, qualquer pessoa pode ter uma audiência tão grande (ou maior) do que uma Coca-Cola ou um Starbucks. Claro que isso requer que você esteja oferecendo algo que muita gente quer.

Mas quem disse que você já não oferece?

Isso significa que se você quer mostrar quem você é, e o que você faz e quer fazer, precisa se apresentar da forma certa. Eu não gosto muito do termo “branding pessoal”, pois a tradução de branding corporativo para o pessoal é simplesmente algo que todos já temos – personalidade. Mas em um ambiente frio como a internet, e com um objetivo em mente, você tem que expressar essa personalidade para o mundo, com as ferramentas e as plataformas que existem, e de forma estratégica. Daí o porquê de você trabalhar seu “branding pessoal”.

Pense no branding pessoal como o autorretrato de um artista. Picasso, por exemplo, criou mais de 10 autorretratos em sua vida. Alguns são tão estilizados que ele está quase irreconhecível. Outros enfatizam mais seu nariz e menos os olhos. Outros o fazem parecer mais bonito do que ele realmente era. Eles são todos diferentes, todos representações das diferentes maneiras que Picasso se enxergava, e dos diferentes estilos do seu trabalho ao longo do tempo. Apesar de todas as imagens representarem a mesma pessoa, elas nos incentivam a ver o homem através de uma lente diferente de cada vez. Branding pessoal é como criar um autorretrato, para refletir quem você é, e comunicar a sua personalidade. No nosso caso, em vez de usarmos a arte, vamos usar internet.

E quais seriam os seus objetivos, de querer usar a internet como meio de expressão? Uma imagem pessoal bem trabalhada na internet pode:

• … te ajudar a atrair a atenção de quem você quer.
• … fazer valer à pena que as pessoas falem sobre você.
• … te diferenciar de outras pessoas do seu nicho.
• … te ajudar a desenvolver uma certa notoriedade.

Encontrabilidade

Pra começar a pensar que alguém vai ter acesso a um perfil virtual seu, temos que considerar como as pessoas vão te achar na internet. Isso pode acontecer de duas formas: ativa, ou passiva. Ativa no sentido que a pessoa está atrás de algo que você pode oferecer, e passiva no sentido que o seu perfil chega a ela inesperadamente. E no fim, uma forma alimenta a outra.

Pra otimizar a sua encontrabilidade ativa, sua estratégia deve ser mais direcionada à semântica do seu “eu” virtual. Pense por exemplo em alguém buscando no Google por “motion designer rio de janeiro”. Se você quer aparecer na primeira página dessa busca, e preferencialmente nos primeiros resultados, você tem que relacionar essas palavras-chave à sua pessoa. Isso é feito com SEO – Search Engine Optimization (Otimização de Sistemas de Busca). SEO é uma competência por si só, e seria inviável eu descrever todas as diretrizes de otimização aqui. O assunto começa a ficar bem técnico, envolvendo websemântica, usabilidade, backlinks, mas também tem a influência da qualidade do seu conteúdo, e a sua encontrabilidade passiva.

Pra otimizar a sua encontrabilidade passiva, sua estratégia deve ser mais voltada à qualidade do conteúdo que você publica. Imagine que você vai ser encontrado por que alguém indicou seu trabalho pra outra pessoa. Isso provavelmente só vai acontecer se o conteúdo que você disponibilizou online é bom. Esse conteúdo pode ser seu portfolio, um vídeo, um post em um blog, no Facebook, etc. E esse conteúdo deve ser fácil de compartilhar. Isso não é difícil de fazer em mídias sociais, mas não custa nada facilitar o compartilhamento, e incentivar as pessoas a compartilharem seu conteúdo se elas curtirem. Jason Fried apontou em 2009 que uma das melhores estratégias pra alcançar pessoas e construir uma audiência é ensinando. É uma estratégia adotada por grandes chefs de cozinha, e pode ser adotada por qualquer um. Ensine outras pessoas a fazerem o que você faz, e você vai construir uma base de seguidores fiéis, que passam a conhecer o seu trabalho, confiam na sua palavra, conhecem a sua capacidade, e estão prontos pra espalhar o seu conteúdo pra você.

Quer ganhar seguidores? Dê algo de graça pras pessoas. Resolva o problema delas, de alguma forma. Inspire-as, converse com elas, e eventualmente elas vão retribuir.

Elementos de identidade online

Assim como existem elementos de identidade visual para empresas (logotipo, símbolo, tipografia, cores, etc), existem elementos de identidade específicos da internet. E assim como os elementos de identidade corporativa são aplicados em impressos, cartões de visitas, papéis de carta, os elementos de identidade online são empregados por diversas plataformas online. Com o mínimo de trabalho, esses simples elementos já vão te dar uma “cara” virtual consistente entre plataformas, especialmente redes sociais, e enriquecer a expressão da sua personalidade na internet.

Nome

Isso mesmo. Na internet você tem controle sobre como as pessoas vão te chamar. No meu caso, meu nome é João Paulo Pereira Diniz Faraco, mas eu escolhi que na internet eu sou apenas João Faraco. Não preciso que as pessoas lembrem dos meus nomes do meio, e não quero que ninguém me chame pelo meu nome composto, e também não tenho nenhum apelido marcante, nem tenho muito interesse em ter um, então eu defini que na internet eu vou me apresentar sempre como João Faraco.

Nome de usuário

É uma boa ideia escolher um único nome de usuário que você use em todas as plataformas. Isso facilita na hora de compartilhar seus perfis sociais por exemplo. No meu caso, jpfaraco é o meu nome de usuário no Twitter, no YouTube, no Behance, etc.

Avatar

Sua imagem de exibição. Pode ser simplesmente uma foto da sua cara, ou uma marca pessoal, ou qualquer coisa que identifique você como você quer ser identificado, e que esteja alinhado com os outros elementos da sua identidade. Algumas dicas:

• Imagens quadradas são as mais compatíveis. Se o seu avatar for retangular, corre o risco de você usá-lo em um site, e ele ser esmagado pra caber em um quadrado. Sim, acontece.
• Mesmo com muitos novos serviços que permitem o cadastro usando o Facebook e o Twitter, e que puxam o seu avatar de lá, às vezes é preciso subir a imagem manualmente. Alguns sites só aceitam arquivos com até tantos pixels, ou tantos Kb, então é bom ter seu avatar em tamanhos comuns como 50×50, 100×100, 150×150, 200×200, e por aí vai. É bom ter uma pasta virtual, que possa ser acessada de qualquer lugar, com versões do seu avatar em diferentes dimensões.
• Muitos sites e serviços usam gravatars. Gravatar é um serviço que hospeda a sua imagem de avatar e o serve pra plataformas como o WordPress.com, que usa avatares nos comentários. No Gravatar, você associa seu email ao seu avatar, então sempre que você fizer, por exemplo, um comentário em um blog do WordPress.com, o seu avatar já vai aparecer.

Tagline

Enquanto em muitos sites e apps o seu perfil só mostra primeiramente o seu avatar e seu nome/nome de usuário, alguns serviços como o Twitter, dão um espaço extra pra você colocar uma tagline. Uma tagline é praticamente um slogan seu. Na verdade é um luxo poder ter esse recurso extra de comunicação – aqui você pode expressar seu diferencial, o que faz você ser você, em uma frase. Pense na tagline como a frase que seus amigos vão falar pros outros, quando eles estiverem falando de você.

Cores (e texturas)

Cores e texturas eventualmente podem ser usadas em muitas peças de autopromoção que você tem controle total. Mas assim como a tagline, não são todos os serviços online que permitem que você customize as cores do seu perfil. Então é bom definir uma paleta de cores (e se for o caso, texturas também) pra quando você puder usá-las. O Twitter também permite que você aplique um fundo colorido ao seu perfil, dando mais consistência à sua identidade visual.

Tom de voz

Esse é mais subjetivo, mas se é pra você expressar a sua personalidade, o seu tom de voz também deve ser consistente em todos os pontos de contato do seu “eu” virtual. Ele deve refletir o jeito que você comunica na vida real, e ser compatível com o que você está mostrando. Você é uma pessoa sarcástica? É conhecido por isso? Seu humor sarcástico é aplicável ao meio online, em forma de texto, imagens e vídeos? As pessoas já se relacionam com esse seu jeito, e te dão moral por ser assim? Esses são exemplos de perguntas que você pode fazer a si mesmo na hora de escolher as palavras que vão expressar o seu tom de voz na internet. Se você é uma pessoa eloquente na vida real, porque o faria diferente na internet? Aproveite isso como mais um recurso de diferenciá-lo de outras pessoas.

Esses elementos podem parecer óbvios, mas pare e pense bem neles – pense em quem poderia estar acessando seus perfis sociais, por exemplo. Por mais que você queira expressar sua personalidade em todos os elementos da sua identidade online, consistência e sensatez vêm antes quando o seu futuro cliente pode te encontrar na internet, por exemplo.

Eu digo consistência no sentido dos elementos estarem alinhados através das diferentes plataformas online, a ponto de deixar claro que os diferentes perfis virtuais pertencem à mesma pessoa real – você. E digo sensatez não no sentido de ser careta nas escolhas, mas de ser sensato quanto aos seus objetivos. Nunca esqueça dos objetivos de você estar trabalhando sua imagem online.

Plataformas

A sua estratégia e seus elementos de identidade precisam acontecer em algum lugar. Na web, você pode se manifestar em plataformas proprietárias e públicas. Vou falar sobre as principais opções, que são naturalmente bem indexadas no Google, e são usadas pela maioria.

Site pessoal

Ter um site normalmente significa ter um espaço onde você vai se expressar livremente, com total controle sobre a apresentação e o conteúdo. Hoje em dia isso é muito fácil de fazer, com plataformas como Tumblr, WordPress e Squarespace.

Se você for usar o WordPress, e não quiser usar um dos temas padrão, considere comprar um tema premium, em vez de baixar um gratuito. Temas premium costumam ter opções de customização avançadas, que fazem o seu site ficar mais personalizado ainda, e são mais bem construídos – muitos seguem padrões da web, e são compatíveis com dispositivos móveis. Se você conseguir se virar com HTML e CSS pra personalizar, melhor ainda. Sem contar que temas gratuitos podem trazer riscos de segurança sérios. Os melhores temas sem dúvida são os do Theme Forest.

Você pode ter seu site como apenas um hub, linkando para seus demais perfis sociais, e/ou ter um espaço onde posta seus pensamentos. Pode ser uma coisa mais completa também, talvez um blog ativo onde você publica artigos sobre arte e design. Esse tipo de produção de conteúdo é o que atrai leitores que vão acabar se convertendo em seguidores. Isso não acontece da noite pro dia, mas vale a paciência e o trabalho se você quer uma audiência.

Portfolio

É uma boa ideia ter um portfolio online, onde seus melhores trabalhos estão publicados, especialmente em comunidades de portfolio como o Behance e o Cargocollective. Na verdade eu conheço poucos designers que não têm. São fáceis de atualizar (isso é muito importante), e dão bastante visibilidade, em que o seu trabalho fica indexado com tags e avaliações, aumentando a sua encontrabilidade.

O Behance em especial é uma comunidade, onde você pode buscar referências, conhecer e seguir outros designers e artistas, comentar nos seus trabalhos, e se fazer visível. Praticar isso aumenta o seu círculo de contatos e também a chance de aparecerem boas oportunidades.

Procure publicar os seus projetos favoritos, que teve mais prazer em realizar, e nunca se esqueça dos créditos de quem mais esteve envolvido. Valorize-os com a apresentação – se forem trabalhos impressos, tire fotos; se forem trabalhos para web, inclua detalhes do processo; se forem trabalhos de motion, coloque um making-of ou um estudo de caso. Veja como a Fantasy Interactive faz isso com seus projetos.

Pinterest

A popularidade do Pinterest explodiu no final de 2011, e se tornou uma das plataformas de referências gráficas mais usadas. Use-o para pinar as imagens do seu próprio trabalho, linká-los de volta ao seu site ou portfolio, e também para curar boards com outras referências. Dessa forma, pessoas que acharem seus boards interessantes, vão seguí-los e acabar caindo no seu próprio trabalho.

Dribbble

O Dribbble é como um Twitter pra designers. Em vez de publicar tweets de até 140 caracteres, você publica shots de 400 x 300px. Para participar, você deve ser convidado, então o nível das postagens é alto, e durante um tempo rolou até um certo status pra quem podia postar shots. O Dribbble é uma ótima fonte de referência, especialmente de trabalhos de design de interface, em que os 400 x 300px servem bem pra mostrar detalhes 1:1 de projetos digitais.

Assim como o Behance, o Dribbble é uma comunidade de designers, em que a interação é o combustível pra você se fazer visível. Há também um senso de colaboração, em que pessoas podem evoluir sua ideia e postar versões em forma de rebound. O Daniel Campos escreveu um post bem completo sobre o Dribbble no Logo BR.

Facebook / Twitter / Instagram

A santa trindade das redes sociais não deve ser ignorada. Mantenha sua identidade consistente aqui também, e se for o caso, separe o seu “eu” profissional do seu “eu” pessoal, com uma página no Facebook, por exemplo. Lembre-se do seu objetivo antes de compartilhar o Chapolin Sincero.

Se você quer ser encontrado, mas manter a privacidade, preencha seus perfis com as informações básicas e um link pro seu site/blog/portfolio onde alguém possa entrar em contato com você. Redes sociais podem parecer só diversão, mas essas informações são muito consideradas pelo indexador do Google, e tê-las completas e consistentes ajuda muito no fortalecimento da sua presença online.

Note que quando você for divulgar um trabalho no Facebook, por exemplo, em vez de postar só o link e deixar o Facebook escolher o thumbnail (se é que ele vai achar um), poste uma imagem, acompanhada do texto e link pro trabalho. Posts com imagem geram cerca de 53% mais cliques do que posts só com texto, pois chamam muito mais atenção. Sem contar que essa mesma imagem de chamada pode ser postada em outras redes, como Pinterest e Instagram, também linkando pro trabalho em questão.

LinkedIn

A rede profissional tem uma enorme força no mercado internacional, e está ganhando tração e importância no Brasil. Dois amigos meus que estão morando no exterior confirmaram que ter um perfil atualizado no LinkedIn é obrigatório se você quiser ser encontrado por um headhunter. Fora isso, muitos dos contatos que fizemos para realizar o Insert, conseguimos através do LinkedIn. E além de tudo isso, o LinkedIn também é muito considerado pelos crawlers do Google. Mantenha o seu atualizado sempre, e seja ativo para enriquecer suas conexões.

YouTube / Vimeo

Para motion designers, é imprescindível ter uma conta no YouTube e/ou no Vimeo, para hospedar seus trabalhos. Ambas as plataformas oferecem estatísticas de visualizações, sistema de comentários, assinaturas, basicamente o que você precisa pra ter uma audiência com quem pode se relacionar facilmente.

E mesmo se o seu conteúdo principal não for vídeo, pense em usar vídeo como uma ferramenta de marketing, pra divulgar um projeto.

Note que vídeos do YouTube aparecem como thumbnails na página de resultados do Google, e quando têm relevância o suficiente com a busca, são os primeiros resultados.

About.me

Não tem tempo de montar um site simples, com os seus links de mídias sociais e informações de contato? Crie uma conta no About.me, e faça isso sem esforço. As páginas ficam todas meio parecidas, mas basta uma boa foto sua no fundo pra passar como site pessoal.

Email

Email ? Isso mesmo. De que adianta se apresentar de um jeito na internet, se quando na hora de mandar um simples email pra alguém, você escreve tudo errado, esquece a pontuação, da coesão e da coerência ? Leia e releia todo email que você for enviar. Email não costuma ser uma redação de vestibular, então não custa demorar 10 minutos extras pra lapidar um email que você vai mandar pra um cliente, por exemplo. Se quiser arrancar a tecla de CAPS LOCK do seu teclado, fique à vontade.

Inspiração

Separei alguns designers que cuidam bem das suas identidades online, e se apresentam de forma bem consistente na internet.

Carol Rivello

Douglas Cavendish

Elvis Benício

A onda do Processing é que é uma linguagem muito fácil de aprender. Assim como outras linguagens como JavaScript e Python, mesmo se você nunca teve experiência prévia com programação, algumas linhas de código e um pouco de raciocínio podem produzir resultados incríveis. E essa sempre foi a sua premissa, desde quando John Maeda e seus estudantes do MIT Media Lab conceberam o projeto em 2001.

Vou falar um pouco do básico, pra você ver se você também se interessa na linguagem, e quem sabe corre atrás de mais informação.

Começando

Pra início de conversa, você tem que baixar o aplicativo do Processing. Ele é gratuito e está disponível pra download em http://processing.org. Tem versões pra Windows, Mac e Linux. Instale-o e abra.

Essa é a janela principal do Processing. Não é nada mais do que um bloco de notas, onde você escreve o seu código. Lá em cima só tem os botões de play/stop pra rodar e parar o seu script, e botões de criar um novo, salvar, abrir e exportar como aplicativo.

Pra testar isso, clique no Play (ou aperte Ctrl/Cmd+R), e o Processing já abre uma janelinha 100 x 100 pixels, com um fundo cinza. É uma das coisas que ele faz pra você, sem você ter escrito nada. Ótimo, mas queremos ter controle sobre isso. Feche a janelinha pra parar o programa, e escreva no editor:

size(510, 510);
background(#CCCCCC);

Essa função size() é o que define o tamanho da janela. Se você não definir isso, é como se tivesse escrito size(100, 100);, pois esses são os valores padrão da função size(). No caso, eu defini que a tela vai ter 510 x 510 pixels.

A função background() é o que define a cor do fundo. No caso eu coloquei um cinza em código hexadecimal, mas ele também aceita valores de vermelho, verde e azul (RGB) separados por vírgulas. Branco seria background(255, 255, 255). Um valor único de 0 a 255 também é um jeito rápido de definir tons de cinza, sendo 0 preto e 255 branco. Aperte o Play pra ver se funcionou.

A próxima coisa que podemos fazer é desenhar formas básicas na tela…

size(510, 510);
background(#CCCCCC);
ellipse(200, 100, 120, 60);
rect(200, 200, 80, 80);
line(100, 300, 400, 400);

O Processing tem muitas funções que criam formas geométricas, como ellipse() (elipse), rect() (retângulo) e line() (linha). Cada um tem sua sintaxe de entrada de dados que dizem como eles vão ser desenhados. Esses dados são os números entre parênteses.

No caso da elipse, temos que informar primeiro onde ela vai ser desenhada, e depois o seu tamanho. Então a sintaxe traduzida é ellipse([coordenada x],[coordenada y], [largura], [altura]). O mesmo serve pra desenhar o retângulo. As coordenadas da tela consideram o canto superior esquerdo como o ponto (0,0), e a unidade de tudo isso é pixels.

Uma linha é basicamente a união entre dois pontos. Então pra desenhar uma, basta informar as coordenadas x e y desses dois pontos. No caso, a linha que desenhamos vai do ponto (100, 300) ao ponto (400, 400).

Até agora não vimos nada de super emocionante, especialmente com essas formas básicas, com preenchimento branco e contorno preto. Seria melhor usar o MS Paint pra fazer isso!

Pra melhorar a aparência podemos mudar a cor do preenchimento e do contorno…

size(510, 510);
background(#CCCCCC);
noFill();
stroke(0, 0, 255);
ellipse(200, 100, 120, 60);
noStroke();
fill(255, 0, 0);
rect(200, 200, 80, 80);
stroke(60, 150, 60);
strokeWeight(3);
line(100, 300, 400, 400);

O que fizemos aqui foi definir, pra cada forma criada, características de preenchimento e contorno. O compilador lê o código de cima pra baixo, e do jeito que está, termina o programa no final. Então isso é praticamente uma lista de instruções que estamos dando pra ele. E repare que no final de cada instrução, temos que incluir um ponto e vírgula.

Primeiro instruímos como vai ser o tamanho e a cor da tela. Depois dizemos que a próxima forma que ele desenhar não vai ter nenhum preenchimento (noFill()) e um contorno azul (stroke(0, 0, 255)). Aí ele desenha a elipse desse jeito, nas coordenadas e no tamanho definidos.

Depois dizemos que a forma seguinte não vai ter contorno (noStroke()), e o preenchimento vai ser vermelho (fill(255, 0, 0)). E aí ele desenha o retângulo com essas propriedades, e as coordenadas e tamanho também informados.

Por último, dizemos que o contorno vai ser um verde (stroke(60, 150, 60)), com 3 pixels de espessura (strokeWeight(3)). E aí ele faz a linha com essas propriedades, nas coordenadas informadas.

Desenhando

Até agora não fizemos nada que o MS Paint não faça, então vamos continuar, e começar a ver como podemos usar essas formas pra criar ferramentas de desenho, e justificar mais o uso do Processing.

Pra simplificar, vou trabalhar só com uma elipse mesmo:

size(510, 510);
background(#333333);
noFill();
stroke(#FFFFFF);
ellipse(255,255,100,100);

Repare que eu posicionei a elipse no centro da tela. Pra eu não ter que calcular o centro, posso aproveitar as variáveis pré-declaradas width (largura) e height (altura), pra se caso eu queira mudar o tamanho da tela, não tenho que voltar e recalcular a posição da elipse:

size(510, 510);
background(#333333);
noFill();
stroke(#FFFFFF);
ellipse(width/2,height/2,100,100);

Isso já mostra como o Processing já oferece variáveis prontas pra serem usadas, economizando o tempo de termos que criar variáveis muito usadas.

Até agora, tudo que escrevemos foi uma lista de instruções pro compilador, em que ele lê linha por linha, e no final termina o programa. Mas pra haver qualquer tipo de mudança visual ao longo do tempo, precisamos de algum tipo de bloco de código que seja repetido a cada frame. Pra isso introduzimos duas funções essenciais, próprias do Processing: setup() e draw().

Basicamente, a função setup() é rodada uma vez só, e é usada pra declarações iniciais como tamanho da tela, fundo etc. A função draw() é rodada em loop, uma vez a cada frame. O nosso código fica assim:

void setup() {
  size(510, 510);
  background(#333333);
  noFill();
  stroke(#FFFFFF);
}
  
void draw() {
  ellipse(width/2, height/2, 100, 100);
}

Com isso, podemos fazer algum valor dentro de draw() variar a cada quadro. Isso pode ser a posição da elipse. Ela pode assumir a posição do cursor:

void setup() {
  size(510, 510);
  background(#333333);
  noFill();
  stroke(#FFFFFF);
}
  
void draw() {
  ellipse(mouseX, mouseY, 100, 100);
}

Interessante … Que tal fazer isso só quando o botão do mouse está pressionado ? Podemos usar a condicional if(){} e a variável do sistema mousePressed, pra dizer quando essas elipses vão ser desenhadas:

void setup() {
  size(510, 510);
  background(#333333);
  noFill();
  stroke(#FFFFFF);
}
  
void draw() {
  if (mousePressed){
    ellipse(mouseX, mouseY, 100, 100);
  }
}

Isso traduz como: a cada frame, se o botão do mouse estiver pressionado, desenhe uma elipse na posição do cursor, com 100 pixels de largura e 100 pixels de altura.

Podemos também fazer com que o tamanho e a cor do contorno das elipses desenhadas varie aleatoriamente, e de acordo com a posição do cursor. Pra isso, temos que jogar a função stroke() pra dentro do draw, pra que ele mude a cada frame. Introduzimos também a função random(), pra sortear valores aleatórios pro tamanho das elipses. Assim:

void setup() {
  size(510, 510);
  background(#333333);
  noFill();
}
  
void draw() {
  if (mousePressed) {
    stroke(mouseX/2);
    ellipse(mouseX, mouseY, random(20,80), random(20,80));
  }
}

Aqui, o valor de stroke é um cálculo, pra respeitar os valores aceitos pra cor (0 a 255). Se o cursor estiver na extrema direita da tela, esse valor vai ser dividido por 2, e retornar 255 como a cor do contorno da elipse.

Já o tamanho da elipse é definido por valores aleatórios (random()), entre 20 e 80, tanto pra largura quanto pra altura. Então a cada frame esses valores variáveis são recalculados, e uma nova elipse é desenhada na tela.

12 linhas de código e alguns rabiscos depois …

Animando

Todas essas funções e variáveis como stroke(), ellipse(), mousePressed, mouseX, etc são próprias do Processing, e são o que tornam a linguagem pronta pra ser usada por quem trabalha com estruturas visuais. Repare que quando elas são escritas, o editor marca essas palavras em rosa, pra dizer que são palavras reservadas ao sistema. Mas muitas vezes, queremos definir as nossas próprias variáveis. Vou exemplificar com um cenário de um círculo animado:

void setup() {
  size(510, 510);
  background(#333333);
  noFill();
  stroke(#FFFFFF);
}
  
void draw() {
  ellipse(width/2, height/2, 30, 30);
}

Eu quero que essa elipse ande 1 pixel pra direita a cada quadro. Pra isso, a posição x da elipse vai ser incrementada em 1 pixel a cada quadro. Precisamos de uma variável pra isso.

Pense em uma variável como uma gaveta que armazena um dado qualquer. O que está dentro da gaveta pode ser consultado e alterado. No caso, queremos uma gaveta que guarde um valor numérico, que a cada quadro vai ser incrementado uma unidade, e consultado pelo campo da posição x da elipse.

float posX;
  
void setup() {
  size(510, 510);
  background(#333333);
  noFill();
  stroke(#FFFFFF);
  posX = width/2;
}
  
void draw() {
  ellipse(posX, height/2, 30, 30);
  posX = posX + 1;
}

Aqui, criamos a variável posX, que vai armazenar o valor variável da posição x da elipse.

Pra começar, temos que declarar a variável, ou seja, dizer o tipo de dado que ela vai conter, e o seu nome. float é um tipo de dado próprio do sistema, e significa valores numéricos flutuantes (números inteiros e decimais). Outros tipos de dados do Processing podem ser int (números inteiros), boolean (verdadeiro/falso), String (sequência de caracteres alfanuméricos, representados entre aspas, como nomes e frases) etc. No caso, como a posição x do círculo poderá ser um número inteiro ou decimal, vamos usar float mesmo.

Segundo, é bom definir um valor inicial dessa variável. Isso é feito dentro do setup(), que é rodado uma vez na inicialização do programa.

Depois, dizemos que o valor da posição x da elipse vai ser o mesmo valor contido na variável posX. Isso é feito dentro do draw(), que roda em loop, uma vez a cada quadro.

Por último, incrementamos o valor de posX em uma unidade.

Beleza, mas eu não quero deixar esse rastro de círculos a cada quadro processado. Basta redefinir a cor do background(), dentro do draw(). Assim, a cada quadro, o programa pinta o fundo por cima de tudo e desenha o círculo na sua nova posição:

float posX;
  
void setup() {
  size(510, 510);
  background(#333333);
  noFill();
  stroke(#FFFFFF);
  posX = width/2;
}
  
void draw() {
  background(#333333);
  ellipse(posX, height/2, 30, 30);
  posX = posX + 1;
}

Agora, entendido como funcionam as variáveis, podemos incrementar um pouco mais esse programa. Vamos fazer com que a posição x do cursor defina a velocidade do círculo. Ao mesmo tempo, vamos fazer com que o círculo volte pro início da tela, se ele sair de vista:

float posX;
float velX;
  
void setup() {
  size(510, 510);
  background(#333333);
  noFill();
  stroke(#FFFFFF);
  posX = width/2;
}
  
void draw() {
  background(#333333);
  velX = mouseX/10;
  ellipse(posX, height/2, 30, 30);
  if (posX > width) {
    posX = 0;
  }
  else {
    posX = posX + velX;
  }
}

Aqui, introduzimos mais uma variável, velX, e definimos que ela vai ser a posição x do cursor dividido por 10 (pra limitar o incremento da posição x da elipse em até 51px por quadro).

Introduzimos uma condicional que vai cuidar do valor de posX assim: Se a elipse estiver em uma posição x maior do que a largura da tela, coloque-a de volta na esquerda da tela. Se não (else{}), incremente a posição x no valor que estiver na variável velX (definida pela posição x do cursor dividido por 10).

Isso é só pra riscar a superfície, e não gera muito resultado útil por si só. Mas entendendo a lógica de funcionamento de linguagens como o Processing, conseguimos ir descobrindo novas possibilidades através da experimentação que empurra o estudo. É importante se desafiar a cada etapa, e com isso ir aprendendo novas técnicas. Mesmo se o que você está escrevendo não tiver aplicação prática, entender e exercitar os conceitos de variáveis, funções, propriedades, métodos, classes, etc é crucial pra mergulhar em qualquer linguagem de programação, e o Processing é uma ótima porta de entrada pra quem se interessa em produzir suas próprias ferramentas visuais, e aproveitar o poder de processamento do computador.

O computador se tornou a ferramenta padrão de hoje em dia, mas muitas vezes esquecemos da sua capacidade de processar imensas quantidades de informação e executar cálculos complicadíssimos em frações de segundo. Isso pode ser aproveitado pra criar ferramentas únicas e peças gráficas complexas e sofisticadas, se soubermos falar a língua da máquina.

Pra estender o assunto, o próprio site do Processing é uma ótima referência, com o dicionário da sintaxe, bibliotecas e ferramentas pra criar qualquer coisa, seja pra web, instalações interativas, animações, etc. Comece por lá.

Um dos grandes problemas que o Facebook teve com seu app mobile não foi a arquitetura de informação, ou o design da interface, mas sim a performance do aplicativo. Mesmo sendo um app nativo de iOS e Android, muita gente se revoltava, especialmente nas primeiras versões, quando se deparava com a tela de Loading, que nunca aparecia na versão desktop. O assunto foi tão atacado, que a Sencha criou o Fastbook, uma versão mobile do Facebook feita inteiramente com as APIs do Facebook e HTML5, pra mostrar como não havia desculpa do aplicativo nativo ter uma performance tão ruim.

É no mínimo humilhante, para uma empresa que possui uma equipe enorme de pessoas dedicadas a um propósito, ter um grupo pequeno de fora mostrar como as coisas devem ser feitas.

Phil Hawksworth observou também o quanto a prostituição de efeitos de rolagem em sites está se tornando um problema ridículo de performance:

Dear web developers of the world. Can we stop this silliness before somebody gets hurt?! grolsch.com flickr.com/photos/philhaw… #excess

— Phil Hawksworth (@philhawksworth) July 13, 2012

Esses sites podem fazer bem pros olhos, mas pouca gente tem paciência pra esperar carregar tudo e começar a navegar. 74% de usuários desistem de um site mobile se ele demora mais que 5 segundos pra carregar.

Pra evitar que esse tipo de preocupação não fique a cargo de quem implementa, é preciso considerar performance em todas as etapas do projeto, e imbuir sua importância na cabeça de todos os envolvidos:

• Inclua performance na documentação do projeto. Propostas, briefings e escopos devem especificar performance como um dos objetivos principais do projeto. “O objetivo desse projeto é criar uma experiência rica, fluida e que funcione de forma ultra-rápida…”
• Leve o projeto para o browser assim que puder. Uma comp de Photoshop de uma interface pode ser linda de olhar e postar no Dribbble, mas ela não diz nada sobre a experiência de uso que vai existir no produto final. Procure levar suas ideias a uma ferramenta de prototipagem como o Codepen, pra avaliar a performance de uma interface (ou um elemento da interface) antes de fechar um layout polido no Photoshop.
• Experimente o protótipo em dispositivos reais. Emuladores emulam o sistema, mas não a experiência de estar com o dispositivo no contexto pretendido.
• Colabore. Se você realmente não domina o lado de otimização de performance, inclua quem domina no seu processo criativo. Desenvolvedores que participam da fase de ideação podem contribuir com insights técnicos que moldem os caminhos antes mesmo do esboço virar um protótipo.
• Eduque. Pregue uma consciência de que projetos digitais podem ter limites técnicos. Às vezes contar com 5 fontes diferentes vai trazer complicações mais tarde. Ou usar imagens com transparência vai ferir a experiência a ponto de desmerecer o resto do projeto. Noções básicas desses limites podem economizar tempo na hora de esboçar soluções.

Performance não é só uma questão de usabilidade ou experiência de uso, mas também uma questão de respeito com o usuário. Ignorar performance em troca de apelo visual é jogar o tempo que você deveria ter dedicado a otimização na cara do usuário, em forma de uma tela de Loading. E se preocupar com performance cedo no processo também economiza o seu tempo de pensar em ramos criativos que sejam inevitavelmente invalidados na implementação.

Joshua Bixby compôs um ótimo guia com recursos e referências sobre performance para web aqui.

O WordPress apodera cerca de 60 milhões de sites na web, então esse post no wptuts é leitura essencial pra quem também trabalha com o sistema.

Esse post serve pra todo mundo, mas é especialmente dedicado a vocês, diretores de arte pairantes

Críticas são essenciais para o desenvolvimento de qualquer projeto. Em design, por exemplo, críticas são feitas entre designers e entre pessoas, sobre os trabalhos que estão sendo expostos. É um ato muito positivo, em que quem faz críticas quer que alguma coisa daquele trabalho ou até mesmo daquela pessoa seja melhor. Mas críticas têm uma má fama, por muitas vezes serem levadas ao nível pessoal, eventualmente ferindo o ego de quem as recebe.

Para resolver essa injustiça do ego ser tão frágil, é preciso não só paciência e educação, mas também saber amortecer uma crítica pra que ela aterrise bem sobre quem vai interpretá-la e agir de acordo. Faz um tempo que estou sintetizando as características de uma crítica bem aplicada, então vou listá-las aqui. Isso vai servir tanto pra sua vida profissional, quanto pessoal, pois críticas fazem parte de toda relação humana.

1. Despretenciosamente, faça a pessoa entender que você está falando isso porque você se importa.
   • ERRADO: “Acho que você deveria fazer isso.”
   • CERTO: “Acho que se você fizer isso, vai melhorar isso e aquilo, por causa disso, disso e daquilo.”
2. Nunca critique publicamente. Quem não tem nada a ver com o problema em questão não devia estar envolvido, a não ser que essa pessoa também possa ajudar a resolvê-lo.
3. Anteceda sua crítica com um elogio, e seja aberto à perspectiva da pessoa.
   • ERRADO: “Faz isso, que vai ficar melhor”
   • CERTO: “Isso está muito bom, e vai funcionar perfeitamente pra x. Talvez um pequeno ajuste aqui faça ficar ainda melhor, o que você acha?”
4. Critique o ato ou o objeto, em vez da pessoa.
   • ERRADO: “Não gostei disso que você fez”
   • CERTO: “Entendi a sua intenção, mas acho que acabou não funcionando tão bem assim, por causa disso, disso e daquilo.”
5. Nunca dê a entender que a pessoa fez aquilo de propósito.
6. Compartilhe a responsabilidade. São vocês dois juntos contra esse problema, não você contra a pessoa que está fazendo aquilo.
   • ERRADO: “Você deveria fazer isso pra melhorar esse negócio.”
   • CERTO: “Acho que se a gente fizer isso assim, vai melhorar esse negócio.”
7. Acompanhe sua crítica com uma solução. Se não for um problema muito sério e você não tiver uma solução, deixe pra mencioná-lo quando você tiver uma. Se você não tiver uma solução, e acha que o problema merece atenção, aponte-o e compartilhe com quem mais possa se envolver em solucioná-lo.
8. Se for o caso, faça a pessoa entender que não é só ela que comete esse tipo de erro.

Agora, se algum dia você receber uma crítica mal formulada, não sinta-se mal. Você vai ter argumento pra criticar a crítica da pessoa, e aí pode direcioná-la a esse post

Respondendo à dúvida do MARCELO BARRETO, sobre como separar as cores no Illustrator, para produção gráfica.

Salvar arquivos Illustrator pode demorar muito, e quando um arquivo está sendo salvo, você não pode trabalhar nele. Se houver um recurso de salvamento automático, ele estaria interrompendo o seu trabalho constantemente, e forçaria você a esperar. Para a versão CS6, a Adobe reescreveu muito do código, então eu espero que isso ajude a resolver o problema futuramente.

Então minha gente, até isso ser resolvido, temos que lembrar de salvar o arquivo de 5 em 5 minutos. É triste perder horas de trabalho por falta de atenção pra salvar, mas eu prefiro pensar que o que foi perdido, não estava ficando digno de ser salvo

Agora, se você realmente não consegue se acostumar em salvar o arquivo de tempos em tempos, existe uma maneira de criar uma action pra automatizar isso.

Lembrando que essa action deve ser tocada quando você começar a trabalhar no documento, e que pra cada documento, o comando de “Save” deve ser regravado, pra que ele não salve por cima de um documento anterior.

Talvez você seja um engenheiro, ou talvez você trabalha com um designer. Talvez você pense que o design é o que você faz no Photoshop. Ou talvez você só tem curiosidade sobre design. Se você for uma dessas pessoas, então esses livros também servem pra você.

Esses livros cobrem os fundamentos de projetar para pessoas. Nada de técnicas de Photoshop. Nem nada que fale muito sobre aspecto visual do design. Ao invés disso, eles ajudam a entender o que as pessoas precisam quando elas interagem com o que você cria. Essa é a essência de um bom projeto – algo que as pessoas não tenham problemas em usar, e que proporciona experiências positivas no seu uso.

Obviamente, existem muitos outros grandes livros de design. Alguns que se aprofundam mais, outros que servem de resumos compreensíveis. Escolhi esses cinco porque pessoalmente aprendi mais com eles. De qualquer forma, há uma vida de aprendizado aqui, então tenha-os em vista. Se você estiver criando um app, desenhando um site, projetando uma cadeira, ou layoutando um livro, esses livros vão ajudá-lo a projetar e fazer coisas melhores.

• 

  O Design do Dia-a-Dia, por Donald A. Norman

  O melhor livro sobre o design para as pessoas. Se você já foi frustrado por um parquímetro confuso, ou uma porta que se abre pro lado errado, então esse livro explica por quê. Ele explica como o design das coisas que usamos todos os dias pode ser melhorado.

  Livraria Cultura | Amazon

• 

  Princípios Universais do Design, por William Lidwell

  Simples, claro e abrangente. Essa é uma base sólida para a solução de problemas em todas as áreas do design.

  De hierarquia e lei de Hick a modelos mentais e mind-mapping, o texto cobre muitos dos princípios de design mais importantes. O livro apresenta um princípio por página, e uma página de acompanhamento com exemplos. Uma grande referência prática.

  Livraria Cultura | Amazon

• 

  Os Elementos do Estilo Tipográfico, por Robert Bringhurst

  Um livro maravilhoso, lírico sobre a arte e a ciência da tipografia. Se você tivesse que escolher um único livro de tipografia, teria que ser esse.

  Isso é de um cara que ama as letras e língua. Tratamentos incríveis sobre tipo, capítulos sobre ritmo e proporção, formas estruturais, harmonia, moldando a página, e como combinar e escolher tipos. Uso do Φ(fi) para layouts, e o tipo como uma escala musical. História da tipografia, fundidoras e designers de tipos, espécimes, e mais. Você vai aprender mais a cada vez que você voltar. E uma nova edição (4) acabou de sair agora em Janeiro.

  Vale ressaltar que a versão em português foi traduzida por André Stolarski, então a perda em relação à original é mínima.

  Livraria Cultura | Amazon

• 

  Grid Systems, por Josef Muller-Brockmann

  Esse livro entrou na lista porque é sobre o uso da forma e da estrutura como um sistema para ajudar a resolver problemas. É mais um quadro prático para resolver problemas do que apenas um livro sobre grids.

  Dito isto, é também um estudo primordial de design de grids. Muller-Brockmann foi um dos pioneiros do design de grids e do movimento suíço/internacional.

  O livro inclui considerações de grid e estrutura: grids de base, sistemas de medição, unidades, margens, construção da área tipográfica, e muitos exemplos de texto e gráficos em diversas combinações de grid.

  Esse é o tipo de livro que você pode voltar a abrir e sempre achar algo novo.

  Livraria Cultura | Amazon

• 

  Dieter Rams – As Little Design as Possible, por Sophie Lovell

  Rompendo um pouco com os outros livros, essa é uma monografia sobre Dieter Rams e os seus princípios do bom design. “O mínimo design possível” …

  Contém esboços iniciais e protótipos, fotos dos bastidores, histórias sobre Rams e sua equipe, um prefácio de Jony Ive, e os dez princípios do bom design dispostos em um só lugar. Um livro incrivelmente inspirador.

  Livraria Cultura | Amazon

E quais são os seus 5 livros de design preferidos? Escreva aí nos comentários!

PS.: Papercraft do Andy Warhol AQUI.

Já imaginou ter que criar 50 crachás diferentes, sendo que os dados todos estão em uma planilha Excel? O painel Variables do Illustrator está aí pra ajudar a automatizar esse tipo de tarefa. Na verdade, qualquer situação que envolva geração de artes baseadas em dados variáveis. Nesse vídeo, eu exemplifico o uso das variables pra gerar um conjunto de cartões de visita, que seguem um template e têm elementos de texto e imagem linkadas como variáveis.

Eu mostro no vídeo esses dois tipos de variáveis, mas o Illustrator também aceita variáveis tipo gráfico e booleano (visibilidade do objeto). Nas declarações do XML eles ficam assim:

<variable varName="Grafico" category="&ns_graphs;" trait="graphdata"></variable>
<variable varName="Booleano" category="&ns_vars;" trait="visibility"></variable>
<variable varName="Imagem" category="&ns_vars;" trait="fileref"></variable>
<variable varName="Texto" category="&ns_flows;" trait="textcontent"></variable>

O conversor CSV – AiXML está aqui: http://joaofaraco.nfshost.com/conversor/